Introducere in web
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Introducere in web

on

  • 979 views

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

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

Statistics

Views

Total Views
979
Views on SlideShare
979
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introducere in web Presentation Transcript

  • 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> &copy; CDL 2014 </body> </html>
  • 24. templates/other.html <html> <body> <h1>Goodbye World</h1> &copy; CDL 2014 </body> </html>
  • 25. templates/layout.html <html> <body> {% block content %} {% endblock %} &copy; 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