9. Django 1.8 Server Build - CentOS 7 hosted on VPS - Views (templates and css)

django.png

(追記) (追記ここまで)

bogotobogo.com site search:

Note

In previous chapter (8. Django 1.8 Server Build - CentOS 7 hosted on VPS - Model 3 (using shell)), we learned how to interface with all the objects that are stored in our models.

The materials we learned in the previous chapter will be the basis of linking models to views.

In this chapter, we'll use shell to update our models and views.

(追記) (追記ここまで)

static/images

We'll use two images, and put them under static folder:

tree1.png

templates directory

Also, we need a directory called templates under our app car folder:

tree2.png

Our project's TEMPLATES setting describes how Django will load and render templates. The default settings file configures a DjangoTemplates backend whose APP_DIRS option is set to True.

TEMPLATES = [
 {
 'BACKEND': 'django.template.backends.django.DjangoTemplates',
 'DIRS': [],
 'APP_DIRS': True,
 'OPTIONS': {
 'context_processors': [
 'django.template.context_processors.debug',
 'django.template.context_processors.request',
 'django.contrib.auth.context_processors.auth',
 'django.contrib.messages.context_processors.messages',
 ],
 },
 },
]

By convention DjangoTemplates looks for a templates subdirectory in each of the INSTALLED_APPS.

Note that the root directory djangotest/ (under django directory) is just a project container, and we can rename it anything we like.

The inner djangotest/ directory is the actual Python package for our project.

The car is our app, and this directory structure will house the car application.

car/views.py

from django.shortcuts import render_to_response
from django.template import RequestContext
from car.models import Car
def CarsAll(request):
 cars = Car.objects.all().order_by('name')
 context = {'cars': cars}
 return render_to_response('carsall.html',context, context_instance=RequestContext(request))

The package django.shortcuts collects helper functions and classes that "span" multiple levels of MVC. In other words, these functions/classes introduce controlled coupling for convenience's sake.

note that we're importing Car class from models.py of car app.

The render_to_response(() renders a given template with a given context dictionary and returns an HttpResponse object with that rendered text.

What we've done here?

We get some information from our database:

cars = Car.objects.all().order_by('name')

Then, we pass the info to our template which will be defined soon. Also, we render it:

return render_to_response('carsall.html',context, context_instance=RequestContext(request))

Now that our view is using barsall.html template, we may want to define it. In the next section, we'll define the base.html first, and then will work on the barsall.html template.

templates/base.html

car/templates/base.html, defines a simple HTML skeleton document.

<html>
<head>
 <link rel="stylesheet" type="text/css" href="/static/css/car.css" />
 {% block extrahead %}{% endblock %}
</head>
<body>
 <div id="pageContainer">
 {% block content %}
 {% endblock %}
 </div>
</body>
</html>

We used tags, and it looks like this: {% tag %}. Tags are more complex than variables: Some create text in the output, some control flow by performing loops or logic, and some load external information into the template to be used by later variables.

Some tags such as block require beginning and ending tags

(i.e. {% tag %} ... tag contents ... {% endtag %})

templates/carsall.html

Remember the carsall.html is called from base.html, so we need to work on it.

It looks like this:

{% extends "base.html" %}
{% block content %}
 <div id="carslist">
 {% for car in cars %}
 {{ car }}
 {% endfor %}
 </div>>
{% endblock %}

The extends tag is the key here. It tells the template engine that this template "extends" another template. When the template system evaluates this template, first it locates the parent - in this case, base.html.

At that point, the template engine will notice the tags in base.html and replace those blocks with the contents of the child template.

tree3.png

urls.py

In the previous section, we defined CarsAll() in car/views.py, and we want to put it into our urls.py in car app:

from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
 url(r'^admin/', include(admin.site.urls)),
 url(r'^cars/$', 'car.views.CarsAll'),
]

http://djangotest.sfvue.com/cars/

Let's restart our web server:

$ sudo apachectl restart

From the work so far, we get the following list of cars in order:

List-of-cars.png

Actually, the output is the alphabetic order of the following page:

car-list-admin.png

car.css

Now we want to work on /srv/www/djangotest.sfvue.com/public_html/static/css/car.css:

tree4.png

We'll add a background image (/static/images/bg.jpg) to the page:

body {
 background-attachment: fixed;
 background-color: #000000;
 background-image: url(/static/images/bg.jpg);
 background-position:center top;
 background-repeat: no-respect;
 color: #FFFFFF;
 margin: 0;
 padding: 0;
}

background.png

We want to add a center image:

body {
 background-attachment: fixed;
 background-color: #000000;
 background-image: url(/static/images/bg.jpg);
 background-position:center top;
 background-repeat: no-respect;
 color: #FFFFFF;
 margin: 0;
 padding: 0;
}
#pageContainer {
 background: url(/static/images/ct.jpg) repeat-y scroll center top #000000;
 margin: 0 auto;
 position: relative;
 width: 800px;
 min-height: 800px;
}

Here is our new page with the added image:

bg-ct.png

Continued in 10. Views 2 (home page and more templates)

Please enable JavaScript to view the comments powered by Disqus.

Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization

YouTubeMy YouTube channel

Sponsor Open Source development activities and free contents for everyone.

Thank you.

- K Hong

(追記) (追記ここまで)

Django 1.8

Introduction - Install Django and Project Setup

Creating and Activating Models

Hello World A - urls & views

Hello World B - templates

Hello World C - url dispatcher

Hello World D - Models and SQLite Database

MVC - Hello World

Hello World on a Shared Host A

Hello World on a Shared Host B

Hello World - Admin Site Setup

virtualenv

Creating test project on virtualenv

Test project's settings.py

Creating Blog app and setting up models

Blog app - syncdb A

Blog app - syncdb B

Blog app - views and urls

Blog app - templates

Blog app - class based templates

Image upload sample code - local host

Authentication on Shared Host using FastCGI

User Registration on Shared Host A

User Registration with a Customized Form on Shared Host B

Blogs on Shared Host

Serving Django app with uWSGI and Nginx

Image upload sample code - shared host

Managing (Deploying) Static files (CSS, Images, Javascript) on Shared Host

Forum application on a Shared Host

Django Python Social Auth : Getting App ID (OAuth2) - Facebook, Twitter, and Google

Django: Python social auth, Facebook, Twitter, and Google Auth

Django: Python social auth, Facebook, Twitter, and Google Auth with Static files

...

Django 1.8 hosted on Linode VPS ==>

1. Setup CentOS 7 hosted on VPS

1B. Setup CentOS 7 hosted on VPS (multi-domain hosting setup) - Name server and Zone File settings (from GoDaddy to Linode)

2. ssh login and firewall

3. Apache Install

4. Install and Configure MariaDB Database server & PHP

5. Install and Configure Django

6. Model

7. Model 2 : populate tables, list_display, and search_fields

8. Model 3 (using shell)

9. Views (templates and css)

10. Views 2 (home page and more templates)

11. TinyMCE

12. TinyMCE 2

13. ImageField/FileField : Serving image/video files uploaded by a user

14. User Authentication 1 (register & forms)

15. User Authentication 2 (login / logout)

16. User Authentication 3 (password reset) - Sent from Email (gmail) setup etc.

17. User Authentication 4 (User profile & @login_required decorator)

18. User Authentication 5 (Facebook login)

19. User Authentication 6 (Google login)

20. User Authentication 7 (Twitter login)

21. User Authentication 8 (Facebook/Google/Twitter login buttons)

22. Facebook open graph API timeline fan page custom tab 1

23. Facebook Open Graph API Timeline Fan Page Custom Tab 2 (SSL certificate setup)

24. Facebook open graph API timeline fan page custom tab 3 (Django side - urls.py, settings.py, and views.py)

...

A sample production site Django 1.8.7: sfvue.com / einsteinish.com ==>

A sample production app (sfvue.com) with virtualenv and Apache

2. Upgrading to Django 1.8.7 sfvue.com site sample with virtualenv and Apache

(*) Django 1.8.7 einsteinish.com site - errors and fixes

Django 1.8.12 pytune.com site - local with Apache mod_wsgi

Django 1.8.12 pytune.com site - local with Nginx and uWSGI

Django 1.8.12 pytune.com site - deploy to AWS with Nginx and uWSGI

Django Haystack with Elasticsearch and Postgres

Django Compatibility Cheat Sheet

Sponsor Open Source development activities and free contents for everyone.

Thank you.

- K Hong

(追記) (追記ここまで)

Python tutorial