Gain insights into the Django Admin interface, learn about automatic generation, data management, custom functionalities, advanced UI customization, and explore admin rights permission management.

The Django Admin Ultimate Guide_Stripe API Integration copy.png

Django.tar.gz

django

django-lesson1

django-faker

django-rebranding

django-user-management

django-rebranding-changelist

django-migrations

django-add-view-index

empty

django-rebranding-old

In this course, you will learn the basics of the Django Admin interface, a great tool to build a powerful admin interface quickly for your Django project. 

First, you will learn how to automatically generate the admin interface for your Django models, how to populate fake data, and then search or filter data with some advice to improve performance. 

Next, you will see how to extend the functionalities of the admin interface such as adding custom fields, add intermediate pages, or creating custom actions like exporting data in CSV format.

After that, you will also explore basic and advanced UI customization such as adding charts or modifying the index page.Finally, you will have a look at the Django admin rights permission management.

The Django Admin for Web Developers

## Plotting charts

Now that you know how to extend the Django admin templates, you can imagine what you want as new features. 


As an example, you will learn how to integrate the [chart.js](https://www.chartjs.org/) library in your `Author` list page view.

In your `sample_app/templates/admin/sample_app/author/change_list.html` you will find the `{{block.super}}` and load the `chart.js` library (<b>line 7 in unedited file</b>).

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"/>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"> </script>
```

Instead of having to fetch them from the internet, the static files have been placed in the project (in the `sample_app/static/admin/assets` folder), and these static files will be used. For this, you will include the following code snippet:

```html
<link rel="stylesheet" type="text/css" href="{% static 'admin/assets/Chart.min.css' %}" />
<script src="{% static 'admin/assets/Chart.bundle.min.js' %}"></script>
```

Now you will add the javascript code to load [chart.js sample code](https://www.chartjs.org/docs/latest/getting-started/usage.html).

But before that, you need to inject the javascript code once your document content has loaded. For the insertion of the code, you will write the following at the end of your `sample_app/templates/admin/sample_app/author/change_list.html` file (**line 94 of unedited file**):

```html
<script>
document.addEventListener('DOMContentLoaded', () => {

const ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

});
</script>
```

In your block `{% block content %}`, you will create your canvas (**line 45 of unedited file**):

```html
<canvas id="myChart" width="400" height="50"></canvas>
```
Now, if you refresh your `Author` list page:

# Plotting charts

Now that you know how to extend the Django admin templates, you can imagine what you want as new features. 


As an example, you will learn how to integrate the [chart.js](https://www.chartjs.org/) library in your `Author` list page view.

In your `sample_app/templates/admin/sample_app/author/change_list.html` you will find the `{{block.super}}` and load the `chart.js` library (<b>line 7 in unedited file</b>).

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"/>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"> </script>
```

Instead of having to fetch them from the internet, the static files have been placed in the project (in the `sample_app/static/admin/assets` folder), and these static files will be used. For this, you will include the following code snippet:

```html
<link rel="stylesheet" type="text/css" href="{% static 'admin/assets/Chart.min.css' %}" />
<script src="{% static 'admin/assets/Chart.bundle.min.js' %}"></script>
```

Now you will add the javascript code to load [chart.js sample code](https://www.chartjs.org/docs/latest/getting-started/usage.html).

But before that, you need to inject the javascript code once your document content has loaded. For the insertion of the code, you will write the following at the end of your `sample_app/templates/admin/sample_app/author/change_list.html` file (**line 94 of unedited file**):

```html
<script>
document.addEventListener('DOMContentLoaded', () => {

const ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

});
</script>
```

In your block `{% block content %}`, you will create your canvas (**line 45 of unedited file**):

```html
<canvas id="myChart" width="400" height="50"></canvas>
```
Now, if you refresh your `Author` list page:

Learn to add static charts to your Django admin page.

Getting Started

Design Customization

Advanced Customization

Access and Rights Management

Conclusion

Plotting Charts

Plotting charts