Beginner app with Django

I am starting my Django journey as a lot of backend developers in my current job and earlier projects, uses it. In backend technologies, i have used NodeJS the most.

So, it was time to learn a new backend tech and got this awesome tutorial from freecodecamp. This post is based on the same, but the difference is the OS. I used a Mac which changes a lot of commands and installations.

In this project, we will not only create the API endpoints. But also the complete frontend with template langauge(we can do this in NodeJS also). Bt most real world case will be API endpoint with Django/NodeJS and frontend with ReactJS.

Since, mac comes inbuilt with python3 just give the below command inside a folder to create the pythin virtual environment.

Next, we need to activate this virtual environment by the source command.

Now, we need to install django into our environment, using the pythpn command of pip.

We will be using MySQL in our project, so we will install mysql connectors in our project.

To install mysql, we need to brew install pkg-config and mysql.

Finally, we will install mysql through pip.

We also need to download MySQL for ARM on our mac.

Once the DMG is donloaded, open it.

In the next screen, just click on the Continue button.

It will ask us to confirm and the total space to be taken on Mac. Just click on Install button.

In the next screen, we need to give a password, which we need to remember.

Now, we will start a new django admin project with the startproject command. Once the new project dcrm is created, we will go inside it and start our app with the manage.py command and giving our app name website.

Now, we have opened the project in VS Code and inside the settings.py file, we need to add our app of website.

Also, need to give the database details in the same file.

Now, we will create a mydb.py file in the root directory. This file just contains the command to create a database in the local mysql database.

Now, we will create the database by executing our mydb.py file from command line.

We also will verify, if the mysql database was created by logging in to it from the command line. And then giving the command show databases;

Since, we have added a database, we need to give the below python migrate command.

After the migration, we will go inside the database in our mysql database and check the tables.

We will also create a super user for our django installation. Again we need to remember the credentials.

We will finally run the server by the nelow cpmmand and if everything is on, we will get Django up at localhost:8000

Now, inside the urls.py inside dcrm folder, we will add the path for website.urls

Now, in the website folder we will add a urls.py file and inside it create a new view of home.

Now, in the views.py file we will add a home.html file.

Now, create a templates folder inside the website folder. Inside it create a home.html file and add a simple h1 tag.

Now, localhost:8000 will show our h1 tag interpreted properly.

Now, we will create a base.html file in the templates folder. Here, we have a proper HTML structure with bootstrap links.Inside the body, we have a container div. This contains a bit of template language showing a block.

Back in the home.html we will first extend the base.html and inside the block will add the h1.

Now, in localhost:8000 we will see the h1 text, but with proper bootstrap stylings.

Now, we will create a simple navbar.html in our project. Here, again the code is taken from bootstrap.

Now, we will using the navbar.html in our base.html file.

Now, in localhost:8000 we will see a nice navbar.

Now, django comes with admin dashboard and authentication in-built. So, in the views.py file we will ass function for login and logout, with the correct imports.

Now, in the urls.py we will add the path for logout.

Now, in home.html file we will add a login form with basic bootstrap stylings.

Now, in localhost:8000 we will see a nice login form.

Back in home.html, we will show a differnt text of Hello World, if the user is authenticated.

To check the above functionality first visit http://localhost:8000/admin and give your superuer credentials. After that in http://localhost:8000 we will see the Hello World text.

Now, in views.py file we add the logic for home. Here, if you are authenticated, you will get a success message and redirected to home. Also, in case of error will get an error message and redirected to home.

Now, in base.html we will add if statement for messages. If we have messages, we will for loop through them and show it.

Now, in http://localhost:8000/ give the admin credentials.

We will get the success message and also the Hello World text.

If we give the wrong credentials, we will get the error message. And also get back the login screen.

Back in views.py file we will have a logout_user showing the proper message.

Now, in navbar.html file we will add the Logout and Login links.

Now, the navbar shows the proper links.

Now, we will create a register route in the urls.py file.

We will create a common form to be used in our add by defining it in the forms.py file. This have different common fields.

Now, in views.py file we will create a function register_user. It will check the username and password1 to register.

Now, we will create a register.html file in the templates folder. Here, we will use the forms.py file with minimum fields.

Now, we will also add the register link in the navbar.html file.

Now, in the http://localhost:8000/register we will see a nice register form.

If we don’t fill all the fields or fill with some error, we will get a message for the same.

But if we fill everything right, we will get the correct message and also redirected to home route.

Now, we want to show some data in home route for logged in user. So, in the models.py file we will add the fields which we want to show, along with data types.

Since, we have added new model, we need to run below commands for database migrations.

Now, in MySQL database we will find a new table for website_record.

In the admin.py file we also need to register this Record.

Now, from http://localhost:8000/admin we will add new records.

We have added two records and both are shown in the Django admin.

Now, in the views.py file, we need to import this Record and pass it in home.html file.

Now, in the home.html file, we will show these records if user is authenticated in a nice bootstrap table.

Now, in http://localhost:8000/ we will see both of the record.

Now, we want to show individual record also so, in urls.py we will add a new path which will take the integer.

Also, in the views.py file we add a customer_record function. It will take the record number and get the exact record and pass to record.html file.

Now, create a record.html file in the templates folder. Here, we are extending base.html and after that showing the record, with a back button.

Now, for each record we will also get a hyperlink.

Clicking on anyone of them will open the details of the record.

Now, we will add the functionality to delete a record. So, we will add a new path in urls.py file.

Now, in views.py file we will add the function for delete_record. This will take the id and delete the record.

Now, in record.html we will also add a button to delete the record. Her we are passing the record id to the delete_record function.

Now, we get a nice Delete button for each record.

Clicking on the delete button deletes the record, with the correct message and redirection.

Now, we will add the path to add record in urls.py file.

Next, we will add the add_record function in the views.py file.

Now, in the forms.py file we will create a new class to AddRecordForm.

Now, we will create an add_record.html file and use the form, with a Add Record and Back button.

We will also add the Add Record link in the navbar.html file.

Now, we can Add Record in http://localhost:8000/

The last functionality is to update_record, which we will add in urls.py file.

Now, we will create the update_record function in views.py file which will call the update_record.html file.

Now, the update_record.html file will contain the form with Update Record button.

We will also add the Update Record button in the record.html file.

Now, we can click on the Update Record button in the record page.

And then we can update the record.

The record gets updated properly.

This completes our post. You can find the code for the same here.