Create a New App

Basic Steps to create new app with Materio 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).

   Info: In this Django template, we have created an apps folder for the django application. so we suggest that you navigate to folder apps and use
   python ../manage.py startapp test

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 Materio admin template for full-version or starter-kit

1. Create templates folder with test.html file.

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.

Copy

{% 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 %}

2. For views.py content we have provided a snippet, Which can be accessed by django-view.

Copy

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

3. Create urls.py (Startapp don't create urls.py file).

Copy

from django.urls import path
from .views import testView


urlpatterns = [
    path(
        "",
        testView.as_view(template_name="test.html"),
        name="test",
    ),
]

4. 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.

   Copy

   INSTALLED_APPS = [
     "apps.test"
   ]

   Copy

   urlpatterns = [
     path("test/", include("apps.test.urls")),
   ]

5. Update apps.py file. In the name parameter add apps as prefix. Ex: apps.test
Copy

from django.apps import AppConfig


class TestConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'apps.test'

6. Add page link to vertical & horizontal menu. Find vertical_menu.json and horizontal_menu.json files inside templates/layout/partials/menu folder.

Option 1: To add menu item as main menu:

Copy

{
  "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:

Copy

{
  "name": "Test",
  "icon": "menu-icon tf-icons ri-inbox-2-line",
  "slug": "Test",
  "submenu": [
    {
      "url": "test",
      "name": "Test Page",
      "slug": "test"
    },
  ]
},

7. For page searching options in navbar search box, add page link in search-vertical.json and search-horizontal.json inside src/assets/json/ folder.
Copy

{
  "name": "Test Page",
  "icon": "ri-inbox-2-line",
  "url": "/pages/testPage/"
},

8. Add page name to locale/fr/django.po {all language po} file to display in multi language.
Copy

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