Drop Shipping Online Store on Django (Part 2)

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