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