5-6: The T-Score web application – Web form and data processing

With most of the code ready for scoring target protein sequences for peptide binding to selected MHC alleles we can move to the web application part.

We will implement a simple layout very similar to those used for our previous examples and applications.

The web form will contain three fields: a text-area, a drop-down menu for MHC allele selection and a dropdown menu for selecting the threshold that we wish to apply to filter positive peptides. In the text-area, the user will be able to input either a FASTA sequence or a UniProt id. The script will then auto-detect which one of those was used as protein sequence input.

The files structure for the application will be as follows:

tscore (permission 777)
    matrix (permission 777)
    index.php (the web form)
    script.php (the form processing script)
    css
        style.css
    html
        header.html
        footer.html
    include
        functions.php
        generate_matrices.php

DataTables download builder and CDN

As briefly mentioned in the previous section, we will use a jQuery plugin called DataTables to add a dynamic behaviour to the results table with positive peptides data presented to the user in output (more on this later). In order to do this, we do need to import jQuery and DataTables into our pages. This is done in the head part of the HTML pages by using a script tag. jQuery and DataTables also come with some dedicated stylesheets, those will have to be imported as well, through a link tag inserted in the head of our pages. There are several ways to perform those imports. For instance we could download the appropriate jQuery and DataTables scripts, and the respective CSS, locally to our web server and then import those local versions in our application web pages. There is however some complexity to this operation as we should make sure to select the appropriate versions of the scripts and import everything in the correct order for things to play smoothly.

A very convenient alternative to have a working DataTables framework in our pages is to use the DataTables download builder in combination to the DataTables Content Delivery Network (CDN). We suggest you visit those links and start to get familiar with the DataTables system. There are at least three advantages to this approach: all dependencies between the jQuery and DataTables versions used will be automatically satisfied without us having to figure them out correctly, the scripts code will be delivered fast by the cdn rather than our server and, last but not least, all the required jQuery and DataTables code can be imported with just two lines of code in the HTML, that will be provided to us by the download builder to just copy-paste in our pages source code.

The download builder provides a number of options for the DataTables system you wish or need to implement in your own pages, currently subdivided in three areas: main libraries (jQuery, type of CSS used, DataTables), extensions (various optional functionalities for the system) and packaging options (local storage or CDN delivery of the files).

A reasonable choice for the T-Score web application, in which we will use a rather simple implementation of the DataTables system, could be as follows:

Main libraries: jQuery 2.x, DataTables styling, DataTables
Extensions: FixedHeader
Packaging options: Minify, Single file, CDN

At the file of this writing, selecting those options in the download builder generates the following two lines, one for the CSS and one for the scripts, for us to include in the head of our HTTML pages:

Web form and CSS

We are now ready to write the code for the web form and the CSS for our pages.

header.html

In the header, please note the following piece of code:

It runs the DataTables code on the element with id “results-table” (#results-table), the results table generated by our processing script (see script.php below).

To run DataTables with the default parameters, we could have simply used:

We did however add a little customization by using the “sDom” option, to remove the DataTables filter search box that comes by default, and the “aoColumns” option, to remove column sorting for column 2, the one with the peptide sequence, as the possibility to sort on this column does not make much sense. It makes instead a lot of sense to be able to sort the table on the first (peptide position), third (score) and third (rank) columns. A full overview of the options available for customization can be found here.

footer.html

index.php

In the web form code above, we have hard-coded the select for the MHC alleles, including options for HLA-A1, A2 and A3. If we planned on a system that would accommodate for additional alleles to be eventually present in the matrix folder, we could instead generate the HTML code for the options dynamically with PHP, by looking at the .csv matrix files available in the matrix folder. The following function would be able to generate an option for each .csv file available and return the html with all the options. It supports as a single optional argument the path of the directory containing the matrices .csv files.

To use this function, we could add it to the functions.php file in the include folder. Then, in the index.php web form file, we could replace this part:

with this:

Let’s style it.

style.css

Data processing

For the functions.php file please refer to the previous section, as it remains unchanged. It should contain the following functions:

– process_fasta()
– pepscore()
– matrix_file_to_array()
– slide_window()
– generate_matrix_options() (optional, discussed above in this section)

script.php

You can test the script live here. Find a screenshot of the output with protein UniProt P03303 below.

Chapter Sections

[pagelist include=”1461″]

[siblings]

WORK IN PROGRESS ON CHAPTER 5!