Web2py Layout Features

Web2py Layout Features CHAPTER 5. DEVELOPMENT In the Web2py framework there are two objects that contribute in designing both static and dynamic web pages. The SQLFORM.factory object is used for developing static web pages and SQLFORM object for developing dynamic pages. The framework consists of three files, namely db.py which is created in the model, default.py created in the controller and default/index.html file for designing the web page in the view layer. When the function in the controller gets executed, the default/index.html file in the view is called which passes the variables into HTML. Since the view file is written in HTML, the python code is placed within {{ }}. The â€Å"layout.html† file represents the fundamental layout of all the applications designed in web2py. Screenshot of the files mentioned above in web2py interface: Screenshot 5.1. Files of Web2py To understand how the objects work I developed a static web page which takes name and chemical type of a chemical compound as user inputs and accepts the form if no errors are found. However, if the user does not enter any name the form sends a response to the user displaying â€Å"Form contains error† Each time a new user submits the form message â€Å"Form displayed for the first time† is displayed. Screenshot of the web page implemented: Screenshot 5.1. New page Code to implement static web page in the logical layer: def index(): form=SQLFORM.factory(Field(Name,requires=IS_NOT_EMPTY()), Field(Chemical_Type,requires=IS_NOT_EMPTY())).process() if form.accepted: session.flash=Form accepted redirect(URL(other,vars={Name:form.vars.Name})) elif form.errors: response.flash=Form contains errors else: response.flash=Form displayed for the first time return locals() Code to view the web page in the view layer: {{extend layout.html}} {{=form}} 5.2. Designing dynamic Cheminformatics Application To start with designing the web application in web2py framework, there are some built-in files that can be modified for designing purpose. These built-in files of web2py have facilitated easy designing of the web application. One of the main files is the ‘menu.py’ model file which can be customized based on the requirement of the user. By making some few changes in the above file, the following tags such as ‘Cheminformatics’, ‘Home’ and ‘Drug Database’ on the left-hand side of the page have been established. The table includes Compound_ID and row.id details of the chemical compound table created in the db.py file of model. Logic is implemented in the controller and connecting the web page to the server is implemented in the view. The web page retrieves results from the server based on the query of the user. Model Code – db.define_table (Compound_Details,Field(Compound_ID,string),Field(row.id,int)) Controller code- def index(): return dict() #search through search bar def search(): result= error=no result found x=request.body.read() result=Query_results(str(x)) if result!=: return result else: return error def Query_results(y): a= result= count1=0 my_query=(db.Compound_Details.Compound_ID.contains(y)) myset=db(my_query) rows = myset.select() for row in rows: result=str(row.Compound_ID) +t+ str(row.id) +n+ result count1=myset.count() if count1==0: return str(a) else: return result View code- {{extend layout.html}} placeholder=Search here autocomplete=off /> Search Function search_element() { //clear(); var text; text=document.getElementById("search_text").value; if(text=='') { alert("Enter some text to be searched!"); return; } â€Å"var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("POST","{{=URL('search')}}",true); xmlhttp.setRequestHeader("Content- type","http://127.0.0.1:8000/search1/default/index?search_text="); xmlhttp.setRequestHeader("Content-length", text.length); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 || xmlhttp.status==200) { var result=xmlhttp.responseText; if(result=='') { alert("no result found"); } else { var row=result.split("n");//row is the individual row for (i=0;i createDiv(row[i]); } } } } document.getElementById("search_text").value=''; xmlhttp.send(text); }† [14] Explanation of the code: The web2py framework provides the ability to the developer to view the creation of table in the sql.log file and input records into the database through the database administration file. Below is a snapshot of the implementation of the search page: Screenshot 5.2. Cheminformatics App page Three functions are declared in the controller section which includes the logic required to search for text based on user input. In the search function, when user enters text in the search box, the input is converted into string using the request.body.read object. The string is then directed to the database server through the Query_results function which retrieves ‘Name and row.id of the chemical compound each time count1==0. The index function in the controller is used for the purpose of returning the dictionary. The view section handles the display of the web page. In order to connect the HTML page to the database server of web2py, an AJAX script is initiated for the purpose of making the page dynamic. It automatically updates the web page without re-loading it. It uses XmlHttpRequest object to interact with the server. Browsers such as IE7+, Firefox, Chrome, Opera, and Safari are supported by the new XmlHttpRequest object. The older versions of IE such as IE5 and IE6 are supported by the new ActiveXObject. Methods open() and send(), are used for the purpose of sending request to the server. The open() method has the following syntax: open(method,url,async): The method defines the type of Http request to be sent across- either GET or POST. The url is the position of the file and async determines the asynchronous or synchronous nature of request. An asynchronous request is one that does not block the javascript which interacts with the server. A synchronous request is one that hinders the interaction of the javascript with the server until the action is complete. The code in view applies the asynchronous request that facilitates the http request to interact with the server to retrieve the results. send(string): The argument string is used for http POST request. This method is used for sending the request to the server. The POST request will then use the setRequestHeader(header,value) method for sending request to the server. ‘Header’ argument is for the header name and the ‘value’ argument is the header value. The following screenshot illustrates the value of the records after the user clicks on the search button. Screenshot 5.2. Result This initial prototype will serve as a foundation in the preparation of the cheminformatics resource that will facilitate search based on user input.