Introducere in web

Introduction to
Web Development
CDL
23.03.2014 alex@rosedu.org
mtiriplica@rosedu.org

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 requests
URI
Views
Logic
Data
Resources
Presentation

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
● Dă stil codului HTML:
p {
font-size: 1.2em;
line-height: 1.0em;
color: #333;
width: 100%;
}

Javascript
● Pagini web dinamice
var 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.py
import 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*:
{% 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>!

Form
webapp.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”
<button id=”but”>Set default text</button>

Javascript (continued)
<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 Reference
Javascript refernce
Prezentare Flask

Introducere in web

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Introducere in web

Semelhante a Introducere in web (20)

Mais de Alex Eftimie

Mais de Alex Eftimie (7)

Último

Último (20)

Introducere in web