2016-10-18 create some Django Templates : base.html

See also

The Django Template templates/base.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
{# https://docs.djangoproject.com/en/dev/ref/templates/builtins/#std:templatetag-static #}
{% load static %}
{# https://docs.djangoproject.com/en/dev/ref/templates/builtins/#tz #}
{% load tz %}

<!DOCTYPE html>
{# https://www.w3.org/TR/2014/REC-html5-20141028/syntax.html#the-doctype #}
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
{# https://www.w3.org/TR/html5/semantics.html#the-html-element #}
    <head>
        {# https://www.w3.org/TR/html5/document-metadata.html#attr-meta-charset #}
        <meta charset="utf-8">
        {# https://n.survol.fr/n/x-ua-compatible-ieedge #}
        <!-- meta http-equiv="X-UA-Compatible" content="IE=edge" -->
        {# https://www.w3.org/TR/html5/dom.html#the-title-attribute #}
        {# https://www.w3.org/TR/html5/document-metadata.html#the-title-element #}
        <title>
            {% block head_title %}
            {% endblock %}
        </title>

        {# https://www.w3.org/TR/html5/document-metadata.html#attr-meta-name #}                                                                 
                        
        {# https://developer.mozilla.org/fr/docs/Mozilla/Mobile/Balise_meta_viewport #}
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        
        {# CSS #}
        {% block stylesheet %}
            {# https://docs.djangoproject.com/en/dev/ref/templates/language/#template-inheritance #}
            {# If you need to get the content of the block from the parent template, the {{ block.super }} variable will do the trick #}
            {# {{ block.super }} #}
            
            {# https://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released (2016-07-25) Added support for jQuery 3 #}
            {# https://www.bootstrapcdn.com/ #}
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
                
        {% endblock  %}



    </head>
    <body class="{% block bodyclass %} {% endblock %}">  
          
                
        <div id="conteneur" class="container">                  
            {% block content %} 
            {% endblock %}

            {% block footer %}
            {% endblock %}
                            
        </div> <!-- id conteneur -->   

        {# Javascript #}
        {% block javascript %}

            {# a employer dans les templates fils->{{ block.super }} #}
            {# https://docs.djangoproject.com/en/dev/ref/templates/language/#template-inheritance #}
            {# If you need to get the content of the block from the parent template, the {{ block.super }} variable will do the trick #}
            <!-- Liaison aux scripts Javascript -->
            <!-- CDN JQuery Placer jquery avant bootstrap, select2 -->
            {# https://github.com/jquery/jquery-migrate/#README #}
            {# https://blog.jquery.com/2016/09/22/jquery-3-1-1-released/ #}
            {# https://code.jquery.com/ #}
            <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
            <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>

            <!-- Code javascript pour bootstrap 3.3.7 (2016-07-25) -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>

        {% endblock javascript %}

        {# p.155 Adding AJAX actions with jQuery, Django By Example from Antonio Melé #}
        {# https://www.amazon.com/Django-Example-Antonio-Mele/dp/1784391913/ #}
        <script>
            $(document).ready(function(){
                {% block domready %}
                {% endblock %}
            });
        </script>
       
    </body>
</html>

|   ajax_selects_singers_db
|   manage.py
|
+---projet_ajax
|   |   settings.py
|   |   urls.py
|   |   wsgi.py
|   |   __init__.py
|
+---singers
|   |   admin.py
|   |   apps.py
|   |   forms.py
|   |   lookups.py
|   |   models.py
|   |   tests.py
|   |   urls.py
|   |   views.py
|   |   __init__.py
|   |
|   +---migrations
|   |   |   0001_initial.py
|   |   |   0002_auto_20161017_1612.py
|   |   |   0003_auto_20161017_1632.py
|   |   |   __init__.py
|   |
|
\---templates
        base.html
        search_form.html

The Django Template singers/templates/song/update.html

See also

The template templates/singers/song/update.html extends the templatesbase.html base template.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{% extends "base.html" %}
{% load static %}
{% load staticfiles %}
{% load crispy_forms_tags %}

{% block content %}

<h1>Update of the song {{ song.title }} {{ song.group }} </h1>

{# https://docs.djangoproject.com/en/dev/topics/forms/ #}
<form id="song_update" method="post" action=".">
    {% csrf_token %}
    {{ form }}

    {# https://django-ajax-selects.readthedocs.io/en/latest/Outside-of-Admin.html #}
    {{ form.media }}
    <input type="submit" name="btn_update"  value="Update" class="btn btn-success btn-block" />
</form>


{% if messages %}
    <ul class="messages">
        {% comment %} https://getbootstrap.com/components/#alerts {% endcomment %}
        {% for message in messages %}
        <!--li{% if message.tags %} class="{{ message.tags }}"{% endif %} -->
            {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
                <div class="alert alert-danger" role="alert">{{ message }}</div>
            {% elif message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}
                <div class="alert alert-success" role="alert">{{ message }}</div>
            {% else %}
                <div class="alert alert-info" role="alert">{{ message }}</div>
            {% endif %}
        <!-- /li -->
        {% endfor %}
    </ul>
{% endif %}


{% endblock content %}

Add the django-extensions and ipython modules

pip install django-extensions ipython

In the projet_ajax/settings.py file:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # https://django-extensions.readthedocs.org/en/latest
    'django_extensions',

New django commands

[django_extensions]
    admin_generator
    clean_pyc
    clear_cache
    compile_pyc
    create_app
    create_command
    create_jobs
    create_template_tags
    describe_form
    drop_test_database
    dumpscript
    export_emails
    find_template
    generate_secret_key
    graph_models
    mail_debug
    notes
    passwd
    pipchecker
    print_settings
    print_user_for_session
    reset_db
    runjob
    runjobs
    runprofileserver
    runscript
    runserver_plus
    set_default_site
    set_fake_emails
    set_fake_passwords
    shell_plus
    show_template_tags
    show_templatetags
    show_urls
    sqlcreate
    sqldiff
    sqldsn
    sync_s3
    syncdata
    unreferenced_files
    update_permissions
    validate_templates

The shell_plus command is very usefull.

../../../_images/shell_plus_command.png

Get the first song

In [1]:  first_song = Song.objects.all().first()

In [2]: first_song.id
Out[2]: 1

Try the URL : http://127.0.0.1:8000/singers/song/1/update

See also

Not very nice and not very easy to use.

../../../_images/first_update_song.png

Conclusion

Try the django-autocomplete-light module.