Learn Angular 10, Python Django & SQLite by creating a full stack app from scratch
Source Code:
Related Tutorials:
——————–
React JS + Python Django + SQLite full-stack app
——————–
React JS + .NET Core Web API + Microsoft SQL full stack app
——————–
.NET Core API + Vue JS + Microsoft SQL full-stack web app
——————–
ASP .NET Core Web API + Microsoft SQL CRUD APIs
——————–
ASP .Net Core Web API + MySQL | CRUD APIs Tutorial
——————–
.NET Core Web API + PostgreSQL | CRUD APIs
——————–
.Net Core Web API + MongoDB CRUD APIs
——————–
Python Django + SQLite | REST APIs
——————–
Python Django + PostgreSQL | REST API Tutorial
——————–
Python Django + MySQL CRUD API Tutorial
——————–
Python Django + MongoDB CRUD API Tutorial
——————–
Python Django + Microsoft SQL Server CRUD API Tutorial
——————–
 Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing.
In this video, you will learn how to develop a web application from scratch using popular technologies such as
* SQLite for database.
* Python Django for backend web development.
* And the latest Angular 10 for frontend web development.
We will first start with installing and setting up the environment needed for development.
Then start creating models and tables needed for our app.
Then develop API end points using Django rest framework.
Finally we will be using Angular 10 to design the front end part of our App.
-You will learn how to create the navigation menu and tables using bootstrap.
-Add routing to our Angular App.
-Add modal pop up windows with dropdowns and date pickers.
-And also add upload profile picture functionality and store it in our app.
-We will also learn how to add custom filtering and sorting features without using any third party packages.
1:28 : Install Visual Studio Code.
2:37 : Install POSTMAN.
3:24 : Install Node JS.
4:24 : Install Angular 10.
5:42 : Install Python.
7:03 : Virtual Environments.
9:18 : Install Django REST Framework.
10:08 : Create Django Project.
12:47 : Exploring SQLite DB File.
14:19 : Enable CORS.
16:24 : Create Django App and Models.
20:51 : Add Serializer Classes.
22:34 : API for Department Screen : GET, POST, PUT and DELETE.
31:48 : APIs for Employee Screen : GET, POST, PUT and DELETE.
35:40 : Upload Photo API.
40:10 : Angular Project Intro.
41:42 : Create Angular 10 Project.
45:25 : Generate Components and Services in the Angular Project.
47:43 : Add Service methods to consume APIs.
52:38 : Routing in Angular.
54:49 : Add Bootstrap to our Angular App.
55:52 : Navigation Menu using Bootstrap.
57:58 : Show Department Screen with Bootstrap Table.
1:01:55 : Modal Pop Up Window using Bootstrap.
1:05:42 : Add and Edit Pop Up Screen for Department.
1:10:29 : Delete Department.
1:12:20 : Show Employee Screen with Bootstrap table.
1:15:38 : Upload Photo, Add and Edit Employee Details Pop Up Screen.
1:24:07 : Custom Sorting and Filtering to our Bootstrap table.
19:26 Department name in the Employees table should have been marked as the Foreign Key relating to the Department table, if you don’t do that, the database won’t work properly.
@Sai sri ram fk_department = models.ForeignKey(Department, related_name = “department_name”, on_delete=models.CASCADE)
How to make that
I have searched many videos this is really wonderful I love it….. make a video tutorial of angular 13 and put it on udemy and post it on youtube,,,,,,,Thanks
00:00 – 10:05, Introduction + installing tools, dependencies, etc. + virtual environment
10:06, Create Django Project
12:46, Exploring SQLite DB File
14:20, Enable CORS
16:25, Create Django App and Models
20:50, Add Serializers
22:33, APIs for Department Screen: GET, PUT, POST & DELETE
31:48, APIs for Employee Screen: GET, PUT, POST & DELETE
35:40, API method to Upload Photo
40:08, Introduction to Angular Project
41:41, Create Angular 10 Project
45:25, Generate Components and Services
WIP
If you are receiving an error while using the “PUT” method it’s probably because Django is not receiving data for all required fields. Use “blank=True” in your model’s fields if you want to send partial data and still update the entry.
Thank you for making such wonderful video. I learned a lot from here. I was following your instructions but got stuck when I got an error “‘TenderSerializer’ object has no attribute ‘is_vaid”” while testing PUT and POST methods of my API. GET and DELETE works absolutely fine. My model is different than shown in the tutorial. May I request your assistance, please? Thank you.
You’ve made a typo, it should be is_valid()
I wrote same code as u have but 2 features are not working as expected
1. Image preview after selecting it.
2. Filter option (after typing department ID in textbox doesn’t show any records)
If anyone can suggest me solution it would be very grateful to me
And if anybody have other errors than share with me if i’ll able to help than surely I will ?
It is a great video. Thank you. Hope to see you in a future work like this one.
What Tool did you use to capture the Video ? and also what Editing tool did you use ? can you share with us ?
you can use obs studio, and you could use for edition, the windows 10 video editor, it is really easy to use.
Great. I’m looking this kind of video for a long time. thanks alot.
This is a great tutorial if you already know fundamental of the code otherwise just no use to you copying his code. Easily trick into thinking I know how to code but not.
thanks i was looking for this kind of course for a days . thanks alot
Many thanks for this great content.
Will you be doing a tutorial on
SQL + ASP.Net Core web api + React.js?
Bro nice video!
I’m getting 500 Internal Server Error on Postman due to which “Added Successfully!!” Etc like messages are not being displayed,although data is being added through get request if i check in sqlite. Please help,why can’t i see messages?
I have restarted the server several times but it was upto no avail.
It’s nice video but I’m beginner to angular and web api please make videos for beginners to learn angular and web api tutorial, thank you so much.
Plzz add autherisation and authentication in the tutorial with drf or do another video on that..plz plz
great! Thanks you very much.
Thanks bro! great tutorial
This was awesome! Thank you very much!
This video is excellent to build an app. It will be great if you can share some tutorials to learn angularjs.