Grocery Store Application - 6. List orders | Python project tutorial

Key Takeaways

in this session we will work on displaying the orders in this particular screen this will be a home page or a dashboard for our application where a grocery store runner can see all the orders which are received so far he can also see the total cost or the total of all the orders so he gets an idea on uh the total business that he is doing so first we will write as usual the python backend api for this so i will go to orders dao and i have created this function called get all orders and i'll just call it from here first okay so usual our usual thing is you create a connection cursor then you say cursor.executequery and what is the query well your query is actually very simple for the orders it will be select star from orders okay we have two tables for the orders order and order details right now we are going to display only the orders not the order details you see in the grid here see these are orders like order customer name total cost we are not showing the details of that order in that grid so this query is good enough once it is executed you will do for record in cursor do something okay what do you want to do you want to return all these orders in an array so i will just say response and response dot append something so i will return it as a dictionary and then return this response can be written from here okay so what do i get here as a tuple when we have an execute this query you get all these columns order id customer name total and date time so that's what i will type in here order id customer name [Music] total date time order id is order id customer name is that total this total and the time is take time all right so you see you are getting all these orders back now we are going to write an api in our server.pi and that api is very simple actually you just create an endpoint so this is what we'll use to call make a call from ui the method is of course get and i am using the same uh order dow dot get or all orders okay so let's run this so now i'm running the server my server is all set and ready now comes the front end in the ui i have this file called dashboard.js okay so if you say dashboard.js that's what dot js i'm referring it from index html see index html in any way programming is the home page so this is my home page uh this this particular thing is my home page in the home page i'm referring to dashboard.js and that's what dot js i'm making a call to order list api which is as you see it is get all orders get all orders and get all orders these two things should be matching and then once i return the response i'm running a for loop as usual and putting all the orders into a table so this is my table where i'm inserting a table row so table row is indicated by tr element okay and this td is the individual cells in that row so whatever i'm getting from the back and i'm just displaying it i'm i'm uh restricting the decimal places to two decimal i don't want to display too big float number that's why so let's test this so i will right click inspect i'll go to dashboard and i'll put a breakpoint here you see i have a breakpoint here and i refresh so when i refresh i get this response back and this response has all this order see you see that so now i'm just going through these orders one by one and these orders are displayed by the way this each if you want to go inside you have to put a breakpoint here you know because it's kind of like async hoodie our application is done now all right we have nice application here it's it's a simple application it needs a lot of improvements but at least you build end-to-end application using python and some web technologies now as an exercise if you go to my github page the link is in video description below you need to uh you know show the order details because here i have the order okay 530 rupees but what did i buy toothpaste rice what is the details of that order so if you put a new column here and add a button see in manage product i had this button okay so similar to this button i can add a view order button when you click on that you show all the individual items in a new screen for that particular order and after you do that yeah so that's an exercise like i have given other exercises as well so there are total five exercises that you need to work on overall as this project continues now working on this exercise will um consolidate your knowledge and just by watching the video you don't learn coding for learning coding you have to do the exercise on your own i don't have the exercise solution i want some of you to work on this solution and then give me a pull request so you can fork this repo in a fork click on fork and then add a directory called solution here which should have solution for all these five exercises and give me a pull request i will pick the best answer and i will merge it and i will give that person a credit that you're also contributing uh and you're helping people once this kind of project is done see this this project is still running in dev if you want to do some freelancing work and go to nearby grocery shop and give it to them you have to deploy this on a cloud so for cloud deployment if you do let's say or basics uh deploy a model to production i have this video where i deployed plus flash server to aws you can use same exit video and deploy the whole application to aws so i hope you will do that aws has a free tier so you can just use that three tier and deploy the code okay so you do that there are also some after thoughts which is managing the database connection etc in a config file so right now in my database if you look at it you know in the code itself i am maintaining username password all of that usually in the production application you will have some kind of config where you have development alpha and production credentials for your database connection and so on you maintain that there and then you read it so i hope you can add that as well a good production code um if you're working in any corporate company will also have a automated test you know unit test and integration test so i did not cover it but i have pi test tutorial so you can watch those and maybe add some unit test people use get as a source code management tool so if you are doing this project along with your friend uh you know you can work on product model your friend can work on order module and you both can collaborate and do this project together so you do this project and the exercises together and use git for source code management you know so that way you get a good understanding of git as well then you can also do each other's code review if you are working for a company the code review process is very normal it is it is something that happens so you are working in a group now you can review your friends code your friend can review your code and that way you you build some skills which will be very helpful uh you know to get a job and then deployment in cloud is something we already talked about now i have a discord server here um so if you join my discord server there is a partner in group finder so using this group you can find people you can make a group and you can do projects together okay so use the discord server there are many other channels which could be useful as well for git i have git tutorials so you can watch this tutorials and use git uh if you do like pie test tutorial there are like quietest tutorials i have which will help you right you need a unit test and so on so whatever you need in order to make yourself ready for industry and job we have all that information all you need is a little will okay so i hope you enjoyed this series so far we are concluding this series this is the last video and uh if you like it give it a thumbs up share it with your friends um you can also if you are interested in web development maybe play with the ui change the colors change the background image just play with it and make it look like your own application now this application was grocery store management you can make similar application for medical store or any other business pretty much you know we covered three tier application development ui back-end database and connecting these three pieces together and this gave you a very good exposure of all everything that you need to build uh the the full application okay so thank you very much for watching and i hope you will work on exercise leave me a comment if you have any questions