Jazzmin https://django-jazzmin.readthedocs.io/
Showing posts with label Python-Django. Show all posts
Showing posts with label Python-Django. Show all posts
Saturday, January 8, 2022
Thursday, July 23, 2020
Python Django How to Create a simple Autocomplete Dropdown using HTML5 Datalist
Python Django How to Create a simple Autocomplete Dropdown using HTML5 Datalist
views.py
#views.py
from django.shortcuts import render
from myapp.models import City
def showlist(request):
results=City.objects.all
return render(request, "home.html",{"showcity":results})
models.py
#models.py
from django.db import models
class City(models.Model):
name = models.CharField(max_length=30)
def __str__(self):
return self.name
class Meta:
db_table = 'myapp_city'
templates/home.html
//templates/home.html
{% extends 'base.html' %}
{% block content %}
<p>Enter your City:</p>
<input type="text" list="citylist" Placeholder="Search City.." class="form-control" style="width:300px;">
<datalist id="citylist">
{% for results in showcity %}
<option value="{{ results.name}}">
{% endfor %}
</datalist>
{% endblock %}
templates/base.html
//templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<title>{% block title %}Python Django How to Create a simple Autocomplete Dropdown using HTML5 Datalist{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Cairocoders</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="">Home</a>
</div>
</div>
</nav>
<div class="container" style="padding:20px;">
<div class="col-md-12 well">
<h3 class="text-primary">Python Django How to Create a simple Autocomplete Dropdown using HTML5 Datalist</h3>
<hr style="border-top:1px dotted #ccc;"/>
{% block content %} {% endblock %}
</div>
</div>
</body>
</html>
Sunday, July 19, 2020
Python Django Simple Dropdown List Binding Populate Data
views.py
#views.py
from django.shortcuts import render
from myapp.models import City
def showlist(request):
results=City.objects.all
return render(request, "home.html",{"showcity":results})
models.py
#models.py
from django.db import models
class City(models.Model):
name = models.CharField(max_length=30)
def __str__(self):
return self.name
class Meta:
db_table = 'myapp_city'
urls.py
#urls.py
from django.contrib import admin
from myapp import views
from django.conf.urls import url
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('showlist/', views.showlist, name='showlist'),
]
templates/home.html
//templates/home.html
{% extends 'base.html' %}
{% block content %}
<p><b>City : </b>
<select name="city" class="form-control">
{% for results in showcity %}
<option value="{{ results.id}}">{{ results.name}}</option>
{% endfor %}
</select>
</p>
{% endblock %}
templates/base.html
//templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<title>{% block title %}Python Django Simple Dropdown List Binding Populate Data {% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Cairocoders</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="">Home</a>
</div>
</div>
</nav>
<div class="container" style="padding:20px;">
<div class="col-md-12 well">
<h3 class="text-primary">Python Django Simple Dropdown List Binding Populate Data</h3>
<hr style="border-top:1px dotted #ccc;"/>
{% block content %} {% endblock %}
</div>
</div>
</body>
</html>
Saturday, July 18, 2020
How to Use Chart-js with Django using jquery Ajax Bar Chart Example
How to Use Chart-js with Django using jquery Ajax Bar Chart Example
In this tutorial we are going to a Bar chart using jquery ajax based on data extracted from our models.
You can download it from Chart.js official website and use it locally, or you can use it from a CDN using the URL above.
https://www.chartjs.org/
npm CDN Files https://www.jsdelivr.com/package/npm/chart.js?path=dist
view.py
#view.py
from django.shortcuts import render
from django.db.models import Sum
from django.http import JsonResponse
from myapp.models import City
def home(request):
return render(request, 'home.html')
def population_chart(request):
labels = []
data = []
queryset = City.objects.values('name').annotate(population=Sum('population')).order_by('-population')
for entry in queryset:
labels.append(entry['name'])
data.append(entry['population'])
return JsonResponse(data={
'labels': labels,
'data': data,
})
urls.py
#urls.py
from django.contrib import admin
from myapp import views
from django.conf.urls import url
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.home, name='home'),
path('population-chart/', views.population_chart, name='population-chart'),
]
models.py
#models.py
from django.db import models
class City(models.Model):
name = models.CharField(max_length=30)
population = models.PositiveIntegerField()
def __str__(self):
return self.name
class Meta:
db_table = 'myapp_city'
templates/home.html
//templates/home.html
{% extends 'base.html' %}
{% block content %}
<div id="container" style="width: 75%;">
<canvas id="population-chart" data-url="{% url 'population-chart' %}"></canvas>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script>
$(function () {
var $populationChart = $("#population-chart");
$.ajax({
url: $populationChart.data("url"),
success: function (data) {
var ctx = $populationChart[0].getContext("2d");
new Chart(ctx, {
type: 'bar',
data: {
labels: data.labels,
datasets: [{
label: 'Population',
backgroundColor: '#6fae3f',
data: data.data
}]
},
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Population Bar Chart'
}
}
});
}
});
});
</script>
{% endblock %}
templates/base.html
//templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<title>{% block title %}Django Highcharts {% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Cairocoders</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="">Home</a>
</div>
</div>
</nav>
<div class="container" style="padding:20px;">
<div class="col-md-12 well">
<h3 class="text-primary">How to Use Chart-js with Django using jquery Ajax Bar Chart Example</h3>
<hr style="border-top:1px dotted #ccc;"/>
{% block content %} {% endblock %}
</div>
</div>
</body>
</html>
Tuesday, June 23, 2020
How to Use Chart-js with Django Example Pie Chart
How to Use Chart-js with Django Example Pie Chart
Chart.js is a open source JavaScript library that helps you render HTML5 charts.
In this tutorial we are going to Pie Chart based on data extracted from our models.
You can download it from Chart.js official website and use it locally, or you can use it from a CDN using the URL above.
https://www.chartjs.org/ myapp/models.py
#models.py
from django.db import models
class City(models.Model):
name = models.CharField(max_length=30)
population = models.PositiveIntegerField()
def __str__(self):
return self.name
class Meta:
db_table = 'myapp_city'
python manage.py makemigrations myapp python manage.py migrate
New database table added
CREATE TABLE myapp_city (
id INTEGER NOT NULL
PRIMARY KEY AUTOINCREMENT,
name VARCHAR (30) NOT NULL,
population INTEGER
); devproject/urls.py
#urls.py
from django.contrib import admin
from myapp import views
from django.conf.urls import url
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.home, name='home'),
path('pie-chart/', views.pie_chart, name='pie-chart'),
]
myapp/views.py
#views.py
from django.shortcuts import render, redirect
from myapp.models import City
def home(request):
return render(request, 'home.html')
def pie_chart(request):
labels = []
data = []
queryset = City.objects.order_by('-population')[:9]
for city in queryset:
labels.append(city.name)
data.append(city.population)
return render(request, 'pie_chart.html', {
'labels': labels,
'data': data,
})
myapp/templates/home.html
//templates/home.html
{% extends 'base.html' %}
{% block title %}Home {% endblock %}
{% block content %}
<h1>Pie Chart Population</h1>
<div id="container" style="width: 75%;">
<canvas id="pie-chart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script><script>
var config = {
type: 'pie',
data: {
datasets: [{
data: [1780000, 1630000, 582602, 416522, 411634, 318332, 318332, 306659, 233040],
backgroundColor: [
'#ff0000', '#0000ff', '#ff0080', '#73ffff', '#5c26ff', '#002db3', '#ffff26', '#4cff4c', '#ff00ff'
],
label: 'Population'
}],
labels: ['Manila City', 'Davao City', 'Makati', 'Pasay City', 'Angeles City', 'Tarlac City', 'Malolos', 'San Fernando', 'Olongapo City']
},
options: {
responsive: true
}
};
window.onload = function() {
var ctx = document.getElementById('pie-chart').getContext('2d');
window.myPie = new Chart(ctx, config);
};
</script>
{% endblock %}
myapp/templates/pie_chart.html
//templates/pie_chart.html
{% extends 'base.html' %}
{% block title %}Django Highcharts - Pie Chart{% endblock %}
{% block content %}
<h1>Pie Chart Population</h1>
<div id="container" style="width: 75%;">
<canvas id="pie-chart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script><script>
var config = {
type: 'pie',
data: {
datasets: [{
data: {{ data|safe }},
backgroundColor: [
'#ff0000', '#0000ff', '#ff0080', '#73ffff', '#5c26ff', '#002db3', '#ffff26', '#4cff4c', '#ff00ff'
],
label: 'Population'
}],
labels: {{ labels|safe }}
},
options: {
responsive: true
}
};
window.onload = function() {
var ctx = document.getElementById('pie-chart').getContext('2d');
window.myPie = new Chart(ctx, config);
};
</script>
{% endblock %}
myapp/templates/base.html
//templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<title>{% block title %}Django Highcharts {% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Cairocoders</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="">Home</a>
</div>
</div>
</nav>
<div class="container" style="padding:20px;">
<div class="col-md-12 well">
<h3 class="text-primary">How to Use Chart-js with Django Example Pie Chart</h3>
<hr style="border-top:1px dotted #ccc;"/>
{% block content %} {% endblock %}
</div>
</div>
</body>
</html>
Sunday, June 21, 2020
Django Simple Email Contact Form
Django Simple Email Contact Form
Create a simple contact form that sends email website.
Update urls.py
devproject/urls.py
#urls.py
from django.contrib import admin
from myapp import views
from django.conf.urls import url
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('myapp.urls')),
]
Next create a new myapp/urls.py file in our app. myapp/urls.py
#urls.py
from django.contrib import admin
from django.urls import path
from myapp.views import contactView, successView
urlpatterns = [
path('contact/', contactView, name='contact'),
path('success/', successView, name='success'),
]
demoapp/forms.py
#forms.py
from django import forms
class ContactForm(forms.Form):
from_email = forms.EmailField(required=True)
subject = forms.CharField(required=True)
message = forms.CharField(widget=forms.Textarea, required=True)
demoapp/views.py
#views.py
from django.shortcuts import render, redirect
from django.core.mail import send_mail, BadHeaderError
from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import render, redirect
from myapp.forms import ContactForm
def contactView(request):
if request.method == 'GET':
form = ContactForm()
else:
form = ContactForm(request.POST)
if form.is_valid():
subject = form.cleaned_data['subject']
from_email = form.cleaned_data['from_email']
message = form.cleaned_data['message']
try:
send_mail(subject, message, from_email, ['fidelbandoy622@gmail.com'])
except BadHeaderError:
return HttpResponse('Invalid header found.')
return redirect('success')
return render(request, "email.html", {'form': form})
def successView(request):
return HttpResponse('Success! Thank you for your message.')
myapp/templates/email.html
//templates/email.html
{% extends 'base.html' %}
{% block title %}Contact Us{% endblock %}
{% load crispy_forms_tags %}
{% block content %}
<h3>Contact Us</h3>
<form method="post">
{% csrf_token %}
{{ form|crispy }}
<div class="form-actions">
<button type="submit" class="btn btn-success">Send</button>
</div>
</form>
{% endblock %}
myapp/templates/base.html
//templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<title>{% block title %}Django Email Contact Form {% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Cairocoders</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="">Home</a>
</div>
</div>
</nav>
<div class="container" style="padding:20px;">
<div class="col-md-12 well">
<h3 class="text-primary">Django Simple Email Contact Form</h3>
<hr style="border-top:1px dotted #ccc;"/>
{% block content %} {% endblock %}
</div>
</div>
</body>
</html>
add 'crispy_forms', #pip install django-crispy-forms to settings.py INSTALLED_APPS
How to use Django Slug Field
How to use Django Slug Field
In this tutorial we will add slugs to a Django website.
A slug is a short label for something, containing only letters, numbers, underscores or hyphens. They’re generally used in URLs.
models.py
#models.py
from django.db import models
from django.urls import reverse
from django.utils.text import slugify
class Article(models.Model):
title = models.CharField(max_length=255)
body = models.TextField()
slug = models.SlugField(max_length=200, unique=True)
def __str__(self):
return self.title
def get_absolute_url(self):
return reverse('article_detail', kwargs={'slug': self.slug})
def save(self, *args, **kwargs):
value = self.title
self.slug = slugify(value, allow_unicode=True)
super().save(*args, **kwargs)
create a migrations file for this change, then add it to our database via migrate.python manage.py makemigrations myapp
python manage.py migrate
New database table added
CREATE TABLE myapp_article (
id INTEGER NOT NULL
PRIMARY KEY AUTOINCREMENT,
title VARCHAR (255) NOT NULL,
body TEXT NOT NULL,
slug VARCHAR (50) UNIQUE
); urls.py
#urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
from django.conf.urls import url
from myapp.views import ArticleListView, ArticleDetailView
urlpatterns = [
path('admin/', admin.site.urls),
path('', ArticleDetailView.as_view(), name='article_detail'),
path('', ArticleListView.as_view(), name='article_list'),
]
admins.py
#admin.py
from django.contrib import admin
from myapp.models import Article
class ArticleAdmin(admin.ModelAdmin):
list_display = ('title', 'body',)
prepopulated_fields = {'slug': ('title',)}
admin.site.register(Article, ArticleAdmin)
views.py
#views.py
from django.shortcuts import render, redirect
from django.views.generic import ListView, DetailView
from myapp.models import Article
class ArticleListView(ListView):
model = Article
template_name = 'article_list.html'
class ArticleDetailView(DetailView):
model = Article
template_name = 'article_detail.html'
templates/article_list.html
#templates/article_list.html
{% extends 'base.html' %}
{% block pagetitle %}Blog{% endblock %}
{% block content %}
<h1>Articles</h1>
{% for article in object_list %}
<ul>
<li><a href="{{ article.get_absolute_url }}">{{ article.title }}</a></li>
</ul>
{% endfor %}
{% endblock %}
templates/article_detail.html
//templates/article_detail.html
{% extends 'base.html' %}
{% block pagetitle %}Blog{% endblock %}
{% block content %}
<div>
<h2>{{ object.title }}</h2>
<p>{{ object.body }}</p>
</div>
{% endblock %}
templates/base.html
//templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<title>{% block title %}How to use Django Slug Field {% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Cairocoders</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="">Home</a>
</div>
</div>
</nav>
<div class="container" style="padding:20px;">
<div class="col-md-12 well">
<h3 class="text-primary">How to use Django Slug Field</h3>
<hr style="border-top:1px dotted #ccc;"/>
{% block content %} {% endblock %}
</div>
</div>
</body>
</html>
Friday, June 19, 2020
Django Basic Search
Django Basic Search
In this tutorial we will implement basic search in a Django website models.py
#models.py
from django.db import models
class Book(models.Model):
FANTASY = 1
MYSTERY = 2
ROMANCE = 3
BOOK_TYPES = (
(FANTASY, 'Fantasy'),
(MYSTERY, 'Mystery'),
(ROMANCE, 'Romance'),
)
title = models.CharField(max_length=50)
publication_date = models.DateField(null=True)
author = models.CharField(max_length=30, blank=True)
price = models.DecimalField(max_digits=5, decimal_places=2)
pages = models.IntegerField(blank=True, null=True)
book_type = models.PositiveSmallIntegerField(choices=BOOK_TYPES)
def __str__(self):
return self.title
class Meta:
db_table = 'books'
admin.py
#admin.py
from django.contrib import admin
from myapp.models import Book
class BookAdmin(admin.ModelAdmin):
list_display = ['title', 'publication_date', 'author', 'price', 'book_type']
admin.site.register(Book, BookAdmin)
urls.py
#urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
from django.conf.urls import url
from myapp.views import HomePageView, SearchResultsView
urlpatterns = [
path('admin/', admin.site.urls),
path('search/', SearchResultsView.as_view(), name='search_results'),
path('', HomePageView.as_view(), name='home'),
]
views.py
#views.py
from django.shortcuts import render, redirect
from django.views.generic import TemplateView, ListView
from myapp.models import Book
from django.db.models import Q
class HomePageView(TemplateView):
template_name = 'home.html'
# class SearchResultsView(ListView):
# model = Book
# template_name = 'search_results.html'
class SearchResultsView(ListView):
model = Book
template_name = 'search_results.html'
#queryset = Book.objects.filter(title__icontains='The Hobbit')
#def get_queryset(self): # new
# return Book.objects.filter(title__icontains='The Hobbit')
# def get_queryset(self):
# return Book.objects.filter(
# Q(title__icontains='The Hobbit') | Q(author__icontains='Cairocoders Ednalan')
# )
def get_queryset(self):
query = self.request.GET.get('q')
object_list = Book.objects.filter(
Q(title__icontains=query) | Q(author__icontains=query)
)
return object_list
templates/home.html
//templates/home.html
{% extends 'base.html' %}
{% block title %}Home {% endblock %}
{% block content %}
<h2>Django Search</h2>
<form action="{% url 'search_results' %}" method="get">
<p><input name="q" type="text" placeholder="Search..." class="form-control"></p>
<p><button type="submit" class="btn btn-success">Submit</button></p>
</form>
{% endblock %}
templates/base.html
//templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<title>{% block title %}Django Search {% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{% url 'home' %}">Cairocoders</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="">Home</a>
</div>
</div>
</nav>
<div class="container" style="padding:20px;">
<div class="col-md-12 well">
<h3 class="text-primary">Django Basic Search</h3>
<hr style="border-top:1px dotted #ccc;"/>
{% block content %} {% endblock %}
</div>
</div>
</body>
</html>
templates/search_results.html
//templates/search_results.html
{% extends 'base.html' %}
{% block title %}Search Result {% endblock %}
{% block content %}
<h3>Search Results</h3>
<ul>
{% for books in object_list %}
<li>
{{ books.title }}, {{ books.author }}
</li>
{% endfor %}
</ul>
{% endblock %}
Thursday, June 18, 2020
Django Crispy Forms Advanced Form Rendering
Django Crispy Forms Advanced Form Rendering
Install it using pip:
pip install django-crispy-forms
Add it to your INSTALLED_APPS and select which styles to use:
settings.py
INSTALLED_APPS = [
'crispy_forms',
]
CRISPY_TEMPLATE_PACK = 'bootstrap4' views.py
#views.py
from django.shortcuts import render, redirect
from myapp.forms import RegsitrationForm
def home(request):
if request.method == 'POST':
form = RegsitrationForm(request.POST)
if form.is_valid():
#form.save()
messages.success(request, 'New success!')
return redirect('/home')
else:
messages.error(request, 'Invalid Please try again.')
else:
form = RegsitrationForm()
return render(request, 'home.html', {'form': form})
def form2(request):
if request.method == 'POST':
form = RegsitrationForm(request.POST)
if form.is_valid():
#form.save()
messages.success(request, 'New success!')
return redirect('/form2')
else:
messages.error(request, 'Invalid Please try again.')
else:
form = RegsitrationForm()
return render(request, 'form2.html', {'form': form})
settings.py
settings.py
#settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'crispy_forms', #pip install django-crispy-forms
'myapp',
]
CRISPY_TEMPLATE_PACK = 'bootstrap4'
#forms.py
from django import forms
STATES = (
('', 'Choose...'),
('CA', 'California'),
('AK', 'Alaska'),
('AZ', 'Arizona')
)
class RegsitrationForm(forms.Form):
email = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Email'}))
password = forms.CharField(widget=forms.PasswordInput())
address_1 = forms.CharField(
label='Address',
widget=forms.TextInput(attrs={'placeholder': '1234 Main St'})
)
address_2 = forms.CharField(
widget=forms.TextInput(attrs={'placeholder': 'Apartment, studio, or floor'})
)
city = forms.CharField()
state = forms.ChoiceField(choices=STATES)
zip_code = forms.CharField(label='Zip')
check_me_out = forms.BooleanField(required=False)
urls.py
#urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
from django.conf.urls import url
urlpatterns = [
path('admin/', admin.site.urls),
path('home/', views.home, name='home'),
path('form2/', views.form2, name='form2'),
]
templates/home.html
//templates/home.html
{% extends 'base.html' %}
{% block title %}Form Example 1 - Basic Crispy Form Rendering {% endblock %}
{% load crispy_forms_tags %}
{% block content %}
<h2>Form Example 1 - Basic Crispy Form Rendering</h2>
<form method="post" novalidate>
{% csrf_token %}
{{ form|crispy }}
<button type="submit">Register</button>
</form>
{% endblock %}
templates/home.html
//templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<title>{% block title %}Django Crispy Forms Advanced Form Rendering {% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{% url 'home' %}">Cairocoders</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="">Form 1</a>
<a class="nav-item nav-link" href="">Form 2</a>
</div>
</div>
</nav>
<div class="container" style="padding:20px;">
<div class="col-md-12 well">
<h3 class="text-primary">Django Crispy Forms Advanced Form Rendering</h3>
<hr style="border-top:1px dotted #ccc;"/>
{% block content %} {% endblock %}
</div>
</div>
</body>
</html>
//templates/form2.html
{% extends 'base.html' %}
{% block title %}Form Example 2 - Custom Fields Placement {% endblock %}
{% load crispy_forms_tags %}
{% block content %}
<h2>Form Example 2 - Custom Fields Placement</h2>
<form method="post">
{% csrf_token %}
<div class="form-row">
<div class="form-group col-md-6 mb-0">
{{ form.email|as_crispy_field }}
</div>
<div class="form-group col-md-6 mb-0">
{{ form.password|as_crispy_field }}
</div>
</div>
{{ form.address_1|as_crispy_field }}
{{ form.address_2|as_crispy_field }}
<div class="form-row">
<div class="form-group col-md-6 mb-0">
{{ form.city|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.state|as_crispy_field }}
</div>
<div class="form-group col-md-2 mb-0">
{{ form.zip_code|as_crispy_field }}
</div>
</div>
{{ form.check_me_out|as_crispy_field }}
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
{% endblock %}
Wednesday, June 17, 2020
How to Implement Token Authentication using Django REST Framework
How to Implement Token Authentication using Django REST Framework
In this tutorial you are going to learn how to implement Token-based authentication using Django REST Framework (DRF).
Install Django REST Framework DRF:
pip install djangorestframework
settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework', #pip install djangorestframework
'rest_framework.authtoken',
'myapp',
]
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': [
'rest_framework.authentication.TokenAuthentication',
],
}
migrate the database python manage.py migrate views.py
#views.py
from django.shortcuts import render, redirect
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework.permissions import IsAuthenticated
class HelloView(APIView):
permission_classes = (IsAuthenticated,) #Generated token c4fe47947247e684dd0e065ea674e1645525d891 for user ednalan23
def get(self, request):
content = {'message': 'Hello, World!'}
return Response(content)
urls.py
#urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
from django.conf.urls import url
from django.urls import include, path
from rest_framework.authtoken.views import obtain_auth_token
urlpatterns = [
path('admin/', admin.site.urls),
path('hello/', views.HelloView.as_view(), name='hello'),
path('api-token-auth/', obtain_auth_token, name='api_token_auth'),
]
I use HTTPie https://httpie.org/ Python command line tool:
http http://127.0.0.1:8000/hello/
http post http://127.0.0.1:8000/api-token-auth/ username=ednalan23 password=ednalan23
http GET http://127.0.0.1:8000/hello/ "Authorization: Token c4fe47947247e684dd0e065ea674e1645525d891"
Tuesday, June 9, 2020
How to Use RESTful APIs with Django
How to Use RESTful APIs with Django
The REST acronym stands for Representational State Transfer, which is an architectural design.
Usually when we use the term RESTful
API stands for Application Programming Interface, which is a software application that we interact programmatically, instead of using a graphical interface.
RESTful API available the information you store in your databases using a common format, such as XML or JSON.
Example ipstack Location API https://ipstack.com/
urls.py
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index),
] views.py
#views.py
from django.shortcuts import render, redirect
import requests
# def index(request):
# response = requests.get('http://api.ipstack.com/110.54.244.203?access_key=7f851d241fee253a7abbbdd1ca27f73a')
# geodata = response.json()
# return render(request, 'home.html', {
# 'ip': geodata['ip'],
# 'country': geodata['country_name']
# })
def index(request):
response = requests.get('http://api.ipstack.com/110.54.244.203?access_key=7f851d241fee253a7abbbdd1ca27f73a')
geodata = response.json()
return render(request, 'home.html', {
'ip': geodata['ip'],
'country': geodata['country_name'],
'latitude': geodata['latitude'],
'longitude': geodata['longitude'],
'api_key': 'AIzaSyB6QBZAvLhPI-e-U8k3rT0MDBn2-w8lqAw',
})
templates/home.html
//templates/home.html
{% extends 'base.html' %}
{% block content %}
<h2>GEO API</h2>
<p>Your ip address is <strong>{{ ip }}</strong>, and you are probably in <strong>{{ country }}</strong> right now.</p>
<iframe width="900"
height="430"
frameborder="0"
style="border:0"
src="https://www.google.com/maps/embed/v1/view?center={{ latitude }},{{ longitude }}&zoom=8&key={{ api_key }}"
allowfullscreen></iframe>
{% endblock %}
templates/base.html
/templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}"/>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<title>{% block title %}How to Use RESTful APIs with Django{% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand">Cairocoders</a>
</div>
</nav>
<div class="container">
<div class="col-md-12 well">
<h3 class="text-primary">How to Use RESTful APIs with Django</h3>
<hr style="border-top:1px dotted #ccc;"/>
{% block content %} {% endblock %}
</div>
</div>
</body>
</html>
Monday, June 8, 2020
How to Create Django Admin List Actions - Apply 10% discount and Export to csv
How to Create Django Admin List Actions - Apply 10% discount and Export to csv
All Django Admin list views already a default action Delete selected.
In this short tutorial I will show how create your own list actions.
Database Table
CREATE TABLE books (
id INTEGER PRIMARY KEY,
title VARCHAR (50),
publication_date DATE,
author VARCHAR (30),
price DECIMAL,
pages INTEGER (11),
book_type INTEGER
);
models.py
#models.py
from django.db import models
class Book(models.Model):
FANTASY = 1
MYSTERY = 2
ROMANCE = 3
BOOK_TYPES = (
(FANTASY, 'Fantasy'),
(MYSTERY, 'Mystery'),
(ROMANCE, 'Romance'),
)
title = models.CharField(max_length=50)
publication_date = models.DateField(null=True)
author = models.CharField(max_length=30, blank=True)
price = models.DecimalField(max_digits=5, decimal_places=2)
pages = models.IntegerField(blank=True, null=True)
book_type = models.PositiveSmallIntegerField(choices=BOOK_TYPES)
class Meta:
db_table = 'books'
admin.py
#admin.py
from django.contrib import admin
import decimal, csv
from django.http import HttpResponse
from django.db.models import F
from myapp.models import Book
def export_books(modeladmin, request, queryset):
response = HttpResponse(content_type='text/csv')
response['Content-Disposition'] = 'attachment; filename="books.csv"'
writer = csv.writer(response)
writer.writerow(['Title', 'Publication Date', 'Author', 'Price', 'Pages', 'Book Type'])
books = queryset.values_list('title', 'publication_date', 'author', 'price', 'pages', 'book_type')
for book in books:
writer.writerow(book)
return response
export_books.short_description = 'Export to csv'
class BookAdmin(admin.ModelAdmin):
list_display = ['title', 'publication_date', 'author', 'price', 'book_type']
actions = ['apply_discount', export_books]
def apply_discount(self, request, queryset):
queryset.update(price=F('price') * decimal.Decimal('0.9'))
apply_discount.short_description = 'Apply 10%% discount'
admin.site.register(Book, BookAdmin)
Saturday, June 6, 2020
Django Chained Dropdown List - Select Box using jQuery Ajax Country City
In this tutorial we are going to learn dynamic dependent select box using jquery, ajax Country and City.
This type of feature mostly use if you have use Country State City or you have working with Category
and you want to load Sub Category of particular category. models.py
#models.py
from django.db import models
class Country(models.Model):
name = models.CharField(max_length=30)
def __str__(self):
return self.name
class Meta:
# managed = True
db_table = 'myapp_country'
class City(models.Model):
country = models.ForeignKey(Country, on_delete=models.CASCADE)
name = models.CharField(max_length=30)
def __str__(self):
return self.name
class Meta:
# managed = True
db_table = 'myapp_city'
class Person(models.Model):
name = models.CharField(max_length=100)
birthdate = models.DateField(null=True, blank=True)
country = models.ForeignKey(Country, on_delete=models.SET_NULL, null=True)
city = models.ForeignKey(City, on_delete=models.SET_NULL, null=True)
def __str__(self):
return self.name
class Meta:
# managed = True
db_table = 'myapp_person'
Database Table
CREATE TABLE myapp_country (
id INTEGER NOT NULL
PRIMARY KEY AUTOINCREMENT,
name VARCHAR (30) NOT NULL
);
INSERT INTO myapp_country (id, name) VALUES (1, 'Philippines');
INSERT INTO myapp_country (id, name) VALUES (2, 'United States');
INSERT INTO myapp_country (id, name) VALUES (3, 'Russia');
INSERT INTO myapp_country (id, name) VALUES (4, 'Brazil');
INSERT INTO myapp_country (id, name) VALUES (5, 'United Kingdom');
CREATE TABLE myapp_city (
id INTEGER NOT NULL
PRIMARY KEY AUTOINCREMENT,
name VARCHAR (30) NOT NULL,
country_id INTEGER NOT NULL
REFERENCES myapp_country (id) DEFERRABLE INITIALLY DEFERRED
);
INSERT INTO myapp_city (id, name, country_id) VALUES (1, 'Olongapo City', 1);
INSERT INTO myapp_city (id, name, country_id) VALUES (2, 'Angeles City', 1);
INSERT INTO myapp_city (id, name, country_id) VALUES (3, 'Davao City', 1);
INSERT INTO myapp_city (id, name, country_id) VALUES (4, 'Pasay City', 1);
INSERT INTO myapp_city (id, name, country_id) VALUES (5, 'Manila City', 1);
INSERT INTO myapp_city (id, name, country_id) VALUES (6, 'New York', 2);
INSERT INTO myapp_city (id, name, country_id) VALUES (7, 'San Francisco', 2);
INSERT INTO myapp_city (id, name, country_id) VALUES (8, 'Los Angeles', 2);
INSERT INTO myapp_city (id, name, country_id) VALUES (9, 'Chicago', 2);
INSERT INTO myapp_city (id, name, country_id) VALUES (10, 'Seattle', 2);
INSERT INTO myapp_city (id, name, country_id) VALUES (11, 'Moscow', 3);
INSERT INTO myapp_city (id, name, country_id) VALUES (12, 'Saint Petersburg', 3);
INSERT INTO myapp_city (id, name, country_id) VALUES (13, 'Yekaterinburg', 3);
INSERT INTO myapp_city (id, name, country_id) VALUES (14, 'Kazan', 3);
INSERT INTO myapp_city (id, name, country_id) VALUES (15, 'Krasnodar', 3);
INSERT INTO myapp_city (id, name, country_id) VALUES (16, 'Sao Paulo', 4);
INSERT INTO myapp_city (id, name, country_id) VALUES (17, 'Rio de Janeiro', 4);
INSERT INTO myapp_city (id, name, country_id) VALUES (18, 'Belo Horizonte', 4);
INSERT INTO myapp_city (id, name, country_id) VALUES (19, 'Curitiba', 4);
INSERT INTO myapp_city (id, name, country_id) VALUES (20, 'Recife', 4);
INSERT INTO myapp_city (id, name, country_id) VALUES (21, 'London', 5);
INSERT INTO myapp_city (id, name, country_id) VALUES (22, 'Huddersfield', 5);
INSERT INTO myapp_city (id, name, country_id) VALUES (23, 'Glasgow', 5);
INSERT INTO myapp_city (id, name, country_id) VALUES (24, 'Edinburgh', 5);
INSERT INTO myapp_city (id, name, country_id) VALUES (25, 'Cambridge', 5);
CREATE TABLE myapp_person (
id INTEGER NOT NULL
PRIMARY KEY AUTOINCREMENT,
name VARCHAR (100) NOT NULL,
birthdate DATE,
city_id INTEGER REFERENCES myapp_city (id) DEFERRABLE INITIALLY DEFERRED,
country_id INTEGER REFERENCES myapp_country (id) DEFERRABLE INITIALLY DEFERRED
);
urls.py
#urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
from django.conf.urls import url
from django.urls import include, path
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.PersonListView.as_view(), name='person_changelist'),
path('add/', views.PersonCreateView.as_view(), name='person_add'),
path('/', views.PersonUpdateView.as_view(), name='person_change'),
path('ajax/load-cities/', views.load_cities, name='ajax_load_cities'),
]
views.py
#views.py
from django.shortcuts import render, redirect
from django.views.generic import ListView, CreateView, UpdateView
from django.urls import reverse_lazy
from myapp.models import Person, City
from myapp.forms import PersonForm
class PersonListView(ListView):
model = Person
context_object_name = 'people'
template_name = 'person_list.html'
class PersonCreateView(CreateView):
model = Person
form_class = PersonForm
template_name = 'person_form.html'
success_url = reverse_lazy('person_changelist')
class PersonUpdateView(UpdateView):
model = Person
form_class = PersonForm
template_name = 'person_form.html'
success_url = reverse_lazy('person_changelist')
def load_cities(request):
country_id = request.GET.get('country')
cities = City.objects.filter(country_id=country_id).order_by('name')
return render(request, 'city_dropdown_list_options.html', {'cities': cities})
def load_cities(request): This view will be used via AJAX requests.forms.py
#forms.py
from django import forms
from myapp.models import Person, City
class PersonForm(forms.ModelForm):
class Meta:
model = Person
fields = ('name', 'birthdate', 'country', 'city')
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['city'].queryset = City.objects.none()
if 'country' in self.data:
try:
country_id = int(self.data.get('country'))
self.fields['city'].queryset = City.objects.filter(country_id=country_id).order_by('name')
except (ValueError, TypeError):
pass # invalid input from the client; ignore and fallback to empty City queryset
elif self.instance.pk:
self.fields['city'].queryset = self.instance.country.city_set.order_by('name')
templates/person_list.html
//templates/person_list.html
{% extends 'base.html' %}
{% block title %}Django Chained Dropdown List - Select Box using jQuery Ajax Country City{% endblock %}
{% block content %}
<table class="table table-striped custab">
<thead>
<a href="{% url 'person_add' %}" class="btn btn-primary btn-xs pull-right"><b>+</b> Add new Person</a>
<tr>
<th>Name</th>
<th>Birthdate</th>
<th>Country</th>
<th>City</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
{% for person in people %}
<tr>
<td><a href="{% url 'person_change' person.pk %}">{{ person.name }}</a></td>
<td>{{ person.birthdate }}</td>
<td>{{ person.country.name }}</td>
<td>{{ person.city.name }}</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td>
</tr>
{% empty %}
<tr>
<td colspan="4">No person in the database. <a href="{% url 'person_add' %}">Add the first person</a>.</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
templates/person_form.html
//templates/person_form.html
{% extends 'base.html' %}
{% block content %}
{% load widget_tweaks %}
<h2>Person Form</h2>
<form method="post" id="personForm" data-cities-url="{% url 'ajax_load_cities' %}" novalidate>
{% csrf_token %}
<table>
<!-- {{ form.as_table }} -->
</table>
{% for field in form.visible_fields %}
<div class="form-group">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field|add_class:'form-control' }}
{% for error in field.errors %}
<span class="help-block">{{ error }}</span>
{% endfor %}
</div>
{% endfor %}
<button type="submit" class="btn btn-success">Save</button>
<a href="{% url 'person_changelist' %}">Home</a>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#id_country").change(function () {
var url = $("#personForm").attr("data-cities-url");
var countryId = $(this).val();
$.ajax({
url: url,
data: {
'country': countryId
},
success: function (data) {
$("#id_city").html(data);
}
});
});
</script>
{% endblock %}
templates/city_dropdown_list_options.html
//templates/city_dropdown_list_options.html
<option value="">---------</option>
{% for city in cities %}
<option value="{{ city.pk }}">{{ city.name }}</option>
{% endfor %}
templates/base.html
//templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}"/>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<title>{% block title %}Django Chained Dropdown List - Select Box using jQuery Ajax Country City{% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand">Cairocoders</a>
</div>
</nav>
<div class="container">
<div class="col-md-12 well">
<h3 class="text-primary">Django Chained Dropdown List - Select Box using jQuery Ajax Country City</h3>
<hr style="border-top:1px dotted #ccc;"/>
{% block content %} {% endblock %}
</div>
</div>
<style>
.custab{
border: 1px solid #ccc;
padding: 5px;
margin: 5% 0;
box-shadow: 3px 3px 2px #ccc;
transition: 0.5s;
}
.custab:hover{
box-shadow: 3px 3px 0px transparent;
transition: 0.5s;
}
</style>
</body>
</html>
settings.py
INSTALLED_APPS = [
'myapp',
'widget_tweaks', #pip install django-widget-tweaks https://pypi.org/project/django-widget-tweaks/
]
Friday, June 5, 2020
Django How to Add reCAPTCHA to a Django Site
Django How to Add reCAPTCHA to a Django Site
Google’s reCAPTCHA is a very popular solution to protect your application or website against bots and spam.
In this tutorial I will show how to How to Add reCAPTCHA to a Django Site
First, register your application in the reCAPTCHA admin. https://www.google.com/recaptcha/admin
settings.py
#settings.py
from django.contrib.messages import constants as messages
MESSAGE_TAGS = {
messages.DEBUG: 'alert-info',
messages.INFO: 'alert-info',
messages.SUCCESS: 'alert-success',
messages.WARNING: 'alert-warning',
messages.ERROR: 'alert-danger',
}
GOOGLE_RECAPTCHA_SECRET_KEY = '6LelrwAVAAAAAPDmyx9HFbLaPdvf4ZkhfjLsm_q8'
views.py
#views.py
import json
import urllib
from django.shortcuts import render, redirect
from django.conf import settings
from django.contrib import messages
from myapp.models import Comment
from myapp.forms import CommentForm
def comments(request):
comments_list = Comment.objects.order_by('-created_at')
if request.method == 'POST':
form = CommentForm(request.POST)
if form.is_valid():
recaptcha_response = request.POST.get('g-recaptcha-response')
url = 'https://www.google.com/recaptcha/api/siteverify'
values = {
'secret': settings.GOOGLE_RECAPTCHA_SECRET_KEY,
'response': recaptcha_response
}
data = urllib.parse.urlencode(values).encode()
req = urllib.request.Request(url, data=data)
response = urllib.request.urlopen(req)
result = json.loads(response.read().decode())
if result['success']:
form.save()
messages.success(request, 'New comment added with success!')
else:
messages.error(request, 'Invalid reCAPTCHA. Please try again.')
return redirect('comments')
else:
form = CommentForm()
return render(request, 'comments.html', {'comments': comments_list, 'form': form})
models.py
#models.py
from django.db import models
class Comment(models.Model):
text = models.TextField(max_length=1000)
created_at = models.DateTimeField(auto_now_add=True)
class Meta:
db_table = "comments"
forms.py
#forms.py
from django import forms
from myapp.models import Comment
class CommentForm(forms.ModelForm):
text = forms.CharField(
widget=forms.Textarea(attrs={'class': 'form-control', 'rows': '3'}),
required=True,
max_length=1000
)
class Meta:
model = Comment
fields = ('text', )
urls.py
#urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
from django.conf.urls import url
urlpatterns = [
path('admin/', admin.site.urls),
url(r'^comments/$', views.comments, name='comments'),
]
templates/comments.html
//templates/comments.html
{% extends 'base.html' %}
{% block javascript %}
<script src='https://www.google.com/recaptcha/api.js'></script>
{% endblock %}
{% block content %}
<h1 class="page-header">Comments</h1>
<ul>
{% for comment in comments %}
<li><small>({{ comment.created_at }})</small> {{ comment.text }}</li>
{% endfor %}
</ul>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li class="{{ message.tags }}">{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
<hr>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<div class="g-recaptcha" data-sitekey="6LelrwAVAAAAAMKd-jsIvtpFJNkVD0jJF6BhQEJP"></div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
{% endblock %}
templates/base.html
//templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}"/>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<title>{% block title %}Django How to Add reCAPTCHA to a Django Site{% endblock %}</title>
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand">Cairocoders</a>
</div>
</nav>
<div class="container">
<div class="col-md-12 well">
<h3 class="text-primary">Django How to Add reCAPTCHA to a Django Site</h3>
<hr style="border-top:1px dotted #ccc;"/>
{% block content %}
{% endblock %}
</div>
</div>
{% block javascript %} {% endblock %}
<style>
ul {list-style:none;}
.alert-success, .alert-warning, .alert-info, .alert-danger {
background-repeat: no-repeat;
background-position: 10px center;
height: 40px;
text-transform: uppercase;
font-size: 11px;
line-height: 22px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 50px;
}
.alert-success {
background-color: #EBF8D6;
border: 1px solid #A6DD88;
color: #539B2D;
background-image: url({% static 'img/accept00.png' %});
}
.alert-warning {
background-color: #FFECE6;
border: 1px solid #FF936F;
color: #842100;
background-image: url({% static 'img/delete00.png' %});
}
.alert-info {
background-color: #D3EEF1;
border: 1px solid #81CDD8;
color: #369CAB;
background-image: url({% static 'img/info0000.png' %});
}
.alert-danger {
background-color: #FFFBCC;
border: 1px solid #FFF35E;
color: #C69E00;
background-image: url({% static 'img/warning0.png' %});
}
.close-notification {
width: 16px;
height: 16px;
position: absolute;
background: url({% static 'img/close000.png' %}) no-repeat;
top: 4px;
right: 4px;
cursor: pointer;
}
</style>
</body>
</html>
Saturday, May 30, 2020
Django How to Add User Profile To Admin
Django How to Add User Profile To Admin
You want to store a few more data related to User. This is how to extend the the default Django User model User Profile admin
Database Table
CREATE TABLE myapp_profile (
id INTEGER PRIMARY KEY,
user_id INTEGER,
location STRING (200),
birthdate DATE,
role INTEGER
);
models.py
#models.py
from django.db import models
from django.contrib.auth.models import User
from django.db.models.signals import post_save
from django.dispatch import receiver
class Profile(models.Model):
STUDENT = 1
TEACHER = 2
SUPERVISOR = 3
ROLE_CHOICES = (
(STUDENT, 'Student'),
(TEACHER, 'Teacher'),
(SUPERVISOR, 'Supervisor'),
)
user = models.OneToOneField(User, on_delete=models.CASCADE)
location = models.CharField(max_length=30, blank=True)
birthdate = models.DateField(null=True, blank=True)
role = models.PositiveSmallIntegerField(choices=ROLE_CHOICES, null=True, blank=True)
def __str__(self): # __unicode__ for Python 2
return self.user.username
class Meta:
db_table = "myapp_profile"
@receiver(post_save, sender=User)
def create_or_update_user_profile(sender, instance, created, **kwargs):
if created:
Profile.objects.create(user=instance)
instance.profile.save()
admins.py
#admin.py
from django.contrib import admin
from myapp.models import Profile
from django.contrib.auth.admin import UserAdmin
from django.contrib.auth.models import User
class ProfileInline(admin.StackedInline): #StackedInline normally is used for formsets
model = Profile
can_delete = False
verbose_name_plural = 'Profile'
fk_name = 'user'
class CustomUserAdmin(UserAdmin):
inlines = (ProfileInline, )
list_display = ('username', 'email', 'first_name', 'last_name', 'is_staff', 'get_location') #Add Profile Fields to List View
list_select_related = ('profile', )
def get_location(self, instance):
return instance.profile.location
get_location.short_description = 'Location'
def get_inline_instances(self, request, obj=None): #get_inline_instances display the inlines only in the edit form
if not obj:
return list()
return super(CustomUserAdmin, self).get_inline_instances(request, obj)
admin.site.unregister(User)
admin.site.register(User, CustomUserAdmin)
Friday, May 29, 2020
Django How to Implement CRUD (Create Read Update Delete) Using Ajax and Json
Django How to Implement CRUD (Create Read Update Delete) Using Ajax and Json
CRUD, it stand for Create Read Update Delete.
Models.py
#models.py
from django.db import models
class Product(models.Model):
FILLOW = 1
FOOD = 2
TOYS = 3
PRODUCT_TYPES = (
(FILLOW, 'Pillow'),
(FOOD, 'Food'),
(TOYS, 'Toys'),
)
name = models.CharField(max_length=50)
dateadded = models.DateField(blank=True, null=True)
productcode = models.CharField(max_length=30, blank=True)
price = models.DecimalField(max_digits=5, decimal_places=2)
quantity = models.IntegerField(blank=True, null=True)
category_type = models.PositiveSmallIntegerField(choices=PRODUCT_TYPES, blank=True, null=True)
class Meta:
db_table = "myapp_product"
Database TableCREATE TABLE myapp_product (
id INTEGER PRIMARY KEY,
name STRING (200),
productcode STRING (150),
price INTEGER,
quantity INTEGER,
category_type STRING (50),
dateadded DATE
);
Views.py
#views.py
from django.shortcuts import render, redirect, get_object_or_404
from myapp.models import Product
from myapp.forms import ProductForm
from django.http import JsonResponse
from django.template.loader import render_to_string
def index(request):
return render(request, 'index.html')
def product_list(request):
products = Product.objects.all()
return render(request, 'product_list.html', {'products': products})
def save_product_form(request, form, template_name):
data = dict()
if request.method == 'POST':
if form.is_valid():
form.save()
data['form_is_valid'] = True
products = Product.objects.all()
data['html_product_list'] = render_to_string('includes/partial_product_list.html', {
'products': products
})
else:
data['form_is_valid'] = False
context = {'form': form}
data['html_form'] = render_to_string(template_name, context, request=request)
return JsonResponse(data)
def product_create(request):
if request.method == 'POST':
form = ProductForm(request.POST)
else:
form = ProductForm()
return save_product_form(request, form, 'includes/partial_product_create.html')
def product_update(request, pk):
product = get_object_or_404(Product, pk=pk)
if request.method == 'POST':
form = ProductForm(request.POST, instance=product)
else:
form = ProductForm(instance=product)
return save_product_form(request, form, 'includes/partial_product_update.html')
def product_delete(request, pk):
product = get_object_or_404(Product, pk=pk)
data = dict()
if request.method == 'POST':
product.delete()
data['form_is_valid'] = True
products = Product.objects.all()
data['html_product_list'] = render_to_string('includes/partial_product_list.html', {
'products': products
})
else:
context = {'product': product}
data['html_form'] = render_to_string('includes/partial_product_delete.html', context, request=request)
return JsonResponse(data)
forms.py
#forms.py
from django import forms
from myapp.models import Product
class ProductForm(forms.ModelForm):
class Meta:
model = Product
fields = ('name', 'dateadded', 'productcode', 'price', 'quantity', 'category_type', )
urls.py
#urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
from django.conf.urls import url
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index),
url(r'^products/$', views.product_list, name='product_list'),
url(r'^create/$', views.product_create, name='product_create'),
url(r'^products/(?P\d+)/update/$', views.product_update, name='product_update'),
url(r'^products/(?P\d+)/delete/$', views.product_delete, name='product_delete'),
]
settings.py pip install django-widget-tweaks
#settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp',
'widget_tweaks', #pip install django-widget-tweaks
]
//templates/index.html
{% extends 'base.html' %}
{% block content %}
<h1 class="page-header">Django How to Implement CRUD (Create Read Update Delete) Using Ajax and Json</h1>
<p class="lead">See the example clicking in the Product menu.</p>
<p class="lead"><a href="/products">Product List</a>.</p>
{% endblock %}
//templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}"/>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<title>{% block title %}Django How to Implement CRUD (Create Read Update Delete) Using Ajax and Json{% endblock %}</title>
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand">Cairocoders</a>
</div>
</nav>
<div class="container">
<div class="col-md-12 well">
<h3 class="text-primary">Django How to Implement CRUD (Create Read Update Delete) Using Ajax and Json</h3>
<hr style="border-top:1px dotted #ccc;"/>
{% block content %}
{% endblock %}
</div>
</div>
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
{% block javascript %} {% endblock %}
</body>
</html>
//templates/product_list.html
{% extends 'base.html' %}
{% load static %}
{% block javascript %}
<script src="{% static 'js/script.js' %}"></script>
{% endblock %}
{% block content %}
<h1 class="page-header">Products</h1>
<p>
<button type="button" class="btn btn-primary js-create-product" data-url="{% url 'product_create' %}">
<span class="glyphicon glyphicon-plus"></span>
New Product
</button>
</p>
<table class="table" id="product-table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Date Added</th>
<th>Category</th>
<th>Product Code</th>
<th>Quantiry</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
{% include 'includes/partial_product_list.html' %}
</tbody>
</table>
<div class="modal fade" id="modal-product">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
{% endblock %}
//templates/includes/partial_product_create.html
<form method="post" action="{% url 'product_create' %}" class="js-product-create-form">
{% csrf_token %}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Create a new product</h4>
</div>
<div class="modal-body">
{% include 'includes/partial_product_form.html' %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Create product</button>
</div>
</form>
//templates/includes/partial_product_delete.html
<form method="post" action="{% url 'product_delete' product.id %}" class="js-product-delete-form">
{% csrf_token %}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Confirm product deletion</h4>
</div>
<div class="modal-body">
<p class="lead">Are you sure you want to delete the product <strong>{{ product.name }}</strong>?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger">Delete product</button>
</div>
</form>
//templates/includes/partial_product_form.html
{% load widget_tweaks %}
{% for field in form %}
<div class="form-group{% if field.errors %} has-error{% endif %}">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{% render_field field class="form-control" %}
{% for error in field.errors %}
<p class="help-block">{{ error }}</p>
{% endfor %}
</div>
{% endfor %}
//templates/includes/partial_product_list.html
{% for product in products %}
<tr>
<td>{{ product.id }}</td>
<td>{{ product.name }}</td>
<td>{{ product.dateadded }}</td>
<td>{{ product.get_category_type_display }}</td>
<td>{{ product.productcode }}</td>
<td>{{ product.quantity }}</td>
<td>{{ product.price }}</td>
<td style="width: 150px">
<button type="button"
class="btn btn-warning btn-sm js-update-product"
data-url="{% url 'product_update' product.id %}">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<button type="button"
class="btn btn-danger btn-sm js-delete-product"
data-url="{% url 'product_delete' product.id %}">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>
</td>
</tr>
{% empty %}
<tr>
<td colspan="8" class="text-center bg-warning">No product</td>
</tr>
{% endfor %}
//templates/includes/partial_product_update
<form method="post" action="{% url 'product_update' form.instance.pk %}" class="js-product-update-form">
{% csrf_token %}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Update product</h4>
</div>
<div class="modal-body">
{% include 'includes/partial_product_form.html' %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Update product</button>
</div>
</form>
//static/js/script.js
$(document).ready(function(){
var loadForm = function () {
var btn = $(this);
$.ajax({
url: btn.attr("data-url"),
type: 'get',
dataType: 'json',
beforeSend: function () {
$("#modal-product .modal-content").html("");
$("#modal-product").modal("show");
},
success: function (data) {
$("#modal-product .modal-content").html(data.html_form);
}
});
};
var saveForm = function () {
var form = $(this);
$.ajax({
url: form.attr("action"),
data: form.serialize(),
type: form.attr("method"),
dataType: 'json',
success: function (data) {
if (data.form_is_valid) {
$("#product-table tbody").html(data.html_product_list);
$("#modal-product").modal("hide");
}
else {
$("#modal-product .modal-content").html(data.html_form);
}
}
});
return false;
};
/* Binding */
$(".js-create-product").click(loadForm);
$("#modal-product").on("submit", ".js-product-create-form", saveForm);
// Update product
$("#product-table").on("click", ".js-update-product", loadForm);
$("#modal-product").on("submit", ".js-product-update-form", saveForm);
// Delete product
$("#product-table").on("click", ".js-delete-product", loadForm);
$("#modal-product").on("submit", ".js-product-delete-form", saveForm);
});
Sunday, May 24, 2020
Change Password - How to Use Django Messages Framework
Change Password - How to Use Django Messages Framework
Django project already comes with the messages framework installed. In this article I will show How to Use Django Messages Framework
INSTALLED_APPS
django.contrib.messages
MIDDLEWARE or MIDDLEWARE_CLASSES in older versions:
django.contrib.sessions.middleware.SessionMiddleware
django.contrib.messages.middleware.MessageMiddleware
TEMPLATES
context_processors
django.contrib.messages.context_processors.messages
Settings.py
#settings.py
from django.contrib.messages import constants as messages
MESSAGE_TAGS = {
messages.DEBUG: 'alert-info',
messages.INFO: 'alert-info',
messages.SUCCESS: 'alert-success',
messages.WARNING: 'alert-warning',
messages.ERROR: 'alert-danger',
}
Usage views.py
#views.py
from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from django.contrib import messages
from django.contrib.auth import update_session_auth_hash
from django.contrib.auth.forms import PasswordChangeForm
@login_required
def password(request):
if request.method == 'POST':
form = PasswordChangeForm(request.user, request.POST)
if form.is_valid():
user = form.save()
update_session_auth_hash(request, user) # Important!
messages.success(request, 'Your password was successfully updated!')
return redirect('/password')
else:
messages.error(request, 'Please correct the error below.')
else:
form = PasswordChangeForm(request.user)
return render(request, 'change_password.html', {'form': form })
the template change_password.html
//templates/change_password.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{% block title %} Change Password {% endblock title %}</title>
{% load static %}
</head>
<body>
<div style="padding:25px;">
<p><h1>Change Password - How to Use Django Messages Framework</h1></p>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li class="{{ message.tags }}">{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
<form method="post">
{% csrf_token %}
{{ form }}
<button type="submit">Save changes</button>
</form>
</div>
<style>
ul {list-style:none;}
.alert-success, .alert-warning, .alert-info, .alert-danger {
background-repeat: no-repeat;
background-position: 10px center;
height: 20px;
text-transform: uppercase;
font-size: 11px;
line-height: 22px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 50px;
}
.alert-success {
background-color: #EBF8D6;
border: 1px solid #A6DD88;
color: #539B2D;
background-image: url({% static 'img/accept00.png' %});
}
.alert-warning {
background-color: #FFECE6;
border: 1px solid #FF936F;
color: #842100;
background-image: url({% static 'img/delete00.png' %});
}
.alert-info {
background-color: #D3EEF1;
border: 1px solid #81CDD8;
color: #369CAB;
background-image: url({% static 'img/info0000.png' %});
}
.alert-danger {
background-color: #FFFBCC;
border: 1px solid #FFF35E;
color: #C69E00;
background-image: url({% static 'img/warning0.png' %});
}
.close-notification {
width: 16px;
height: 16px;
position: absolute;
background: url({% static 'img/close000.png' %}) no-repeat;
top: 4px;
right: 4px;
cursor: pointer;
}
</style>
</body>
</html>
//If the error message was added, the output would be something like that:
<ul class="messages">
<li class="alert-danger">Please correct the error below.</li>
</ul>
#urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
from django.conf.urls import url
urlpatterns = [
path('admin/', admin.site.urls),
path('password',views.password),
]
Django How to Use django-import-export
Django How to Use django-import-export
The django-import-export library supports multiple formats, including xls, csv, json, yaml, and all other formats
Installation
pip install django-import-export
Update your settings.py:
INSTALLED_APPS = (
...
'import_export',
) models.py
#models.py
from django.db import models
class Member(models.Model):
firstname = models.CharField(max_length=200)
lastname = models.CharField(max_length=200)
email = models.EmailField(blank=True)
birth_date = models.DateField()
contact = models.CharField(max_length=100, blank=True)
class Meta:
db_table = "web_member"
resources.py
#resources.py
from import_export import resources
from myapp.models import Member
class MemberResource(resources.ModelResource):
class Meta:
model = Member
Django Admin use ImportExportModelAdmin instead of ModelAdmin. admin.py
#admin.py
from django.contrib import admin
from import_export.admin import ImportExportModelAdmin
from myapp.models import Member
@admin.register(Member)
class MemberAdmin(ImportExportModelAdmin):
list_display = ("firstname", "lastname", "email", "birth_date")
pass
#urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
from django.conf.urls import url
urlpatterns = [
path('admin/', admin.site.urls),
#path('',views.index),
url(r'^export-exl/$', views.export, name='export'),
url(r'^export-csv/$', views.export, name='export'),
]
Views.py
#views.py
from django.shortcuts import render, redirect
from django.http import HttpResponse
from myapp.resources import MemberResource
def export(request):
member_resource = MemberResource()
dataset = member_resource.export()
#response = HttpResponse(dataset.csv, content_type='text/csv')
#response['Content-Disposition'] = 'attachment; filename="member.csv"'
#response = HttpResponse(dataset.json, content_type='application/json')
#response['Content-Disposition'] = 'attachment; filename="persons.json"'
response = HttpResponse(dataset.xls, content_type='application/vnd.ms-excel')
response['Content-Disposition'] = 'attachment; filename="persons.xls"'
return response
Subscribe to:
Posts (Atom)
