Skip to content

Commit 196be13

Browse files
app-generatorapp-generator
committed
UPD - Django Material (Free & PRO)
1 parent d5da1be commit 196be13

File tree

2 files changed

+230
-29
lines changed

2 files changed

+230
-29
lines changed

‎docs/products/django-dashboards/material-dashboard-pro.mdx‎

Lines changed: 213 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,234 @@ title: Django Material PRO - Premium Starter
33
sidebar_label: Django Material PRO
44
---
55

6-
# Django Material PRO
6+
# [Django Material PRO](https://appseed.us/product/material-dashboard-pro/django/)
77

8-
<SubHeading> Admin dashboard generated by AppSeed in Django on top of Material Dashboard design (PRO version).</SubHeading>
8+
<SubHeading>Premium Django Starter coded on top of Material Bootstrap 4 design (Premium Version).</SubHeading>
99

10-
**Material Dashboard PRO** is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design. It is based on the popular Bootstrap 4 framework and comes packed with multiple third-party plugins. All components are built to fit perfectly with each other while aligning with the material concepts.&#x20;
10+
Premium **Django Dashboard** generated by `AppSeed` on top of a modern design.
11+
**[Material Dashboard](https://appseed.us/product/material-dashboard-pro/django/)** is a premium `Bootstrap 4` Admin Dashboard featuring over 100 components, and 11 example pages.
12+
13+
- 🛒 [Django Material PRO](https://appseed.us/product/material-dashboard-pro/django/) - `Product page` (contains payment links)
14+
- 👉 [Django Material PRO](https://django-material-dashboard-pro.appseed-srv1.com/) - `LIVE Demo`
15+
16+
:::info [**v1.0.1**](https://github.com/app-generator/django-material-dashboard-pro/releases) - release date `2023-JUN-05`
17+
:::
1118

1219
<br />
1320

1421
> **Features**
1522
16-
- Codebase - [Django Dashboard Boilerplate](../../boilerplate-code/starters/django-dashboard.mdx)
17-
- UI Kit: [Material Dashboard PRO](../../content/bootstrap-template/material-dashboard-pro.mdx) (premium version) &#x20;
18-
- SQLite Database, Django Native ORM
19-
- Session-Based Authentication, Forms validation
20-
- Deployment scripts: Docker, Gunicorn/Nginx&#x20;
23+
- ✅ `Up-to-date Dependencies`
24+
- ✅ UI Theme: [Django Theme Material](https://github.com/app-generator/django-admin-material-pro/)
25+
- can be used in any Django project (new or legacy)
26+
- ✅ `Sections` covered by the design:
27+
- ✅ **Admin section** (reserved for superusers)
28+
- ✅ **Authentication**: `Django.contrib.AUTH`, Registration
29+
- ✅ **All Pages** available in for ordinary users
30+
- ✅ `Docker`
31+
- 🚀 `Deployment`
32+
- `CI/CD` flow via `Render`
33+
34+
![Material Dashboard BS4 PRO](https://github.com/app-generator/dummy/assets/51070104/3db1c3ee-a180-4ad7-8857-f68f3e5d0b3b)
35+
36+
<br />
37+
38+
## Environment
39+
40+
To use the starter, [Python3](https://www.python.org) should be installed properly in the workstation.
41+
If you are not sure if Python is installed, please open a terminal and type `python --version`. Here is the full list with dependencies and tools required to build the app:
42+
43+
- [Python3](https://www.python.org) - the programming language used to code the app
44+
- [GIT](https://git-scm.com) - used to clone the source code from the Github repository
45+
- Basic development tools (g++ compiler, python development libraries ..etc) used by Python to compile the app dependencies in your environment.
46+
- (Optional) `Docker` - a popular virtualization software
47+
48+
<br />
49+
50+
## Manual Build
51+
52+
> 👉 Download the code
53+
54+
```bash
55+
$ git clone https://github.com/app-generator/django-material-dashboard-pro.git
56+
$ cd django-material-dashboard-pro
57+
```
58+
59+
<br />
60+
61+
> Export `GITHUB_TOKEN` in the environment. The value is provided by AppSeed during purchase.
62+
63+
This is required because the project has a private REPO dependency: `github.com/app-generator/priv-django-admin-material-pro`
64+
65+
```bash
66+
$ export GITHUB_TOKEN='TOKEN_HERE' # for Linux, Mac
67+
$ set GITHUB_TOKEN='TOKEN_HERE' # Windows CMD
68+
$ $env:GITHUB_TOKEN = 'TOKEN_HERE' # Windows powerShell
69+
```
70+
71+
> 👉 Install modules via `VENV`.
72+
73+
74+
```bash
75+
$ virtualenv env
76+
$ source env/bin/activate
77+
$ pip install -r requirements.txt
78+
```
79+
80+
> 👉 Edit the `.env` using the template `.env.sample`.
81+
82+
```env
2183
22-
> Links&#x20;
84+
# True for development, False for production
85+
DEBUG=True
2386
24-
- [Material PRO Django](https://appseed.us/admin-dashboards/django-dashboard-material-pro) - product page
25-
- [Material PRO Django](https://github.com/app-generator/django-dashboard-material-pro) - public repository used for bug tracking
26-
- [Material PRO Django](https://django-material-dashboard-pro.appseed-srv1.com/) - LIVE Demo
27-
- [Support](https://appseed.us/support): via **Github** (issues tracker) and [Discord](https://discord.gg/fZC6hup) - 24/7 LIVE Assistance.&#x20;
87+
```
2888

29-
### What is Django
89+
> 👉 Set Up Database
3090
31-
Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.
91+
```bash
92+
$ python manage.py makemigrations
93+
$ python manage.py migrate
94+
```
3295

33-
> Read more about [Django Framework](../../content/what-is/django.mdx)
96+
> 👉 Create the Superuser
3497
35-
### How to use the App
98+
```bash
99+
$ python manage.py createsuperuser
100+
```
36101

37-
- [Set up the environment](../../boilerplate-code/starters/django-dashboard.mdx#environment-1) - prepare your workstation for **Django**
38-
- [Compile the sources](../../boilerplate-code/starters/django-dashboard.mdx#build-the-app-1) - start this **Django** app in the local environment
39-
- [App Codebase](../../boilerplate-code/starters/django-dashboard.mdx#app-codebase) - how the project files are organized
40-
- [App Configuration](../../boilerplate-code/starters/django-dashboard.mdx#app-configuration) - how to configure this **Django** application
102+
> 👉 Start the app
41103
42-
### [Material Dashboard PRO](../../content/bootstrap-template/material-dashboard-pro.mdx) - UI Kit
104+
```bash
105+
$ python manage.py runserver
106+
```
43107

44-
Material Dashboard PRO makes use of light, surface, and movement. The general layout resembles sheets of paper following multiple layers so that the depth and order is obvious. The product is a powerful dashboard that can easily help you build admin panels, CRMs or content management systems.
108+
At this point, the app runs at `http://127.0.0.1:8000/`.
109+
110+
<br />
111+
112+
## Manage App `Users`
113+
114+
By default, the starter is not provided with users. To access the private pages and the admin section (reserved for `superusers`) follow up the next sections.
115+
116+
### 👉 Create `Superusers`
117+
118+
To access the `admin` section, Django requires `superuser` privilegies. Let's create a new `superuser` and access the `admin` section of the project:
119+
120+
```bash
121+
$ python manage.py createsuperuser
122+
```
123+
124+
Once the `superuser` is successfully created, we can access the `admin` section:
125+
126+
`http://localhost:8000/admin/`
127+
128+
129+
<br />
130+
131+
## Codebase structure
132+
133+
The project is coded using a simple and intuitive structure presented below:
134+
135+
```bash
136+
< PROJECT ROOT >
137+
|
138+
|-- core/
139+
| |-- settings.py # Project Configuration
140+
| |-- urls.py # Project Routing
141+
|
142+
|-- home/
143+
| |-- views.py # APP Views
144+
| |-- urls.py # APP Routing
145+
| |-- models.py # APP Models
146+
| |-- tests.py # Tests
147+
| |-- templates/ # Theme Customisation
148+
| |-- includes #
149+
| |-- custom-footer.py # Custom Footer
150+
|
151+
|
152+
|-- requirements.txt # Project Dependencies
153+
|
154+
|-- env.sample # ENV Configuration (default values)
155+
|-- manage.py # Start the app - Django default start script
156+
|
157+
|-- ************************************************************************
158+
```
159+
160+
<br />
161+
162+
## How to Customize
163+
164+
When a template file is loaded in the controller, `Django` scans all template directories starting from the ones defined by the user, and returns the first match or an error in case the template is not found.
165+
The theme used to style this starter provides the following files:
166+
167+
```bash
168+
# This is saved in ENV: LIB/admin_material_pro
169+
< UI_LIBRARY_ROOT >
170+
171+
|
172+
|-- templates/ # Root Templates Folder
173+
| |
174+
| |-- accounts/
175+
| | |-- login.html # Sign IN Page
176+
| | |-- register.html # Sign UP Page
177+
| |
178+
| |-- includes/
179+
| | |-- footer.html # Footer component
180+
| | |-- sidebar.html # Sidebar component
181+
| | |-- navigation.html # Navigation Bar
182+
| | |-- scripts.html # Scripts Component
183+
| |
184+
| |-- layouts/
185+
| | |-- base.html # Masterpage
186+
| | |-- base-auth.html # Masterpage for Auth Pages
187+
| |
188+
| |-- pages/
189+
| |-- index.html # Index Page (presentation)
190+
| |-- settings.html # Settings Page
191+
| |-- dashboard.html # Dashboard page
192+
| |-- *.html # All other pages
193+
|
194+
|-- ************************************************************************
195+
```
196+
197+
When the project requires customization, we need to copy the original file that needs an update (from the virtual environment) and place it in the template folder using the same path.
198+
199+
> For instance, if we want to **customize the footer.html** these are the steps:
200+
201+
- ✅ `Step 1`: create the `templates` DIRECTORY inside the `home` app
202+
- ✅ `Step 2`: configure the project to use this new template directory
203+
- `core/settings.py` TEMPLATES section
204+
- ✅ `Step 3`: copy the `footer.html` from the original location (inside your ENV) and save it to the `home/templates` DIR
205+
- Source PATH: `<YOUR_ENV>/LIB/admin_material_pro/includes/footer.html`
206+
- Destination PATH: `<PROJECT_ROOT>home/templates/includes/footer.html`
207+
208+
> To speed up all these steps, the **codebase is already configured** (`Steps 1, and 2`) and a `custom footer` can be found at this location:
209+
210+
`home/templates/includes/custom_footer.html`
211+
212+
By default, this file is unused because the `theme` expects `footer.html` (without the `custom_` prefix).
213+
214+
In order to use it, simply rename it to `footer.html`. Like this, the default version shipped in the library is ignored by Django.
215+
216+
In a similar way, all other files and components can be customized easily.
217+
218+
<br />
219+
220+
## Deploy on [Render](https://render.com/)
221+
222+
- Create a Blueprint instance
223+
- Go to https://dashboard.render.com/blueprints this link.
224+
- Click `New Blueprint Instance` button.
225+
- Connect your `repo` which you want to deploy.
226+
- Fill the `Service Group Name` and click on `Update Existing Resources` button.
227+
- After that your deployment will start automatically.
228+
229+
At this point, the product should be LIVE.
230+
231+
<br />
45232

46-
- [Material Dashboard PRO](../../content/bootstrap-template/material-dashboard-pro.mdx) - information provided by AppSeed
47-
- [Material Dashboard PRO](https://bit.ly/3odmcGy) - product page hosted by [Creative-Tim](../../content/partners/creative-tim.mdx)
233+
## Resources
48234

49-
![Material Dashboard PRO - Premium Bootstrap Template.](../../../static/assets/docs-cover-material-pro.jpg)
235+
- 👉 Free [Support](https://appseed.us/support/) via Email & Discord
236+
- 👉 [Custom Development Services](https://appseed.us/custom-development/) provided by experts

‎docs/products/django-dashboards/material-dashboard.mdx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Open-source **Django Dashboard** generated by `AppSeed` on top of a modern desig
1313
- 👉 [Django Material Dashboard](https://appseed.us/product/material-dashboard/django/) - `Product page`
1414
- 👉 [Django Material Dashboard](https://django-material-dash2.onrender.com) - `LIVE Demo`
1515

16-
:::info [**v1.0.9**](https://github.com/app-generator/django-material-dashboard/releases) - release date `2023-02-05`
16+
:::info [**v1.0.10**](https://github.com/app-generator/django-material-dashboard/releases) - release date `2023-04-05`
1717
:::
1818

1919
<br />
@@ -29,6 +29,7 @@ Open-source **Django Dashboard** generated by `AppSeed` on top of a modern desig
2929

3030
![Material Dashboard - Full-Stack Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/169301658-6cf27993-c451-4cd4-9ffa-2968b8981167.png)
3131

32+
<br />
3233

3334
## Environment
3435

@@ -40,8 +41,9 @@ If you are not sure if Python is installed, please open a terminal and type `pyt
4041
- Basic development tools (g++ compiler, python development libraries ..etc) used by Python to compile the app dependencies in your environment.
4142
- (Optional) `Docker` - a popular virtualization software
4243

44+
<br />
4345

44-
## Start the app in Docker
46+
## Start in `Docker`
4547

4648
> 👉 **Step 1** - Download the code from the GH repository (using `GIT`)
4749
@@ -58,6 +60,7 @@ $ docker-compose up --build
5860

5961
Visit `http://localhost:5085` in your browser. The app should be up & running.
6062

63+
<br />
6164

6265
## Manual Build
6366

@@ -120,6 +123,7 @@ $ python manage.py runserver
120123

121124
At this point, the app runs at `http://127.0.0.1:8000/`.
122125

126+
<br />
123127

124128
## Manage App `Users`
125129

@@ -137,6 +141,7 @@ Once the `superuser` is successfully created, we can access the `admin` section:
137141

138142
`http://localhost:8000/admin/`
139143

144+
<br />
140145

141146
## Codebase structure
142147

@@ -167,6 +172,7 @@ The project is coded using a simple and intuitive structure presented below:
167172
|-- ************************************************************************
168173
```
169174

175+
<br />
170176

171177
## How to Customize
172178

@@ -222,6 +228,7 @@ In order to use it, simply rename it to `footer.html`. Like this, the default ve
222228

223229
In a similar way, all other files and components can be customized easily.
224230

231+
<br />
225232

226233
## Deploy on [Render](https://render.com/)
227234

@@ -235,7 +242,14 @@ In a similar way, all other files and components can be customized easily.
235242
At this point, the product should be LIVE.
236243

237244

245+
<br />
246+
238247
## Resources
239248

240-
- 👉 [Django Admin Material](https://github.com/app-generator/django-admin-material-dashboard) - Library used to style this starter
241249
- 👉 Free [Support](https://appseed.us/support/) via Email & Discord
250+
- 👉 [Custom Development Services](https://appseed.us/custom-development/) provided by experts
251+
- 🚀 [Django Material PRO](https://appseed.us/product/material-dashboard2-pro/django/) - `Premium Version`
252+
- ✅ `Enhanced UI` - more pages and components
253+
- ✅ `Priority` on support
254+
255+
![Material Dashboard 2 BS5 PRO](https://github.com/app-generator/dummy/assets/51070104/b8bc58d5-2f66-4b6e-ae14-70e3d9d0a0a1)

0 commit comments

Comments
 (0)