{"id":29165,"date":"2017-03-28T03:01:47","date_gmt":"2017-03-27T17:01:47","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=29165"},"modified":"2017-03-28T12:41:49","modified_gmt":"2017-03-28T02:41:49","slug":"list-web-application-php-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-php-tutorial\/","title":{"rendered":"List Web Application PHP Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"List Web Application PHP Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist_php.jpg\" title=\"List Web Application PHP Tutorial\"   \/><\/a><p class=\"wp-caption-text\">List Web Application PHP Tutorial<\/p><\/div>\n<p>Yesterday, with <a title='List Web Application Cookie Tutorial' href='#lwact'>List Web Application Cookie Tutorial<\/a> as shown below, we made a list &#8230;<\/p>\n<blockquote>\n<ol>\n<li>What about if I revisit the web application much later?  Will it remember anything from that previous session using it?<\/li>\n<li>What if the amount of data I&#8217;m involving gets too big?<\/li>\n<\/ol>\n<\/blockquote>\n<p> &#8230; the first of which was handled by Javascript client side HTTP Cookie &#8220;intersession&#8221; logic, and the latter was left to today.  With that in mind, we were a bit surprised that we hadn&#8217;t quite reached the &#8220;cliff&#8221; of us working exclusively with Javascript client side considerations.  The surprise derives from the fact that we thought we needed serverside PHP logic for both &#8230;<\/p>\n<ol>\n<li>What if the amount of data I&#8217;m involving gets too big?<\/li>\n<li>What about if I try to drill down into content displays for absolute URLs entered in the (HTML input type=text) data (for us, simplistically, URLs starting with &#8220;http&#8221; &#8230; read more at <a target=_blank title='Javascript putElement(s)By via PHP Relative URLs Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-putelementsby-via-php-relative-urls-tutorial\/'>Javascript putElement(s)By via PHP Relative URLs Tutorial<\/a> regarding all this, perhaps)?<\/li>\n<\/ol>\n<p> &#8230; and entering into the program logic, we fully expected to use an exclusively serverside PHP approach to the second added piece of functionality, but found, in real life, that we could still display these media (images, videos, audios) absolute URLs still using Javascript client side logic.  So, we wrote changed code today, to check for the existence of the relevant <a target=_blank title='mylist.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.php_GETME'>mylist.php<\/a> or not, but to do the best the web application can do, if the PHP is not there.  So, you non-PHP-ers, please stay tuned today, and let&#8217;s summarise what PHP panned out to be needed for, categorically &#8230;<\/p>\n<ul>\n<li>mail URLs longer than (a default, but tailorable) 900 characters long will direct logic going out of the HTML form &#8230;\n<ol>\n<li>target=<strike>_self<\/strike> myphp (the name of an HTML iframe we introduce)<\/li>\n<li>method=<strike>GET<\/strike> POST<\/li>\n<li>action=<strike>#<\/strike> http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.php<\/li>\n<\/ol>\n<p> &#8230; that the logic (of any &#8220;soft shoe shuffle&#8221;) is contained within the HTML form&#8217;s <i>onsubmit<\/i> event logic to PHP and using its <a target=_blank title='PHP mail method information' href='http:\/\/php.net\/manual\/en\/function.mail.php'>mail<\/a> function to have email contain an HTML attachment that when opened in a <i>file:\/\/<\/i> type of URL will only involve absolute URLs and will hardcode the <i>locationsearch<\/i> Javascript global variable we talked about yesterday <font size=1>&#8230; getting in front of the thing getting in front of the URL (PHP $_GET[]) parameters (and HTTP Cookie) logic<\/font>\n<\/li>\n<li>display of absolute URLs that are not media (images, videos, audios) may, if not from the www.rjmprogramming.com.au domain, need PHP serverside intervention, if they have any chance of happening<\/li>\n<\/ul>\n<p>And so our &#8220;sixth draft&#8221; <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm'>live run<\/a> link pointing at the HTML and Javascript <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html-----GETME'>mylist.htm<\/a> changed in <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html-----GETME'>this way<\/a>, for large data set purposes, had more to it than we originally thought it would.  We hope this has some synergies with your own observations, and thinking.<\/p>\n<hr>\n<p id='lwact'>Previous relevant <a target=_blank title='List Web Application Cookie Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-cookie-tutorial\/'>List Web Application Cookie Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"List Web Application Cookie Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist_cookie.gif\" title=\"List Web Application Cookie Tutorial\"   \/><\/a><p class=\"wp-caption-text\">List Web Application Cookie Tutorial<\/p><\/div>\n<p>About 6pm Sydney, Australia time on 26th March, 2017, our latest &#8220;Make a List&#8221; web application became quite a bit more &#8220;accountable&#8221;, but even if you&#8217;ve been trying it out &#8220;in detail&#8221; it&#8217;s quite possible you didn&#8217;t notice.  You see, we&#8217;ve had it quite accountable already within a &#8220;session&#8221; of work, it passing data to our, still, just client side, web application via URL (PHP $_GET[]) parameters.  While you, as a user, are concentrating on the general &#8220;flow&#8221; of this web application&#8217;s logic, this web application is pretty accountable and of some use, we think.  However, consider the following two points &#8230;<\/p>\n<ol>\n<li>What about if I revisit the web application much later?  Will it remember anything from that previous session using it?<\/li>\n<li>What if the amount of data I&#8217;m involving gets too big?<\/li>\n<\/ol>\n<p>The second of these needs the help of a serverside language like PHP, and we&#8217;ll get to that in a later tutorial in this thread, so rest assured, if you have no interest in PHP or other serverside languages, that should not stop you with the progress made with today&#8217;s tutorial and\/or any others earlier than this posting on the  thread of blog postings.<\/p>\n<p>The first of the two above can be addressed with an extension of client side HTML and Javascript logic on top of what we left off with yesterday with <a title='List Web Application Row Sorting Tutorial' href='#lwargt'>List Web Application Row Sorting Tutorial<\/a> as shown below.  This &#8220;intersession&#8221; accountability (as distinct from the &#8220;intrasession&#8221; accountability we think of URL (PHP $_GET[]) parameter passing to be) is achieved by the introduction to this web application of <a target=_blank title='Cookie information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_cookies.asp'><i>HTTP Cookies<\/i><\/a> logic.  HTTP Cookies are stored in the web browser the web application is using, at the client, and is not really a permanent data storage, unless you are a user who never clears the browser cache, that is.<\/p>\n<p>So what are the &#8220;design principles&#8221; of the HTTP Cookie usage we apply?<\/p>\n<ul>\n<li>HTTP Cookies are only created or updated when a URL containing ? and &amp; is sent to the web server &#8230; which is us saying &#8220;only store HTTP Cookies reflecting real use of the web application that is asking for some accountability&#8221;<\/li>\n<li>HTTP Cookies are capable of being referenced to fill in web application default data when the URL is not containing ? and &amp; and if, any time in the past 6 months, it has had a URL containing ? and &amp; involved in its usage &#8230; in which case &#8230;\n<ol>\n<li>the HTTP Cookie data is used to piece together the data of that last URL containing ? and &amp; session &#8230; and &#8230;<\/li>\n<li>a &#8220;Retain&#8221; button is created and shown, that given no other actions, will disappear in 5 seconds<\/li>\n<li>a &#8220;Clear&#8221; button is created and shown, that given no other actions, will disappear in 10 seconds, and if clicked will clear the relevant web application HTTP Cookie data and restart the web application, as if it had never been used before (except that the special URL (PHP $_GET[]) parameter &#8220;?clear=y&#8221; tells the web application logic, that this is the intention of the user)<\/li>\n<li>various other activity on the web application will &#8220;Retain&#8221; this HTTP Cookie derived default data<\/li>\n<\/ol>\n<\/li>\n<p> &#8230; which is reflected by the Javascript (new to the web application for today&#8217;s tutorial) below (noting that before we started with this code, we <b>added<\/b> &lt;body onload=&#8217;<b>ml_cookieVal(true);<\/b> chooseone();&#8217; style=&#8217;background-color:#f7e7e7;&#8217;&gt;, and all mentions of &#8220;location.search&#8221; were replaced with (the global variable) &#8220;locationsearch&#8221; (ie. we were leaving a place for HTTP Cookie logic to intervene &#8220;into&#8221; the program URL (PHP $_GET[]) parameter &#8220;scene&#8221;)) that is definable even before the <i>document.body<\/i>&#8216;s <i>onload<\/i> event logic (which is a crucial timing aspect to the coding design) &#8230;<\/p>\n<p><code><br \/>\nvar locationsearch=location.search.replace('?clear=y','').replace('?','');<br \/>\nvar usedc=false;<br \/>\n<b><\/b><br \/>\nfunction clearyes() {<br \/>\n     document.getElementById('clear').style.display='none';<br \/>\n}<br \/>\n<b><\/b><br \/>\nfunction clearmaybe() {<br \/>\n   if (usedc) {<br \/>\n     document.getElementById('clear').click();<br \/>\n   } else {<br \/>\n     document.getElementById('retain').style.display='none';<br \/>\n     setTimeout(clearyes,5000);<br \/>\n   }<br \/>\n}<br \/>\n<b><\/b><br \/>\nfunction ml_setCookie() { \/\/ thanks to JavaScript and Ajax by Tom Negrino and Dori Smith<br \/>\n   var expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   if (eurl.indexOf('body=') != -1) {<br \/>\n    var xpurl=decodeURIComponent(eurl.split('body=')[1]);<br \/>\n    if (xpurl.indexOf('?') != -1) document.cookie = \"locationsearch=\" + encodeURIComponent(xpurl.split('?')[1]) + \";expires=\" + expireDate.toGMTString();<br \/>\n   }<br \/>\n}<br \/>\n<b><\/b><br \/>\nfunction ml_cookieVal(firstcall) {<br \/>\n  if (document.cookie != '') {<br \/>\n   var expireDate = new Date();<br \/>\n   var tCookie=document.cookie.split(\"; \");<br \/>\n   for (var j=0; j&lt;tCookie.length; j++) {<br \/>\n    if (\"locationsearch\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      if (document.URL.indexOf('?clear=') != -1 && firstcall) {<br \/>\n        expireDate.setMonth(expireDate.getMonth()-6);<br \/>\n        document.cookie = \"locationsearch=;expires=\" + expireDate.toGMTString();<br \/>\n      } else if (document.URL.replace('?clear=','').indexOf('?') != -1 && document.URL.indexOf('&') != -1 && firstcall) {<br \/>\n        expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n        var xpurl=document.URL.split('#')[0].split('?')[1];<br \/>\n        document.cookie = \"locationsearch=\" + encodeURIComponent(xpurl) + \";expires=\" + expireDate.toGMTString();<br \/>\n      } else {<br \/>\n        locationsearch=decodeURIComponent(tCookie[j].split(\"=\")[1]);<br \/>\n        if (firstcall) {<br \/>\n          document.getElementById('retain').style.display='inline';<br \/>\n          document.getElementById('clear').style.display='inline';<br \/>\n          usedc=true;<br \/>\n          setTimeout(clearmaybe, 5000);<br \/>\n        }<br \/>\n      }<br \/>\n      return locationsearch;<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Our &#8220;fifth draft&#8221; <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm'>live run<\/a> link pointing at the HTML and Javascript <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html----GETME'>mylist.htm<\/a> changed in <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html----GETME'>this way<\/a>, for HTTP Cookie functionality purposes.<\/p>\n<p>And today&#8217;s presentation channels <a target=_blank title='Animated GIF via PHP Writing PHP Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-via-php-writing-php-primer-tutorial\/'>Animated GIF via PHP Writing PHP Primer Tutorial<\/a>, because we wanted a few scenes to establish an &#8220;intersession&#8221; simulation for your perusal.  We hope it helps.<\/p>\n<hr>\n<p id='lwargt'>Previous relevant <a target=_blank title='List Web Application Row Sorting Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-row-sorting-tutorial\/'>List Web Application Row Sorting Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"List Web Application Row Sorting Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist_sort.jpg\" title=\"List Web Application Row Sorting Tutorial\"   \/><\/a><p class=\"wp-caption-text\">List Web Application Row Sorting Tutorial<\/p><\/div>\n<p>Think <a target=_blank title='List information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_(abstract_data_type)'>&#8220;list&#8221;<\/a>, think &#8220;sort&#8221;, too.  Sorting a list is a very common, and often useful web application piece of functionality, as &#8220;sorting&#8221; often increases &#8220;order&#8221; for we humans.<\/p>\n<p>But, as with &#8220;order&#8221;, the idea of &#8220;sort&#8221; can be quite varied in the eyes of the users of your web application.  And also, think whether you want &#8230;<\/p>\n<ul>\n<li>choices between numerical sorting and alphabetic (is uppercase versus lowercase an issue?) &#8230; normal and\/or reversed<\/li>\n<li>sorts at various character positioning or delimiting within the data<\/li>\n<li>exceptions, perhaps<\/li>\n<\/ul>\n<p> &#8230; but, today, with our web application, we are just dealing with the first idea above, offering a <i>numerical sort<\/i> on that <strike>&#8220;Quantity or Weight&#8221;<\/strike>&#8220;Population&#8221; column data, and an alphabetic sort for any other column, with normal (<i>down<\/i> &#11015; arrow Emoji) and reversed (<i>up<\/i> &#11014; arrow Emoji) sorting modes in play.<\/p>\n<p>To show you what we mean here, we are taking the same input CSV &#8220;World Populous Country&#8221; population data we used with <a target=_blank title='Linux vi Buffer Sort Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/linux-vi-buffer-sort-primer-tutorial\/'>Linux vi Buffer Sort Primer Tutorial<\/a> and entering it into our web application in the Country name alphabetical order it has in the data set, and allow the <strike>&#8220;Quantity or Weight&#8221;<\/strike>&#8220;Population&#8221; column&#8217;s new &#8220;sort&#8221; <i>up<\/i> and <i>down<\/i> arrow Emojis (for normal numerical sort and reverse numerical sort respectively), specifically the <i>up<\/i> arrow Emoji, to show sorted data from Most Populous Country to Least Populous Country, as you might be more interested in seeing, in real life.  You can simulate this yourself by clicking the <i>up<\/i> arrow Emoji next to <strike>&#8220;Quantity or Weight&#8221;<\/strike>&#8220;Population&#8221; table column heading &#8230;<\/p>\n<p><iframe onload=\"location.href='#wrapper';\" style='height:1700px;width:100%;' title='Most Populous Countries' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm?emailee=rmetcalfe15@gmail.com&#038;subject=Populous%20Countries&#038;wordsqw=Population&#038;wordsi=Country&#038;qw1=151000000&#038;i1=Bangladesh&#038;qw2=197000000&#038;i2=Brazil&#038;qw3=1347000000&#038;i3=China&#038;qw4=67800000&#038;i4=Congo&#038;qw5=82600000&#038;i5=Egypt&#038;qw6=87000000&#038;i6=Ethiopia&#038;qw7=63300000&#038;i7=France&#038;qw8=81800000&#038;i8=Germany&#038;qw9=1241000000&#038;i9=India&#038;qw10=238000000&#038;i10=Indonesia&#038;qw11=78000000&#038;i11=Iran&#038;qw12=60800000&#038;i12=Italy&#038;qw13=128000000&#038;i13=Japan&#038;qw14=115000000&#038;i14=Mexico&#038;qw15=162000000&#038;i15=Nigeria&#038;qw16=177000000&#038;i16=Pakistan&#038;qw17=96000000&#038;i17=Philippines&#038;qw18=143000000&#038;i18=Russia&#038;qw19=69500000&#038;i19=Thailand&#038;qw20=74000000&#038;i20=Turkey&#038;qw21=62700000&#038;i21=United%20Kingdom&#038;qw22=312000000&#038;i22=United%20States&#038;qw23=88000000&#038;i23=Vietnam'><\/iframe><\/p>\n<p>We remained just using client side HTML and Javascript for this, and all that precedes.  Here is the new Javascript function added today for sorting purposes &#8230;<\/p>\n<p><code><br \/>\nfunction sortby(direction,sio) {<br \/>\n  var nn, arrtosort=[], thisoneis, zero=0, dotp=-1, blanks=\"                    \", newoarrc='', newoarrdelim='';<br \/>\n  var idprefix=sio.id.replace('dsort_','').replace('usort_','');<br \/>\n  was_io=null;<br \/>\n  is_io=null;<br \/>\n  var inps=document.getElementsByTagName('input');<br \/>\n  for (var ninps=0; ninps&lt;inps.length; ninps++) {<br \/>\n    if (inps[ninps].id) {<br \/>\n      if (inps[ninps].id.toLowerCase().indexOf(idprefix.toLowerCase()) == 0 && inps[ninps].id != 'i0i' && inps[ninps].id.toLowerCase().replace(idprefix.toLowerCase(),\"\").substring(0,1) &gt;= \"1\" && inps[ninps].id.toLowerCase().replace(idprefix.toLowerCase(),\"\").substring(0,1) &lt;= \"9\") {<br \/>\n       if (eval(inps[ninps].id.replace(idprefix,\"\")) != maxrow) {<br \/>\n        thisoneis=\"         \" + oarray[-1 + eval(inps[ninps].id.toLowerCase().replace(idprefix.toLowerCase(),\"\"))];<br \/>\n        if (idprefix == \"qw\") {<br \/>\n          zero=0;<br \/>\n          if ((inps[ninps].value + \" \").substring(zero,eval(1 + zero)) == \"-\" || (inps[ninps].value + \" \").substring(zero,eval(1 + zero)) == \".\" || ((inps[ninps].value + \" \").substring(zero,eval(1 + zero)) &gt;= \"0\" && (inps[ninps].value + \" \").substring(zero,eval(1 + zero)) &lt;= \"9\")) {<br \/>\n           while (zero < eval(inps[ninps].value.length - 1) &#038;&#038; (inps[ninps].value + \" \").substring(zero,eval(1 + zero)) == \"-\" || (inps[ninps].value + \" \").substring(zero,eval(1 + zero)) == \".\" || ((inps[ninps].value + \" \").substring(zero,eval(1 + zero)) &gt;= \"0\" &#038;&#038; (inps[ninps].value + \" \").substring(zero,eval(1 + zero)) &lt;= \"9\")) {\n            zero++;\n           }\n          }\n          if (zero != 0) {\n            dotp=inps[ninps].value.substring(0,zero).indexOf(\".\");\n            if (dotp == -1) {\n              arrtosort.push(blanks.substring(0,eval(10 - zero)) + inps[ninps].value + \"~!`\" + thisoneis.slice(-8));\n            } else {\n              arrtosort.push(blanks.substring(0,eval(10 - dotp)) + inps[ninps].value + \"~!`\" + thisoneis.slice(-8));\n            }\n          } else {\n            arrtosort.push(inps[ninps].value + \"~!`\" + thisoneis.slice(-8));\n          }\n        } else {\n          arrtosort.push(inps[ninps].value + \"~!`\" + thisoneis.slice(-8));\n        }\n       }\n      }\n    }\n  }\n  if (arrtosort.length &gt; 1) {\n    arrtosort.sort();\n    if (direction != 0) {\n     for (nn=0; nn&lt;arrtosort.length; nn++) {\n      newoarrc+=newoarrdelim + arrtosort[nn].split(\"~!`\")[1].trim();\n      newoarrdelim=',';\n     }\n    } else {\n     for (nn=eval(-1 + arrtosort.length); nn&gt;=0; nn--) {\n      newoarrc+=newoarrdelim + arrtosort[nn].split(\"~!`\")[1].trim();\n      newoarrdelim=',';\n     }\n    }\n    oarrc=newoarrc;\n    oarrdelim=',';\n    reordered=true;\n    oarray=eval(\"[\" + oarrc + \"]\");\n    var purl=decodeURIComponent(eurl.split('body=')[1]);\n    var sortbits=(purl + '&#038;').split('&#038;order=');\n    if (sortbits.length &gt; 1) {\n      location.href=purl.replace('&#038;order=' + sortbits[1].split('&#038;')[0], '&#038;order=' + encodeURIComponent('[' + oarrc + ']'));\n    } else {\n      location.href=purl + '&#038;order=' + encodeURIComponent('[' + oarrc + ']');\n    }\n  }\n}\n<\/code><\/p>\n<p>Also, with the changes today, we offer the \"table cell swapping\" functionality listed in an earlier blog posting in this thread.  Personally, we think the use would be rare, but perhaps if you have many columns to fill in and miss the order when doing this, perhaps this \"table cell swapping\" may be a \"cute\" bit of functionality to have.  We use the reasoning ...<\/p>\n<ul>\n<li>user has clicked into an HTML input type=text field that is not blank ... and so the Javascript global var<font size=1>iable<\/font> was_io is set to this HTML input type=text field object, for a first round of this, as distinct from global var<font size=1>iable<\/font> is_io being, albeit, briefly, on the second click (that we talk about below) ...<\/li>\n<li>user has not done any Emoji clicking, nor used the keyboard in any way (checked <b>via<\/b> ...<br \/>\n<code><br \/>\n&lt;body style='background-color:yellow;' onload='addlotsofrows();' <b>onkeyup='was_io=null; is_io=null;'<\/b>&gt;<br \/>\n<\/code><br \/>\n) ... when user has clicked into an HTML input type=text field that is not blank ... so we set  the Javascript global var<font size=1>iable<\/font> is_io's value to be swapped with  the Javascript global var<font size=1>iable<\/font> was_io's value (property)\n<\/li>\n<\/ul>\n<p>Today has our \"fourth draft\" <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm'>live run<\/a> link pointing at the HTML and Javascript <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html---GETME'>mylist.htm<\/a> changed in <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html---GETME'>this way<\/a>, for sorting functionality purposes.  We hope it sets you to thinking even more about <a target=_blank title='List information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_(abstract_data_type)'><i>lists<\/i>.<\/p>\n<hr>\n<p id='lwarst'>Previous relevant <a target=_blank title='List Web Application Row Swapping Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-row-swapping-tutorial\/'>List Web Application Row Swapping Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"List Web Application Row Swapping Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist_swap.jpg\" title=\"List Web Application Row Swapping Tutorial\"   \/><\/a><p class=\"wp-caption-text\">List Web Application Row Swapping Tutorial<\/p><\/div>\n<p>Think <a target=_blank title='List information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_(abstract_data_type)'>\"list\"<\/a>, think \"order\".  So to have a web application involving a list where there is no possible way to reorder is not such a useful web application.<\/p>\n<p>Now, the word \"order\" can mean many things to many people, so you may want to consult with potential users about their desired approach to the myriad ideas out there for performing some sort of reordering process on their ...<\/p>\n<ul>\n<li>table rows<\/li>\n<li>table cells<\/li>\n<li>depending on some sort of sort criteria of data<\/li>\n<\/ul>\n<p> ... the list ... chortle, chortle ... goes on and on.<\/p>\n<p>We opt, today, for some work on that \"table rows\" idea above, augment existant functionality last talked about with <a title='List Web Application Genericization Tutorial' href='#lwagt'>List Web Application Genericization Tutorial<\/a> as shown below.  Though we like a drag and drop approach to the Emojis, and tomorrow's \"edition\" may have this, this \"drag and drop\" is not that good for mobile device users, so instead, we have additionally attached to the code, some dynamically added HTML select element dropdowns in that table header record where you can define some row swapping criteria. Also available as a mobile device (or non-mobile device) alternative idea to \"drag and drop\" is the \"two discrete clicks\" idea we allow for in the methodology used for our row swapping \"venture\" today.<\/p>\n<p>That leaves us with our \"third draft\" <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm'>live run<\/a> link pointing at the (still purely client side) HTML and Javascript <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html--GETME'>mylist.htm<\/a> changed in <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html--GETME'>this way<\/a>.  Hope it sets you to thinking more about <a target=_blank title='List information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_(abstract_data_type)'><i>lists<\/i>.<\/p>\n<hr>\n<p id='lwagt'>Previous relevant <a target=_blank title='List Web Application Genericization Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-genericization-tutorial\/'>List Web Application Genericization Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"List Web Application Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist_more.jpg\" title=\"List Web Application Genericization Tutorial\"   \/><\/a><p class=\"wp-caption-text\">List Web Application Genericization Tutorial<\/p><\/div>\n<p>Genericization jobs, at least for us, are an invitation for second phase design.  We like to put down an initial design, and often see that it could be \"ever so much\" more generic, so we set aside thinking and designing to that end.<\/p>\n<p>What is the \"genericization\" improvements we could make to our \"early days\" \"Make a List\" web application.  Well, yesterday, it felt like something designed for a ...<\/p>\n<ul>\n<li>shopping list ... but what about other list ideas like ...<\/li>\n<li>list of countries with some informational columns<\/li>\n<li>list of planets with orbital and environmental information<\/li>\n<li>list of insects with habitat, size, reproduction, social setup information<\/li>\n<\/ul>\n<p>?  Are you getting the gist?  Well, we offer the user the chance, just for that period where they have not yet entered any record Item information yet, allow for a mechanism that can add up to six new columns of information (but not changing \"Quantity or Weight\" and \"Item\") to augment what your list contains.  Guess you'd classify this as a data driven genericization.<\/p>\n<p>We think data driven genericizations are the most satisfying to do because the heart of any good web application revolves around data.  It's just that, as you might guess, we are fond here, of many different approaches to data derivation and reporting, from the simple ephemeral forms to set in stone database approaches.  It is up to you (hoo?!), the programmer, and the client, to determine the permanence of that data, in that web application, or mobile application, or desktop application.<\/p>\n<blockquote><p>\nNo data, though, we find, very often, a dull program maketh.\n<\/p><\/blockquote>\n<p>The method we use, in practice to allow users to add columns we've never done before in our recollection. We ...<\/p>\n<ul>\n<li>just until that first Item cell's HTML input type=text's <i>onblur<\/i> event logic is instigated offer 6 new HTML input type=text table header record places, either side of the existant 3 columns, where the user can define new columns (and their names) in that classic spreadsheet and relational database thought ...<br \/>\n<code><br \/>\nname=value<br \/>\n<\/code>\n<\/li>\n<li>close up shop and Javascript DOM change things to readonly ways they will remain, once the user instigates that first Item cell's HTML input type=text's <i>onblur<\/i> event logic<\/li>\n<\/ul>\n<p> ... which also felt like a kind of satisfying way of both helping people out with more complex reports, and making it fairly obvious that it is optional, and that if you are just there for that first \"shopping list\" type vision of usage, go for it, because there is nothing different in what these users have to do.<\/p>\n<p>The fundamental rearrangement for HTML and Javascript code was that a \"template\" row that was once hardcoded (as in the commented out <font color=red>\/\/<\/font> codelines below), and called into play when adding a new table record (ie. row), is now based on a <font color=blue>dynamic <i>str1<\/i> variable<\/font>, that is managed by the event logic of the <i>onblur<\/i> events of those new table header record HTML input type=text elements as well.<\/p>\n<p><code><br \/>\n    <font color=red>\/\/rec=\"&lt;tr id='tr\" + maxrow + \"'&gt;&lt;td&gt;&lt;span&gt;\";<\/font><br \/>\n    <font color=blue>rec=str1.replace(\/colspan='1'\/g,\"colspan='one'\").replace(\/colspan=\"1\"\/g,'colspan=\"one\"').replace(\/colspan=1\/g,\"colspan=one\").replace(\/1\/g,maxrow).replace(\/colspan='one'\/g,\"colspan='1'\").replace(\/colspan=\"one\"\/g,'colspan=\"1\"').replace(\/colspan=one\/g,\"colspan=1\").split('&lt;span&gt;')[0] + '&lt;span&gt;';<\/font><br \/>\n    for (icoi=0; icoi&lt;coi.length; icoi++) {<br \/>\n      rec+='&#';<br \/>\n      rec+=('' + en[eval(coi.substring(icoi,eval(1 + icoi)))]);<br \/>\n      rec+=';&#';<br \/>\n      rec+='8419';<br \/>\n      rec+=\";\";<br \/>\n    }<br \/>\n    <font color=red>\/\/rec+=\"&lt;\/span&gt;&lt;\/td&gt;&lt;td&gt;&lt;input id='qw\" + maxrow + \"' name='qw\" + maxrow + \"' value=''&gt;&lt;\/input&gt;&lt;\/td&gt;&lt;td&gt;&lt;input style='width:90%;' onblur='process(this);' id='i\" + maxrow + \"' name='i\" + maxrow + \"' value=''&gt;&lt;\/input&gt;&lt;\/td&gt;&lt;\/tr&gt;\" + String.fromCharCode(10); \/\/ + \"&lt;tr id='tr\" + eval(1 + maxrow) + \"' style='display:table-row;'&gt;&lt;\/tr&gt;\";<\/font><br \/>\n    <font color=blue>rec+=\"&lt;\/span&gt;\" + str1.replace('tr1','tr' + maxrow).split('&lt;\/span&gt;')[1].replace(\/colspan='1'\/g,\"colspan='one'\").replace(\/colspan=\"1\"\/g,'colspan=\"one\"').replace(\/colspan=1\/g,\"colspan=one\").replace(\/1\/g,maxrow).replace(\/colspan='one'\/g,\"colspan='1'\").replace(\/colspan=\"one\"\/g,'colspan=\"1\"').replace(\/colspan=one\/g,\"colspan=1\");<\/font><br \/>\n<\/code><\/p>\n<p>So here is the \"second draft\" <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm'>live run<\/a> link pointing at the (still purely client side) HTML and Javascript <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html-GETME'>mylist.htm<\/a> changed in <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html-GETME'>this way<\/a>.  Hope it sets you to thinking more about <a target=_blank title='List information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_(abstract_data_type)'><i>lists<\/i>.<\/p>\n<hr>\n<p id='lwapt'>Previous relevant <a target=_blank title='List Web Application Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-primer-tutorial\/'>List Web Application 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\/HTMLCSS\/mylist.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"List Web Application Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.jpg\" title=\"List Web Application Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">List Web Application Primer Tutorial<\/p><\/div>\n<p>We're starting out pretty simply, but we hope, pretty usefully, with today's new web application, which is \"Make a List\" via ...<\/p>\n<ul>\n<li>an Emoji numbering system<\/li>\n<li>a Quantity or Weight measurement entered by the user interactively<\/li>\n<li>an Item entered by the user interactively<\/li>\n<\/ul>\n<p>Pretty simple, huh?  A little more complex is a facility to be a bit \"accountable\" and a bit \"sharing\" with our HTML and Javascript and CSS web application.   So we turn to an ...<\/p>\n<ul>\n<li>email client approach to sending the list off to an email recipient ... via ...<\/li>\n<li>the clicking of an HTML <i>a<\/i> link whose ....<\/li>\n<li><i>href<\/i> property is of the form <i>mailto:[emailee]?subject=[subject]&body=[URLpointingTOyourLIST]<\/i><\/li>\n<\/ul>\n<p>And so, we hope you see that there are two aspects to the method by which we construct our list via Javascript DOM techniques, those being ...<\/p>\n<ul>\n<li>with our dynamically unfolding HTML table (and tbody) of rows (tr) and sets of 3 cells (td x 3) we don't want to show any unfilled out rows (tr) so we could either ...\n<ol>\n<li>only add a row (tr) when the Item is filled out (which we tried for a while using a linked list of HTML div elements at the end of row (tr) elements) and rejected for ...<\/li>\n<li>allow for a lot of rows (tr) that are invisible (style=display:none;) until we need them, at the HTML Item input element's <i>onblur<\/i> to a non-blank <i>value<\/i> event, when they become (style=display:table-row;) (do you remember something similar with <a target=_blank title='Middle Word Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/middle-word-game-primer-tutorial\/'>Middle Word Game Primer Tutorial<\/a>?)<\/li>\n<\/ol>\n<\/li>\n<li>we need to cater for (big long, presumably) email URLs arriving at this same web application ... our method of \"sharing\" (that we often use) ... and this involves a web application automated (programmatic) simulation of what the <i>onblur<\/i> logic is above, as much as anything, because ...\n<ol>\n<li>speaking personally, there is a sense of satisfaction with event-driven programming, when you access some event logic from two or more different modes of entry<\/li>\n<li>we don't like to reinvent wheels, so this design makes some good sense<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>So here is the \"first draft\" <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html'>live run<\/a> link pointing at the (so far purely client side) HTML and Javascript <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html_GETME'>mylist.html<\/a> to start the ball rolling.  But it is doubtful that we'll settle on this first draft, a <a target=_blank title='List information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_(abstract_data_type)'><i>list<\/i><\/a> being one of the most useful data container in programming \"<font size=1>h<\/font><font size=2>i<\/font><font size=3>s<\/font><font size=4>t<\/font><font size=5>o<\/font><font size=6>r<\/font><font size=7>y<\/font><font size=8><a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=2VSYmGSJtCA'> ... and beyond!<\/a><\/font>\".<\/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='#d29041' onclick='var dv=document.getElementById(\"d29041\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/list\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29041' 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='#d29051' onclick='var dv=document.getElementById(\"d29051\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/table\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29051' 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='#d29074' onclick='var dv=document.getElementById(\"d29074\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/order\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29074' 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='#d29108' onclick='var dv=document.getElementById(\"d29108\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sort\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29108' 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='#d29152' onclick='var dv=document.getElementById(\"d29152\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cookie\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29152' 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='#d29165' onclick='var dv=document.getElementById(\"d29165\"); 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='d29165' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday, with List Web Application Cookie Tutorial as shown below, we made a list &#8230; What about if I revisit the web application much later? Will it remember anything from that previous session using it? What if the amount of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-php-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":[52,1580,1860,290,354,364,367,576,587,652,710,2076,997,1045,1075,1173,2156,1238,1319,1402],"class_list":["post-29165","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-absolute-url","tag-cell","tag-cookie","tag-data","tag-dom","tag-drag-and-drop","tag-dropdown","tag-html","tag-iframe","tag-javascript","tag-list","tag-order","tag-programming","tag-relative-url","tag-row","tag-sort","tag-swap","tag-table","tag-tutorial","tag-web-application"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29165"}],"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=29165"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29165\/revisions"}],"predecessor-version":[{"id":29190,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29165\/revisions\/29190"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=29165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=29165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=29165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}