Web Project 11.02.15 ASTRIK JEITLER. Content IV.Website content V.Summary / outlook 11.02.2015SAFIR...

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)


http://safir.ethz.ch/

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


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


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)


{ "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


{% 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


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


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


{ "_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


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


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


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"}


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


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"))


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


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


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





4. Website content

Specific use case

11.02.2015



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


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



Thank you for your attention!

11.02.2015

Web Project 11.02.15 ASTRIK JEITLER. Content IV.Website content V.Summary / outlook 11.02.2015SAFIR...

Documents

Transcript of Web Project 11.02.15 ASTRIK JEITLER. Content IV.Website content V.Summary / outlook 11.02.2015SAFIR...