Order Management System Project in Django with Source Code

December 25, 2020December 25, 2020 by adones evangelista

Order Management System Project in Django with Source Code

The Order Management System Project in Django is created using Python Django Framework. The system is built fully in Django Framework in back-end and HTML, CSS and JavaScript in front-end. Basically, the project includes tutorials and guides for creating a code.

This Order Management System in Django Framework can manage the customer order, manage delivery, manage product, and can manage update order and confirm order of the customer. The system includes crud operations and it is stored in the database file.

The Django Order Management System also includes an admin panel from which you can monitor all registered users, items and orders. It is also able to export to pdf file all reports and data contained in the database.

Watch the video here to see the full running Order Management System Project In Django with source code

To start creating a Order Management System Project in Django, makes sure that you have PyCharm Professional IDE Installed in your computer.

This Order Management System Project in Django also includes a Download Source Code for free, just find the downloadable source code below and click download now.

Features of Order Management System Project in Django

Dashboard – For the dashboard, you will be able to all the basic access in the whole system. Such as home, sign up, login, product, orders and customer management.
Sign Up– For the sign up, you will fill the forms. Such as your username, password and email address.
Login – For the login, you must login first before you can add your orders.
Manage Products – The admin has access to the product management information system. He can add, update and delete the product.
Manage Orders – As the main functions of the admin, the admin can accept or reject the order from the customers on a case to case basis.
Reports – The admin can generate reports automatically such as sales reports, the status of products and Order status.
Manage Customer – the customer can register and update their profile. In short, this system has a customer management system feature.

Steps on how to create a Order Management System Project in Django With Source Code

Order Management System Project in Django With Source Code

Step 1: Open file.
First , open “pycharm professional” after that click “file” and click “new project“.
Step 2: Choose Django.
Second, after click “new project“, choose “Django” and click.
Step 3: Select file location.
Third, select a file location wherever you want.
Step 4: Create application name.
Fourth, name your application.
Step 5: Click create.
Fifth, finish creating project by clicking “create” button.
Step 6: Start Coding.
In this final step, we will now start adding functionality to our Django Framework by adding some functional codes.

This are the module to add functionality for Order Management System Project in Django

Create template for the dashboard in Order Management System Project in Django.

In this section, we will learn on how create a templates for the dashboard. To start with, add the following code in your index.html under the folder of registers/template/registers files.

{% load static %}
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /&gt;
    &lt;meta name="description" content="" /&gt;
    &lt;meta name="author" content="" /&gt;
    &lt;title&gt;Dashboard&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link href="{% static 'vendor/css/styles.css' %}" rel="stylesheet" /&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"&gt;&lt;/script&gt;

    &lt;link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"
        crossorigin="anonymous" /&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"
        crossorigin="anonymous"&gt;&lt;/script&gt;
        
&lt;/head&gt;

&lt;body class="sb-nav-fixed"&gt;
    &lt;div class="row"&gt;
      
            &lt;nav class="sb-topnav navbar navbar-expand navbar-dark bg-danger"&gt;
                &lt;a class="navbar-brand" href="/"&gt;OMS&lt;/a&gt;
                &lt;button type="button" id="sidebarToggle" class="btn btn-success text-black-50"&gt;
                    &lt;i class="fas fa-align-left"&gt;&lt;/i&gt;
                  &lt;/button&gt;

                 
                    &lt;div class="col"&gt;
                
                            &lt;span class=" float-right" style="color:white;"&gt; Hello, {{request.user.username}}&lt;/span&gt;
                       
                    &lt;/div&gt;

                    &lt;div class="col"&gt;
                         
                       &lt;a class="btn btn-sm btn-success float-right" data-toggle="modal" data-target="#logOutModal" style="cursor: pointer;"&gt;  &lt;i class="fa fa-sign-in-alt"&gt;&lt;/i&gt; LOGOUT&lt;/a&gt;
                    &lt;/div&gt;

            &lt;/nav&gt;
        &lt;/div&gt;
     
    &lt;/div&gt;

    &lt;div id="logOutModal" class="modal fade"&gt;
        &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                    &lt;h4 class="modal-title"&gt;Want to leave ?&lt;/h4&gt;
                    &lt;button class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                    Press logout to leave !
                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                    &lt;button class="btn btn-success" data-dismiss="modal"&gt;
                        Stay Here
                    &lt;/button&gt;
                    &lt;a class="btn btn-danger"  href="{% url 'register_app:logout' %}"&gt;
                        Logout&lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  

    &lt;div id="layoutSidenav"&gt;
        &lt;div id="layoutSidenav_nav"&gt;
            &lt;nav class="sb-sidenav accordion sb-sidenav-light" id="sidenavAccordion"&gt;
                &lt;div class="sb-sidenav-menu"&gt;
                    &lt;div class="nav"&gt;
                        &lt;div class="sb-sidenav-menu-heading"&gt;&lt;/div&gt;
                        &lt;a class="nav-link" href="/dashboard"&gt;
                            &lt;div class="sb-nav-link-icon"&gt;
                                &lt;i class="fas fa-tachometer-alt"&gt;&lt;/i&gt;
                            &lt;/div&gt;
                            Dashboard
                        &lt;/a&gt;

                        &lt;a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseLayouts"
                            aria-expanded="false" aria-controls="collapseLayouts"&gt;
                            &lt;div class="sb-nav-link-icon"&gt;
                                &lt;i class="fas fa-money-check-alt"&gt;&lt;/i&gt;
                            &lt;/div&gt;
                            Transaction
                            &lt;div class="sb-sidenav-collapse-arrow"&gt;
                                &lt;i class="fas fa-angle-down"&gt;&lt;/i&gt;&lt;/div&gt;
                        &lt;/a&gt;

                        &lt;div class="(collapse)" id="collapseLayouts" aria-labelledby="headingOne"
                            data-parent="#sidenavAccordion"&gt;
                            &lt;nav class="sb-sidenav-menu-nested nav"&gt;
                                &lt;a class="nav-link" href="{% url 'product_app:list'%}"&gt;&lt;i class="fas fa-industry"&gt;&lt;/i&gt;&lt;span class="ml-1"&gt;Products&lt;/span&gt;&lt;/a&gt;
                                &lt;a class="nav-link" href="{% url 'order_app:list'%}"&gt;&lt;i class="fas fa-shopping-cart"&gt;&lt;/i&gt;&lt;span class="ml-1"&gt;Orders&lt;/span&gt;&lt;/a&gt;
                                &lt;a class="nav-link" href="{% url 'customer_app:list'%}"&gt;&lt;i class="fas fa-users"&gt;&lt;/i&gt;&lt;span class="ml-1"&gt;Customers&lt;/span&gt;&lt;/a&gt;
                              
                            &lt;/nav&gt;
                        &lt;/div&gt;
                        &lt;a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages"
                            aria-expanded="false" aria-controls="collapsePages"&gt;

                            &lt;div class="sb-nav-link-icon"&gt;
                                &lt;i class="fas fa-book-open"&gt;&lt;/i&gt;
                            &lt;/div&gt;
                            Authentication
                            &lt;div class="sb-sidenav-collapse-arrow"&gt;
                                &lt;i class="fas fa-angle-down"&gt;&lt;/i&gt;&lt;/div&gt;
                        &lt;/a&gt;
                        &lt;div class="(collapse)" id="collapsePages" aria-labelledby="headingTwo"
                            data-parent="#sidenavAccordion"&gt;

                            &lt;nav class="sb-sidenav-menu-nested nav"&gt;
                                {% if user.is_authenticated %}
                             
                                &lt;a class="nav-link" href="{% url 'register_app:logout'%}"&gt;&lt;i class="fas fa-sign-out-alt"&gt;&lt;/i&gt;Logout&lt;/a&gt;

                                {% else %}
                                &lt;a class="nav-link" href="{% url 'register_app:login'%}"&gt;Login&lt;/a&gt;
                                &lt;a class="nav-link" href="{% url 'register_app:register'%}"&gt;Register&lt;/a&gt;
                                {% endif %}
                            &lt;/nav&gt;

                        &lt;/div&gt;
                    &lt;/div&gt;
                   
            &lt;/nav&gt;
        &lt;/div&gt;

        &lt;div id="layoutSidenav_content"&gt;
            &lt;main&gt;

              &lt;div class= "text-center"&gt;&lt;strong&gt;Last Login :&lt;/strong&gt; {{request.user.last_login}}&lt;/div&gt; 
              
           
                &lt;div class="card-body"&gt;
                &lt;/div&gt;


                &lt;div class="row"&gt;

                    &lt;div class="col"&gt;
                        &lt;div class="col-md"&gt;
                            &lt;div class="card bg-success text-center text-white  mb-3" id="orders-delivered"&gt;
                                &lt;div class="card-header"&gt;
                                    &lt;i class="fas fa-money-check-alt"&gt;&lt;/i&gt;
                                    &lt;h5 class="card-title"&gt;Today Sales&lt;/h5&gt;
                                &lt;/div&gt;
                                &lt;div class="card-body"&gt;
                                    &lt;h5 class="card-title"&gt;P{{orders_total_price}}&lt;/h5&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="mb-5 ml-3"&gt;
                            &lt;a href="{% url 'order_app:list' %}" class="btn btn-success"&gt;&lt;i class="fas fa-eye"&gt;&lt;/i&gt;  View Orders&lt;/a&gt;
                        &lt;/div&gt;

                    &lt;/div&gt;
                  
                    &lt;div class="col"&gt;
                        &lt;div class="col-md"&gt;
                            &lt;div class="card bg-warning text-center text-white  mb-3" id="orders-pending"&gt;
                                &lt;div class="card-header"&gt;
                                    &lt;i class="fas fa-user"&gt;&lt;/i&gt;
                                    &lt;h5 class="card-title"&gt;Today Customers&lt;/h5&gt;
                                &lt;/div&gt;
                                &lt;div class="card-body"&gt;
                                    &lt;h5 class="card-title"&gt;{{today_customers}}&lt;/h5&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="mb-5 ml-3"&gt;
                            &lt;a href="{% url 'customer_app:list'%}" class="btn btn-warning"&gt;&lt;i class="fas fa-eye"&gt;&lt;/i&gt;  View details&lt;/a&gt;
                        &lt;/div&gt;

                    &lt;/div&gt;

              

                    &lt;div class="col"&gt;
                        &lt;div class="col-md"&gt;
                            &lt;div class="card bg-danger text-center text-white ml-2 mb-3" id="total-orders"&gt;
                                &lt;div class="card-header"&gt;
                                    &lt;i class="fas fa-list"&gt;&lt;/i&gt;
                                    &lt;h5 class="card-title"&gt;Total Products&lt;/h5&gt;
                                &lt;/div&gt;
                                &lt;div class="card-body"&gt;
                                    &lt;h5 class="card-title"&gt;{{total_products}}&lt;/h5&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="mb-5 ml-4"&gt;
                            &lt;a href="{% url 'product_app:list' %}" class="btn btn-danger"&gt;&lt;i class="fas fa-eye"&gt;&lt;/i&gt;  View details&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;div class="col"&gt;
                        &lt;div class="col-md"&gt;
                            &lt;div class="card bg-primary text-center text-white  mb-3" id="orders-pending"&gt;
                                &lt;div class="card-header"&gt;
                                    &lt;i class="fas fa-users"&gt;&lt;/i&gt;
                                    &lt;h5 class="card-title"&gt;Total Customers&lt;/h5&gt;
                                &lt;/div&gt;
                                &lt;div class="card-body"&gt;
                                    &lt;h5 class="card-title"&gt;{{total_customers}}&lt;/h5&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="mb-5 ml-3"&gt;
                            &lt;a href="{% url 'customer_app:list'%}" class="btn btn-primary"&gt;&lt;i class="fas fa-eye"&gt;&lt;/i&gt;  View details&lt;/a&gt;
                        &lt;/div&gt;

                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class="card mb-4"&gt;

                    &lt;div class="row"&gt;
                        &lt;div class="col"&gt;
                            &lt;div class="card-header"&gt;&lt;i class="fas fa-book mr-1"&gt;&lt;/i&gt;Summary Table&lt;hr&gt;
                             
                
                                    {% include 'registers/index_search.html' %}
                             
                        &lt;/div&gt;
                        
                    &lt;/div&gt;
                    
                   
                       
                &lt;/div&gt;
                    &lt;div class="card-body"&gt;
                        &lt;div class="table-responsive"&gt;

                            &lt;table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0"&gt;
                                &lt;thead&gt;
                                    &lt;tr&gt;
                                        &lt;th&gt;View&lt;/th&gt;
                                        &lt;th&gt;Customer&lt;/th&gt;
                                        &lt;th&gt;Customer Id&lt;/th&gt;
                                   
                                        &lt;th&gt;Date&lt;/th&gt;

                                    &lt;/tr&gt;
                                &lt;/thead&gt;
                             {% for customer in customers %}

                             &lt;tbody&gt;
                                &lt;tr&gt;
                                    &lt;td&gt;&lt;a href=" {% url 'customer_app:bill' customer.id  %}"&gt;&lt;i class="fas fa-2x fa-file-pdf"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
                                    &lt;td&gt;{{customer.name}}&lt;/td&gt;
                                    &lt;td&gt;{{customer.id}}&lt;/td&gt;
                               
                                    &lt;td&gt;{{customer.date_created}}&lt;/td&gt;

                                &lt;/tr&gt;
                            
                            &lt;/tbody&gt;


                            {% endfor %}
                            &lt;/table&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;


                &lt;footer class="py-4 bg-light mt-auto"&gt;
                    &lt;div class="container-fluid"&gt;
                        &lt;div class="d-flex align-items-center justify-content-between small"&gt;
                         &lt;strong&gt;   &lt;div class="text-muted"&gt;Copyright &amp;copy; Order Management System 2020&lt;/div&gt;&lt;/strong&gt;
                            &lt;div&gt;
                                &lt;a href="#"&gt;Privacy Policy&lt;/a&gt;
                                &amp;middot;
                                &lt;a href="#"&gt;Terms &amp;amp; Conditions&lt;/a&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/footer&gt;
                &lt;/h3&gt;
        &lt;/div&gt;
  
        &lt;script&gt;

    $(document).ready(function(){
        var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
        $("#layoutSidenav_nav .sb-sidenav a.nav-link").each(function() {
            if (this.href === path) {
                $(this).addClass("active");
            }
        });

    // Toggle the side navigation
    $("#sidebarToggle").on("click", function(e) {
        e.preventDefault();
        $("body").toggleClass("sb-sidenav-toggled");
    });

    })
    
        &lt;/script&gt;

     
        
&lt;/body&gt;


&lt;/html&gt;

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

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

{% 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, shrink-to-fit=no" />

<meta name="description" content="" />

<meta name="author" content="" />

<title>Dashboard</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<link href="{% static 'vendor/css/styles.css' %}" rel="stylesheet" />

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"

crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"

crossorigin="anonymous"></script>

</head>

<body class="sb-nav-fixed">

<div class="row">

<nav class="sb-topnav navbar navbar-expand navbar-dark bg-danger">

<a class="navbar-brand" href="/">OMS</a>

<button type="button" id="sidebarToggle" class="btn btn-success text-black-50">

<i class="fas fa-align-left"></i>

</button>

<div class="col">

<span class=" float-right" style="color:white;"> Hello, {{request.user.username}}</span>

</div>

<div class="col">

<a class="btn btn-sm btn-success float-right" data-toggle="modal" data-target="#logOutModal" style="cursor: pointer;"> <i class="fa fa-sign-in-alt"></i> LOGOUT</a>

</div>

</nav>

</div>

</div>

<div id="logOutModal" class="modal fade">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h4 class="modal-title">Want to leave ?</h4>

<button class="close" data-dismiss="modal">&times;</button>

</div>

<div class="modal-body">

Press logout to leave !

</div>

<div class="modal-footer">

<button class="btn btn-success" data-dismiss="modal">

Stay Here

</button>

<a class="btn btn-danger" href="{% url 'register_app:logout' %}">

Logout</a>

</div>

</div>

</div>

</div>

<div id="layoutSidenav">

<div id="layoutSidenav_nav">

<nav class="sb-sidenav accordion sb-sidenav-light" id="sidenavAccordion">

<div class="sb-sidenav-menu">

<div class="nav">

<div class="sb-sidenav-menu-heading"></div>

<a class="nav-link" href="/dashboard">

<div class="sb-nav-link-icon">

<i class="fas fa-tachometer-alt"></i>

</div>

Dashboard

</a>

<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseLayouts"

aria-expanded="false" aria-controls="collapseLayouts">

<div class="sb-nav-link-icon">

<i class="fas fa-money-check-alt"></i>

</div>

Transaction

<div class="sb-sidenav-collapse-arrow">

<i class="fas fa-angle-down"></i></div>

</a>

<div class="(collapse)" id="collapseLayouts" aria-labelledby="headingOne"

data-parent="#sidenavAccordion">

<nav class="sb-sidenav-menu-nested nav">

<a class="nav-link" href="{% url 'product_app:list'%}"><i class="fas fa-industry"></i><span class="ml-1">Products</span></a>

<a class="nav-link" href="{% url 'order_app:list'%}"><i class="fas fa-shopping-cart"></i><span class="ml-1">Orders</span></a>

<a class="nav-link" href="{% url 'customer_app:list'%}"><i class="fas fa-users"></i><span class="ml-1">Customers</span></a>

</nav>

</div>

<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages"

aria-expanded="false" aria-controls="collapsePages">

<div class="sb-nav-link-icon">

<i class="fas fa-book-open"></i>

</div>

Authentication

<div class="sb-sidenav-collapse-arrow">

<i class="fas fa-angle-down"></i></div>

</a>

<div class="(collapse)" id="collapsePages" aria-labelledby="headingTwo"

data-parent="#sidenavAccordion">

<nav class="sb-sidenav-menu-nested nav">

{% if user.is_authenticated %}

<a class="nav-link" href="{% url 'register_app:logout'%}"><i class="fas fa-sign-out-alt"></i>Logout</a>

{% else %}

<a class="nav-link" href="{% url 'register_app:login'%}">Login</a>

<a class="nav-link" href="{% url 'register_app:register'%}">Register</a>

{% endif %}

</nav>

</div>

</div>

</nav>

</div>

<div id="layoutSidenav_content">

<main>

<div class= "text-center"><strong>Last Login :</strong> {{request.user.last_login}}</div>

<div class="card-body">

</div>

<div class="row">

<div class="col">

<div class="col-md">

<div class="card bg-success text-center text-white mb-3" id="orders-delivered">

<div class="card-header">

<i class="fas fa-money-check-alt"></i>

<h5 class="card-title">Today Sales</h5>

</div>

<div class="card-body">

<h5 class="card-title">P{{orders_total_price}}</h5>

</div>

</div>

</div>

<div class="mb-5 ml-3">

<a href="{% url 'order_app:list' %}" class="btn btn-success"><i class="fas fa-eye"></i> View Orders</a>

</div>

</div>

<div class="col">

<div class="col-md">

<div class="card bg-warning text-center text-white mb-3" id="orders-pending">

<div class="card-header">

<i class="fas fa-user"></i>

<h5 class="card-title">Today Customers</h5>

</div>

<div class="card-body">

<h5 class="card-title">{{today_customers}}</h5>

</div>

</div>

</div>

<div class="mb-5 ml-3">

<a href="{% url 'customer_app:list'%}" class="btn btn-warning"><i class="fas fa-eye"></i> View details</a>

</div>

</div>

<div class="col">

<div class="col-md">

<div class="card bg-danger text-center text-white ml-2 mb-3" id="total-orders">

<div class="card-header">

<i class="fas fa-list"></i>

<h5 class="card-title">Total Products</h5>

</div>

<div class="card-body">

<h5 class="card-title">{{total_products}}</h5>

</div>

</div>

</div>

<div class="mb-5 ml-4">

<a href="{% url 'product_app:list' %}" class="btn btn-danger"><i class="fas fa-eye"></i> View details</a>

</div>

</div>

<div class="col">

<div class="col-md">

<div class="card bg-primary text-center text-white mb-3" id="orders-pending">

<div class="card-header">

<i class="fas fa-users"></i>

<h5 class="card-title">Total Customers</h5>

</div>

<div class="card-body">

<h5 class="card-title">{{total_customers}}</h5>

</div>

</div>

</div>

<div class="mb-5 ml-3">

<a href="{% url 'customer_app:list'%}" class="btn btn-primary"><i class="fas fa-eye"></i> View details</a>

</div>

</div>

</div>

<div class="card mb-4">

<div class="row">

<div class="col">

<div class="card-header"><i class="fas fa-book mr-1"></i>Summary Table<hr>

{% include 'registers/index_search.html' %}

</div>

</div>

</div>

<div class="card-body">

<div class="table-responsive">

<table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">

<thead>

<tr>

<th>View</th>

<th>Customer</th>

<th>Customer Id</th>

<th>Date</th>

</tr>

</thead>

{% for customer in customers %}

<tbody>

<tr>

<td><a href=" {% url 'customer_app:bill' customer.id %}"><i class="fas fa-2x fa-file-pdf"></i></a></td>

<td>{{customer.name}}</td>

<td>{{customer.id}}</td>

<td>{{customer.date_created}}</td>

</tr>

</tbody>

{% endfor %}

</table>

</div>

</div>

</div>

<footer class="py-4 bg-light mt-auto">

<div class="container-fluid">

<div class="d-flex align-items-center justify-content-between small">

<strong> <div class="text-muted">Copyright &copy; Order Management System 2020</div></strong>

<div>

<a href="#">Privacy Policy</a>

&middot;

<a href="#">Terms &amp; Conditions</a>

</div>

</div>

</div>

</footer>

</h3>

</div>

<script>

$(document).ready(function(){

var path = window.location.href; // because the 'href' property of the DOM element is the absolute path

$("#layoutSidenav_nav .sb-sidenav a.nav-link").each(function() {

if (this.href === path) {

$(this).addClass("active");

}

});

// Toggle the side navigation

$("#sidebarToggle").on("click", function(e) {

e.preventDefault();

$("body").toggleClass("sb-sidenav-toggled");

});

})

</script>

</body>

</html>

After adding the code, you may click the run button to test the code. The output should look like as shown below.

Create template for the products in Order Management System Project in Django.

In this section, we will learn on how create a templates for the products. To start with, add the following code in your base.html under the folder of products/template/products files.

&lt;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col"&gt;
            &lt;div class="col-md-10"&gt;
                &lt;table id="product-table"
                    class="table table-sm table-responsive-sm table-hover table-striped text-nowrap table-bordered"
                    width="100%" style="margin-left:12%;"&gt;
                    &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th&gt;Id&lt;/th&gt;
                            &lt;th&gt;Name&lt;/th&gt;
                            &lt;th&gt;Price&lt;/th&gt;
                            &lt;th&gt;Description&lt;/th&gt;
                            &lt;th&gt;Quantity&lt;/th&gt;
                            &lt;th&gt;Date Stock In&lt;/th&gt;
                            &lt;th&gt;Action&lt;/th&gt;
                        &lt;/tr&gt;
                    &lt;/thead&gt;

                    &lt;tbody id="get_table_body"&gt;
                        {% for product in products %}

                        &lt;tr&gt;
                            &lt;td&gt;{{product.id}}&lt;/td&gt;
                            &lt;td&gt;{{product.name}}&lt;/td&gt;
                            &lt;td&gt;{{product.price}}&lt;/th&gt;
                            &lt;td&gt;{{product.description}}&lt;/td&gt;
                            &lt;td&gt;{{product.quantity}} {{product.unit}}&lt;/td&gt;
                            &lt;td&gt;{{product.created_at}}&lt;/td&gt;
                            &lt;td&gt;
                                &lt;button type="button"  data-pid="{{product.id}}" data-target="#AddProduct"
                                    data-toggle="modal" class="btn btn-warning btn-sm btn-edit "&gt;
                                    &lt;i class="fas fa-edit"&gt;&lt;/i&gt;
                                    &lt;button type="button" data-pid="{{product.id}}"
                                        class="ml-1 btn btn-danger btn-sm btn-del"&gt;&lt;i
                                            class="fas fa-trash-alt"&gt;&lt;/i&gt;&lt;/button&gt;
                            &lt;/td&gt;
                        &lt;/tr&gt;
                        {% empty %}
                        &lt;tr&gt;
                            &lt;td colspan="7" class=" text-center alert alert-danger"&gt;No Product Found&lt;/td&gt;
                        &lt;/tr&gt;

                        {% endfor %}

                    &lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/div&gt;
        &lt;/div&gt;


    &lt;/div&gt;
&lt;/div&gt;

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

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

<div class="container">

<div class="row">

<div class="col">

<div class="col-md-10">

<table id="product-table"

class="table table-sm table-responsive-sm table-hover table-striped text-nowrap table-bordered"

width="100%" style="margin-left:12%;">

<thead>

<tr>

<th>Id</th>

<th>Name</th>

<th>Price</th>

<th>Description</th>

<th>Quantity</th>

<th>Date Stock In</th>

<th>Action</th>

</tr>

</thead>

<tbody id="get_table_body">

{% for product in products %}

<tr>

<td>{{product.id}}</td>

<td>{{product.name}}</td>

<td>{{product.price}}</th>

<td>{{product.description}}</td>

<td>{{product.quantity}} {{product.unit}}</td>

<td>{{product.created_at}}</td>

<td>

<button type="button" data-pid="{{product.id}}" data-target="#AddProduct"

data-toggle="modal" class="btn btn-warning btn-sm btn-edit ">

<i class="fas fa-edit"></i>

<button type="button" data-pid="{{product.id}}"

class="ml-1 btn btn-danger btn-sm btn-del"><i

class="fas fa-trash-alt"></i></button>

</td>

</tr>

{% empty %}

<tr>

<td colspan="7" class=" text-center alert alert-danger">No Product Found</td>

</tr>

{% endfor %}

</tbody>

</table>

</div>

</div>

</div>

</div>

After adding the code, you may click the run button to test the code. The output should look like as shown below.

Create template for the customer in Order Management System Project in Django.

In this section, we will learn on how create a templates for the dashboard. To start with, add the following code in your customer_list.html under the folder of customers/templates/includes files.

&lt;div class="container"&gt;
    &lt;div class="col-md-11" &gt;

        &lt;table class="table table-sm table-responsive-sm table-hover text-nowrap table-responsive-sm  table-striped table-bordered display" style="margin-left:11%;"  id="table_id" border='2' align="center"  style="width:100%"&gt;
            &lt;thead class="thead-primary"&gt;
                &lt;tr style="text-align: center;"&gt;

                    &lt;th&gt;View&lt;/th&gt;
                    &lt;th&gt;S.N&lt;/th&gt;
                    &lt;th&gt;Name&lt;/th&gt;

                    &lt;th&gt;Email&lt;/th&gt;
                    &lt;th&gt;Conact No&lt;/th&gt;
                    &lt;th&gt;Created At &lt;/th&gt;

                    &lt;th&gt;Action&lt;/th&gt;

                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody id="get_table_body"&gt;

                {% for customer in customers %}
                &lt;tr&gt;

                    &lt;td&gt;&lt;a href="{% url 'customer_app:view' customer.id %}" class="btn btn-warning btn-sm"&gt;&lt;i
                                class="fa fa-eye"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
                    &lt;td&gt;{{customer.id}}&lt;/td&gt;
                    &lt;td&gt;{{customer.name}} &lt;/td&gt;
                    &lt;td&gt;{{customer.email}}&lt;/th&gt;
                    &lt;td&gt;{{customer.contact}}&lt;/td&gt;
                    &lt;td&gt;{{customer.date_created}}&lt;/td&gt;
                    &lt;td&gt;
                        &lt;button type="button" data-cid="{{customer.id}}" data-target="#AddCustomer" data-toggle="modal" class="btn btn-info btn-sm btn-edit "&gt;
                            &lt;i class="fas fa-edit"&gt;&lt;/i&gt;&lt;/button&gt;
            
                        
                            &lt;button type="button" data-cid="{{customer.id}}"
                                class="ml-1 btn btn-danger btn-sm btn-del"&gt;&lt;i
                                    class="fas fa-trash-alt"&gt;&lt;/i&gt;&lt;/button&gt;
                       
            
                            &lt;a href="{% url 'order_app:create' customer.id %}" class="btn btn-info btn-sm"&gt;
                                &lt;i class="fas fa-plus"&gt;&lt;/i&gt;
                            &lt;/a&gt;
         
                    &lt;/td&gt;
                &lt;/tr&gt;
                {% empty %}
                &lt;tr&gt;
                    &lt;td colspan="7" class=" text-center alert alert-danger"&gt;No Product Found&lt;/td&gt;
                &lt;/tr&gt;
            
                {% endfor %}
            
            &lt;/tbody&gt;
        &lt;/table&gt;

{% include 'includes/pagination.html' %}

    &lt;/div&gt;
&lt;/div&gt;

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

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

<div class="container">

<div class="col-md-11" >

<table class="table table-sm table-responsive-sm table-hover text-nowrap table-responsive-sm table-striped table-bordered display" style="margin-left:11%;" id="table_id" border='2' align="center" style="width:100%">

<thead class="thead-primary">

<tr style="text-align: center;">

<th>View</th>

<th>S.N</th>

<th>Name</th>

<th>Email</th>

<th>Conact No</th>

<th>Created At </th>

<th>Action</th>

</tr>

</thead>

<tbody id="get_table_body">

{% for customer in customers %}

<tr>

<td><a href="{% url 'customer_app:view' customer.id %}" class="btn btn-warning btn-sm"><i

class="fa fa-eye"></i></a></td>

<td>{{customer.id}}</td>

<td>{{customer.name}} </td>

<td>{{customer.email}}</th>

<td>{{customer.contact}}</td>

<td>{{customer.date_created}}</td>

<td>

<button type="button" data-cid="{{customer.id}}" data-target="#AddCustomer" data-toggle="modal" class="btn btn-info btn-sm btn-edit ">

<i class="fas fa-edit"></i></button>

<button type="button" data-cid="{{customer.id}}"

class="ml-1 btn btn-danger btn-sm btn-del"><i

class="fas fa-trash-alt"></i></button>

<a href="{% url 'order_app:create' customer.id %}" class="btn btn-info btn-sm">

<i class="fas fa-plus"></i>

</a>

</td>

</tr>

{% empty %}

<tr>

<td colspan="7" class=" text-center alert alert-danger">No Product Found</td>

</tr>

{% endfor %}

</tbody>

</table>

{% include 'includes/pagination.html' %}

</div>

</div>

After adding the code, you may click the run button to test the code. The output should look like as shown below.

Create template for the orders in Order Management System Project in Django.

In this section, we will learn on how create a templates for the orders. To start with, add the following code in your order_list.html under the folder of orders/templates/includes files.

&lt;div class="container"&gt;
    &lt;div class="col-md-10"&gt;
        &lt;table class="table table-sm table-responsive-sm table-hover text-nowrap table-striped table-bordered"
            style="margin-left:12%;"&gt;
            &lt;thead class="thead-green"&gt;
                &lt;tr style="text-align: center;"&gt;
                    &lt;th&gt;Order Id&lt;/th&gt;
                    &lt;th&gt;Cus.Id&lt;/th&gt;
                    &lt;th&gt;Product&lt;/th&gt;
                    &lt;th&gt;Quantity&lt;/th&gt;
                    &lt;th&gt;Created&lt;/th&gt;
                    &lt;th&gt;Status&lt;/th&gt;
                    &lt;th&gt;Action&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody id="get_table_body"&gt;

                {% for order in orders %}

                &lt;tr style="text-align: center;"&gt;
                    &lt;td&gt;{{order.id}}&lt;/td&gt;
                    &lt;td&gt;{{order.customer.id}}&lt;/td&gt;

                    &lt;td&gt;{{order.product.name}}&lt;/th&gt;
                    &lt;td&gt;{{order.quantity}} {{order.product.unit}}&lt;/td&gt;

                    &lt;td&gt;{{order.created_at}}&lt;/td&gt;
                    &lt;td&gt;{{order.status}}&lt;/td&gt;

                    &lt;td&gt;&lt;a href="{% url 'order_app:edit' order.customer.id order.id %}" class="btn btn-warning btn-sm"&gt;&lt;i
                                class="fa fa-edit"&gt;&lt;/i&gt;&lt;/a&gt;


                            {% if user.is_superuser %}
                        &lt;a href="{% url 'order_app:delete' order.id %}" class="btn btn-danger btn-sm"&gt;&lt;i
                                class="fa fa-trash-alt"&gt;&lt;/i&gt;&lt;/a&gt;

                            {% endif %}

                    &lt;/td&gt;
                &lt;/tr&gt;

                {% empty %}
                &lt;tr&gt;
                    &lt;td colspan="7" class=" text-center alert alert-danger"&gt;No Order Found&lt;/td&gt;
                &lt;/tr&gt;

                {% endfor %}
            &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    $(document).ready(function(){
        $('#user-delete-button').on('click',function(){
            confirm("You should be admin to Delete Order Details")
            //setInterval('location.reload()', 1000);  
          
        })
    
    })
&lt;/script&gt;

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

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

<div class="container">

<div class="col-md-10">

<table class="table table-sm table-responsive-sm table-hover text-nowrap table-striped table-bordered"

style="margin-left:12%;">

<thead class="thead-green">

<tr style="text-align: center;">

<th>Order Id</th>

<th>Cus.Id</th>

<th>Product</th>

<th>Quantity</th>

<th>Created</th>

<th>Status</th>

<th>Action</th>

</tr>

</thead>

<tbody id="get_table_body">

{% for order in orders %}

<tr style="text-align: center;">

<td>{{order.id}}</td>

<td>{{order.customer.id}}</td>

<td>{{order.product.name}}</th>

<td>{{order.quantity}} {{order.product.unit}}</td>

<td>{{order.created_at}}</td>

<td>{{order.status}}</td>

<td><a href="{% url 'order_app:edit' order.customer.id order.id %}" class="btn btn-warning btn-sm"><i

class="fa fa-edit"></i></a>

{% if user.is_superuser %}

<a href="{% url 'order_app:delete' order.id %}" class="btn btn-danger btn-sm"><i

class="fa fa-trash-alt"></i></a>

{% endif %}

</td>

</tr>

{% empty %}

<tr>

<td colspan="7" class=" text-center alert alert-danger">No Order Found</td>

</tr>

{% endfor %}

</tbody>

</table>

</div>

</div>

<script>

$(document).ready(function(){

$('#user-delete-button').on('click',function(){

confirm("You should be admin to Delete Order Details")

//setInterval('location.reload()', 1000);

})

})

</script>

&lt;div class="container"&gt;<br>    &lt;div class="col-md-10"&gt;<br>        &lt;table class="table table-sm table-responsive-sm table-hover text-nowrap table-striped table-bordered"<br>            style="margin-left:12%;"&gt;<br>            &lt;thead class="thead-green"&gt;<br>                &lt;tr style="text-align: center;"&gt;<br>                    &lt;th&gt;Order Id&lt;/th&gt;<br>                    &lt;th&gt;Cus.Id&lt;/th&gt;<br>                    &lt;th&gt;Product&lt;/th&gt;<br>                    &lt;th&gt;Quantity&lt;/th&gt;<br>                    &lt;th&gt;Created&lt;/th&gt;<br>                    &lt;th&gt;Status&lt;/th&gt;<br>                    &lt;th&gt;Action&lt;/th&gt;<br>                &lt;/tr&gt;<br>            &lt;/thead&gt;<br>            &lt;tbody id="get_table_body"&gt;<br><br>                {% for order in orders %}<br><br>                &lt;tr style="text-align: center;"&gt;<br>                    &lt;td&gt;{{order.id}}&lt;/td&gt;<br>                    &lt;td&gt;{{order.customer.id}}&lt;/td&gt;<br><br>                    &lt;td&gt;{{order.product.name}}&lt;/th&gt;<br>                    &lt;td&gt;{{order.quantity}} {{order.product.unit}}&lt;/td&gt;<br><br>                    &lt;td&gt;{{order.created_at}}&lt;/td&gt;<br>                    &lt;td&gt;{{order.status}}&lt;/td&gt;<br><br>                    &lt;td&gt;&lt;a href="{% url 'order_app:edit' order.customer.id order.id %}" class="btn btn-warning btn-sm"&gt;&lt;i<br>                                class="fa fa-edit"&gt;&lt;/i&gt;&lt;/a&gt;<br><br><br>                            {% if user.is_superuser %}<br>                        &lt;a href="{% url 'order_app:delete' order.id %}" class="btn btn-danger btn-sm"&gt;&lt;i<br>                                class="fa fa-trash-alt"&gt;&lt;/i&gt;&lt;/a&gt;<br><br>                            {% endif %}<br><br>                    &lt;/td&gt;<br>                &lt;/tr&gt;<br><br>                {% empty %}<br>                &lt;tr&gt;<br>                    &lt;td colspan="7" class=" text-center alert alert-danger"&gt;No Order Found&lt;/td&gt;<br>                &lt;/tr&gt;<br><br>                {% endfor %}<br>            &lt;/tbody&gt;<br>        &lt;/table&gt;<br>    &lt;/div&gt;<br>&lt;/div&gt;<br><br>&lt;script&gt;<br>    $(document).ready(function(){<br>        $('#user-delete-button').on('click',function(){<br>            confirm("You should be admin to Delete Order Details")<br>            //setInterval('location.reload()', 1000);  <br>          <br>        })<br>    <br>    })<br>&lt;/script&gt;

1

<div class="container"><br> <div class="col-md-10"><br> <table class="table table-sm table-responsive-sm table-hover text-nowrap table-striped table-bordered"<br> style="margin-left:12%;"><br> <thead class="thead-green"><br> <tr style="text-align: center;"><br> <th>Order Id</th><br> <th>Cus.Id</th><br> <th>Product</th><br> <th>Quantity</th><br> <th>Created</th><br> <th>Status</th><br> <th>Action</th><br> </tr><br> </thead><br> <tbody id="get_table_body"><br><br> {% for order in orders %}<br><br> <tr style="text-align: center;"><br> <td>{{order.id}}</td><br> <td>{{order.customer.id}}</td><br><br> <td>{{order.product.name}}</th><br> <td>{{order.quantity}} {{order.product.unit}}</td><br><br> <td>{{order.created_at}}</td><br> <td>{{order.status}}</td><br><br> <td><a href="{% url 'order_app:edit' order.customer.id order.id %}" class="btn btn-warning btn-sm"><i<br> class="fa fa-edit"></i></a><br><br><br> {% if user.is_superuser %}<br> <a href="{% url 'order_app:delete' order.id %}" class="btn btn-danger btn-sm"><i<br> class="fa fa-trash-alt"></i></a><br><br> {% endif %}<br><br> </td><br> </tr><br><br> {% empty %}<br> <tr><br> <td colspan="7" class=" text-center alert alert-danger">No Order Found</td><br> </tr><br><br> {% endfor %}<br> </tbody><br> </table><br> </div><br></div><br><br><script><br> $(document).ready(function(){<br> $('#user-delete-button').on('click',function(){<br> confirm("You should be admin to Delete Order Details")<br> //setInterval('location.reload()', 1000); <br> <br> })<br> <br> })<br></script>

After adding the code, you may click the run button to test the code. The output should look like as shown below.

Run Quick Virus Scan for secure Download

Run Quick Scan for safe Download

Downloadable Source Code Below.

Anyway, if you want to level up your programming knowledge, especially python, try this new article I’ve made for you Best Python Projects with source code for Beginners. But If you’re going to focus on web development using Django, you can download here from our list of Best Django Projects with source code based on real-world projects.

How To Run The Order Management System Project in Django with Source Code?

Step 1: Extract/unzip the file
Step 2: Go inside the project folder, open cmd and type the following commands to install Django Framework and run the webserver:

pip install -r requirements.txt
python manage.py runserver

Step 3: Finally, open the browser and go to http://127.0.0.1:8000/

Summary

In summary, this 2020 Order Management System Project in Django with Source Code can be useful to students or professional who wants to learn python programming language. This project can also be modified to fit your personal requirements. Hope this project will help you to improve your skills. Happy Coding!

Inquiries

If you have any questions or suggestions about Order Management System Project in Django with Source Code, please feel free to leave a comment below.

Leave a Comment Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.