{"id":1461,"date":"2017-03-26T15:55:17","date_gmt":"2017-03-26T15:55:17","guid":{"rendered":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/?page_id=1461"},"modified":"2017-03-26T17:50:53","modified_gmt":"2017-03-26T17:50:53","slug":"chapter-5-developing-web-applications-for-bioinformatics","status":"publish","type":"page","link":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/chapter-5-developing-web-applications-for-bioinformatics\/","title":{"rendered":"Chapter 5: Developing web applications for bioinformatics"},"content":{"rendered":"

As outlined in the introduction<\/a> of this book, developing web applications is no different from developing any other software: the developer needs to be able to get some kind of input from the user, typically in the form of data and\/or options, to elaborate this input and finally to provide an output to the user. In web applications the input is gathered through a web form, that we have covered in the last section of chapter 3<\/a>. Most of the times the “POST” method will be used to submit user data to a processing script. In PHP, the script can then access the data through the built-in $_POST array<\/a>, perform the elaborations required and then provide an output in the form of an HTML web page.<\/p>\n

In the following sections we will make examples of data elaboration, largely based on the PHP scripts and code samples already developed in the previous chapter.<\/p>\n

For now, let’s make a very simple example to see how we can grab the data submitted through the web form by using the $_POST array in the script, and then echo it back to the user, with just a minimal elaboration of a sequence, while we are at it. The script will work best with short sequences and will not handle FASTA format. <\/p>\n

The web form has 3 fields:<\/p>\n

– The sequence field (name=”sequence”)
\n– The color field (name=”color”)
\n– The case field (name=”case_format”)<\/p>\n

\"The
The web form of the sample script in this page<\/figcaption><\/figure>\n

Its is quite similar to the one proposed in section 3-11<\/a>. <\/p>\n

As output, we inform the user on the choices he made by echoing back his sequence (as it was) and the color and case selections that were made. We also output a version of the sequence in the selected case (uppercase or lowercase) and colored according to the color selection.<\/p>\n

\"The
The script output with a simple test sequence<\/figcaption><\/figure>\n

The code, HTML, CSS and PHP, is distributed in several files organised as follows. The directories names are bolded.<\/p>\n

ex5-1<\/strong>
\n    index.php
\n    script.php
\n    html<\/strong>
\n        header.html
\n        footer.html
\n    css<\/strong>
\n        style.css<\/p>\n

The code of the script is generously commented so that you should be able to understand each single line. Please do read the comments as they contain useful insights into the code logic. This applies in particular to the code of the script.php file.<\/p>\n

header.html<\/p>\n

\r\n\r\n\r\n    \r\n        \r\n        Echo user input, just a test<\/title>\r\n        <link rel=\"stylesheet\" href=\"css\/style.css\" type=\"text\/css\">\r\n    <\/head>\r\n    <body>\r\n        <div id=\"main-contents\">\r\n            <h1>A simple test script<\/h1>\r\n<\/code><\/pre>\n<p>footer.html<\/p>\n<pre lang=\"html\"><code>\r\n        <\/div>\r\n        <footer>\r\n            Contact us at webmaster@mywebsite.com\r\n        <\/footer>\r\n    <\/body>\r\n<\/html>\r\n<\/code><\/pre>\n<p>index.php<\/p>\n<pre lang=\"html\"><code>\r\n        <?php echo file_get_contents(\"html\/header.html\"); ?>\r\n        <form action=\"script.php\" method=\"POST\" enctype=\"multipart\/form-data\" id=\"revcomp_form\">\r\n            <fieldset id=\"data\">\r\n                <legend>Data<\/legend>\r\n                <p>\r\n                    <label for=\"sequence\">Your input sequence<\/label><br>\r\n                    <textarea name=\"sequence\" id=\"sequence\"><\/textarea>\r\n                <\/p>\r\n            <\/fieldset>\r\n            <fieldset id=\"options\">\r\n                <legend>Options<\/legend>\r\n                <p>\r\n                    <label for=\"color\">Select color<\/label><br>\r\n                    <select name=\"color\" id=\"color\">\r\n                        <option value=\"red\">Red<\/option>\r\n                        <option value=\"blue\">Blue<\/option>\r\n                        <option value=\"green\">Green<\/option>\r\n                        <option value=\"orange\">Orange<\/option>\r\n                    <\/select>\r\n                <\/p>\r\n                <p>\r\n                   <span class=\"field-title\">Format output sequence<\/span><br>\r\n                    <input type=\"radio\" name=\"case_format\" value=\"lower\" id=\"lower\"> <label for=\"lower\" class=\"radio\">Lowercase<\/label><br>\r\n                    <input type=\"radio\" name=\"case_format\" value=\"upper\" id=\"upper\" checked> <label for=\"upper\" class=\"radio\">Uppercase<\/label>\r\n                <\/p>\r\n            <\/fieldset>\r\n            <input type=\"submit\" value=\"Go!\">\r\n        <\/form>\r\n        <?php echo file_get_contents(\"html\/footer.html\"); ?>\r\n<\/code><\/pre>\n<p>style.css<\/p>\n<pre lang=\"css\"><code>\r\nbody{\r\n    width: 800px;\r\n    margin-right:auto;\r\n    margin-left:auto;\r\n}\r\n\r\n#main-contents{\r\n    border:4px solid tomato;\r\n    margin-right:auto;\r\n    margin-left:auto;\r\n    margin-bottom: 20px;\r\n    padding:20px;\r\n    padding-top:0;\r\n}\r\n\r\nlabel{\r\n    cursor:pointer;\r\n    font-weight:bold;\r\n    color:teal;\r\n}\r\n\r\nlabel.radio{\r\n    font-weight:normal;\r\n}\r\n\r\nspan.field-title{\r\n    font-weight:bold;\r\n    color:teal;    \r\n}\r\n\r\nfieldset{\r\n    border:1px solid tomato;\r\n    margin-bottom:20px;    \r\n}\r\n\r\nlegend{\r\n    font-weight:bold;\r\n    color:tomato;\r\n}\r\n\r\ninput[type=submit] {\r\n    background-color: tomato;\r\n    border: none;\r\n    color: white;\r\n    padding: 5px 10px;\r\n    text-decoration: none;\r\n    margin: 4px 2px;\r\n    cursor: pointer;\r\n    text-transform: uppercase;\r\n    font-weight:bold;\r\n}\r\n\r\nh1{\r\n    color:tomato;\r\n}\r\n\r\ntextarea{\r\n    width:500px;\r\n    height:200px;\r\n    font-family:courier;\r\n    background:whitesmoke;  \r\n}\r\n\r\ninput[type=\"text\"]{\r\n    background:whitesmoke; \r\n}\r\n\r\nfooter{\r\n    text-align:center;\r\n}\r\n<\/code><\/pre>\n<p>script.php<\/p>\n<pre lang=\"php\"><code>\r\n<?php\r\n\/\/ Getting the data submitted by the user through the $_POST array\r\n\/\/ Good idea to do this right at the start of the script\r\n\r\n\/\/ Since the \"name\" attribute value for the sequence textarea in the web form was \"sequence\", \r\n\/\/ we can use this as a key in the $_POST array to retrieve the sequence data\r\n$sequence = $_POST[\"sequence\"]; \r\n\r\n\/\/ The names for the remaining fields were \"color\" and \"case_format\", so here we go\r\n$color = $_POST[\"color\"];\r\n$case_format = $_POST[\"case_format\"];\r\n\r\n\/\/ Please note how we use, as variable names in the script, the very same names used as \"name\" attribute values in the\r\n\/\/ web form. This is a good programming practice we encourage you to adopt, always. \r\n\/\/ It makes for less names to remember overall and you easily know what is what in the script.\r\n\r\n\/\/ Let's generate a version of the sequence transformed following the user's input:\r\n\r\nif($case_format == \"upper\"){\r\n    $transformed_sequence = strtoupper($sequence);\r\n}\r\nelse{\r\n    $transformed_sequence = strtolower($sequence);\r\n}\r\n\r\n$sequence_string_out = \"<span style=\\\"font-family:courier;color:$color;\\\">$transformed_sequence<\/span>\";\r\n\r\n\/\/ Providing an output to the user\r\n\/\/ We embed the output data within the same header and footer HTML code used in the web form\r\n\/\/ to ensure a consistent navigation experience and provide the feel that\r\n\/\/ everything takes place \"in the same website\"\r\n\r\necho file_get_contents(\"html\/header.html\"); \/\/ Writing the header HTML to the output page\r\n\r\necho \"<p><strong>Your sequence:<\/strong><br><span style=\\\"font-family:courier;\\\">$sequence<\/span><\/p>\\n\";\r\necho \"<p><strong>Your selected color:<\/strong><br><span style=\\\"color:$color;\\\">$color<\/span><\/p>\\n\";\r\necho \"<p><strong>Your selected case:<\/strong><br>$case_format<\/p>\\n\";\r\necho \"<p><strong>Your transformed sequence:<\/strong><br>$sequence_string_out<\/p>\\n\";\r\n\r\necho file_get_contents(\"html\/footer.html\"); \/\/ Writing the footer HTML to the output page\r\n?>\r\n<\/code><\/pre>\n<p>In this example, the web form has just three fields. Each field has it’s own value for the “name” attribute of the field.<\/p>\n<p>The name for the sequence field is “sequence”. Therefore, in the script, we can access the sequence posted by the user at<\/p>\n<p>$_POST[“sequence”]<\/p>\n<p>That is the key “sequence” within the $_POST associative array. This key was automatically created for us by PHP at the time of form submit. Indeed a key is created in the $_POST array for each of the names used for the fields in the web form.<\/p>\n<p>In the script we store this value in a variable called, itself, $sequence. We warmly recommend that you always use the names given in the web form as names for the corresponding variables in the script, it makes everything simpler and it also makes a lot of sense.<\/p>\n<figure id=\"attachment_1475\" aria-describedby=\"caption-attachment-1475\" style=\"width: 1802px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/03\/variable_names_in_form_processing_script.png\" alt=\"selecting variables names in a form processing script\" width=\"1802\" height=\"674\" class=\"size-full wp-image-1475\" srcset=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/03\/variable_names_in_form_processing_script.png 1802w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/03\/variable_names_in_form_processing_script-300x112.png 300w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/03\/variable_names_in_form_processing_script-768x287.png 768w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/03\/variable_names_in_form_processing_script-1024x383.png 1024w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/03\/variable_names_in_form_processing_script-1200x449.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption id=\"caption-attachment-1475\" class=\"wp-caption-text\">In selecting variables names in a form processing script it is a great idea and good programming practice to use the same names as those used in the web form as values for the “name” attributes of the form fields.<\/figcaption><\/figure>\n<p>We also recommend that you start a form processing script by importing the values from the $_POST array as show in the example above. Rather than importing them somewhere in the script, when you need them, maybe in a scattered way, it is much cleaner to import all of them right at the beginning, or toward the beginning of the script so that they become immediately available for whatever you need to do in the script.<\/p>\n<p>Ideally, a web form processing script could be subdivided in three parts:<\/p>\n<p>– Importing the data from the web form (and maybe other files, scripts or libraries)<\/p>\n<p>– Elaborating data<\/p>\n<p>– Providing an output<\/p>\n<p>The following figure shows the script in this page with these three parts highlighted.<\/p>\n<figure id=\"attachment_1516\" aria-describedby=\"caption-attachment-1516\" style=\"width: 2678px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/03\/the_structure_of_a_script-2.png\" alt=\"The ideal structure for a form processing script\" width=\"2678\" height=\"1834\" class=\"size-full wp-image-1516\" srcset=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/03\/the_structure_of_a_script-2.png 2678w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/03\/the_structure_of_a_script-2-300x205.png 300w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/03\/the_structure_of_a_script-2-768x526.png 768w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/03\/the_structure_of_a_script-2-1024x701.png 1024w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/03\/the_structure_of_a_script-2-1200x822.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption id=\"caption-attachment-1516\" class=\"wp-caption-text\">The ideal structure for a form processing script<\/figcaption><\/figure>\n<p>You may <a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/uploads\/ex5-1\" target=\"_blank\">run this script live here<\/a>.<\/p>\n<div class=\"google-ad\">\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- bioinfo web dev 2 --><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:inline-block;width:728px;height:90px\"\n     data-ad-client=\"ca-pub-0159360445983090\"\n     data-ad-slot=\"3442176918\"><\/ins><br \/>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<\/div>\n<h2>Chapter Sections<\/h2>\n<p>[subpages]<\/p>\n<p>WORK IN PROGRESS ON CHAPTER 5!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As outlined in the introduction of this book, developing web applications is no different from developing any other software: the developer needs to be able to get some kind of input from the user, typically in the form of data and\/or options, to elaborate this input and finally to provide an output to the user. … <a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/chapter-5-developing-web-applications-for-bioinformatics\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Chapter 5: Developing web applications for bioinformatics”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":5,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1461","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/1461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/comments?post=1461"}],"version-history":[{"count":43,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/1461\/revisions"}],"predecessor-version":[{"id":1517,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/1461\/revisions\/1517"}],"wp:attachment":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/media?parent=1461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}