Django Python Notification Message Popup using toastr JS Example
Hi Dev,
This article goes in detailed on django python notification message popup using toastr js example. I’m going to show you about how to use toastr js in django python. you'll learn toastr js notification message popup in django python example. This post will give you simple example of notification message popup using toastr js django app.
Here i explained simply step by step example of notification message popup using toastr js django.
Step 1 : Create a ProjectIn this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:
django-admin startproject exampleStep 2 : Create a App
python3 manage.py startapp coreStep 3 : Creating the Views
In this step, we need to create the views for performing fetch record to the database.Open the core/views.py file and add:
core/views.py
from django.shortcuts import render
from django.contrib import messages
# Create your views here.
def index(request):
messages.success(request, 'Welcome To Dashboard!')
return render(request, 'index.html')
Step 4 : Creating the Templates
Next, open the core/templates/index.html file and the add:
<!DOCTYPE html>
<html>
<head>
<title>How To Notification Message PopUp Using Toastr Js Plugin Django Example - Tuts-Station.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script type="text/javascript">
{% if messages %}
document.addEventListener("DOMContentLoaded", function(event) {
toastr.options = { "closeButton": true, "debug": false, "newestOnTop": true,
"progressBar": true, "positionClass": "toast-top-right", "preventDuplicates": true,
"onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "5000",
"extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear",
"showMethod": "fadeIn", "hideMethod": "fadeOut" };
{% autoescape off %}
{% for msg in messages %}
toastr.{{ msg.level_tag }}("{{ msg }}");
{% endfor %}
{% endautoescape %}
});
{% endif %}
</script>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-header">
<h5>Dashboard</h5>
</div>
<div class="card-body">
<h5>Welcome to the Tuts-Station.com</h5>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Step 5 : Creating URLs
In this section, we’ll create the urls to access our core views.Go to the urls.py core/urls.py file and update it as follows:
core/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index),
]
Next, we will require the modify the urls.py your root preoject folder lets update the file.
example/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('core.urls')),
]
Run the Server
In this step, we’ll run the local development server for playing with our app without deploying it to the web.
python manage.py runserver
Next, go to the http://localhost:8000/ address with a web browser.
I Hope It will help you....