Full Stack Project with Vue.js and Flask (Games Library App)

[Music] hey what's going on everyone this is back brace in this tutorial we're going to build a simple quad router application with ujs framework for the front-end design and flask micro framework for the back-end server now the original code was written by michael hermann from test driven dot io he is the co-founder slash author of real python he is also a software engineer and educator who builds financial models writes tech articles and enjoys teaching computer science i talked to michael and he very kindly has agreed that i use his code base in this tutorial because this is what i was looking for in a flask view full stack application as a way of introducing view to all of you guys who love python and work more on the server side make sure to check his profile out his articles and blog posts are simply amazing he's a very prolific tech writer and i'm pretty sure you will learn a lot from him he has developed a lot of courses as well some of these courses like test driven development with python flask and docker authentication with flask react and docker and much more in the description section below you will find a link to his profile on testdriven.io as well as his website and his github profile this is the first view tutorial on the channel but also this is not a view crash course just wanted to make this clear so if you're familiar with react.js then vue won't look foreign to you furthermore if you know html css and javascript then you will grasp view js in no time this project is very similar to what we did with django and react crud application where we have created spa or single page application which was a task manager to perform the four main actions create read update and delete technically speaking we are going to render view components in the browser to create our application so a component in a view file is composed from html css and javascript all together on the same page and i will show you that later so in this project we're going to do several things first we're going to connect our front-end ui view application to flask back-end server 2 we're going to develop a restful api with flask three we're going to use view router to create trouts and finally we're going to use bootstrap for some styling and for two models that we're going to create when you click some buttons so what is view view is a progressive open source javascript framework for building ui the word progressive means it's implemented as additional markup to html basically it's a template model bound to a data model template means html and data means javascript now if javascript or the data model is updated the browser's html is also updated which means it reacts to the model updates vue.js is an example of progressive framework and view is not created by a big company such as google for angular or facebook for react but it was created by an independent software developer called evangeo and comparable to react and angular it's much more approachable and easy to grasp so beginners can get up and running very quickly it's also as powerful as react and angular so it provides all the features you will need to create modern front-end applications there are several view versions but the main versions are view 2 and view 3 and in this tutorial we will be working with view 2 and as you can see if you will type view js.org you'll find here on the top you're browsing the documentation for version 2 point accent earlier click here for version 3.x documentation so the default is version 2 and if you want to check out version 3 you can click here above and you will be redirected to version 3 page so back to view 2 if you will hover over learn and click on guide you'll get a quick introduction to vue.js what it's all about getting started so there are a few ways to install vue.js to your project but as you can read here the easiest way to try out vue.js is using the hello world example you can create an index.html file and you can copy the cdn link and you can paste it there and we can also check out the installation page so here is the cdn again you can use cli which we're going to use today alright so let's get back to the main page so continue the main page declarative rendering which is in my opinion the heart of vue.js so there it is at the core of ujs is a system that enables us to declaratively render data to the dom using straightforward template syntax so as you can see here above this is the template and this is the script in one page so the message here you can see in double curly braces and this is very analogous to django template language or jinja in flask where you can plug in here the variables and these variables are set here below in your javascript code so any changes you will do here view will react immediately and re-render it to the dom and if you will take a look to the stack overflow survey for 2020 you will find that vue js comes in the third position after asp.net core and react js and for the most wanted framework it comes in the second position after react and above angular and flask comes in the seventh position okay which is quite interesting and in the eighth position as the most loft framework okay django number seven spring gatsby express vue.js react and asp.net core alright also it might be a good idea to install vue.js devtools if you're working with chrome browser you might know react dev tools but also there is view devtools it allows you to check out the bugs if there are any bugs and to break your application down if necessary if you would like to take a closer look to whatever features or functionalities that might cause some troubles now let's talk a little bit about flask so flask is a python micro framework like pyramid bottle or cherry pie and with it we will build a restful api today i also have a tutorial to show you how to create a restful api in flask in two different ways and i also have a crash course on flask you can check it out if you like the good thing about micro frameworks like flask is that we don't have out of the box tools and features like in django or turbo gears so you will have to build everything manually from scratch which is a great thing for learning and self-improvement as a developer in my opinion as far as the dependencies or the application tools that we're going to use today view version 2 we're going also to use view cli in order to create our view project we're going to use node you will need to have node installed on your machine because we're going to use npm to install view you will need also to have flask installed and of course you will need to have python installed on your computer all right so enough talking let's roll up our sleeves and start by creating our backend server alright so i thought before we get started to show you what we're going to be building today the main application so it's a very simple quad application where we have the four main actions create read update and delete so i've created the games library here and i can add a game because i love video games and i can add any game so let's say for example that i want to add assassin's creed origins and this is an action type or genre and i didn't play it yet so i will leave played unchecked and i will click on submit and automatically the game will be added to the bottom of the list and as you can see here that it's not played yet okay type action or genre action and the title and you can update the game or you can delete the game so let's say for example that i've actually played assassin's creed origins so in my library i want to show that i've played the game already so i can update it and now it's updated and you can find here an alert telling you that game updated okay you can delete the game so you can just click on delete and game removed and in order to make this spa or single page application effective we're going to send requests from the front end to the back end using axios and also we're going to fetch responses from the back end to the front and to the client side alright so fasten your seat belts and i hope you will enjoy this tutorial alright so let me first go to desktop and i want to create a folder i will call it flask view tutorial and then i want to create two folders so the first is backhand and the second is front end now let's change directory to backhand and i want to activate the virtual environment i'm going to use ppnv if you don't have ppnv you can install it simply by pip install vpnv and once this installed you can go ahead and activate um the virtual environment by typing ppnv shell then i'm going to create a file called requirements.txt i'm going to open that with nano and we will need flask and flash course so the first dependency that we need is flask 2.0.1 and the second is flask um flask course like that 3.0.10 and flask course is very similar to django course headers package it's the same idea all what it does it makes cross-origin requests allows other requests from a different protocol ip address domain name and port which is in our case vue.js to communicate with flask so what will happen is vue.js is going to send requests to flask back-end server but by default submission of cookies across different domains is disabled due to security reasons of course and that's why we need to define in our code the origin from where will come these requests alright so these are the two dependencies that we'll need for our flask project so let me just save the file and exit and you can go ahead and type ppnv install dash requirements.txt and this is going to install the dependencies that we have just defined in our requirements.txt file alright and let's create our main.pi file and let's just open that with visual studio code you can use any text editor that you like sometimes i use vim and nano but almost all the time i use visual studio code the first thing that i want to do is i want to import from flask i want to import flask and jsonify i also want to import from flask underscore course to import course next i want to instantiate a flask application so app equal to flask next i want to update the application constantly so app dot config dot from underscore object and again underscore underscore name underscore underscore now we need to enable course or cross origin resource sharing so we will take course that we have imported from flask underscore course and in the parameters we're going to pass the app and we're going to take resources and these resources will be set to different key value pairs so the route is going to be set which has a key of origins and the value is going to be the localhost 8080 or you can leave it open you can leave the headers to be allowed from any other origin okay or you can do like this okay here we have defined the origins to be the localhost 8080 which is the default port for view allow headers access control allow origin so let's just write our hello world route so i'm using the appdecorator dot route and here with a forward slash or an empty route with the method of get and here we are defining the main function and the role of appdecorator on line 12 is to trigger whatever function comes next in this case we want to return hello world okay and below here if name is equal to main we will run our app in the development mode where the bug is set to true okay that's it let's open our terminal and let's go ahead and make sure that the virtual environment is activated by typing ppnv shell so python and pi all right starting on the local host port 5000 let's click on that and there you go alright so this is the first step for the moment i'm okay with flask i will leave it for now and let's go ahead and open a new terminal instance let's actually maximize this and we're going to be using vue cli to generate a project boilerplate and later we'll change in that boilerplate of course in order to create our own application so go ahead and type npm install g or global installation at view cli and don't forget you need to have node installed on your computer in order to use npm all right good now for the linter and this is very important otherwise view will give you hard time so you will need to npm install dash dash save dash dev es lint eslint plugin view also if you're using vs code like me there are some extensions that you will need to have so view extension is a must you will need to install this and enable it and also you will need to install prettier and prettier is a code formatter for indentation for code wrapping and so on okay good now we have installed view and eslint now to create a view project you will need to type view create and the name of the project so view create and we're going to call it front-end so you will have front-end project inside our front-end folder okay okay so this is the view cli or command line interface let's go ahead and manually select features all right so we have bubble we have the linter formatter that's okay we also need the router and that's all hit enter we need version two user stream mode for router yes go ahead and choose eslint plus prettier lint on save that's okay so where do you prefer placing config for babel eslant and so on let's create package.json file save this as a preset for future projects no thank you now sit back and relax and watch view creating your project all right great view cli has successfully created our project which is called front-end so let's change directory to front-end and let's run the command npm run server let me just check out something very fast okay so i have the back-end folder only opened here in the directory um i think i will need to open a new instance and i want to open both folders in the same directory so let's open this with visual studio code okay in a new vs code instance meanwhile this is running in the background okay which i don't think it's a very good idea maybe we can disconnect the server here and let's change directory to front-end the main folder and let's enter our project which is called front end and let's run the command npm run serve so while this is running in the background let's take a look to the components of our front-end folder so notice here in the front-end folder we have public folder and we have a source folder okay this is done let's open the localhost port 8080 which is the default port for view and there you go the home page for the vue.js application nevermind public for now this is the most important so assets folder is where all your static assets like images and so on are stored components this is where the ui components are stored obviously and inside by default we have a hello world.view application and let me show you that very quickly so as we said before you will have template which is the html you will have your javascript and you will have your css for styling the three languages in the same page and again this is why i think vue.js is more approachable to beginners who know just html css and javascript they can grasp everything in the framework very quickly they can read the documentation it's very clear and um just it's very intuitive framework i don't want to say that it's better or worse than react angular i don't know i never worked with angular i worked with react i've worked a little bit with vue and i can say easily that vue is more comfortable to work with than react right and this is the declarative rendering as we said this message here is being rendered the original message below is set to string so if you will change string to i don't know integer and you will save we should have an error now so let's refresh that and there you go we have an error error integer is not defined so router has a file called index.js and this is where the urls are defined and mapped to the components all right so you can find here routes variable which is set to an array of objects you have path for home and path for about so you can see here above that we have imported home from views folder home.view so if we'll go to views you'll find home and about okay and obviously if you will click on about you'll find this message this is an about page and we'll change this foo bar baz we'll save that it will be re-rendered here for the hello world for um not the hello world home the same thing so we are exporting the default with the name home components hello world and we're importing the hello world from components folder hello world.view alright so this is the general structure of views files and folders app.view i forgot to mention that this is the root component which is the starting point from which all other components will be rendered okay so you can see here router link to forward slash home which is default page about okay and this is the router view component if you will hover over you'll find here that it's a functional component that renders the matched component from the given path components rendered in can also contain its own which will render components for nested paths and finally the main.js file which is the app entry point this loads and initializes view along with the root component alright good now we have been introduced briefly to the different files and folders in the view project let's make everything simple and let's remove the views from the source folder alright so go ahead and delete the whole folder we don't need home and about and of course view is going to complain because in app.view we don't need that we don't have router linked to either home or about and we can also delete this okay and also in index in index.js we will delete this from home we don't need that anymore let's delete that uh we don't have this also and we don't have this as well so we will leave the routes empty and in components i will create a file i will call it shark shark.view and here we'll have the template or the html a div with the paragraph the message which will be declaratively rendered through the script so i will need the javascript go ahead and choose the last one not the last one not type script but javascript so you will export default we need few things we need a name and the name here i will call it shark and we need data method and data method returns the message and the message i will set it to hello this is shark let's just close that okay so the message is going to be rendered into the dom through the template and let's go to the router folder in index.js and now i want to import shark right so we will import shark from components shark dot view and now in the routes i will need the shark route so i will create an object the path i will set it to shark don't forget for slash okay because this is a path this is a route and also the name is um just make it single quotes shark with a capitalized s and the component is of course shark now if you will try to access the shark route you will get the message hello this is shark all right guys make sense now to connect the client to the server to send requests and to receive responses we will need to use axios and we have done that several times before if you're a constant viewer of the channels but we're going to repeat it again so no worries if this is your first time with us so go ahead and install axis in the terminal make sure that you are inside your front-end project inside the front-end folder that we've created in the main flask view tutorial folder and we'll say npm install axios and now we're installing axios our greek friend who is helping us in sending requests and receiving responses from front to back and from back to front all right perfect let's close that terminal and now let's go to our shark dot view and we're going to update this so we're going to import axios from axios and instead of this hello this is shark i'm going to delete that we're going to leave this empty and we're going to fetch this message from the backend server from our flash crest api so let's go to main.pi first let's set this route okay and let me just copy this here say shark the method is get and let's change that here but before let's change the name of the function or the method which is the most important thing and let's say shark let's save this and let's get back to shark.view and i'm going to define methods so the methods here are going to be set to get response function this is a function that i have created to get the response from the backend and i need first to declare a variable called path and this is the path to flask the local host port 5000 route shark and i'm going to use axios.get we're going to pass path as an input then this returns a promise and we handle promises with dot then then i want to take the response and i'm using error functions so you will need to be aware of these kind of things guys promises callbacks arrow functions es6 in general so console.log we're going to log the data in that response just to check out if everything is working okay and the message is going to be equal to res.data and in case of any error we're going to catch it console.air and we will console there and below here i'm going to create lifecycle hooks and it's called created so there is before create created before mount mounted let me just show you very quickly so all life cycle hooks automatically have their this context bound to the instance so that you can access data computed properties and methods this means you should not use an arrow function to define a lifecycle method so created is going to be set to an arrow function and so this is not acceptable we don't do that what we do here is to return directly this dot and the name of the method so get response okay and there are a lot of life cycles so before create created before mount okay cold right before the mounting begins mounted just like in react before update updated activated deactivated before unmount and mounted and so on so a very good youtuber his name is eric um his channel is program with eric he's one of the best youtubers or programmers who has explained everything in details about vue so shout out to eric definitely check him out he has great videos mainly about vue he's a full stack developer a writer and a youtuber alright so let's save this let's make sure that our back-end server is working we'll activate the virtual environment all right now let's go ahead and run our file python main.pi and this is going to initiate the server all right perfect uh let me just try the shark path okay good it's working here and in the front end if i will refresh that good now shark is being retrieved from the back end okay and to prove to you if i will change in main.i in my server file if i will change and i will type here this is a good shark and i will save in the front end if i will refresh i will get this is a good shark so this is being retrieved from flask okay cool now axis is working perfectly the backend and the front end are set let's go ahead now and install bootstrap let me just add a new terminal here and we'll say let me just maximize this so npm install bootstrap at four point six point zero dash dash save all right perfect now let's go ahead and import bootstrap in main.js so we'll import bootstrap slash dist slash css bootstrap dot css here we'll say install bootstrap first so let's go to app.view okay let's just make this a little bit smaller and in the style i don't need all of that i just put margin top 60 pixels and i don't need all of that okay let's just um i want to make this a little bit smaller so maybe we'll get back to shark in our main.py file all right good now let's go to file and instead of a paragraph i will change this to button um just hold on i'll make this button like that okay just make this a bit smaller and that button has a type of button with a class of btn btn primary let's save that okay good now we are sure that bootstrap is well installed all alright perfect in the next part we'll start creating our games.view file welcome back guys so the next thing that we need to do is to go to components folder and we need to create a new file called games.view and this is the main file where we'll be working until the end of the tutorial then let's add template here okay inside the template we will have a div with a class of container and in the paragraph we'll say games library okay let's save that and then we will need to go to index.js in the router folder to make some modifications so i will need to import games from components games.view and i'm going also to add a new object which will be the new games object in the routes array so here the path we're going to say games so whenever you will type the local host port 8080 slash games you will be redirected to the games library our main application and the component is called games with a capitalized g alright something wrong in the spelling components okay let's save that and let's go ahead and change the path from shark to games and there you go games library all right cool let's get back to games.view let me just close this we don't need that we don't need index.js anymore so above the containers class i want to have another div with a class of jumbotron and this is a bootstrap class of course and also vertical center okay and let's trap the whole thing okay good all right maybe it's not very clear but if you can see here this is white and here is i don't know uh light greenish maybe i don't know so there is you can see clearly that there is distinction in the colors and also i want to grab the boots watch cdn and i'm going to show you where i got it in a second okay cool um so what you need to do is to type bootswatch cdn all right click on that and get below you'll find all of these are themes that you can use in this application or any other application it just makes life easier and make you concentrate on the logic part more on the visual part all right so this is the sketchy theme that i'm using in this application and just you click that arrow and you can copy that and you will paste it here and i will leave the link to that below in description next i want to have a div with row class and i will have another div with a class of call columns small 12 pixels all right let's cut this from here then we'll have horizontal line and breaking line then here guys i want to have the alert message you know that message when you add a game or update or delete a game for the moment we will leave it empty just i put a comment here just to remind us that we'll need to work on that later then we need a button okay and that button will have a type of button with a class of btn btn success and we'll make it small all right and here we'll say add game all right perfect just let me make this a little bit smaller now let's have a couple of breaking spaces and we want to create a table so that table will have a class of table and table hover and first we will have um table head so we'll have a table head and we will have a table raw and then i want to have four table header cells okay so table header cells and then we'll say th and this has a scope of column call just let's make a space here okay and here we'll have our first cell which will be the title then i need genre played and actions okay so here genre played and actions here actually played with a question mark all right good this is the table head we need the table body now so let's have table buddy then again we need table row and inside the table row we need three table data for the moment we're going to just write anything doesn't matter but later we will fetch the data here from the backend from flask server so table data will say do re me okay so this is the table data inside our table here and the fourth data which is the actions we will need two buttons so let's have a fourth table data and inside here i will have div with a class of button group and also i will have row of group okay and i need two buttons okay one for the update and one for the delete so just make this a little smaller i hope it's clear for you guys i'll make it like this so i will have a button and this button will have type of button with a class of btn btn let's make it info and also let's make it small btn sm or btn-sm and inside here we will type update this is the first button let's take this and alt shift down arrow key it will copy the line to one line below all right so let's make this delete and let's change the color from info to danger all right sweet we are set for the moment we have our ui the basic ui is all set now we will need to work on the functionality so what i want to do now is to design the backend restful api in flask for the games and this no doubt will follow the restful design principles okay we will use the basic http verbs get post put and delete and then from the view front end ui we're going to consume the backend api so this is what we're going to do coming up next all right welcome back so what i want to do now is to go to the backend folder to main.pi file and i want to start creating my routes i want to start by creating the get route for our games library so here below let me just maximize this for you guys to see better before i do that i will create a games list okay and certainly you can hook this with any kind of database system postgresql or mongodb but for the sake of simplicity of this tutorial we're going to hard code our games here okay so i want to create a games list and in that games list i will have different dictionaries or objects so uh i need a title and the first game let it be 2k21 my favorite video game genre is sports and played we will make it true okay and so on and so forth you can add as many games as you want all right so i'm gonna copy this three more times here i will change just the game so evil within it's a horror game let's say the last of us and i'm changing some values for the played key here so let's make this false um just to diversify a little bit and don't forget the separating commas all right okay good now we want to add the get route handler so here the get route handler and i want my appdecorator dot route as usual slash games and the methods we are using here is going to be get later when we will post i will add post with get as well and we will have a function we will call it all games and we want to return all the games of course in adjacent format and games is going to be set to the games list that we have defined above and stages we'll just type success just to give us a little success message that the request is successful alright so let's just make sure that the backend server is working the flask server is working okay good let's go to port 5000 and try to access the game's route okay perfect so we have our games here in adjacent format now what we need to do is to connect both the back end to the front and in order to fetch all the games from our rest api so to do that let me just this we don't need that let's close this one and let's get back to our front end our ui to games.view alright and let's add our script this one and then here above i want to import the axis library so i will say import axis from axios we want to return games and we will set it to an empty list or an empty array because we are talking javascript now and then we need the methods exactly like we did with the sharks file so methods and here we're going to create our first method and i'm going to call it get games okay get games and we will define the path which will be equal to http colon slash local host port 5000 pointing to the games route then axios dot get and i want to get the path and we handle the promises with the dot then and we have our response as an input and we're going to return this dot games and this keyword is the same as self in python and this simply is the game's data so whatever the response is going to come we want to access the data which is an axios property dot games alright so we are bringing the response and we are storing it in this dot games variable in case of any error we are going to catch them error and and we will console.error whatever the error is and we will have our lifecycle hooks created then i want to return this dot get games all right great but this is not enough nothing happened yet because we will need in our template to iterate over the games lists through v4 directive so we're going to change title genre and played so for the table raw we're going to use the v4 directive so it's a simple loop it's exactly like you would say for game in games i want to return everything so we're going to say v 4 equal to so for game comma index in games that here colon key is equal to index okay that might look gibberish to you but let me break it down so the index value here is used as the key okay and we use the v4 directive to render the list of games okay this is called list rendering and directives is a way to tell vue to do something not only v4 other directives like if v else v on look it up on the view website you will have a big list of v directives and this is the way to start v directive always by typing v dash and then the keyword and then we add them to the html elements as attributes like this we also want to plug in here the game dot title and you can see here immediately that the title has changed only the title all right and let's copy this and let's paste it here and we will change from title to genre save and boom all right let's make this a bit smaller and as far as played this is a bit different so let's just delete me so we will add two spans one if the game is played then we'll display yes else will display now and again we are using the v directives this time not v4 but vf and vls let me show you let's type span and this span will have an attribute v f and if the game is played i want to plug in here yes and let's delete all of that and you can see here that these games are played as we have defined them in the backend okay so you have here true true true which means yes yes yes all right else so v dash else simply we will type no just a quick point to clarify to you guys the get games method is called via the created lifecycle hook okay which fetches the games from the backend endpoint we just created here all right so this is how things work all right now we need a model to add a new game into our library okay we're going to create two models actually but they will look very similar and i will show you that in a minute so to create a model we will need to have the bootstrap view library and i promise you this is the last time that we're going to the terminal to install any package so we'll need to go to the front-end folder and we will type npm install bootstrap view at 2.21.2 dash dash save all right and hit enter alright good now let's go ahead and open main.js in order to update or enable the bootstrap view library okay so we're going to import it bootstrap view with a capital v from bootstrap dash view okay so this is very important and below here we're going to use it so view dot use bootstrap view okay this way we are telling main.js that we are using a new library called bootstrap view now let's get back to the server let you just uh save the file here main.js and let's get back to our main.pi and now let's create the post handler we're going to add post to the get so this is actually going to be get and post but first i need to import request okay in order to send post requests and you might ask me why we didn't use request before for the get method because the default http method is get so you don't need to use request for that by default the http method is get all right but for post put and delete we will need request so here in that array i'm going to add the post request the function is going to be the same and above here i'm going to declare variable i will call it response object and this is equal to a dictionary stages success this is the default response when an http request is successful and we want to post the data in a json format right so post data is equal to request dot get underscore json method and then i want to append the title the genre and whether the game is played or not in the games list right so whatever the game that you're going to add here it's going to be appended to the games list so we don't need this anymore and i'm going to append to the games list the title which is set to post data dot get and i want to get the title and i will repeat that three times so for title for genre and in this case i want to add a message in the response object body saying game added so response object sub message there is an error we don't need a comma here okay so the response object sub message is equal to game added all right so in the case of adding a game this will happen we will change the title to whatever title you will enter likewise for genre and played and then we'll display game added i will say if request dot method is equal to post i want all of that to happen so there was a missing double quote here and the closing curly brace and parentheses okay so if the request method is equal to post we're going to append the game that you're entering in the games list otherwise which means that if the request method is equal to get we are going to get all of the games in the games list okay so the response object in other words sub games oops is equal to the games list okay and we will return the response object and don't forget to put json file method here wrap it around the response object because we need an adjacent format of course so we don't have the chance now to do it from the ui we cannot add a game actually but if you have postman you can try it if you have uh curl which i have here in the get bash what you'll need to type actually is curl dash x post http column slash localhost 5000 games d then the title we will set it to a new game god of war genre action and we'll set play to true dash h content type application json hit enter failed okay i think we are disconnected from the server let me check that very quickly yeah indeed we were disconnected because of that silly mistake of the missing curly braces all right let's just open that one more time to make sure that it's open and let's navigate to games okay let's try in the bash one more time and let's hit enter message game added status success and if you will refresh your flask you'll find that the game has been added here below now let's get back very quickly to our games.view file and here we want to add the model so we can add a new game properly starting with the html of course let's just close the explorer we don't need it uh just before we add the model i want to make a very small modification to the game's library title here so to the in the games library i don't want it to be a paragraph so i want to change it to h1 to make it bigger and then i want to add a bootstrap class so i want to put the text in the center i want also the background to be the primary color and i will change probably the text to white because the background is dark to have contrast there you go and i want to have a border radius of 10 pixels we'll add a style for the border radius is equal to let's make it 10 pixels maybe uh oops yeah there you go this is good i also want to go below the table below the table here and add a footer and that footer will have a class of background primary text white color text center and we'll say and we'll say copyright ampersand copy semicolon for the copyright symbol all rights reserved 2021 and we also want to give it some border radius so style equal to border radius to 10 pixels like in the game library here all right so let's go ahead and add the first model here before uh the last two divs okay so let me just type uh just make some space here we'll say first model all right so we're going to use the bootstrap view for that so b model and the b model will have different attributes here so we will have first of all a reference and this reference is going to be equal to add game model and i'm going to explain that in a second we also will need an id and this is equal to game dash model also i will need a title and the title here will be add a new game i want also hide backdrop and hide footer so simply the bootstrap model will have reference of ag game model id of gamemodel and a title then hide backdrop and height footer then we'll need b form or bootstrap form and we will use something called custom validation where we will add add symbol before submit because this bootstrap form is essentially made either to submit a new game or for resetting so we'll say add submit and the add submit is going to be equal to a method we didn't create yet i'm going to call this method on submit and the same thing will go for the reset method instead of submit we are going to reset just the r here is capitalized in the method that we're going to create in our javascript file or javascript code block and i will give it the width of 100 so class off width 100. uh what's going on what's that there you go then we will need actually to have two form groups and two form inputs for the title and the genre for you to fill so here we'll have b dash form dash group so the first form group will have an id for the form title group because we'll need a label for title then we will need a form title input to enter the text and the same thing will go for the genre so one for the title and one for the genre okay so let's have first id which is equal to form title group then we want a label and this is equal to title why there is an error be form okay missing slash and then after the label we will have label dash 4 and the label 4 is going to be form title input all right so this is as far as the form group so inside the form group actually we'll have the form input so let's have b form input so i made it a little bit tighter and then the form input will have an id of form title input we'll also have type of text then we'll have a view directive which will be v dash model model not model okay and the v model is a view directive used to bind input values back to the state or back to the javascript and if you read the view documentation you will find that the v model is essentially syntax sugar for updating data on user input events okay so you got here below v model internally uses different properties and emits different events for different input elements so you got here text and text area elements you got check box and radio buttons and select fields so v model is going to be equal to add game form dot title and the same thing will repeat it with ag game form dot genre and we'll have a placeholder we'll say enter game okay in the input field so we'll have the second form group with form genre group label genre label 4 form genre input then b form input with id form genre input exactly the same thing except that we are changing names from input from title to genre excuse me then we have a type text the same thing v model the same thing required here is essential so if you will not enter you will have kind of form validation control and i will show you that in a minute in the model if you will try to submit without filling one of both input fields you will have a message telling you that this is mandatory you will need to fill it as far as the checkbox will have also b form group with an id of form dash played dash group then i want to have a bootstrap form checkbox group and here again i will use the v model directive uh so we have used the v model directive in the input for the genre add gameform.genre here add gameform.title and here will be add gameform.played and also i want to have an id of form checks and then inside the b form checkbox group i want to have the actual b form checkbox and this will have a value of true here we'll say played with the question mark and that's basically it guys and the last thing don't forget in the model we want to have the buttons right the submit button and the reset button so here buttons submit and reset all right so we'll have button with the type submit and variant will set it to primary for the color and we'll say here submit and the same thing for um for the reset and also change the type from submit to reset and let's actually return the add game form so we want to have that add game form set to a dictionary of title genre and played so add game form is going to be set to the title we will set it to empty string second the genre and played is going to be an empty list and why play the set to empty list and not string because play can be yes and can be no and now for the second function that we need to create here below so we have our get gains or here we can add a comment get method or get function this is a function actually and below here we will have our second post function so we'll call that function add game and this function will take payload as a parameter and the payload will be set when we're going to create the on submit function so again we will have our path which is the localhost port 5000 and also the same thing as here but instead of get we will have post and we'll add payload next to path and then we will return this dot get games okay so this is what we're going to do now so we'll say axios dot get path and payload and the paid load is going to be whatever you will enter and submit and let's handle the promise let me actually uh take this part paste that here and instead of so we don't need all of that i want the get gains method all right and also in case of any errors we're going to catch them and also i want to return this dot get games and now i want to have an init for method and the init form method will play a very important role when we will submit the game or when we will add the game and this just simply will set the title the genre and play to the default values okay which is empty basically and then we'll be called when we'll submit the new game when you will add a new game okay so this dot add game form dot title okay same thing for genre and same thing for played and of course for played we have a list like we said now we want to work on the on submit function which will be fired when you will submit the form successfully and then i want to prevent the default browser behavior when you will submit so e dot prevent default all right then we want to hide the model when you will submit of course so this dot dollar sign refs dot add game model dot hide we will have a flag here so we'll set play to false um false this is javascript not python okay and now let's have our payload well payload is an object that consists of a bunch of key value pairs so title this dot add gameform.title also for the genre and we want the played state okay but played is a little bit different so let's have a condition here and let's say that if this dot add game form dot played sub zero then we will set play to true now let's use the payload so this dot add game and we'll pass the payload now okay which is getting called when the onsubmit function is triggered and also we want to get the initial form all right why nothing is being updated just hold on guys um uh-huh okay what a silly mistake all right there you go yeah got me for a minute there all right so before we continue let's actually go to button and now i want to try the model so i will add it as a property v dash b dash model dot game dash model okay let's save that here's just a few seconds to re-render and let's try it and there you go all right so all is good we have created the submit button the reset played we didn't give these colors um why nothing is changing oh this is not button this should be b button make sure to change that and i don't want it primary actually i want to be outline info and this one i wanted outline danger for the red color let's save that let's refresh the page at game and boom that's better all right so make sure that the buttons are bootstrap buttons okay let's continue working on the second method now we have on submit and also we need on reset take e as event handler and also we'll use the prevent default method in order to prevent the default behavior of the browser and also i want to hide the model so this dot um dollar sign ref dot add gamemodel dot hide and again this dot init form all right also here i forgot to all right so let's go ahead and try to add a game let's say for instance pac-man which is my favorite game by the way till now since i was 10 um retro and i have played that game submit and nothing happened why nothing happened okay and game payload okay axis.post not get i'm sorry guys this is post and not get so yeah it should work now let's try that uh pacman retro and i've played it submit and there it is pac-man retro played yes it has been added at the bottom of the list okay perfect remember alert message let's go up and fix that so i want to have a condition if the message is shown i want to show that message this is the whole idea so we'll have a b alert or a bootstrap alert with variant of success to be highlighted in green and a directive of v if and we'll say vf equal to show message and we're going to define that below in the javascript part i want to show the message all right let's just make this smaller okay and we're going to plug whatever message here because we'll have different messages right we'll have a message telling us that the game is added updated or deleted so message will be plugged here and if we'll go to the script and we'll go above the methods here and we'll set the message as a default value to be empty string and then in the add game method here we want to return that message so don't forget to use this keyword this dot message to be equal to game added all right so this is for message alert and also i want to set the show message property to true it will go above here if show message then we will show that actual message all right so we will set this to true so this dot show message we will set it to true i keep forgetting that i'm writing in javascript okay so this is to show actual message so let's try that one more time here again let's say detroit become human genre action and i haven't played it yet submit and there it is detroit become human and we have our alert message perfect by the way you can add set time out in order to just not showing constantly the message for 2-3 seconds then it disappears the only thing that it's remaining now is to add in the server the two remaining methods the put and the delete but before we do that i will need to refactor the all games function so i will need to account for the unique id when a new game is added so just above the title i will have an id and i will need to import the uuid library or the universal unique identifier and it's just the python library that helps us in generating random objects of 128 bits as ids okay so we're going to import uuid here let's get back to our uh key value pair for the id and we're going to use the uuid library.uuid which generates a uuid from a host id sequence number and the current time and you can see here there is uuid 1 3 4 and 5. so we're going actually to use the uuid 4 which generates a random uuid simply and we'll have it as a hexadecimal number okay add a comma here so this is the get and post route handler and here we will have the put and delete route handler app.trout games underscore id which will be the unique identifier for each individual game and methods will have put method then i will create a function i will call it single game and single game takes as an input game underscore id okay and the response object like we did above will be equal to status success so we can copy this from here then we want to check out if request dot method is equal to put we will do the same thing as we did here above and in order to update the game we will need to remove the game id first and then we will add that game and i'm going to call this method remove game and it takes game id as a parameter and python is complaining because it can't find this function we're going to define it now so we are going to append to the games list everything exactly like here so we'll take that and then instead of game added it will be game updated and then finally we want to return the response object okay now for the remove game remove the game to update it this is simple so we will define this function remove underscore game and it takes the game id and we will check out in that list if game sub id is equal to game id which is the input so we will loop over the list of games so we'll say for game in games if the game sub id if that game sub id in the games list is equal to game underscore id which is the input the parameter that you enter in the application if both ids are equal we're going to remove that game okay so games dot remove that game and we'll return one or two else we will return false all right let's get back to our games dot view and now we're going to add the second model now i'm not going to type the second model i'm going to copy and paste it but basically it's the same as the first model certainly there are major differences um because this one for ag game and the second one is for the updating but they're basically the same idea so we're going to add the second model but let me just add here to avoid confusion end of model one and here start off model two okay and also yeah first model that's okay or just to be consistent start off model one so take a look here b model reference edit game model above it was add game model we have an idea of game update model titled update hide backdrop hide footer exactly the same like we did above at submit we will have a function called onsubmit update and on reset update then again we will have a form group for title we will have an input with type text and we'll have v-model here which we're going to add in the data in the script below um also this is required placeholder enter title okay so basically as i told you it's the same thing all right we'll have two buttons update and cancel and then what i need to do now is go here below and add edit form here so let me just do that edit form and here we'll have an id title genre and played um let's get back to the update button and i will add dot game dash update dash model at click equal to edit game and we will pass the game this is very important if you will not do this nothing will happen when you will click on the update button so let's get back and create our update game so here we have add game we have sorry we have get game we have add game and let's add update game here so this is update game individual game and i'm calling this one update game and it takes payload and the game id as parameters so we'll need the path as usual okay but we need an individual game this game id that you will enter as an input we will need to pass it as a subroute to the games we will actually use the backticks the template literals so let's change this to the backticks which is on the upper left side corner of the keyboard so we'll add here a placeholder for the game id whatever game id will enter to update and we'll take axios get path payload and this dot get games let's also return the message this dot message all right and we want to show the message and for error handling we can copy this safely because it's the same thing and also i want to handle the update button which is the edit game remember above in the html we have added add edit button which is right here this edit game that takes game as an input so let's get back and create that quickly so edit game that takes game and returns this dot edit form set it to game now what i want to do is to create on submit update because when you will add a game and you will add submit so add game and submit this submits the new game but what about the updated game that's why we will need a method that looks like this one so here we can say this is for model one to submit new game and here below i will add my on submit update okay so the name of the function is on submit update and it takes e as event handler the prevent default and also i want to hide the model upon closing and also i will set played as false flag so you see basically they are the same also if this add game form but instead of add game form it will be edit form okay so if this dot edit form dot played sub-zero then played will be set to true and then also i want to take the payload and then we will use the update game method here so this dot update game and i will pass the payload this dot edit form dot id we're going to update the game by the id alright so let's try to click update and there you go we have worked on the update button we will need to work on the cancel button now so if we'll click here nothing will happen so for the edit form i need to update the init form actually so we're setting this dot edit form dot id to nothing the same for title genre and played and we'll use the init form when we'll create the on cancel update uh reset or cancel doesn't matter really so here handle the cancel button click all right so on reset update and again we'll have those four lines all right to hide the model to have the init form and to get the games all right so let's try that out if we will update this game for example 2k 21 and i will change the title from 2k to 1 to 2k22 i will uncheck played we'll update uh this is refs not ref okay also refs i think i found the problem this instead of add game model it's edit game model and this is a very good listen never copy okay add game form it's edit game form okay let's save that now let's try to update one more time 2k 21 to 2k 22 never played update and there you go updated all right last but not least we will need to work on the delete route so let's get back to the server okay and we are going to add the delete route with the put route okay so put and delete all right and also i wanted to show you uh here i didn't show you the id take a look this is the uuid this is the hash number uh the unique identifier for each game id and simply here we'll say if request dot method is equal to delete i want to remove the game totally and we'll pass the game id that we are interested in deleting and we'll have a response object saying game removed and let's go to the template for a moment and uh modify the button so i'm going just to add the form validator add click we will delete the game with the game id so at click we want to create this function and we will call it the lead game right in the league game and it takes game as an input okay so this is the league game we'll need to go below in the script and create it so we'll have this function called remove game and it takes game id as an input this is what we're interested in and we'll have const path with the backticks http colon slash localhost port 5000 or placeholder for the game id then axios dot delete and we're going to delete totally the path we'll get all the games anyway after deleting that individual game and this is the same pattern that we've been following with update with posting a new game all right and uh the last thing here is handling the delete button actually so handle delete maybe it's more realistic or to be more clean to put it here below here handle the delete button so on the league game with the game in input this dots what was it called remove game okay remove game and we will pass game dot id alright so let's try hold on um just the lead game not on the lead game let's take a look just above in the template yeah there you go the lead game okay all right so let's delete nothing happens we forgot to add the id for each of those items right which is very important if you want to delete any game so let's save that um oh yeah i see there is an s here that's why it doesn't understand okay let's save that let's make sure just the server is working okay so it's updating fine with the id numbers which means that everything is okay all right perfect i hope that we won't have any more errors let's delete and it's deleting perfect delete delete and delete i know it was a bit long but i hope that you have enjoyed this course so let's have a final look let's add a game let's add horizon zero dawn genre action and i've played it submit if i want to update evil within horror and survival will update there you go all is good if i want to delete deleted and everything is working as expected thank you very much guys for sticking around until the end of this tutorial i know it was long but i hope that you enjoyed it and you have learned how to work with vue and integrated with flask and create a rest api fetching data from the backend and sending requests from the front end alright so thank you very much guys for watching and i will see you in the next video take it easy

Channel: Bek Brace

Views: 2,903

Rating: 4.9712229 out of 5

Keywords:

Id: lenV5aVOMp8

Length: 88min 43sec (5323 seconds)

Published: Sun Aug 15 2021