Shrestha7/base.html

## base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bookstore</title>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      {% block content %}
      {% endblock %}
    </div>
    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/plugin.js' %}"></script>
    {% block javascript %}
    {% endblock %}
  </body>
</html>

## book_create.html
{% load crispy_forms_tags %}
<form method="post" data-url="{% url 'book_create' %}" class="create-form">
	{% csrf_token %}
		<div class="modal-header">
		<h5 class="modal-title" >Create Book</h5>
		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
		<span aria-hidden="true">&times;</span>
		</button>
		</div>
		<div class="modal-body">
		{{form|crispy}}
		</div>
		<div class="modal-footer">
		<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
		<button type="button" class="btn btn-primary">Save changes</button>
		</div>
</form>

## book_list.html
{% extends 'base.html' %}

{% block content %}
  <h1 class="page-header">Books</h1>
  <button class="btn btn-primary show-form">
  <span class="glyphicon glyphicon-plus"></span>
  New Book
  </button>
  <table class="table" id="book-table">
    <thead>
      <tr>
        <th>#</th>
        <th>Title</th>
        <th>Author</th>
        <th>Type</th>
        <th>Publication date</th>
        <th>Pages</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      {% for book in books %}
        <tr>
          <td>{{ book.id }}</td>
          <td>{{ book.title }}</td>
          <td>{{ book.author }}</td>
          <td>{{ book.get_book_type_display }}</td>
          <td>{{ book.publication_date }}</td>
          <td>{{ book.pages }}</td>
          <td>{{ book.price }}</td>
        </tr>
      {% empty %}
        <tr>
          <td colspan="7" class="text-center bg-warning">No book</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

  <div class="modal fade" id="modal-book">
    <div class="modal-dialog">
      <div class="modal-content"></div>
    </div>
  </div>
{% endblock %}

## forms.py
from django import forms
from .models import Book

class BookForm(forms.ModelForm):
	publication_date = forms.DateTimeInput()
	class Meta:
		model = Book
		fields = ('title', 'publication_date', 'author', 'price', 'pages', 'book_type', )

## models.py
from django.db import models

class Book(models.Model):
    HARDCOVER = 1
    PAPERBACK = 2
    EBOOK = 3
    BOOK_TYPES = (
        (HARDCOVER, 'Hardcover'),
        (PAPERBACK, 'Paperback'),
        (EBOOK, 'E-book'),
    )
    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)

## plugin.js
$(document).ready(function(){
	$('.show-form').click(function(){
		$.ajax({
			url: '/books/create',
			type: 'get',
			dataType:'json',
			beforeSend: function(){
				$('#modal-book').modal('show');
			},
			success: function(data){
				$('#modal-book .modal-content').html(data.html_form);
			}
		})
	})
})

## urls.py
from django.conf.urls import url, include
from . import views

urlpatterns = [
    url(r'^books/$', views.book_list, name='book_list'),
    url(r'^books/create$', views.book_create, name='book_create'),
]

## views.py
from django.shortcuts import render
from .models import Book
from .forms import BookForm
from django.http import JsonResponse
from django.template.loader import render_to_string

def book_list(request):
	books = Book.objects.all()
	context = {
	'books': books
	}
	return render(request, 'book_list.html',context)

def book_create(request):
	form = BookForm()
	context = {
	'form':form
	}
	html_form = render_to_string('book_create.html',context,request=request)
	return JsonResponse({'html_form':html_form})
	{% load static %}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bookstore</title>
	<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
	</head>
	<body>
	<div class="container">
	{% block content %}
	{% endblock %}
	</div>
	<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
	<script src="{% static 'js/bootstrap.min.js' %}"></script>
	<script src="{% static 'js/plugin.js' %}"></script>
	{% block javascript %}
	{% endblock %}
	</body>
	</html>
	{% load crispy_forms_tags %}
	<form method="post" data-url="{% url 'book_create' %}" class="create-form">
	{% csrf_token %}
	<div class="modal-header">
	<h5 class="modal-title" >Create Book</h5>
	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	<span aria-hidden="true">×</span>
	</button>
	</div>
	<div class="modal-body">
	{{form\|crispy}}
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
	<button type="button" class="btn btn-primary">Save changes</button>
	</div>
	</form>
	{% extends 'base.html' %}

	{% block content %}
	<h1 class="page-header">Books</h1>
	<button class="btn btn-primary show-form">
	<span class="glyphicon glyphicon-plus"></span>
	New Book
	</button>
	<table class="table" id="book-table">
	<thead>
	<tr>
	<th>#</th>
	<th>Title</th>
	<th>Author</th>
	<th>Type</th>
	<th>Publication date</th>
	<th>Pages</th>
	<th>Price</th>
	</tr>
	</thead>
	<tbody>
	{% for book in books %}
	<tr>
	<td>{{ book.id }}</td>
	<td>{{ book.title }}</td>
	<td>{{ book.author }}</td>
	<td>{{ book.get_book_type_display }}</td>
	<td>{{ book.publication_date }}</td>
	<td>{{ book.pages }}</td>
	<td>{{ book.price }}</td>
	</tr>
	{% empty %}
	<tr>
	<td colspan="7" class="text-center bg-warning">No book</td>
	</tr>
	{% endfor %}
	</tbody>
	</table>

	<div class="modal fade" id="modal-book">
	<div class="modal-dialog">
	<div class="modal-content"></div>
	</div>
	</div>
	{% endblock %}
	from django import forms
	from .models import Book

	class BookForm(forms.ModelForm):
	publication_date = forms.DateTimeInput()
	class Meta:
	model = Book
	fields = ('title', 'publication_date', 'author', 'price', 'pages', 'book_type', )
	from django.db import models

	class Book(models.Model):
	HARDCOVER = 1
	PAPERBACK = 2
	EBOOK = 3
	BOOK_TYPES = (
	(HARDCOVER, 'Hardcover'),
	(PAPERBACK, 'Paperback'),
	(EBOOK, 'E-book'),
	)
	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)
	$(document).ready(function(){
	$('.show-form').click(function(){
	$.ajax({
	url: '/books/create',
	type: 'get',
	dataType:'json',
	beforeSend: function(){
	$('#modal-book').modal('show');
	},
	success: function(data){
	$('#modal-book .modal-content').html(data.html_form);
	}
	})
	})
	})
	from django.conf.urls import url, include
	from . import views

	urlpatterns = [
	url(r'^books/$', views.book_list, name='book_list'),
	url(r'^books/create$', views.book_create, name='book_create'),
	]
	from django.shortcuts import render
	from .models import Book
	from .forms import BookForm
	from django.http import JsonResponse
	from django.template.loader import render_to_string

	def book_list(request):
	books = Book.objects.all()
	context = {
	'books': books
	}
	return render(request, 'book_list.html',context)

	def book_create(request):
	form = BookForm()
	context = {
	'form':form
	}
	html_form = render_to_string('book_create.html',context,request=request)
	return JsonResponse({'html_form':html_form})