Blog

7. Data Visualization Using Forms and Views

Attention! If you're having trouble following the previous step, you can visit relevant lesson , download the archive of the previous step, install it, and start this lesson exactly where the previous one ended!

In this course, we will go through all the stages of creating a new project together:

• 1. Introduction. Who is this course for? Preparing the Development Environment
• 2. Project Planning. Select and Update HTML-template
• 3. Choosing an HTML template and embedding it in a Django project
• 4. Registering and Authorizing Users on a Django Site
• 5. Creation of Database Functionality Using TDD (Test Driven Development)
• 6. Adding a scraping (parsing) module and autofilling the database directly from the Internet!
• 7. Data visualization using forms and views

Add pages: shop.html, shop-details.html and cart.html

Our project is nearing completion, from which we are literally a few last steps away.

The most important functional part, which accounts for all the basic operations with the database, was completed in the 5th lesson. Those, in fact, we already have all the business logic and we just have to add a user interface for displaying database data and changing them.

To warm up, let's first do what we already know well - copy the last 3 pages from the template to the templates/shop folder that are still there: shop.html, shop-details.html and cart.html. And let's try to open them in the project.

Actually, it is not difficult to make sure of this: the actual tree diagram of our project is presented on the slide below:

├── authentication
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── db.sqlite3
├── main
│   ├── asgi.py
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── requirements.txt
├── shop
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── static
├── templates
└── venv

Now we copy the static files: we copy the entire contents of the asserts folder of the HTML template to the static project folder. Next, we copy the main page, as long as it is (that is, without highlighting the common part into the base page base-page.html for now). Let's just copy the index.html template file into the templates folder of our project.

Next, we need to remember that in order to display a page in a Django project, at least 2 steps are required:

Now in our project, in addition to the main folder, there are two more application folders: the shop folder and the authentication folder. All three of these folders already have, or can be added a couple of files urls.py - views.py. But only one of them: a pair of main from the main folder can provide a url that does not have the additional insertion of url fragments in the form of /auth/ or /shop/ . In other words, links (urls) from the main folder will lead to the "clean" address of the domain name.

Of course, most often the home page was displayed at the address of a domain name. So we have decided on the location of the urls.py - views.py pair, it remains only to add the views file, which is still missing there, to the main folder. py. And then make the appropriate entries in these files:

main/urls.py

from django.contrib import admin
from django.urls import path
from shop import views

urlpatterns = [
    path('', views.index, name='index'),
    path('admin/', admin.site.urls),
]

Next, let's create a simple view, whose tasks will only include rendering (creating) the specified template. To create it, you can use a ready-made view file from one of our applications, or create a new views.py file in the main folder.

main/views.py

from django.shortcuts import render


def index(request):
    return render(request, 'index.html')

We try to run it, and we see that the main page is displayed, but the styles on it are completely absent. It's understandable: and links to styles should now be written in completely different paths (before, static files were in the asserts folder, and now it is in the static folder), and the way these links are written should also be completely different.

• Firstly, every HTML page must now begin with a static load command {% load static %}.
• And secondly, in all links, the path to all static files should now look different

<link rel="stylesheet" href="../construct/assets/css/style.css">

but like this:

<link rel="stylesheet" href="{% static '/css/style.css' %}">

We refresh the page, and we see that the picture has changed, but apart from the inscription Loading... nothing appears. So you need to update all links to the main page static files. And especially the js-files at the end of the page...

Well, now you can see something. Certain styles have appeared, although not all. In order for all of them to appear, you need to sequentially "walk" through all the links and carefully and carefully change them. As you can see, you can't do without a minimum knowledge of HTML on the back-end.

Extract Common Part of All Project Pages to Base Bage

Well, in order not to get up twice, we immediately optimize our work on bringing statics in accordance with the new requirements for all pages.

First of all, you need to pay attention to the fact that all pages of our HTML template have one common part, which includes the header (including the main menu) and footer. These elements are present on absolutely all pages. Therefore, it makes no sense to first duplicate the insertion of the same code, and then also suffer with changing links to static files. It will be much more reasonable if we separate this common part into a separate base page base-page.html, and leave insertion points for unique content from the project pages we need on this base page.

Now every HTML page, except for the base one, will have exactly the same structure as the index.html page:

{% extends 'base-page.html' %}
{% load static %}

{% block title %}
    < Page Name >
{% endblock title %}

{% block container %}
    < Current Page Content >
{% endblock container %}

That is, now when the page index.html is loaded, the base page base-page.html is loaded first (extends 'base-page.html') , then the statics for this page are loaded (load static), and then the current values ​​of the < Page Name > and < Current Page Content > blocks are added to the specified insertion points.

All other pages will be similarly designed. For example, for the following page about-us.html, you need to do the same operations:

• Add a new line with a new url to main/urls.py;
• Add a new view to main/views.py;
• And add the about-us.html page to the templates folder.

main/urls.py

from django.contrib import admin
from django.urls import path
from shop import views

urlpatterns = [
    path('', views.index, name='index'),
    path('about/', views.about, name='about'),
    path('admin/', admin.site.urls),
]

Next, let's create the simplest view, the tasks of which will only include rendering the specified template. To create it, you can use a ready-made view file from one of our applications, or create a new views.py file in the main folder.

main/views.py

from django.shortcuts import render


def about(request):
    return render(request, 'about-us.html')

And the last third step: add the about-us.html page to the templates folder. The modified HTML code of this page, in fact, will now consist only of the code that was previously located between the header and footer. And the structure of the page about-us.html will be no different from the page index.html.

index.html

{% extends 'base-page.html' %}
{% load static %}

{% block title %}
    < Page Name >
{% endblock title %}

{% block container %}
    < Current Page Content >
{% endblock container %}

Thus, after creating the base page, we can place in the templates of all other pages of the site only the original HTML code that is not in the base template. Of course, without forgetting to give a link to the base template. And that's it! This incredibly reduces code duplication and makes it easy to make changes to all pages of the site at once, just changing the code on the base page.

You can learn more about all the details of this stage from this video (RU voice):

To the next stage of the project

2. Project Planning. Select and Update HTML-template

Attention! If you're having trouble following the previous step, you can visit relevant lesson , download the archive of the previous step, install it, and start this lesson exactly where the previous one ended!

In this course, we will go through all the stages of creating a new project together:

• 1. Introduction. Who is this course for? Preparing the Development Environment
• 2. Project Planning. Select and Update HTML-template
• 3. Choosing an HTML template and embedding it in a Django project
• 4. Registering and Authorizing Users on a Django Site
• 5. Creation of database functionality using TDD (Test Driven Development) or Test Driven Development example
• 6. Adding a scraping (parsing) module and autofilling the database directly from the Internet!
• 7. Data visualization using forms and views

Planning

In the last lesson, we prepared the development environment, created a new project in it, added the necessary settings to this project, and even created two new applications that will be responsible for registration/authorization and for the operation of the online store. In other words, we have completed the initial typical operations, which correspond to the preparatory stage of 99.9 (9)% of such projects. And now is the time to draw up a detailed plan of our further actions.

Project planning is, in fact, not an easy task. For these purposes, even a special scientific discipline "Project management" has been created. Of course, the format of our mini-course doesn't allow us to delve too deeply into this. And, nevertheless, a few words about project management still need to be said.

I think I won’t open America to anyone if I say that a project can be completed without any plan. It will just take longer and cost more. (If it works at all!)

Therefore, the hallmark of a good plan is that in each of its paragraphs it answers at least 4 basic questions:

• What exactly do we do?
• How do we do it?
• What resources (What resources are used to run the current step?)
• When (By what date?)

If there are answers to these questions for all points of the plan, we can be congratulated: we really have a plan! Well, if not, then we do not have a plan, but just a dream!

But what if we are going to do something that has never been done before? And/or if not one of the four questions, not one answer?

The answer is very simple: you need to highlight this unknown direction, "Terra incognito" in a separate plan. Plan of research work.

But what about the destination, with the timing? After all, in research work it is very difficult to determine the value?

And this problem is also solvable: where it is impossible to determine, you can always set a deadline that will not allow this research work to go to infinity.

Well, then everything is simple: if we have found answers to all unknown questions BEFORE the deadline, then we move on to the second stage: we draw up the results of the research in the usual way and start work. Well, if we didn’t meet it, then it’s likely that we didn’t take up our business. Therefore, we inevitably disappear with this idea and begin to work on the outcome of another task.

Fortunately, the problem we face in this mini-course is the most common and trivial one. Therefore, here you just need to carefully rewrite all the stages of our plan in the checklist, and, as you complete them, gradually cross them out, move them from line to line.

This idea seems completely absurd. But do not rush to draw conclusions!

Where can I get an HTML template for a project?

There are at least three answers to this question:

1. Do it yourself,
2. Order from professionals,
3. Use the services of a store of ready-made templates.

All of these options have their pros and cons:

1. First option will require time, design skills and the skills of a HTML coder. That is, it will not suit everyone.
2. The second option assumes that you have some financial reserve, and, oddly enough, a VERY clear understanding of what exactly you want to get in the end. It is important to remember here that the cost of a good front-end can be a sum with many zeros, and that it will be very difficult for a beginner to figure out where the production need ends and the waste of money begins. Moreover, good professionals are able not only to do well, but also to convince well)
3. Therefore, the best option for everyone, and especially for startup owners, is to visit the online store of ready-made templates. Here you can not only see different options, but even touch (in the sense of "click"). The prices here are quite democratic, and there are even completely free options. For example, the free template that is used in our project was taken from this online store: Template Monster . True, at present this particular option is not available there, but still, there are a sufficient number of similar and free options. By the way, please note that only HTML5 templates will work for us.

Planning the pages of the future template

So, the selected template is downloaded from the Template Monster website and unpacked into a separate folder. If we open the index.html file in the browser, it may seem that we have a ready-made project in front of us: all (or almost all) buttons and links work and lead to the necessary pages. With one, however, significant caveat: all these beautiful pages are filled with not quite the information that we need. Therefore, right now we have to determine which pages we will leave, which ones we will delete, and which, on the contrary, we will add.

Let's now decide on the set of pages of our future template. Our project will require the following pages:

1. Home pag.
2. Registration page.
3. Authorization page (login)
4. Product catalog page. Here, control will be added to select a product and place it in the basket in the required quantity
5. Product detail page - page with more detailed information on the product
6. Cart page - a list of products selected for purchase and payment.
7. Scraping control page. Must be available only to company staff and NOT available to customers

Obviously, all of these pages (except for the detail page) should have links in the main menu. And it is also desirable that the registration / authorization menu be separate from the main one.

Website functionality planning

The database will be as simple as possible (after all, our course is mini, not maxi).

The product table will be “flat”, i.e. no categories/subcategories. The measure of the item will be “pieces”. The selected product with the set quantity is automatically added to the shopping cart. If there is no basket for this user yet, it is created, if it already exists, it is added.

If the goods from the Cart are sent for payment, the Cart is cleared and the Order appears with the status "waiting for payment".

To account for payments, a table of payments must be created. If the amount of the credited payment is greater than or equal to the amount of the order, then the Order changes its status to “paid”, and a “negative” payment with a “minus amount” is formed in the payment table itself. Thus, to determine the balance of the client's account, it will not be necessary to create a new balance table. In addition, this scheme will also solve the issue of online payment: when connecting an online payment aggregator, the system will only need to create a payment object equal to the amount of the payment received. This will be enough to automatically transfer the Order to the paid category.

And we provide for work with bank payments:

• After each payment, we automatically check for unpaid orders. If there are several of them, then we pay starting from the “oldest” one.
• When creating an Order awaiting payment, we also check if there is a balance on the client's account. And if the amount of the balance is greater than or equal to the amount of the order, we automatically transfer the Order to the category of paid ones and subtract the amount of the order from the balance.

We're done with the planning and moving on to turning the HTML template we just downloaded into the "checklist" of our project.

Template update

So, the selected template is downloaded from the Template Monster website and unpacked into a separate folder. If we open the index.html file in the browser, it may seem that we have a ready-made project in front of us: all (or almost all) buttons and links work and lead to the necessary pages. With one, however, significant caveat: all these beautiful pages are filled with not quite the information that we need. Therefore, right now we have to determine which pages we will leave, which ones we will delete, and which, on the contrary, we will add.

1. Of course, save the home page index.html (HOME).
2. You can also save the about-us.html (ABOUT) page. Since, according to legend, we are a construction company, then someday we will have to give information about ourselves. In this project, we will not post anything on this page, but we will leave it as a reserve for the future.

On this, the choice of finished pages ended - the rest of the pages went through to collect with the help of "glue" and "scissors" from what was on the deleted pages.

3. Registration Page register.html (Register);
4. And login page login.html (Log In).

Kstati, dlya ssylok na stranitsy registratsii/avtorizatsii bylo ispol'zovano gotovoye menyu vybora yazykov na glavnoy stranitsy. Ssylki na sleduyushchiye stranitsy byli razmeshcheny v glavnom menyu:

5. Stranitsa otobrazheniya vsego spiska tovarov internet-magazina shop.html (SHOP). Tam zhe budet dobavlena vozmozhnoct' vybora tovara v nuzhnom kolichestve.
6. Stranitsa detalizatsii vybrannogo tovara shop-details.html (punkta menyu na glavnoy stranitsy u neyo net - otkryvayetsya po knopke "Detail", raspolozhennoy ryadom s kazhdym tovarom.
7. Stranitsa korziny cart.html (CART)
8. I stranitsa zapuska skripta skreypinga (parsinga) tovarov so storonnego sayta fill-products.html (FILL-DATABASE)

Nu, vot, kazhetsya i vso: vse osnovnyye momenty plana uchteny, i vse nuzhnyye stranitsy dobavleny.

By the way, for links to the registration/authorization pages, a ready-made language selection menu on the main page was used. Links to the following pages have been placed in the main menu:

5. The page for displaying the entire list of goods of the online store shop.html (SHOP). There will also be added the ability to select goods in the right quantity.
6. The detail page for the selected product shop-details.html (it does not have a menu item on the main page - it opens by clicking the "Detail" button next to each product.
7. Cart page cart.html (CART)
8. And the page for launching the script for scraping (parsing) products from a third-party site fill-products.html (FILL-DATABASE)

Well, that seems to be all: all the main points of the plan have been taken into account, and all the necessary pages have been added.

And in conclusion of the topic of planning, it is necessary to say about a very important point: when planning, you should always remember that the IT project plan is not a sacred cow. When implementing the plan, details may appear that we did not foresee at the beginning. Like, for example, when planning this mini-course, I did not think about the fact that the second lesson turns out to be completely theoretical. Therefore, I moved the item “Selecting and finalizing a template” from the next lesson to this one.

Summary: if, as the project progresses, it becomes necessary to adjust the plan, adjust it without hesitation!

You can learn more about all the details of this stage from this video (RU voice):

To the next stage of the project

1. Introduction. Who is this course for? Preparing the Development Environment

Introduction

This article is a presentation of the new Drop Shipping Store on Django course, where in 7 lessons you will create a full-fledged online store from free materials that are in the public domain, which can trade anything on a dropshipping basis. If anyone is not in the know, then dropshipping is a way of organizing a business in which the seller places on his virtual storefronts goods that he does not have, but which he can receive at any time from his regular supplier. Therefore, the task of the owner of such an online store is to receive an order and payment from the client, and then transfer the information about the order and the received payment to the supplier, minus his commission.

Everything you need to create this online store: programs, necessary training materials and even video tutorials are in the public domain. You just need to carefully follow everything that will be written and shown in the materials for this course.

In this course, we will go through all the stages of creating a new project together:

• 1. Introduction. Who is this course for? Preparing the Development Environment
• 2. Project Planning. Select and Update HTML-template
• 3. Choosing an HTML template and embedding it in a Django project
• 4. Registering and Authorizing Users on a Django Site
• 5. Creation of database functionality using TDD (Test Driven Development) or Test Driven Development example
• 6. Adding a scraping (parsing) module and autofilling the database directly from the Internet!
• 7. Data visualization using forms and views

As mentioned above, all videos that describe in detail (and most importantly, show!) The development process are in the public domain. Therefore, carefully following the recommendations on the screen, you will eventually get the real working code of the entire project. However, for those who are immediately interested in the final result, there is the option of accessing an archived copy of the project after each lesson. This access can be obtained through a small donation here at this link (registration required).

Well, the site itself, which will turn out in the end, can be viewed in the video at the end of this article.

Who is this course for?

For everyone who is interested in web development, regardless of the level of knowledge and experience!

1. Those who are far from programming and who have been dreaming of their own online store for a long time will be able to get acquainted with the main stages of creating a web project, get an idea of ​​​​the capabilities of the Django framework and understand the amount of work that is necessary for implementation these possibilities. This will allow, firstly, to formulate the tasks for your own project more accurately and in more detail, and, secondly, to specify the requirements for the contractor to implement these same tasks. This will significantly reduce the time for discussing these tasks with the contractor, and hence the overall costs of the project.


2. For those who consider themselves to be Familiar with the basics of the Python language this will be a great opportunity to try their hand at creating their own project. Actually, if you don’t know Python yet, then only two courses separate you from this category: Python for beginners and Python Basics. After passing them, you will be able to independently adjust this project for many of your tasks and save the result in your own repository. Well, and what you can’t implement on your own yet, you can order a third-party contractor (including us!). In any case, finalizing a part of the project is not at all the same as doing the project from scratch!


3. Well, if you are familiar with Python OOP, have already tried your hand at the Django website and created your first Polls application there, then this course will suit you perfectly. Thanks to it, you can independently implement most of the tasks in your application. Well, the execution of that insignificant part of the project, which you cannot do yourself yet, can always be ordered by a specialist. Including us :-).

Preparing the Development Environment

We will be working on a Linux operating system, and as an IDE we will use the Community (free) version of PyCharm. The choice of Linux is not accidental: it is on this OS that all servers that use the Django framework work. Therefore, if you work on Windows, then the best solution would be to additionally install a virtual machine with Linux OS. How to do this is described in detail and shown in these videos:

• How to install VirtualBox on Windows (RU voice)
.
• Installing Ubuntu 20.04 on VirualBox Installing PyCharm and creating a virtual environment (RU voice)

In addition, we will need somewhere to save checked and debugged versions of our code, and a more convenient place than a repository has not yet been invented for this purpose. Therefore, if you have not yet created an account with SSH access in any repository, then it makes sense to read See this article on our website, which details and shows how to create an account on GutHub and add SSH keys to it.

After carrying out all the above additional preparations, we can finally proceed directly to the creation of the project itself in the following order:

• create a virtual environment for our project;
• install the Django package on it;
• create the project itself;
• change the settings.py file responsible for the settings of our project;
• add two new applications to the project:
  • application responsible for registering and authorizing users (authentication);
  • and the application of the online store itself (shop);
• make the first migration;
• create a superuser;
• add to .gitignore .idea for PyCharm;
• and "push" everything done to the repository.

After completing all the points of this checklist, we will try to run the project. Hooray - our project is already running! And all that remains for us is to "slightly" modify its functionality!

We go into the admin panel under the login and password as the newly created superuser. As you can see, there are already user and user group models.

We haven't added this structure yet, but it comes by default in Django. Therefore, if desired, we can add the first users for testing even before we authorize users on the site. That is, directly from the admin panel!

The results of all this preparatory work of the current stage, you can find the link at the bottom of the video, which will lead you to the course Drop Shipping Store on Django (RU voice). And, if you have paid for the course, then you can download an archive copy of this stage (that is, what has been done so far) (registration required).

You can learn more about all the details of this stage from this video (RU voice):