introducere in web
DESCRIPTION
Prezentare ținută la CDL, 23/03/2014TRANSCRIPT
Summary
● HTTP● Anatomy of a web app● ORM● Frontend● Flask workshop
Server
● aplicație● mașină (un calculator)● așteaptă cereri● răspunde la cereri
Client
● aplicație● face cereri● așteaptă răspunsuri● interpretează răspunsuri
HTTP… Whaaat?
● Protocol de comunicație (boooring)● Baza WWW● Folosit de API-uri (What’s an API?)
HTTP Requests
● CRUD● GET● POST● PUT● DELETE● HEAD● PATCH
HTTP Response Codes
● 200+● 300+● 400+● 500+
HTTP Sessions
● Schimb de informatii intre doua entitati● request + response● Cookies - sesiuni persistente
Anatomy of a web app
Asynchronous requestsURIViewsLogicDataResourcesPresentation
URLs and Views
http://localhost:5000/account/settings/
def settings():method = request.method
return “Salut ” + method
SQL
● Structured Query Language, pron: sicuăl○ tables, columns and rows○ select * from table○ insert into table○ update table○ delete from table
● Object Relational Model○ each table is a class○ each row is an object○ backrefs: one to many, many to many relations
Backref Magic
● usual db code:select * from books where author_id=1
select name from authors where author_id=1
select b.*, a.name from books b
left join authors a on b.author_id=a.id
where a.id=1
● models:class Author:
name = String
class Book:
author = FK(Author, backref=’books’)
x = Author(name=’Tiri’)
y = Book(author=x)
x.books
y.author.name
Frontend (Not just for designers)
● HTML● CSS● Javascript● For hipsters: Brython
HTML
● versiunea 5● tag-uri:
<h3>I am a header </h3><h2> No, I am header!</h2><p> Stop it!</p>
DOM
● reprezentarea și interacționarea cu elemente HTML
● structură de arbore
CSS
CSS
● Dă stil codului HTML:
p {
font-size: 1.2em;
line-height: 1.0em;
color: #333;
width: 100%;
}
Javascript
● Pagini web dinamicevar getMaxHeight = function ($elms) { var maxHeight = 0; $elms.each(function () { var height = $(this).height(); if (height > maxHeight) { maxHeight = height; } }); return maxHeight;};
Must Know
● Bootstraps: http://getbootstrap.com/2.3.2/● jQuery - manipulare de elemente din DOM
Workshop time!
● Setup environment● Write simple web app● Add templates● Make a form● Add some javascript● Profit!
Virtualenv# install system-wide
apt-get install python-virtualenv
# create new
virtualenv env
# activate
source env/bin/activate
# install flask
pip install flask
# pip freeze
pip freeze > requirements.txt
webapp.pyimport flask
app = flask.Flask(__name__)app.config['DEBUG'] = True
@app.route('/')def home(): return "Hello World!"
if __name__ == '__main__': app.run()
Then, in a terminal:
$ python webapp.py
Open in browser: http://localhost:5000/
templates/home.html:
<html>
<body>
<h1>Hello World</h1>
© CDL 2014
</body>
</html>
templates/other.html
<html>
<body>
<h1>Goodbye World</h1>
© CDL 2014
</body>
</html>
templates/layout.html
<html>
<body>
{% block content %}
{% endblock %}
© CDL 2014
</body>
</html>
templates/home.html*:
{% extends ‘layout.html’ %}
{% block content %}
<h1>Hello world!</h1>
{% endblock %}
Misc
webapp.py:...
return render_template(‘home.html’, {name=’alex’})
home.html:...
Hello {{ name }}!
Hello {{ name|capitalize }}
Go <a href=”{{ url_for(‘.form) }}”>form</a>!
Formwebapp.py:@app.route(‘/form’, methods=[‘GET’, ‘POST’])
def form():
if flask.request.method == ‘POST’:
print “Received: ”, flask.request.form
return flask.render_template(‘form.html’)
templates/form.html:...
<form method=”POST” action=”/form”>
<input type=”text” name=”message” value=”” id=”msg" />
<button type=”submit”>Send message!</button>
</form>
Javascript
webapp.py:@app.route(‘/default-message’)
def dm():
return “This is a placeholder”
templates/form.html:<button id=”but”>Set default text</button>
Javascript (continued)
templates/form.html:<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>$("#but").click(function(event) { event.preventDefault(); $.ajax({ url: "/default-message", }).done(function(result) { $("#msg").val(result); });});</script>
TODOs
● Toate elementele <h1> trebuie să aibă culoarea verde si dimesiunea fontului 40px
● Butonul de submit trebuie să aibă lungimea de 500px, iar atunci când mouse-ul este deasupra lui trebuie să își schimbe culoarea
● Adăugați un nou view ce corespunde url-ului ‘/login’. Pagina afișată trebuie să conțină câmpuri pentru nume și parolă și un buton de Log In. După submit, va afișa un alt template.
Alte resurse
CSS ReferenceJavascript referncePrezentare Flask