how-to-build-a-modern-web-application-to-manage-customer-information-with-django-and-react-on-ubuntu-18-04

cd ~
python3 -m venv ./env

source env/bin/activate

pip install django djangorestframework django-cors-headers

django-admin startproject

cd ~/djangoreactproject
tree

Output├── djangoreactproject
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

nano ~/djangoreactproject/djangoreactproject/settings.py

...
INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',


]

...

MIDDLEWARE = [
...
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',

]

...





...

python manage.py startapp

nano ~/djangoreactproject/djangoreactproject/settings.py

...
INSTALLED_APPS = [
   ...
   'rest_framework',
   'corsheaders'

]
...

python manage.py migrate

python manage.py runserver

OutputPerforming system checks...

System check identified no issues (0 silenced).
October 22, 2018 - 15:14:50
Django version 2.1.2, using settings 'djangoreactproject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

cd ~/djangoreactproject

npx create-react-app

cd ~/djangoreactproject/frontend
npm start

cd ~/djangoreactproject
tree

Output├── customers
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── djangoreactproject
│   ├── __init__.py
│   ├── __pycache__
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── frontend
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   └── manifest.json
│   ├── README.md
│   ├── src
│   │   ├── App.css
│   │   ├── App.js
│   │   ├── App.test.js
│   │   ├── index.css
│   │   ├── index.js
│   │   ├── logo.svg
│   │   └── registerServiceWorker.js
│   └── yarn.lock
└── manage.py

nano ~/djangoreactproject/frontend/src/App.css

@import  'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';

cd ~
source env/bin/activate

cd ~/djangoreactproject/customers/
nano models.py

from django.db import models
# Create your models here.

from django.db import models

class Customer(models.Model):
   first_name = models.CharField("First name", max_length=255)
   last_name = models.CharField("Last name", max_length=255)
   email = models.EmailField()
   phone = models.CharField(max_length=20)
   address =  models.TextField(blank=True, null=True)
   description = models.TextField(blank=True, null=True)
   createdAt = models.DateTimeField("Created At", auto_now_add=True)

   def __str__(self):
       return self.first_name

cd ~/djangoreactproject

python manage.py makemigrations

Outputcustomers/migrations/0001_initial.py
   - Create model Customer

python manage.py migrate

OutputOperations to perform:
 Apply all migrations: admin, auth, contenttypes, customers, sessions
Running migrations:
 Applying customers.0001_initial... OK

python manage.py makemigrations --empty --name customers customers

OutputMigrations for 'customers':
 customers/migrations/0002_customers.py

cd ~/djangoreactproject/customers/migrations

nano 0002_customers.py

from django.db import migrations

class Migration(migrations.Migration):
   dependencies = [
       ('customers', '0001_initial'),
   ]
   operations = [
   ]

...
def create_data(apps, schema_editor):
   Customer = apps.get_model('customers', 'Customer')
   Customer(first_name="Customer 001", last_name="Customer 001", email="[email protected]", phone="00000000", address="Customer 000 Address", description= "Customer 001 description").save()

...

...
   operations = [

   ]

from django.db import migrations

def create_data(apps, schema_editor):
   Customer = apps.get_model('customers', 'Customer')
   Customer(first_name="Customer 001", last_name="Customer 001", email="[email protected]", phone="00000000", address="Customer 000 Address", description= "Customer 001 description").save()

class Migration(migrations.Migration):
   dependencies = [
       ('customers', '0001_initial'),
   ]
   operations = [
       migrations.RunPython(create_data),
   ]

cd ~/djangoreactproject

python manage.py migrate

OutputOperations to perform:
 Apply all migrations: admin, auth, contenttypes, customers, sessions
Running migrations:
 Applying customers.0002_customers... OK

deactivate

cd ~/djangoreactproject/frontend

npm install axios --save

cd src
nano CustomersService.js

import axios from 'axios';
const API_URL = 'http://localhost:8000';

export default class CustomersService{

   constructor(){}


   getCustomers() {
       const url = `${API_URL}/api/customers/`;
       return axios.get(url).then(response => response.data);
   }
   getCustomersByURL(link){
       const url = `${API_URL}${link}`;
       return axios.get(url).then(response => response.data);
   }
   getCustomer(pk) {
       const url = `${API_URL}/api/customers/${pk}`;
       return axios.get(url).then(response => response.data);
   }
   deleteCustomer(customer){
       const url = `${API_URL}/api/customers/${customer.pk}`;
       return axios.delete(url);
   }
   createCustomer(customer){
       const url = `${API_URL}/api/customers/`;
       return axios.post(url,customer);
   }
   updateCustomer(customer){
       const url = `${API_URL}/api/customers/${customer.pk}`;
       return axios.put(url,customer);
   }
}

nano ~/djangoreactproject/frontend/src/CustomersList.js

import  React, { Component } from  'react';

...
import  CustomersService  from  './CustomersService';

const  customersService  =  new  CustomersService();

...
class  CustomersList  extends  Component {

   constructor(props) {
       super(props);
       this.state  = {
           customers: [],
           nextPageURL:  ''
       };
       this.nextPage  =  this.nextPage.bind(this);
       this.handleDelete  =  this.handleDelete.bind(this);
   }
}
export  default  CustomersList;

...
componentDidMount() {
   var  self  =  this;
   customersService.getCustomers().then(function (result) {
       self.setState({ customers:  result.data, nextPageURL:  result.nextlink})
   });
}

...
handleDelete(e,pk){
   var  self  =  this;
   customersService.deleteCustomer({pk :  pk}).then(()=>{
       var  newArr  =  self.state.customers.filter(function(obj) {
           return  obj.pk  !==  pk;
       });
       self.setState({customers:  newArr})
   });
}

...
nextPage(){
   var  self  =  this;
   customersService.getCustomersByURL(this.state.nextPageURL).then((result) => {
       self.setState({ customers:  result.data, nextPageURL:  result.nextlink})
   });
}

...
render() {

   return (
   <div  className="customers--list">
       <table  className="table">
           <thead  key="thead">
           <tr>
               <th>#</th>
               <th>First Name</th>
               <th>Last Name</th>
               <th>Phone</th>
               <th>Email</th>
               <th>Address</th>
               <th>Description</th>
               <th>Actions</th>
           </tr>
           </thead>
           <tbody>
               {this.state.customers.map( c  =>
               <tr  key={c.pk}>
                   <td>{c.pk}  </td>
                   <td>{c.first_name}</td>
                   <td>{c.last_name}</td>
                   <td>{c.phone}</td>
                   <td>{c.email}</td>
                   <td>{c.address}</td>
                   <td>{c.description}</td>
                   <td>
                   <button  onClick={(e)=>  this.handleDelete(e,c.pk) }> Delete</button>
                   <a  href={"/customer/" + c.pk}> Update</a>
                   </td>
               </tr>)}
           </tbody>
       </table>
       <button  className="btn btn-primary"  onClick=  {  this.nextPage  }>Next</button>
   </div>
   );
}

import  React, { Component } from  'react';
import  CustomersService  from  './CustomersService';

const  customersService  =  new  CustomersService();

class  CustomersList  extends  Component {

constructor(props) {
   super(props);
   this.state  = {
       customers: [],
       nextPageURL:  ''
   };
   this.nextPage  =  this.nextPage.bind(this);
   this.handleDelete  =  this.handleDelete.bind(this);
}

componentDidMount() {
   var  self  =  this;
   customersService.getCustomers().then(function (result) {
       console.log(result);
       self.setState({ customers:  result.data, nextPageURL:  result.nextlink})
   });
}
handleDelete(e,pk){
   var  self  =  this;
   customersService.deleteCustomer({pk :  pk}).then(()=>{
       var  newArr  =  self.state.customers.filter(function(obj) {
           return  obj.pk  !==  pk;
       });

       self.setState({customers:  newArr})
   });
}

nextPage(){
   var  self  =  this;
   console.log(this.state.nextPageURL);
   customersService.getCustomersByURL(this.state.nextPageURL).then((result) => {
       self.setState({ customers:  result.data, nextPageURL:  result.nextlink})
   });
}
render() {

   return (
       <div  className="customers--list">
           <table  className="table">
           <thead  key="thead">
           <tr>
               <th>#</th>
               <th>First Name</th>
               <th>Last Name</th>
               <th>Phone</th>
               <th>Email</th>
               <th>Address</th>
               <th>Description</th>
               <th>Actions</th>
           </tr>
           </thead>
           <tbody>
           {this.state.customers.map( c  =>
               <tr  key={c.pk}>
               <td>{c.pk}  </td>
               <td>{c.first_name}</td>
               <td>{c.last_name}</td>
               <td>{c.phone}</td>
               <td>{c.email}</td>
               <td>{c.address}</td>
               <td>{c.description}</td>
               <td>
               <button  onClick={(e)=>  this.handleDelete(e,c.pk) }> Delete</button>
               <a  href={"/customer/" + c.pk}> Update</a>
               </td>
           </tr>)}
           </tbody>
           </table>
           <button  className="btn btn-primary"  onClick=  {  this.nextPage  }>Next</button>
       </div>
       );
 }
}
export  default  CustomersList;

nano ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

import  React, { Component } from  'react';

...
import  CustomersService  from  './CustomersService';

const  customersService  =  new  CustomersService();

...
class  CustomerCreateUpdate  extends  Component {

   constructor(props) {
       super(props);
   }

}
export default CustomerCreateUpdate;

...
render() {
       return (
         <form onSubmit={this.handleSubmit}>
         <div className="form-group">
           <label>
             First Name:</label>
             <input className="form-control" type="text" ref='firstName' />

           <label>
             Last Name:</label>
             <input className="form-control" type="text" ref='lastName'/>

           <label>
             Phone:</label>
             <input className="form-control" type="text" ref='phone' />

           <label>
             Email:</label>
             <input className="form-control" type="text" ref='email' />

           <label>
             Address:</label>
             <input className="form-control" type="text" ref='address' />

           <label>
             Description:</label>
             <textarea className="form-control" ref='description' ></textarea>


           <input className="btn btn-primary" type="submit" value="Submit" />
           </div>
         </form>
       );
 }

...
handleSubmit(event) {
   const { match: { params } } =  this.props;
   if(params  &&  params.pk){
       this.handleUpdate(params.pk);
   }
   else
   {
       this.handleCreate();
   }
   event.preventDefault();
}

...

...
class CustomerCreateUpdate extends Component {

constructor(props) {
   super(props);

}
...

...
handleCreate(){
   customersService.createCustomer(
       {
       "first_name":  this.refs.firstName.value,
       "last_name":  this.refs.lastName.value,
       "email":  this.refs.email.value,
       "phone":  this.refs.phone.value,
       "address":  this.refs.address.value,
       "description":  this.refs.description.value
       }).then((result)=>{
               alert("Customer created!");
       }).catch(()=>{
               alert('There was an error! Please re-check your form.');
       });
}

...

...
handleUpdate(pk){
customersService.updateCustomer(
   {
   "pk":  pk,
   "first_name":  this.refs.firstName.value,
   "last_name":  this.refs.lastName.value,
   "email":  this.refs.email.value,
   "phone":  this.refs.phone.value,
   "address":  this.refs.address.value,
   "description":  this.refs.description.value
   }
   ).then((result)=>{

       alert("Customer updated!");
   }).catch(()=>{
       alert('There was an error! Please re-check your form.');
   });
}

...
componentDidMount(){
   const { match: { params } } =  this.props;
   if(params  &&  params.pk)
   {
       customersService.getCustomer(params.pk).then((c)=>{
           this.refs.firstName.value  =  c.first_name;
           this.refs.lastName.value  =  c.last_name;
           this.refs.email.value  =  c.email;
           this.refs.phone.value  =  c.phone;
           this.refs.address.value  =  c.address;
           this.refs.description.value  =  c.description;
       })
   }
}

import React, { Component } from 'react';
import CustomersService from './CustomersService';

const customersService = new CustomersService();

class CustomerCreateUpdate extends Component {
   constructor(props) {
       super(props);

       this.handleSubmit = this.handleSubmit.bind(this);
     }

     componentDidMount(){
       const { match: { params } } = this.props;
       if(params && params.pk)
       {
         customersService.getCustomer(params.pk).then((c)=>{
           this.refs.firstName.value = c.first_name;
           this.refs.lastName.value = c.last_name;
           this.refs.email.value = c.email;
           this.refs.phone.value = c.phone;
           this.refs.address.value = c.address;
           this.refs.description.value = c.description;
         })
       }
     }

     handleCreate(){
       customersService.createCustomer(
         {
           "first_name": this.refs.firstName.value,
           "last_name": this.refs.lastName.value,
           "email": this.refs.email.value,
           "phone": this.refs.phone.value,
           "address": this.refs.address.value,
           "description": this.refs.description.value
       }
       ).then((result)=>{
         alert("Customer created!");
       }).catch(()=>{
         alert('There was an error! Please re-check your form.');
       });
     }
     handleUpdate(pk){
       customersService.updateCustomer(
         {
           "pk": pk,
           "first_name": this.refs.firstName.value,
           "last_name": this.refs.lastName.value,
           "email": this.refs.email.value,
           "phone": this.refs.phone.value,
           "address": this.refs.address.value,
           "description": this.refs.description.value
       }
       ).then((result)=>{
         console.log(result);
         alert("Customer updated!");
       }).catch(()=>{
         alert('There was an error! Please re-check your form.');
       });
     }
     handleSubmit(event) {
       const { match: { params } } = this.props;

       if(params && params.pk){
         this.handleUpdate(params.pk);
       }
       else
       {
         this.handleCreate();
       }

       event.preventDefault();
     }

     render() {
       return (
         <form onSubmit={this.handleSubmit}>
         <div className="form-group">
           <label>
             First Name:</label>
             <input className="form-control" type="text" ref='firstName' />

           <label>
             Last Name:</label>
             <input className="form-control" type="text" ref='lastName'/>

           <label>
             Phone:</label>
             <input className="form-control" type="text" ref='phone' />

           <label>
             Email:</label>
             <input className="form-control" type="text" ref='email' />

           <label>
             Address:</label>
             <input className="form-control" type="text" ref='address' />

           <label>
             Description:</label>
             <textarea className="form-control" ref='description' ></textarea>


           <input className="btn btn-primary" type="submit" value="Submit" />
           </div>
         </form>
       );
     }
}

export default CustomerCreateUpdate;

cd ~/djangoreactproject/frontend
npm install --save react-router-dom

nano ~/djangoreactproject/frontend/src/App.js

import  React, { Component } from  'react';
import { BrowserRouter } from  'react-router-dom'
import { Route, Link } from  'react-router-dom'
import  CustomersList  from  './CustomersList'
import  CustomerCreateUpdate  from  './CustomerCreateUpdate'
import  './App.css';

...

const  BaseLayout  = () => (
<div  className="container-fluid">
   <nav  className="navbar navbar-expand-lg navbar-light bg-light">
       <a  className="navbar-brand"  href="#">Django React Demo</a>
       <button  className="navbar-toggler"  type="button"  data-toggle="collapse"  data-target="#navbarNavAltMarkup"  aria-controls="navbarNavAltMarkup"  aria-expanded="false"  aria-label="Toggle navigation">
       <span  className="navbar-toggler-icon"></span>
   </button>
   <div  className="collapse navbar-collapse"  id="navbarNavAltMarkup">
       <div  className="navbar-nav">
           <a  className="nav-item nav-link"  href="/">CUSTOMERS</a>
           <a  className="nav-item nav-link"  href="/customer">CREATE CUSTOMER</a>
       </div>
   </div>
   </nav>
   <div  className="content">
       <Route  path="/"  exact  component={CustomersList}  />
       <Route  path="/customer/:pk"  component={CustomerCreateUpdate}  />
       <Route  path="/customer/"  exact  component={CustomerCreateUpdate}  />
   </div>
</div>
)

...

class  App  extends  Component {

render() {
   return (
   <BrowserRouter>
       <BaseLayout/>
   </BrowserRouter>
   );
}
}
export  default  App;

import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom'
import { Route, Link } from 'react-router-dom'

import  CustomersList from './CustomersList'
import  CustomerCreateUpdate  from './CustomerCreateUpdate'
import './App.css';

const BaseLayout = () => (
 <div className="container-fluid">
<nav className="navbar navbar-expand-lg navbar-light bg-light">
 <a className="navbar-brand" href="#">Django React Demo</a>
 <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
   <span className="navbar-toggler-icon"></span>
 </button>
 <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
   <div className="navbar-nav">
     <a className="nav-item nav-link" href="/">CUSTOMERS</a>
     <a className="nav-item nav-link" href="/customer">CREATE CUSTOMER</a>

   </div>
 </div>
</nav>

   <div className="content">
     <Route path="/" exact component={CustomersList} />
     <Route path="/customer/:pk"  component={CustomerCreateUpdate} />
     <Route path="/customer/" exact component={CustomerCreateUpdate} />

   </div>

 </div>
)

class App extends Component {
 render() {
   return (
     <BrowserRouter>
       <BaseLayout/>
     </BrowserRouter>
   );
 }
}

export default App;