Introducere in web
0 likes1,428 views
This document provides an introduction and overview of key concepts in web development including HTTP, server-client architecture, URLs, views, templates, SQL/ORM, frontend technologies like HTML, CSS, JavaScript, and a Flask workshop example. It covers setting up a virtual environment, building a simple Flask web app, adding templates, handling forms, and using JavaScript/jQuery for asynchronous requests. Finally, it lists some TODO items like styling elements and adding new views/pages for login functionality.
![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/](https://image.slidesharecdn.com/introducereinweb-2-140324090258-phpapp01/85/Introducere-in-web-22-320.jpg)
![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>](https://image.slidesharecdn.com/introducereinweb-2-140324090258-phpapp01/85/Introducere-in-web-28-320.jpg)
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