web project 11.02.15 astrik jeitler. content iv.website content v.summary / outlook 11.02.2015safir...
TRANSCRIPT
Web Project11.02.15 ASTRIK JEITLER
ContentIV. Website content
V. Summary / outlook
11.02.2015 SAFIR WEB PROJECT 2
I. Introduction
1. Purpose
2. System overview
II. Requirements and technologies1. Python and Flask
2. MongoDB
3. Jinja2 and HTML
4. CSS, JavaScript, jQuery
III. Software architecture1. 3-tier architecture
2. Model-View-Controllter pattern
3. Application structure
1. Introduction
Start of SAFIR web project in September 2014
Purpose for the SAFIR web project:
1. Dynamic web application for SAFIR project of ETH Zurich
2. Website as part of outreach for SAFIR project
3. But also web-based tool to support team work (data/information storage, interface with
database)
3SAFIR WEB PROJECT11.02.2015
1. Introduction
System overview of the SAFIR web application (SAFIRweb):
1. SAFIRweb is a web application reachable from a web browser, main URL: http://safir.ethz.ch
2. SAFIRweb divided into two sections: SAFIRweb/public and SAFIRweb/intraneta. SAFIRweb/public: introduction to SAFIR project work and provision of contact information
b. SAFIRweb/intranet (interface to database): project internal information and research data
3. Traditional website design and layout (header, body with sidebar and footer)
4. SAFIRweb deployed to Debian webserver (managed by ISG from DPhys ETH)
4SAFIR WEB PROJECT11.02.2015
2. Requirements
Requirements divided into functional and non-functional
Selected functional requirements:a. The website should provide the general public with an introduction to the work of the SAFIR project
b. The website should provide contact possibilities to the project
c. Permitted users must be able to access project results stored in the SAFIR database
d. Permitted users must be able to upload measurement data to the SAFIR database and edit it
Selected non-functional requirements:a. The website must be written in Python
b. The website must implement the Flask framework for Python
c. The website shall be connected to a database
5SAFIR WEB PROJECT11.02.2015
2. Technologies and tools – Python & Flask
Flask web framework for web applications written in Python
Flask handles tasks such as: a. URL routing
b. database manipulation
c. HTML and JSON output format templating
11.02.2015 SAFIR WEB PROJECT 6
from flask import Flask, render_template
app = Flask(__name__)
@public.route("/")def home():
return render_template(“home.html”)
2. Technologies and tools - MongoDB
MongoDB NoSQL database, document-oriented storage
Documents organized in field and value pairs similar to JSON format and python dictionaries
MongoDB does not necessitate database schema
For data consistency document models define basic structure of data (MongoEngine)
11.02.2015 SAFIR WEB PROJECT 7
{ "description": "Test setup dSiPM with source", "type": "image", "tags": [ "lab", "dSiPM", "source" ], "location": "media/TPPhoto.jpg"}
2. Technologies and tools – HTML templates
Jinja2 template engine included in Flask framework
Dynamically generate HTML templates
Define layout of displayed content
Allows insertion of python functions into the templates
11.02.2015 SAFIR WEB PROJECT 8
{% macro make_article(article, num_articles_total) %}
<div class="article-content"><h2>{% if num_articles_total > 1 %}
<a id="{{article.id}}">{{article.title}}</a>
{% else %}{{article.title}}{% endif %}
</h2>{% if article.body %} {{ article.body | nl2br|urlize() |e}} {% endif %}
{% if article.media %}{% for media in article.media %}{{make_media(media, article.title)}} {% endfor %}{% endif %}
</div>{% endmacro %}
2. Technologies and tools – CSS3, JavaScript, jQuery
CSS for style rules changing appearance of HTML elements on the page
Less CSS plugin used to reduce length and reusability of code
JavaScript commonly employed to handle user interaction (animation)
jQuery library implements recurring use cases and facilitates cross-browser compatibillity
11.02.2015 SAFIR WEB PROJECT 9
body {color: #333;background-color: @bodyBackground;font-family: @baseFont;}
$(function() { for (var i = 0; i < 500; i++) {
$('.show-FAQ-' + i).click(function() {
var $id = $(this).attr('name')
$('.howto-desc-' + $id).fadeIn();
$(this).hide();$('.hide-FAQ-' +
$id).show();});
}});
3. Software architecture – Three tier
10SAFIR WEB PROJECT11.02.2015
Internet
HTTPHTTP
Client with web browser
Flask App
PyMongo/MongoEngine
Webserver
MongoDB
MongoDB
safir_web
mripet
Three tier architecture typically used in server-client relationships1. Data tier
2. Application tier
3. Presentation tier
3. Software architecture
Data structure in the database:1. Denormalized
2. Flexible data model
3. One-to-one or one-to-many
relationships possible
Database queries not restrained by data structure
Queries can be targeted to restructure result data in wanted shape
11SAFIR WEB PROJECT11.02.2015
{ "_id" : ObjectId("54d224ae370b7d1ff1d65566"),
"tags" : ["simulation-
data" ],"xtal_size" : "1.5x1.5x12.0","CTW" : 1000,"Tsm_val" : 90,"Tsm_type" : "gauss","Esm_type" : "gauss","Esm_val" : 0.1,"E_cut" : 150,"data" : [{
"Neve" : 5000000,"Sens" : 7.30808,"Act" : 50,"Ran" : 53582,"RanR" : 4.00328,"Tru" : 305475,"TruR" : 22.86184,"NECR" :
15.1880544848,"NECRS" :
14.200688213}],
"E_win_low" : 350,"E_win_up" : 650,"cluster_diff" : 4,"cluster_type" : 3,"scat_frac" : 10
}
Embedded sub document
3. Software design - MVC
SAFIRweb folows Model-View-Controller design pattern
Software is divided in sections with different functionalities
11.02.2015 SAFIR WEB PROJECT 12
Model
ViewController
a.definition of application logic
b.management of data
representation of defined logic
a. forwarding of received user input
b. translation into commands for view or model layer
3. Software design - MVC
Despite schemal-less database, implementation models on document level for data consistency and validation
Object oriented layer: documents become objects in the application
MongoEngine extension handles Document-Object mapping
11.02.2015 SAFIR WEB PROJECT 13
Modelclass Media(Document):
TYPE = ('image', 'document', 'video', 'audio') description = StringField(required=False) type = StringField(required=True, choices=TYPE) tags = ListField(StringField(), required=True) location = StringField(required=True)
meta = {"db_alias": "default"}
3. Software design - MVC
Implementation of all necessary functions in Flask
Definition of views in “view functions”, pair URL with HTML template
To increase reusability definition of views in “view classes” that can be paired to different routes
11.02.2015 SAFIR WEB PROJECT 14
Viewclass ArticleView(CrumbView):
def __init__(self, template="ArticleView.html", **kwargs): super(ArticleView, self).__init__(template, **kwargs) def dispatch_request(self): articles = Article.objects(tags=self.crumbs[-1]) links = Link.objects(tags__all=self.crumbs) self.template_content.update({
"articles":articles, "links":links}) return super(ArticleView,self).dispatch_request() public.add_url_rule("/science/",
view_func=ArticleView.as_view("science"))
3. Software design - MVC
In web context usage of HTTP methods (e.g. “Post”, “Get”)
Controller consists of methods associated with view classes
Controller can modify data layer, which than updates view layer
11.02.2015 SAFIR WEB PROJECT 15
class FileServingView(MethodView):methods = ["GET", "POST"]
def get(self, **kwargs): oid = request.args["oid"] oid = ObjectId(oid) file = FS.get(ObjectId(oid)) response = make_response(file.read()) response.mimetype = file.content_type return response
def post(self, **kwargs): file = request.files["file"] oid = FS.put(file,
content_type=file.content_type,
filename=file.filename) flash("Uploaded file %s” %file.filename) return “<div>Put %s, %s</div>” % (oid, file.filename)
Controller
SAFIR WEB PROJECT 16
3. Software design - Blueprints
SAFIRweb implements Blueprints
Blueprint = subapplication of SAFIRweb registered to the main application
For each Blueprint collection of views, templates and static files
Organization of Blueprints in SAFIRweb is functional (better if a lot of resources are shared)
11.02.2015
4. Website content
Goals for web design:1. Simple graphical user interface2. Inviting layout3. Styling should be uniform thoughout the
website4. Public part of website supported by graphics
11.02.2015 SAFIR WEB PROJECT 17
http://safir.ethz.ch
4. Website content
Goals for intranet content: 1. Store project data and results 2. Make data searchable3. Establish links between related information (group
information)4. Provide documentation for project software 5. Provide organizational information (FAQs, project
links)
Goals for public content: 1. Give an introduction of SAFIR work2. Provide contact information3. Explain SAFIR scientific background4. Introduce SAFIR team
11.02.2015 SAFIR WEB PROJECT 18
http://safir.ethz.ch
SAFIR WEB PROJECT 19
4. Website content
Specific use case
11.02.2015
http://safir.ethz.ch
5. Summary
SAFIR website accompanies SAFIR project
SAFIRweb implements modern web development tools based on Python and accessing MongoDB database
Software architecture is typical architecture for Server-Client configurations
SAFIRweb implements common Model-View-Controller design pattern
SAFIRweb content is improved but not yet fully meeting goals
20SAFIR WEB PROJECT11.02.2015
5. Outlook
Further maintenance and expansion of website by Kevin
To improve benefit and utility of webinterface step by step incorporation of project data
Communication of specific use cases for better usability
21SAFIR WEB PROJECT11.02.2015
SAFIR WEB PROJECT 22
Thank you for your attention!
11.02.2015