introducere in web
Post on 08-Jul-2015
1.048 Views
Preview:
DESCRIPTION
TRANSCRIPT
Introduction to Web Development
CDL
23.03.2014 alex@rosedu.orgmtiriplica@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 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
top related