{"id":1507,"date":"2018-01-19T19:22:55","date_gmt":"2018-01-19T19:22:55","guid":{"rendered":"http:\/\/goofy-trucks.flywheelsites.com\/smart-architectures-in-php-page-2\/"},"modified":"2018-01-19T19:24:50","modified_gmt":"2018-01-19T19:24:50","slug":"smart-architectures-in-php-page-2","status":"publish","type":"post","link":"https:\/\/phpbuilder.com\/smart-architectures-in-php-page-2\/","title":{"rendered":"Smart Architectures in PHP Page 2"},"content":{"rendered":"<div class=\"phpbuilder-content\">\n<div class=\"phpbuilder-meta\">\n<div class=\"\">By Tim Perdue<\/div>\n<div class=\"\">on October 10, 2000<\/div>\n<\/p><\/div>\n<div id=\"overflow-content\">\n<h2>Pretty Pictures<\/h2>\n<div class=\"articlePara\">\nI&#8217;ve found that managers love to have pretty pictures and diagrams<br \/>\ndrawn up for them, so here&#8217;s one that will impress the best of them.<br \/>\nThe idea behind this structure is that you are separating your logic<br \/>\nfrom the &#8220;presentation&#8221;, meaning anything complicated is going on<br \/>\ndown there in the &#8220;API\/Data Access Layer&#8221;. <\/p>\n<div class=\"articlePara\">\nRather than coding<br \/>\nsecurity checks, update statements, etc, etc throughout your HTML<br \/>\nlayer, you should theoretically code the bulk of that in the API layer.<br \/>\nThe HTML layer will then make simple function calls that return<br \/>\neither arrays, objects, or (my favorite) database result sets.<\/div>\n<div class=\"articlePara\">\nIf you do this right, the topmost layer will be very thin so you<br \/>\ncan easily create\/maintain it.<\/div>\n<div class=\"articlePara\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/phpbuilder.com\/wp-content\/uploads\/2018\/01\/tim20001010.gif\" alt=\"breakdown of the layers of a web-based application\" height=\"202\" width=\"400\"\/><\/div>\n<div class=\"articlePara\">\nDrawing from this example, the HTML interface depends on some direct<br \/>\ncalls to the API layer, some calls to an HTML utility library (which<br \/>\ncould, for example, generate pop-up boxes, or whatever), and those<br \/>\nlibraries make calls to the database using a database abstraction<br \/>\nlayer (again so you aren&#8217;t tied to any particular database).<\/div>\n<\/div>\n<p><\/p>\n<div style=\"float: left; padding:15px; color:#17AAF3\">\n<div style=\"float:left; padding:2px;\"><a class=\"paginationPageLink\" href=\"tim20001010.html\">\u00ab Previous Page<\/a><\/div>\n<div style=\"float:left; padding:2px 4px 2px 4px;\"><a class=\"pageNumber\" href=\"tim20001010.html\">1<\/a> <\/div>\n<div style=\"float:left; font-size:16px; color:#FF7A22; padding:2px 2px 2px 2px; \">| <\/div>\n<div style=\"background-color:#B6E5FC; font-size:16px; margin-top:1px; padding:1px 4px 1px 4px; color:#000; font-style:bold; float:left;\">2<\/div>\n<div style=\"float:left; font-size:16px; color:#FF7A22; padding:2px 2px 2px 2px; \">| <\/div>\n<div style=\"float:left; padding:2px 4px 2px 4px;\"><a class=\"pageNumber\" href=\"tim200010109ba9.html?page=3\">3<\/a> <\/div>\n<div style=\"float:left; font-size:16px; color:#FF7A22; padding:2px 2px 2px 2px; \">| <\/div>\n<div style=\"float:left; padding:2px 4px 2px 4px;\"><a class=\"pageNumber\" href=\"tim20001010fdb0.html?page=4\">4<\/a> <\/div>\n<div style=\"float:left; font-size:16px; color:#FF7A22; padding:2px 2px 2px 2px; \">| <\/div>\n<div style=\"float:left; padding:2px 4px 2px 4px;\"><a class=\"pageNumber\" href=\"tim20001010af4d.html?page=5\">5<\/a> <\/div>\n<div style=\"float:left; font-size:16px; color:#FF7A22; padding:2px 2px 2px 2px; \">| <\/div>\n<div style=\"float:left; padding:2px 4px 2px 4px;\"><a class=\"pageNumber\" href=\"tim20001010c575.html?page=6\">6<\/a> <\/div>\n<div style=\"float:left; padding:2px;\"><a class=\"paginationPageLink\" href=\"tim200010109ba9.html?page=3\">Next Page \u00bb<\/a><\/div>\n<\/div><\/div>\n<div style=\"background-color:#EDEDED; width:628px;  \"><!-- START COMMENTING CODE --><\/p>\n<p><script src=\"..\/js\/boxover.js\" type=\"text\/javascript\"><![CDATA[\n]]><\/script><script type=\"text\/javascript\" src=\"..\/..\/www.google.com\/recaptcha\/api\/js\/recaptcha_ajax.js\"><![CDATA[\n]]><\/script><script type=\"text\/javascript\"><![CDATA[\n    \n        \n    function stripslashes (str) {\n    \/\/ +   original by: Kevin van Zonneveld (http:\/\/kevin.vanzonneveld.net)\n    \/\/ +   improved by: Ates Goral (http:\/\/magnetiq.com)\n    \/\/ +      fixed by: Mick@el\n    \/\/ +   improved by: marrtins    \/\/ +   bugfixed by: Onno Marsman\n    \/\/ +   improved by: rezna\n    \/\/ +   input by: Rick Waldron\n    \/\/ +   reimplemented by: Brett Zamir (http:\/\/brett-zamir.me)\n    \/\/ +   input by: Brant Messenger (http:\/\/www.brantmessenger.com\/)    \/\/ +   bugfixed by: Brett Zamir (http:\/\/brett-zamir.me)\n    \/\/ *     example 1: stripslashes('Kevin's code');\n    \/\/ *     returns 1: \"Kevin's code\"\n    \/\/ *     example 2: stripslashes('Kevin's code');\n    \/\/ *     returns 2: \"Kevin's code\"    return (str + '').replace(\/(.?)\/g, function (s, n1) {\n        switch (n1) {\n        case '':\n            return '';\n        case '0':            return 'u0000';\n        case '':\n            return '';\n        default:\n            return n1;        }\n    }\n\n    function readCookie(name) {\n\tvar nameEQ = name + \"=\";\n\tvar ca = document.cookie.split(';');\n\tfor(var i=0;i < ca.length;i++) {\n\t\tvar c = ca[i];\n\t\twhile (c.charAt(0)==' ') c = c.substring(1,c.length);\n\t\tif (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);\n\t}\n\treturn null;\n    }\n    \nfunction validateCaptcha()\n{\n\n    var user = document.forms[\"commentform\"][\"username\"].value;\n    if (user == null || user == \"\")\n    {\n        alert(\"Username name must be filled out\");\n        return false;\n    }\n\n    \/\/email validation\n    var email = document.forms[\"commentform\"][\"email\"].value;\n    var atpos = email.indexOf(\"@\");\n    var dotpos = email.lastIndexOf(\".\");\n    if (atpos<1 || dotpos<atpos+2 || dotpos+2>= email.length)\n    {\n        alert(\"Please enter a valid e-mail address\");\n        return false;\n    }\n\n    \/\/comment validation\n    var comment=document.forms[\"commentform\"][\"countdown\"].value;\n    if (comment == 1200)\n    {\n        alert(\"You must enter a commment\");\n        return false;\n    }\n    else if (comment > 1195) \/\/count the characters in the comment (which the site already does) if user types less than 10 characters tell them to enter more.\n    {\n        alert(\"You must enter a longer comment\");\n        return false;\n    }\n\n    var userResponse = document.forms[\"commentform\"][\"recaptcha_response_field\"].value;\n\n    var challenge = document.forms[\"commentform\"][\"recaptcha_challenge_field\"].value;\n\n\n\n    var length = userResponse.length;\n    if (length == 0)\n    {\n        alert (\"Please enter recaptcha text that is shown in the box\");\n        return false;\n    }\n    var blurbKey = document.forms[\"commentform\"][\"blurbKey\"].value;\n    var comment = document.forms[\"commentform\"][\"limitedtextarea\"].value;\n    var username = document.forms[\"commentform\"][\"username\"].value;\n    var email = document.forms[\"commentform\"][\"email\"].value;\n    var parentKey = document.forms[\"commentform\"][\"parentKey\"].value;\n    \n    var result;\n    var xmlhttp;\n    if (window.XMLHttpRequest)\n      {\/\/ code for IE7+, Firefox, Chrome, Opera, Safari\n      xmlhttp=new XMLHttpRequest();\n      }\n    else\n      {\/\/ code for IE6, IE5\n      xmlhttp=new ActiveXObject(\"Microsoft.XMLHTTP\");\n      }\n    xmlhttp.onreadystatechange=function()\n      {\n      if (xmlhttp.readyState==4 && xmlhttp.status==200)\n        {\n            \n            result = xmlhttp.responseText;        \n        }\n      }\n\n    xmlhttp.open(\"POST.html\",\"..\/..\/..\/commentAdd\",false);\n\n\n    xmlhttp.setRequestHeader(\"Content-type\",\"application\/x-www-form-urlencoded\");\n    xmlhttp.send(\"recaptcha_response_field=\" + userResponse + \"&recaptcha_challenge_field=\" + challenge + \"&blurbKey=\" + blurbKey + \"&comment=\" + comment + \"&username=\" + username + \"&email=\" + email + \"&parentKey=\" + parentKey);\n\n\n\n    if (result == \"false\")\n    {\n        alert ('Your response did not match the image. Try again');\n        Recaptcha.create(\"6LfoP8wSAAAAAJHAw37OAAdm56OaVpgHvqHZv1dd\",\n            \"recaptcha\",\n            {\n              theme: \"red\",\n              callback: Recaptcha.focus_response_field\n            }\n          );\n        return false;\n    }\n    else if (result == \"true\")\n    {\n        \/\/set variables\n        var author = escape(document.getElementById(\"username\").value);\n        \/\/author = document.getElementById(\"comment_username\").value;\n        var comment = escape(document.getElementById(\"comment_body\").value);\n        \n        \/\/update divs with the recently submitted comment author and comment\n        document.getElementById(\"commentOutput\").innerHTML= unescape(comment);\n        \n        document.getElementById(\"author\").innerHTML= unescape(author);\n        \n        \/\/show div that says comment submitted\n        document.getElementById(\"commentSubmitted\").style.display = 'block';\n        \/\/check for existing cookie\n        \n        var previous = readCookie('comment');\n        \n        if (!previous) \/\/if there is a prev\n        {\n            document.getElementById(\"previousComment\").style.display = 'block';\n        }\n        \n        \/\/set cookies for 1 day so upon refresh user will still see comment was submited\n        author = unescape(author);\n        comment = unescape(comment);\n\n        document.cookie = \"username=\" + unescape(author);\n        document.cookie = \"comment=\" + comment;\n\n        \/\/reset username\n        document.getElementById(\"username\").value= '';\n        document.getElementById(\"parentKey\").value= '';\n        document.getElementById(\"comment_email\").value= '';\n        document.getElementById(\"comment_body\").value= '';\n        document.getElementById(\"comment_countdown\").value= '1200';\n        \n        \/\/generate a new captcha\n        Recaptcha.create(\"6LfoP8wSAAAAAJHAw37OAAdm56OaVpgHvqHZv1dd\",\n            \"recaptcha\",\n            {\n              theme: \"red\",\n              callback: Recaptcha.focus_response_field\n            }\n          );\n        return false;\n    }\n    else \/\/if there is no response from the server making the ajax call\n    {\n        return false;\n    }\n\n}\n\n]]><\/script><\/p>\n<style><![CDATA[\n    #commentSubmitted {\n        display: none;\n        padding-left: 10px;\n    }\n    #previousComment {\n        display: none;\n        padding-left: 10px;\n        padding-bottom: 15px;\n    }\n    #previousComment2 {\n        padding-left: 10px;\n        padding-bottom: 15px;\n    }\n    \n\n    .hand { cursor:pointer; cursor:hand; }\n\n    .topdivdemo2 { padding:5px; margin:0 0 00;height:10px;width:120px;font-weight:bold; border:1px solid #CCFFFF;background:#3366FF;color:#FFFFFF;text-align: center; }\n    .botdivdemo2 { padding:5px; margin:0 0 0 0;height:10px;width:120px;border:1px solid #CCFFFF; background:#66FF33;color:#FFFFFF; }\n    .topdivdemo4 { padding:5px; margin:0 0 0 0;text-align:center;height:10px;width: 250px;font-weight:bold; border:1px solid #CCFFFF;background:#99CCCC; color:#FFFFFF; }\n    .botdivdemo4 { padding:5px; margin:0 0 0 0;height:5px;width:250px;border:1px solid #CCFFFF; background:#3399CC;color:#FFFFFF; }\n    .alerttop { padding:10px; margin:0 0 0 0;height:10px;font-weight:bold;border:1px solid #333; background:#cccccc;color:#333; font-family:arial, verdana, hellvetica; font-size: 11px; }\n]]><\/style>\n<p class=\"style1\">\n<p><noscript>Please enable Javascript in your browser, before you post the comment! Now Javascript is disabled.<\/noscript> <\/p>\n<div id=\"comment_response\"\/>\n<div id=\"comment_error\" class=\"error\"\/>\n<div id=\"commentForm\" class=\"formHeader\">\n    Comment and Contribute\n<\/div>\n<div class=\"comment_wrapper\">\n<div style=\"font-weight: bold;\"><font id=\"commentCount\">0<\/font> Comments\u00a0<a href=\"#comment_form\" style=\"text-decoration: underline;\">(click to add your comment)<\/a><\/div>\n<div id=\"comment_pagination_top\"\/>\n<div id=\"comment_page_container\"\/>\n<div id=\"comment_pagination_bottom\"\/>\n<div class=\"formFooter\"\/>\n\t<!-- <script src=\"\/js\/comments.js\"\ttype=\"text\/javascript\"><\/script> --><br \/>\n\t<!-- <script src=\"\/js\/boxover.js\"\ttype=\"text\/javascript\"><\/script> -->\n    <\/div>\n<div style=\"clear: both;\"\/>\n<div id=\"commentSubmitted\">\n<h2>Your comment has been submitted and is pending approval.<\/h2>\n<\/div>\n<div id=\"previousComment\">\n<p\/>\n<div style=\"float:left; font-weight: bold; padding-right: 4px;\">Author:<\/div>\n<div style=\"float:left;\" id=\"author\">\n<p>Tim Perdue                                    <\/p><\/div>\n<div style=\"clear:both\"\/>\n<p\/>\n<div style=\"float:left; font-weight: bold; padding-right: 4px;\">Comment:<\/div>\n<div style=\"float:left;\" id=\"commentOutput\">\n    <\/div>\n<\/div>\n<div style=\"clear:both\"\/>\n<p><span id=\"comment\"\/><\/p>\n<div class=\"comment_wrapper\">\n<div style=\"display: inline; margin-left: 0px;\" id=\"comment_page1\"\/>\n    <!-- <script type=\"text\/javascript\" src=\"http:\/\/commufnity.internet.com\/earthweb\/functions.js\"><\/script> --><\/p>\n<div style=\" \">\n<form method=\"post\" action=\"https:\/\/phpbuilder.com\/commentAdd\" name=\"commentform\" onsubmit=\"return validateCaptcha()\">\n            <input type=\"hidden\" id=\"blurbKey\" value=\"56618510\" name=\"blurbKey\"\/><input type=\"hidden\" value=\"Teleworkers are a Boon to the Bottom Line\" id=\"comment_title\" name=\"comment_title\"\/><input type=\"hidden\" value=\"\" id=\"parentKey\" name=\"parentKey\"\/><input type=\"hidden\" value=\"cioupdate\" id=\"sitename\" name=\"sitename\"\/><input type=\"hidden\" value=\"\" id=\"articleLink\" name=\"articleLink\"\/><a name=\"comment_form\"\/><br \/>\n            <img loading=\"lazy\" decoding=\"async\" class=\"greyCommentBar\" src=\"..\/img\/img_trans.gif\" width=\"1\" height=\"1\"\/><\/p>\n<div style=\"font-weight: bold; font-size: 14pt; font-family: arial,helvetica,sans-serif; color: black; background-color: rgb(255, 255, 255); width: 100%;\"><\/div>\n<div id=\"submitCommentForm\" style=\"width: 80%; margin-left: 10px;\">\n                <label for=\"username\"><strong>Name\/nickname:<\/strong> <\/label> <input type=\"text\" value=\"\" name=\"username\" id=\"username\" size=\"30\"\/><br \/><label><strong>Email:<\/strong><\/label><input type=\"text\" value=\"\" name=\"email\" id=\"comment_email\" size=\"30\"\/><\/p>\n<p style=\"font-size: 8pt;\"><strong>Comment:<\/strong> <\/p>\n<div>\n                    <textarea id=\"comment_body\" name=\"limitedtextarea\" onkeydown=\"limitText(this.form.limitedtextarea,this.form.countdown,1200);\" onkeyup=\"limitText(this.form.limitedtextarea,this.form.countdown,1200);\" style=\"font: 9pt arial,helvetica,sans-serif; overflow: auto;\" rows=\"10\" cols=\"80\"\/><\/div>\n<div style=\"font-size: 8pt;\">\n                    (Maximum characters: 1200). You have <input type=\"text\" size=\"4\" id=\"comment_countdown\" value=\"1200\" name=\"countdown\"\/> characters left.\n                <\/div>\n<p><\/p>\n<div style=\"margin-left:8px; text-align: center;\" id=\"imgTagElem\">\n<p>                    <script type=\"text\/javascript\" src=\"http:\/\/api.recaptcha.net\/challenge?k=6LfoP8wSAAAAAJHAw37OAAdm56OaVpgHvqHZv1dd\"><![CDATA[\n]]><\/script><noscript><br \/>\n          <iframe loading=\"lazy\" src=\"http:\/\/api.recaptcha.net\/noscript?k=6LfoP8wSAAAAAJHAw37OAAdm56OaVpgHvqHZv1dd\" height=\"300\" width=\"500\" frameborder=\"0\"\/><br \/><textarea name=\"recaptcha_challenge_field\" rows=\"3\" cols=\"40\"\/><input type=\"hidden\" name=\"recaptcha_response_field\" value=\"manual_challenge\"\/><\/noscript>                        <\/p><\/div>\n<div id=\"recaptcha\"><\/div>\n<p>                <input type=\"hidden\" value=\"11032202083023848\" id=\"comment_hash\" name=\"hash\"\/><\/p>\n<p\/>\n<p><\/p>\n<div style=\"float:left; margin-left:20px;\">\n                    <input type=\"image\" id=\"commentSubmit\" src=\"..\/img\/img_trans.gif\" value=\"Submit\" alt=\"Submit\"\/><\/div>\n<p><\/div>\n<\/p><\/form>\n<p>        <script type=\"text\/javascript\"><![CDATA[\n        function setReply (parentKey)\n        {\n            document.getElementById(\"parentKey\").value= parentKey;\n        }\n        \n]]><\/script><\/div>\n<p>\n        <a name=\"nav\">\u00a0<\/a><br \/>\n        <input type=\"hidden\" value=\"1\" id=\"comment_curpage\" name=\"comment_curpage\"\/><\/p>\n<\/div>\n<p><!-- END COMMENTING CODE --><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been wanting to write this article for a long time, but never really had the time to do it right. So rather than say this is going to be a<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1507","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/comments?post=1507"}],"version-history":[{"count":1,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1507\/revisions"}],"predecessor-version":[{"id":2259,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1507\/revisions\/2259"}],"wp:attachment":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/media?parent=1507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/categories?post=1507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/tags?post=1507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}