Django Create New Apps & Pages

If you are new for Django template, here you start with creating new apps and pages.


Create a New App

Basic Steps to create new app with Materialize admin template for full-version or starter-kit
  1. To create a new app, open your terminal and run the following command python manage.py startapp APPNAME.

    Let's create an app with name test (django suggest snake_case name for application).

  2. test
    📂 migrations
    │   └──📄 __init__.py
    ├── 📄 __init__.py
    ├── 📄 admin.py
    ├── 📄 apps.py
    ├── 📄 models.py
    ├── 📄 tests.py
    └── 📄 views.py
    

Create a New Page

Basic Steps to create new page with Materialize admin template for full-version or starter-kit
  1. Create templates folder with test.html file.

  2. test
    📂 migrations
    │   └──📂 __init__.py
    📂 templates
    │   └──📄 test.html
    ├── 📄 __init__.py
    ├── 📄 admin.py
    ├── 📄 apps.py
    ├── 📄 models.py
    ├── 📄 tests.py
    ├── 📄 urls.py
    └── 📄 views.py
    

    Use the following code in test.html file.

    {% extends layout_path %}
    
    {% load static %}
    {% load i18n %}
    
    {% block title %} Test Page - Starter Kit{% endblock title %}
    
    {% block content %}
    
    <h4 class="py-3 mb-6">{% translate "Title: Test Page" %}</h4>
    <p>Content: Test page.</p>
    
    {% endblock %}
  3. For views.py content we have provided a snippet, Which can be accessed by django-view.

  4. from django.views.generic import TemplateView
    from web_project import TemplateLayout
    
    
    """
    This file is a view controller for multiple pages as a module.
    Here you can override the page view layout.
    Refer to test/urls.py file for more pages.
    """
    
    
    class testView(TemplateView):
        # Predefined function
        def get_context_data(self, **kwargs):
            # A function to init the global layout. It is defined in web_project/__init__.py file
            context = TemplateLayout.init(self, super().get_context_data(**kwargs))
    
            return context
    
  5. Create urls.py (Startapp don't create urls.py file).

  6. from django.urls import path
    from .views import testView
    
    
    urlpatterns = [
        path(
            "",
            testView.as_view(template_name="test.html"),
            name="test",
        ),
    ]
  7. Add the app (We can get this name form test/apps.py) in config/settings.py and config/urls.py which is in config folder.

    INSTALLED_APPS = [
      "apps.test"
    ]
    urlpatterns = [
      path("test/", include("apps.test.urls")),
    ]
  8. Update apps.py file. In the name parameter add apps as prefix. Ex: apps.test
  9. from django.apps import AppConfig
    
    
    class TestConfig(AppConfig):
        default_auto_field = 'django.db.models.BigAutoField'
        name = 'apps.test'
    
  10. Add page link to vertical & horizontal menu. Find vertical_menu.json and horizontal_menu.json files inside templates/layout/partials/menu folder.

  11. Option 1: To add menu item as main menu:

    {
      "url": "test",(in this template this url take name-url)
      "name": "Test Page",
      "icon": "menu-icon tf-icons ri-inbox-2-line",
      "slug": "test"
    },

    Option 2: To add menu item as sub menu:

    {
      "name": "Test",
      "icon": "menu-icon tf-icons ri-inbox-2-line",
      "slug": "Test",
      "submenu": [
        {
          "url": "test",
          "name": "Test Page",
          "slug": "test"
        },
      ]
    },
  12. For page searching options in navbar search box, add page link in search-vertical.json and search-horizontal.json inside src/assets/json/ folder.
  13. {
      "name": "Test Page",
      "icon": "ri-inbox-2-line",
      "url": "/pages/testPage/"
    },
  14. Add page name to locale/fr/django.po {all language po} file to display in multi language.
  15. msgid "Test"
    msgstr "Tablu"
    For generating to create fr.po file run command python manage.py compilemessages

To serve your project to localhost, you need to run the command python manage.py runserver

© 2017- Pixinvent, Hand-crafted & Made with ❤️