Home python Django Angular Full Stack Project

Django Angular Full Stack Project

17 min read
0
0
134

This  tutorial will teach you how to do the full stack development application using  Django with Angular that are CREATE, RETIEVE, UPDATE and DELETE and SEARCH using mysql Database. The INSERT, SELECT, UPDATE and DELETE statements can be used in any database system, because this is support by all relational database systems.Django is world best Python Framework for developing the webapplications.

 

Let Learn How to Make the System Step by Step

Install the Django

After install Django lets create the django Project

Create Django Project

Lets Run the Project Using Following Command

Now you can see the welcome page of django.

After that lets configure the database mysql.

Lets Install Mysql

After that lets Upgrade the Version

After that go to mysql database i used in this example xampp server. and create the database kms.

Lets Create the Virtual Environment type the following command

after run the command there is a folder created which name is Env.inside the Env folder there is file which is created Scripts. lets go inside the folder type the following command

then need to activated so type the following command

Now you can see the Virtual Environment is activated successfully. then type the following command. come to backward

now you in the Virtual Environment lets install the Django again

After that will create the App which name is StudentApp

StudentApp we have to added in to the setting.py

After that Create the Model

models.py

Install the CORS

Install the Rest Framework

Add the dependencies in to the settings.py inside the INSTALLED_APPS

in to the settings.py inside the MIDDLEWARE add this dependencies

in to the settings.py you have add CORS_ORIGIN Setting make both as true

Angular Connected Port

After that select StudentApp Folder inside the create the file serializers.py

serializers.py

After that lets Configure the Mysql Database into our Django Project

 Install the database Url  type by the following command

After that Install the mysqlclient

After that Configure the database connection on settings.py
settings.py

After that run the migration command 

After done successfully. then type following command

then you can see you database table has been created.

After that open views.py for generating views

views.py paste the code

Manage the Urls

Urls.py paste the code

Run the Project

Angular

Angular is a front-end application we have already created the folder front end inside the folder open the command prompt and type the commands.

Installing Angular CLI

After that create the new Project of Angular running by the following command

After complete the installation then run the project using following command.

Now you see the Angular Welcome Page.

After that open the Angular project into VS code editor.

now you can see the following file structure

Creating a new Component Student Crud

add these module into the app.module.ts file  then only we will manage the forms and Http requests

crud.compoent.html

crud.component.ts

Load More Related Articles
Load More By admin
Load More In python

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Create Maven project in Intellij

In this tutorial will see how to create Maven project in Intellij step by step. First Step…