Transcript www.tceaconvention.org

lsurl.me/YJ6D
Web Application Development
Particulars
Rob Boyett
height: 5’7”
weight: 165 lbs
40yd: 6.0 sec
Occupation: Instructional
Technologist
Languages: English, Russian, Python, Html, CSS,
Javascript and a little of everything else.
How are web applications built?
Dynamic content static pages get manipulated for each
user
“Your google drive does not look like
mine. Static pages are going the way
of the dinosaur!”
Django
The web development framework that saves
you time.
djangobook.com
How does it work?
www.url.com - this is the DNS link to your server.
mainpage - this tells your server what piece of code to run.
How does it work?
The code (called views) pull in database info
(called models) for this user.
views.py
models.py
How does it work?
It then loops through the database info and
plugs it into an html template (called
templates). It then serves up the dynamically
created web page for the user.
“Hello World”
Let’s do this!
First, lets set up your machine.
django-training@djangotraining-VirutalBox:~$ _
(linux only)
sudo apt-get install python-setuptools
(mac only if you need python)
sudo brew install python
Open the terminal.
ctrl+alt+t
(linux and mac)
sudo easy_install pip
sudo pip install --upgrade virtualenv
Let’s do this!
Next:
django-training@djangotraining-VirutalBox:~$ _
~$ cd Programming/
~$ ls -l
~$ virtualenv helloworld
~$ ls -l
~$ source helloworld/bin/activate
(helloworld)django-training@djangotraining-VirutalBox:~/Programming$ _
Let’s do this!
Next:
(helloworld)django-training@djangotraining-VirutalBox:~$ _
~$ cd helloworld/
~$ clear
~$ ls -l
~$ pip install django
~$ pip freeze
Let’s do this!
Next:
(helloworld)django-training@djangotraining-VirutalBox:~$ _
~$ django-admin.py startproject helloworld_project
~$ ls -l
~$ cd helloworld_project/
~$ ls -l
~$ python manage.py migrate (do this the first time)
~$ python manage.py runserver
Now let’s build it.
Open a new terminal window:
(helloworld)django-training@djangotraining-VirutalBox:~$ _
~$ (linux only) sudo komodo-edit
Mac users:
komodoide.com/download/#edit
Let’s Start By Handling URL’s
Open urls.py, settings.py and create a views.py
under helloworld_project:
Resources section: google drive or resources
folder of virtualbox image. You can find
example scripts.
Let’s create some Folders!
Under helloworld_project, create templates,
static and media.
Under templates create the file hello_world.html
Now lets make make this rock!
in your views.py change
HttpResponse(“Hello World”)
to
render_to_response(“hello_world.html”)
Now let’s pass some info -->
Let’s add some args={}
args = {
‘first_name’:’Robert’,
‘last_name’:’boyett’,
‘favoriteColor’:’blue’,
}
Move over Bacon!
Let’s get into something a little meatier!
What’s an app?
(helloworld)django-training@djangotraining-VirutalBox:~$ _
~$ python manage.py startapp login
~$ ls -l
Move over Bacon!
Next, create a urls.py and a templates folder in
the login folder.
Inside the templates folder create a login.html
Add ‘login’, to the INSTALLED_APPS in your
settings.py
Create your login HTML
We will just create a simple username and
password form that will submit to /login-user/
Next we will need to create the ‘login-user’ url
handler and view in order to process the user’s
credentials.
“Post” or “Get” and “CSRF”
Get - Requests data from your server.
Post - Submits data to your server.
CSRF - (Cross Site Request Forgery) Web site
that contains a link, a button or script that is
made to perform an action on your site, trying
to trick the user into submitting personal info or
inject “malicious” info into your database.
Let’s add CSRF Protection
In the views.py:
In login.html:
Now, let’s handle the submit
In views.py:
Where are User’s Created?
Django Models: Python way of creating SQL
relational databases without needing to know
SQL.
first_name, last_name, email, username,
password, groups, active, etc.
Now we need to create the User
(helloworld)django-training@djangotraining-VirutalBox:~$ _
~$ python manage.py syncdb
You have installed Django’s auth system, and don’t have any superusers defined.
Would you like to create one now? (yes/no): yes
Username (leave blank to use ‘django-training’): whatever
Email address: [email protected]
Password:
Password (again):
Superuser created successfully.
~$ python manage.py runserver
Now let’s login the User
In views.py:
Now let’s login the User
In views.py:
Now we can logout a User
Advanced way to handle a url for logout (in
urls.py).
Now, we need to create Users
Create urls.py handler and view.py function and
a template create_user.html:
Let’s be a little more
advanced about this!
Now, we need to create Users
Now, handle account creation
Now let’s add something better!
Javascript and ajax!
Create this folder structure:
Place the jquery
files from
resources into
the js folder you
created.
Add them to your HTML
Now let’s create user side
validation!
Add required to the parts of your form that are
required. Add any minlength=”5” and
maxlength=”30” values that you want. And we
must also create special situations for the
password and username.
Let’s create our own javascript!
In the js folder create a main.js file:
1st: Use jquery $(document).ready(function(){});
2nd: create special validation rules. We want
our usernames to have no spaces.
No Space Validation
Turn on Validation for all Forms
Add special validation for
password confirmation...
Add id=”password1” to the first password
element.
Add equalTo=”#password1” to the second
password element.
Now let’s add some AJAX
In our main.js and create_user.html files:
1st: Add id=”create-user-form” to the form
element. Then:
Let’s make our AJAX error
handling a little better...
In views.py add:
In createUser view change:
to =
change result variables to:
Let’s make our AJAX error
handling a little better...
Now, in main.js change the .ajaxform datatype
to json.
Let’s make our AJAX error
handling a little better...
Now, add some error handling.
Let’s make it easier for the User
Your user doesn’t want to login every time they
come to your site. Especially if the just left.
Let’s correct this issue.
Sessions and Cookies
Let’s keep track of our users
In views.py add (this checks cookies):
Now, lets make the session
In the loginUser view:
Changing Gears
Let’s get out of this hello world and make a new one.
(helloworld)django-training@djangotraining-VirutalBox:~$ _
~$ deactivate
~$ cd ~/Programming/
~$ virtualenv bootstrap
~$ source bootstrap/bin/activate
~$ cd bootstrap/
~$ pip install django
Changing Gears
(bootstrap)django-training@djangotraining-VirutalBox:~$ _
~$ django-admin.py startproject bootstrap_project
~$ cd bootstrap_project/
~$ python manage.py migrate
~$ python manage.py syncdb
~$ python manage.py runserver
Go through the steps...
●
●
●
●
●
Add the extras to settings.py
Create an index in urls.py and view.py.
Create an media, static and templates.
Create (in static) bootstrap_projcet folder.
In static/bootstrap_project create css,
images, js.
● Create an index.html (with whatever).
Then serve it up and make it work!
Bootstrap (oooohhh, aaahhh)
http://getbootstrap.com/
Free Bootstrap themes - just do a search and
browse.
Our Bootstrap Admin Console
http://almsaeedstudio.com/AdminLTE/
Play around with this website for a sec.
Copy only what you need!
● Move images over to you static images
folder.
● Move AdminLTE.css to the static css folder.
● Move app.js to the static js folder.
Create your index.html
● Inside Komodo-edit, open the empty.html in
Recources/AdminLTE-master.
● Copy and paste its contents into your
index.html.
● Correct all the http:// css links and add
staticfiles to the css, js and images.
Let’s compare...
In Komodo-edit open login.html and
register.html which is found inside
Resources/AdminLTE-master/pages/examples.
Now, let’s look at your new index.html as well
as the ones you just opened. You will notice
similarities as well as differences.
The magic of Django
In the templates folder, create a base.html file.
Copy and paste everything from index.html to
base.html and let’s get busy!
Next, use base.html to extend
Add:
to any html templates that contain the base.
your content ----
Let’s Create the Login Process!
WAIT!
DIDN’T WE ALREADY DO THAT?
That’s right, just copy and paste it from the last
one. Be sure to add it to your settings.py list of
INSTALLED_APPS and urls.py.
Now, Check for User
We can check that users are logged in before
they get to the index.
Let’s make the login look smart!
Now, see if you can make the login.html look
like the one that goes with our bootstrap
dashboard.
Now correct the rest of login
This app can easily be adapted to any web
application you want. But what if there were
programmers out there that would share their
apps?
https://www.djangopackages.com/
Let’s create our own Models
Let’s say that we want to create a user
directory for room #, phone ext, subject they
teach, etc.
So, create a new app called “directory”.
Think, Models = Databases
In models.py add and then syncdb:
Django Admin Console
●
●
●
●
logout first (not necessary)
x
now login and explore
we don’t see your new model? (let’s fix that)
Admin.py
Open admin.py add:
Let’s Add info to the Database
●
●
●
●
Create an addEmployee.html in templates.
Add url.py handler.
Add view.py addEmployee view.
Add link on sidebar nav to addEmployee.
Create a form and ajax
●
●
●
●
●
Create the form.
Create urls.py handler.
Create view for ajax.
Add jquery validation to the form.
Add ajax form handler (jquery).
Save new info to database
Next...
Import the database model:
Create the object or find it if it already exists:
Next, let’s put it in a table
● In our index.html create a table to display the
data.
Let’s get some data to fill it!
In the index view:
Template Tags in your table
Piece a Cake, Piece a Pie!
Voila!