Introducere in web

1,298 views

Published on

Prezentare ținută la CDL, 23/03/2014

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,298
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducere in web

  1. 1. Introduction to Web Development CDL 23.03.2014 alex@rosedu.org mtiriplica@rosedu.org
  2. 2. Summary ● HTTP ● Anatomy of a web app ● ORM ● Frontend ● Flask workshop
  3. 3. Server ● aplicație ● mașină (un calculator) ● așteaptă cereri ● răspunde la cereri
  4. 4. Client ● aplicație ● face cereri ● așteaptă răspunsuri ● interpretează răspunsuri
  5. 5. HTTP… Whaaat? ● Protocol de comunicație (boooring) ● Baza WWW ● Folosit de API-uri (What’s an API?)
  6. 6. HTTP Requests ● CRUD ● GET ● POST ● PUT ● DELETE ● HEAD ● PATCH
  7. 7. HTTP Response Codes ● 200+ ● 300+ ● 400+ ● 500+
  8. 8. HTTP Sessions ● Schimb de informatii intre doua entitati ● request + response ● Cookies - sesiuni persistente
  9. 9. Anatomy of a web app Asynchronous requests URI Views Logic Data Resources Presentation
  10. 10. URLs and Views http://localhost:5000/account/settings/ def settings(): method = request.method return “Salut ” + method
  11. 11. 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
  12. 12. 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
  13. 13. Frontend (Not just for designers) ● HTML ● CSS ● Javascript ● For hipsters: Brython
  14. 14. HTML ● versiunea 5 ● tag-uri: <h3>I am a header </h3> <h2> No, I am header!</h2> <p> Stop it!</p>
  15. 15. DOM ● reprezentarea și interacționarea cu elemente HTML ● structură de arbore
  16. 16. CSS
  17. 17. CSS ● Dă stil codului HTML: p { font-size: 1.2em; line-height: 1.0em; color: #333; width: 100%; }
  18. 18. 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; };
  19. 19. Must Know ● Bootstraps: http://getbootstrap.com/2.3.2/ ● jQuery - manipulare de elemente din DOM
  20. 20. Workshop time! ● Setup environment ● Write simple web app ● Add templates ● Make a form ● Add some javascript ● Profit!
  21. 21. 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
  22. 22. 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/
  23. 23. templates/home.html: <html> <body> <h1>Hello World</h1> &copy; CDL 2014 </body> </html>
  24. 24. templates/other.html <html> <body> <h1>Goodbye World</h1> &copy; CDL 2014 </body> </html>
  25. 25. templates/layout.html <html> <body> {% block content %} {% endblock %} &copy; CDL 2014 </body> </html>
  26. 26. templates/home.html*: {% extends ‘layout.html’ %} {% block content %} <h1>Hello world!</h1> {% endblock %}
  27. 27. 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>!
  28. 28. 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>
  29. 29. Javascript webapp.py: @app.route(‘/default-message’) def dm(): return “This is a placeholder” templates/form.html: <button id=”but”>Set default text</button>
  30. 30. 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>
  31. 31. 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.
  32. 32. Alte resurse CSS Reference Javascript refernce Prezentare Flask

×