Python Django How to setup MySQL Databse with DataTables

Python Django How to setup MySQL Databse with DataTables

Bootstrap 5

https://getbootstrap.com/docs/5.0/getting-started/introduction/

https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Jquery

https://jquery.com/download/

CDN : jsDelivr CDN

https://www.jsdelivr.com/package/npm/jquery

https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js

Datatables

https://datatables.net/

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

Register App myapp and
Connect to MySQL Database
devtest/settings.py

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

//devproject/settings.py INSTALLED_APPS = [     'django.contrib.admin',     'django.contrib.auth',     'django.contrib.contenttypes',     'django.contrib.sessions',     'django.contrib.messages',     'django.contrib.staticfiles',     'myapp', #add myapp ]   DATABASES = {     'default': {         'ENGINE': 'django.db.backends.mysql',         'NAME': 'django',         'USER': 'root',         'PASSWORD': '',         'HOST': 'localhost',         'PORT': '3306'     } }

Model Class

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

//myapp/models.py from django.db import models   # Create your models here. class User(models.Model):     id = models.IntegerField()     name = models.CharField(max_length=50)     email = models.CharField(max_length=100)     phone = models.IntegerField(max_length=10)     address = models.CharField(max_length=250)           class Meta:          db_table = "user"         app_label = ''           def __str__(self):         return self

database user table

?

1 2 3 4 5 6 7 8 9 10 11 12 13

//database user table CREATE TABLE `user` (   `id` int unsigned NOT NULL AUTO_INCREMENT,   `name` varchar(50) NOT NULL,   `email` varchar(100) NOT NULL,   `phone` int unsigned NOT NULL,   `address` varchar(250) NOT NULL,   PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;   insert  into `user`(`id`,`name`,`email`,`phone`,`address`) values (1,'cairocoders','cairocoders@gmail.com',2147483647,'Olongapo City'), (2,'tutorial101','turorial101@gmail.com',34256780,'Olongapo City');

Make Migrations
Run the commands below to make migrations:
python manage.py makemigrations
python manage.py migrate
C:\my_project_django\testdev>python manage.py makemigrations
C:\my_project_django\testdev>python manage.py migrate
Creating View
myapp/views.py

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

//myapp/views.py from django.http import HttpResponse from django.template import loader from django.shortcuts import render   from .models import User     def index(request):     user_list = User.objects.order_by('id')           #template = loader.get_template('index.html')           #context = {     #    'user_list': user_list,     #}           #return HttpResponse(template.render(context, request))           context = {'user_list': user_list}     return render(request, 'index.html', context)

myapp/urls.py

?

1 2 3 4 5 6 7 8 9

//myapp/urls.py from django.contrib import admin from django.urls import path from myapp import views #add myapp   urlpatterns = [     path('admin/', admin.site.urls),     path('', views.index, name='index') ]

myapp/templates/index.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

//myapp/templates/index.html {% extends "base.html" %}   {% block content %} {% if user_list %}     <table id="table" class="table table-bordered table-striped">         <thead>             <th>Id</th>             <th>Name</th>             <th>Email</th>             <th>Phone</th>             <th>Address</th>         </thead>         <tbody>         {% for user in user_list %}             <tr>                 <td>{{user.id}}</td>                 <td>{{user.name}}</td>                 <td>{{user.email}}</td>                 <td>{{user.phone}}</td>                 <td>{{user.address}}</td>             </tr>         {% endfor %}         </tbody>     </table> {% else %}     <p>No user record available</p> {% endif %} {% endblock %}

myapp/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

//myapp/templates/base.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <title>Python Django How to setup MySQL Databse</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"> <link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"/> </head> <body> <div class="container" style="padding:20px;">     <div class="col-12">         <h3 class="text-primary">Python Django How to setup MySQL Databse with DataTables</h3>         <hr style="border-top:1px dotted #ccc;"/>         {% block content %} {% endblock %}     </div> </div>    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src = "https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){     $('#table').DataTable(); }); </script> </body> </html>

Run : C:\django\devproject>python manage.py runserver