Django + Angular with MySQL Database: CRUD example
Tags: django, angular, mysql, crud
Published: 2020-12-15 03:07:04

In this tutorial, we will learn how to build a full stack Django + Angular + MySQL example with a CRUD App. The back-end server uses Django with Rest Framework for REST APIs. Front-end side is made with Angular 11/10/8, HTTPClient & Router.

## Django + Angular + MySQL example Overview
We will build a full-stack Django + Angular Tutorial Application working with MySQL database in that:

* Each Tutorial has id, title, description, published status.
* We can create, retrieve, update, delete Tutorials.
* We can also find Tutorials by title.
* The images below shows screenshots of our System.

– Create an item:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mdtlfxfzztb4oxhhgh6s.png)

– Retrieve all items:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0x0fpu8t10iwjwenz7v8.png)

– Click on **Edit** button to view an item details:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/00msnmg3vihm257wc6uf.png)

– On this Page, you can:

1. change status to *Published* using **Publish** button
2. remove the Tutorial from Database using **Delete** button
3. update the Tutorial details on Database with **Update** button

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rj2k2fq5gkwltdpzvo4w.png)

– Search items by title:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4kiixj75yayxf8ax8j09.png)

## Django + Angular + MySQL Architecture
This is the application architecture we’re gonna build:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hnhrkqsou1fp2d5ylg3x.png)

– Django exports REST Apis using Django Rest Framework & interacts with MySQL Database using Django Model.
– Angular Client sends HTTP Requests and retrieve HTTP Responses using axios, shows data on the components. We also use Angular Router for navigating to pages.

## Django Rest Apis Back-end

The following diagram shows the architecture of our Django CRUD Rest Apis App with MySQL database:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w3sfl154wyp8boazbs8z.png)

* HTTP requests will be matched by `Url Patterns` and passed to the `Views`
* `Views` processes the HTTP requests and returns HTTP responses (with the help of `Serializer`)
* `Serializer` serializes/deserializes data model objects
* `Models` contains essential fields and behaviors for CRUD Operations with MySQL Database

These are APIs that Django App will export:
* POST	`/api/tutorials`	create new Tutorial
* GET	`/api/tutorials`	retrieve all Tutorials
* GET	`/api/tutorials/:id`	retrieve a Tutorial by :id
* PUT	`/api/tutorials/:id`	update a Tutorial by :id
* DELETE	`/api/tutorials/:id`	delete a Tutorial by :id
* DELETE	`/api/tutorials`	delete all Tutorials
* GET	`/api/tutorials?title=[keyword]`	find all Tutorials which title contains keyword

### Project structure
This is our Django project structure:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/32vlz0vlt3isiea8kbec.png)

## Angular Front-end
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/maswt7c3xrf6edmdj471.png)

– The `App` component is a container with `router-outlet`. It has navbar that links to routes paths via `routerLink`.

– `TutorialsList` component gets and displays Tutorials.
– `Tutorial` component has form for editing Tutorial’s details based on `:id`.
– `AddTutorial` component has form for submission new Tutorial.

– These Components call `TutorialService` methods which use Angular `HTTPClient` to make HTTP requests and receive responses.

## Project Structure

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j7r7cgbw103tvc6swu1y.png)

For more details, implementation and Github, please visit:
[https://bezkoder.com/django-angular-mysql/](https://bezkoder.com/django-angular-mysql/)