Ruby On Rails Blog with categories

in today's video you are going to learn how to build the block application inside Ruby and race that has category all right so this is the app we are going to build so we will start completely from scratch and so we can click on blog post and so this will take us to the block show page and we get the category and also the title and content and of course we can also edit blog post and we can delete them and also go back to the front page and of course we can also create new blog posts so so this tutorial is awesome make sure to subscribe if you enjoy it all right and obviously this will be the category for this blog post would be I guess tutorials so let's click on create block and so this will redirect us directly to the show page with the category D title we just created and also the concert if I were to local three thousand categories we have here all the categories currently in our app and as you can see we can edit them we can delete existing categories and of course we can create new categories let's create a new category called app for example and now we have create successful a new category and if I had over now to blocks again and clicking on create block and pizza order app really awesome so if I click now here on the categories you see that the app nota Mac he renders the new category that we just created which is pretty awesome so this is all automatically and the fixation great block will make work we redirect us 3d show page again and we get the category and so now if we go back you notice that we have here also the categories list and you also probably noticed that we have here now the app category that we just create so this is all rendered automatic in the background we also display the amount of blog posts that are associated here with each category so obviously for the app category that we just created we have only one blog post which is why we get through number one but we have other color categories with different pose so if I click here and if I click one of them we only display here on the front page the blog posts that are associated with the category that we clicked on so here on games we will get only the blog posts back that are associated with the games category conspiracy fear is only the blog posts that are associated with this category it's also worth mentioning that I use for this tutorial ace six and the new pipeline with webpack so we'll also show you how to use web paper and how to add for example bootstrap to your app and we will of course also sky the app I hope you will enjoy this tutorial and if you do make sure to subscribe to and yeah let's get started alright so I recruited my project as always on my desktop and I am already on my desktop here inside my terminal and before we actually create our new project make sure that you have on your side at least raise 6 or above it's tall otherwise you won't be able to follow along in this tutorial the reason why I mentioned this is because and ra6 quite a lot of things have actually changed especially when it comes to workflows so for example we have no longer access by default to the sprocket pipeline and need to use instead web backer and NPM and you will see this later on where we will add boot threat to our app that the workflow has completely changed I just want to mention also that we still have the option even ra6 to use the sprocket pipeline sort of web pack and NPM but I think a lot of people will be more interested to see the new workflow with web pack and bundle which is why I choose it for this tutorial so to check out which version you have on your site simply type in race and then aversion flag on my side that's 6.0 point one and you don't need to use the exact same version numbers I do although one hurt but the most poem parts that you have at least way 6 or above now Robbie environment will always use the latest version that you have installed as the default version so if you run into this issue in the future where you want to create a new project and want you to raise five instead of raise six for that you can always specify the raised version you want use by saying raise underscore and then the version number you want to use for example five point two point two underscore and then you just and then just go ahead like you would normally do and create a new project all right and so you can install always the latest version by saying gammon so raise or you can specify the version you want to install by adding the version flag this tutorial would be 601 all right so with that being said let's create our project raise new and then I would call my own block Andres and again the name itself doesn't really matter it's completely up to you how you want to call your project once we have choose to a name for your project simply hit enter this will initialize and generate all the files and install it dependencies and because this takes sometimes a little bit longer we pause the video here and start again once it's finished alright so now that race finished let's city into our project folder blog on race and then let's start creating the model so race G model block and title which is a string and then let's also add content which is a text and later on when we will add the categories we will also add additional data to all model but for now we are fine with that let's hit enter and then we also want to migrate that to our database all right so has to be migrated then let's run race G controller and it's called locks and then index we want also do we have to show file new and edits I said enter and then I will open up my text editor by saying code dot and let's also start the server itself so race s and then inside the vs code let's hit command P to open up the search bar and then routes are B so inside here we have now these paths that were generated by race when we ran raise G controllers remove them and I said I want to use resources blocks and we don't need to specify any paths because I want to use the full crud and so let's head over to app views blocks and here let's create a new file underscore form HTML here V and inside here let's let's quickly create the new form for me one for for D block so then we want to have F label for the title and text fields for the title itself and then we also want to have a label for the content and again sort of this time self same text field let's create a text area for the content and let's also add the button for now with maybe something like create La Crosse red looks good let's head over to new HTML and here this really ready form now let's head over to blocks controller and here inside new that's crazy variable blocked new and then also let's create some quickly de create an effort and so here we can say block that's create and then that's passed the block parents which we currently don't have so let's create them here quickly under private block parents and then that's at your the parents require for the block and then we want to permit the title and the content and if you're wondering what this is actually doing so by default our user could basically upload anything to our app in a form which is the common technique to hack a web application and so here we have basically a whitelist and that we can this he define what a user can upload so he was saying okay it's a kind of like a whitelist and he was saying he can only upload a user wizard to a title which is defined as a string in our database and a content which is a text in our database otherwise if it's something else don't upload it through the area based on injected justin ID just deny the permission and do nothing all right and here let's make a new statement so if the block was saved we want to redirect I guess to D block itself and something went wrong let's render in just the new form and then close that all right so with that let's head over to look here three thousand four slash blocks and because we are loading this for a first time takes a little bit longer because as you can see web pikers compiling so again we no longer use your sprocket or anything else but webpack all right so we have that let's head over to new and we give in our basic form let's add some title and content click on create blog post and there we go we were redirected to the first block path here which confirms that this works although we can not see currently the title and the content but if we had over to e terminal you see that we also see that we added here transaction and that we create a block and added that through the database and we get here also the title that we passed any content all right let's display the data so let's head over to show HTML and here let's add maybe an h3 tag and let's render the EO block title let's close that and then let's add also maybe a paragraph and here I want you to simply render the content rights and let's head over to blocks controller inside show we want to find the block that we want to render like so and with that we should be able to see any title any Content there we go now let's add inside show HTML also some links so that we can never get easier for our app so here I was selling to it's an ad it's block path let's pass down the block ID and then let's add maybe a link to delete the blog post and here we need to add also the block ID and also we are important to add using methods and delete and then we also could use maybe a link so we can move or go back to the next pass here we have to add only blocks path let's check out with that if we see at least these links so the backlink will or a work there we go and let's take care of the added and the delete link so inside the blocks controller firsts actually inside edit HTML let's make sure to add your so dear in the form and then inside blocks controller I want to add your inside edit first we need to find the block path or the block ID and then we want to create the method to update the data and here we need to pass that one more time and then we make here something of statement if the book was updated we want to check if the parents were right and then we want to redirect back to the block and something went wrong again just render edit for now it's closed us and with that we're such a girl let's also create the destroy method in here let's find again the block and as you can see we are repeating ourself you're quite a lot and we will take care of that just moment for now that's just at his try method so a block to destroy once we have found the block and then redirects to the action index all right and so if I had over and click on edits we get the form and we get also the title and content of this specific post and if I click on create blog post you see the works and by the way if we will move inside our form the string here it will dynamically render whatever we are want to create a new blog post or edit a new blog post so what's it gonna add it one more time you see we see no the update block string here which makes more sense to me so again how it worked we were redirected we see that we were redirected to D block again and we see now also the updated content and title which in case it works and again you can always go back to the terminal and here you can see that we updated data inside our database with the content in detail all right and so let's try out to delete this blog post so the Shred redirect SG index page there we go and as always you can go back to the terminal and see that we in fact the latest data from the database itself now let's add to the index file next HTML a link to create new blog posts link to create block and then new block path I think that's much more easier to use instead of always retyping it new alright so let's create some blog post here so that we have something to work with again something else here we go and now the next step is so it less actually step is true render D data here on the next page let's create your iteration all we need to do is to create your blocks each do so and then we want to take maybe an h3 tag and render here the link to the blog title and I mean need to pass down the block path with the block ID and it's closed out with that we should now get back all the blog posts that we have and of course we need to go two blocks controller and define here D were able add blocks so blocks thought all right there we go we have two here these links and with the eg with each title of the blog post and if we click on them it takes us directly to D blog post awesome now we have here this hash and that's because I use a equal sign here in the iteration itself so let's remove that quickly there we go alright so I would say we are finished with the blocks crud which is Bri awesome cuz they're in how long it took so again that's just the way race is and now let's take care of the categories so let's shut down the server and here I will use scaffolds to create the crud for the categories so recipes scaffold category and then I want we have for the category a string like so now that's all we need to do so let's hit enter and then let's also migrate this through the database maybe migrate now let's also create the Association for our block model so let's create a new migration and here we say adds category ID to blocks and category underscore ID which is an integer let's hit enter and and also make sure to migrate that as well to the database and so let's start the server and let's head over to the text editor and let's close here anything first off and then we need to establish the active record Association so inside block RB we want to say belongs to the category because a one block post can belong to a specific category and the category itself let's head over to category dot RB has many looks okay so one category can have many or multiple blocks that have this specific or particular category all right so with that let's head over to a browser and let's go here to categories and let's create a new category and let's call this one games and then let's create maybe another one called and no conspiracy theories create category so now we have two categories so the first category has obviously the ID of one and the second one of the idea of two now if we head over to blocks and click here on create blog you see that we have no access to the category or whatsoever whenever we create a new blog post so we need to adjust our form so let's head over to the text editor and let's go through I'm just go form HTML hell over and create your a text field for now for the category ID and then for the well you want to just use for now the category first ID just to see if everything works fine if i refresh not the browser you see that we have here this text field with the first ID of the first category and if I try now would try to create a new blog post it wouldn't work because as you can see it redirected us still to the new page here and if we had a way to determine you see we got here the unpermitted parameter category ID so again that's because we have to whitelist whenever we want to add veda to our model so down here inside block parents let's add the category ID as well and so with that we should now be ready to go to create a new blog post with a category associated to it so if I had now create block she worked and in fact we can head over to the show HTML file and here at the top let's add an h1 tag let's say category and here once you render the block category category and now we should get the category the first category which is games so obviously this is working however if I head over and create a new blog post the current set up that we have with the forum isn't really something that makes too much sense because we could add here anything and we could even add your letters as you can see or any number and this doesn't make sense in case we would submit this with just throw out an error so instead I want to have I would like to have kind of like a drop-down or something like that where we can only access categories that are existing inside our database and so to do so let's head over to underscore form HTML let's customize here the form so instead of getting a text field I want to get the selects and then again we want to get the category ID and this time I just want to get the category all so basically we want to add four select all categories that we have so with that we will already have now a drop-down so that's really nice and as you can see we get two years old so obviously this will be the first one that's the second one but that's not something we want because currently we just render the hash so what we need to do is to map through all of them so let's map here quickly through all the categories let's just call the Vario sea and I want to get the ID for now and as you can see we have now only first thing any second ID and we already know that the first of these games and I think the second one was conspiracy theory so this would obviously work already so if I add here for example to create and create block polls you see that we automatically added here conspiracy theories from the drop-down menu and have fun port however it would be nice to display actually instead of just the ID the name of the category so let's head over to the underscore form and let's add here and our parameter that's at EDC not category and make sure to add a comment here safety 5i without we should now get instead of the ID the name of each category that crazier now one called Alex Jones maybe and choose your conspiracy theory and click on create blog post you see the word we have the title the category and the content so we can also head over to show HTML remove your maybe the paragraph an h1 tag the race is generated there we go looks are already much cleaner alright so everything is pretty much working and the nice thing about the setup is that we can choose your only from categories that are existing inside our database and we can always adjust the category and create for example new or elds existing categories or even lead categories or like cells creating more for example a gossip or maybe category called code base camp and yeah so everything works if I had over two blocks again click on create blog see that automatically up there now all the different categories that we have in our database awesome so we are pretty much finished with that now let's talk about how we can style or ambitions currently alright doesn't look that well so so like I mentioned before we will use web pecker and bootstrap for this let's shut down the server and because we have access to NPM we need to use NPM to install it pendency so what do we need to do in though it's kind of weird to use NPM and race together you need to type an amp IM install and i'm bootstrap and then also we need jquery and popper and we need these two additional libraries because bootstrap is relying on them so if you just want to add size basic size for our bootstrap it is enough you don't need to add jQuery or popper with many many many examples on bootstrap or get bootstrap comm in the documentation required acquiring proper so it's always a good idea to add them as well all you need to do is to hit enter I on my side have a yarn installed and so therefore I have to type in yarn had bootstrap jQuery and then also pop hit enter and so this will install all the dependencies and so justice takes also sometimes a little bit longer house read you here and sorry once it's finished again alright so now that yarn is finished installing all the dependencies let's clean up the console by holding down ctrl C and ctrl L and let's head over to the text editor I would close here everything stay organized and then let's head over to app assets and if you're familiar with raised 5 you probably know that inside app assets we had a folder called the JavaScript as you can see within you set up in web pack and ambien we don't have we no longer have this folder inside here in such channels we have files that are related through action cable in ra6 so if you want to learn more about that make sure to check out my other tutorial where I show how to build race 6 real-time chat application so in this particular tutorial I talked more about these two files and what they actually are doing and so inside packs we have the application JS file and so this file is very familiar to defy we have inside the asset JavaScript folder now in order to make bootstrap work with the new setup all we need to do is to first off import inside the application js5 a bootstrap like so and then we also need to create a new file inside the packs folder called application as CSS and so this file is pretty much the equivalent to what we had to do in raised 5 or we would where we needed to recall the application CSS file here inside the Style Sheets folder so with web pack looks into the packs folder for s CSS file and so inside application as CSS we have to import the bootstrap CSS bootstrap library safety 5 and then let's head over and import that as well to our application JS file so application as CSS and with that we're pretty much ready to go so if we head over to our terminal and first start it server so if i refresh now the app you see that we will be able to see the updated style so you see a different form and also the other styles from bootstrap re applied to our app there we go so our app looks are a much different from what we had before and so again here on the index file so well and notice that we have this kind of puck going on when we whenever we hover over links we get this kind of black box so we see this is not coming from bootstrap itself but that's because whenever we are using scaffold it creates inside style sheets for our scaffold a CSS file and this basically overrides the bootstrap a CSS which something we don't want let's delete just a scaffold as you satisfy here and let's refresh a whole app and you see that first of we have now these blue links here and very bucket disappears all right so we have fixed style as well and as you can see you bootstrap is just working fine without jQuery and popper because we have an initialized aquarium popper again if it's just for simplest size you are totally fine with that setup and that's pretty much straightforward I would say but because I also want to show you how to use bootstrap completely with all the libraries jQuery and popper and things like that let's head over to environments Jas and wire and jazz and here I would paste in some code and the reason why I pasted here simply and instead of typing that on my own it's because this is web pack related and I'm not too familiar with web pack at least yet so I just copy that but it's pretty much I think the way to add plugins to packs I don't think there's some really something complicated here so here we're creating a variable or constant called wet tank that points to the webpack library and I'm gonna use environment which is defined here by race at the top from web hacker in them we appended plugins and set the dollar sign and jQuery as a variable for jQuery as you can see and then popper for Papa GS and the way this is written as basically exactly how bootstrap itself is referring to these libraries okay alright and so with that you're pretty much ready to go to use jQuery and popper as well so some supposed to read you here and retype it or you can search it because it's pretty much all over the internet already and I think even on the documentation you can find these lines of code alright so we have done that now that we have bootstrap jQuery and popper initialized we're ready to style app and I will not explain here everything every single thing instead I would just slide the app so that we have some kind of basics ties going on and yeah all right let's head over to eat exit or closer everything and then I will first off style the index page index.html let's remove these links here from the top and then I want to use I guess something like at diff container and inside here I want you made use of bootstraps flexbox the Flex the Flex row and then justify content center and let's make sure to be a true I'm sign there go and let's copy that here in for each block that we have I want to create a difficult Andy maybe four and then so there are difficult to carve let's create a header and for the header just take the title pasted and we moved that here from the bottom and then inside the card body let's add simply just the link to view and then block pass block D and then let's add for the class maybe a PT a meaty and primary right make sure to add the an tag from the iteration just under the code and before with that should get back this as a result which is obviously not quite working actually the more thing about that let's just make it a row thing with that we're totally fine I don't think we need really a flexbox for that alright so this looks already much better let's add to each code actually each card a margin top of three do you have some space between those there we go and another thing about that let's remove the header and instead let's remove the h3n2 you deep buddy all right and we get that let's head over to the bootstrap documentation and search for the navbar and we just copy your the first example and head over to app HTML and paste it here just under the body tag and let's customize this quickly let's call this look with categories and then we can remove your pretty much all links that we have including the form so that we are only left with the home link there we go now let's align this to the right sides so let's change this to ml and the outer and let's call this here remove this entirely and let's over to it next year HTML copied the crate link safety five and let's head over and paste it here instead and then we need to add your also he class and nav item I was a called nav this undo this quickly Naf link alright so one more time I totally forgot how the class ready link was called Nath link there we go so if you click on that ecstasy form which is the next step we will style let's go form and here yeah let's add here a flex row the flags justify content center let's take all of that and paste it in sides and then for deform I want to create this card and we can actually do this outside he forms a diff card card and the inside if card we want to athlete if card buddy and then we just take the whole form paste it in and quickly customize that so we can always see that if i refresh that we have now something like that removes here inside new HTML this from the top go make sure to add three card a margin top of five and then for the card value of 40 form itself I want to add Adafruit a foreign group and then here let's paste in the lengthy title and then for the text field let's add here a class of form control that we have no stuff like that riots looks very much better so let's copy that repeat these steps wrap that up and the same or here wrapped it up make sure to add the content also the class of form control and there we go now we see that's a little bit too small so that's at here they've called and the aides top and read that all up the whole card inside there all right there we go and we have that change also the submit button that's great blog at a class of BT and BT and outline maybe primary right so we can create a blog post here we could also just copy that's crazy another link quickly actually has removed that just retype that link to back and then blocks path and that's add also a class of BT and BT and outline primary or secondary let's close that all right everything's working here we can create blog post let's style also quickly the show page so show HTML and here I guess we creates a fluid container and wrap everything inside that container I think I misspelled I think it's called container fluid there we go so that's also margin top of three yes I mean I'm fine with that let's change the buttons p.m. ET and primary and here let's add a danger and then here that's at just a secondary right everything is working now that we have done that so anything I forgot let's head over to edits move tease here right so we get that can create a blog post I would say we are pretty much finished with the styling again just like is that I would just add some basic styles now we are finished with our app we have added these tiles we have a full crowd for the blocks we have added a full crowd for the categories we have connected them together everything is working just fine then there's actually one feature left that I would like to add to the app and that is to make use of the categories because even though we are displaying the categories itself and can associate blocks with a category we can really no make use of that so it would be nice to have at least the ability to sort or search blog post for a particular category so that's the last thing we will do so let's head over to a text editor and let's work on that now when it comes to this feature you need normally at least this level of knowledge how things are working when it comes web development and especially how race works because when you think about how should we actually sort blocks by their categories because if you are familiar with the routes itself they normally just accept an idea if we have to find you out as such a route so for example if I click on this blog post it takes us to the first slash block four slash ID and that's only working because race has specified it as a path that can accept an ID but I mean there are many ways to implement that but let's say we want we have here on our index a page some kind of some links so that we can display all the categories and when we click on them we want to lie sort them here directly on the index page without creating new paths and doing some crazy amount of work well let's get started so here on the block's index.html file let's go down here just under the the loop here and let's create here a new iteration and let's just call it categories each new category and then what I want to do here is to create a link to a category category and now when I head over and just paste you for example blocks paths you see that first up we will have the error that categories is not defined that's because obviously we haven't defined that so let's head over to blocks controller and here we say category sikozu category dot all yeah and for some reason it's loading really slow on my site so let me just restart my server quickly race s all right so now as you can see we get all the categories here and so if I click on them nothing will happen okay it will just redirect us so how do we sort now a blog post because again if you would add here some kind of IDs for example to be block or let's say treaty blocks path it won't work because the index page doesn't accept any IDs or whatsoever now the block path itself accepts an ID as you can see here however we don't want to make the category associate with the show page of the block path because that would make too much sense let's add your block path and what I want to do here instead is I want to pass down parameter and let's just call this one cat just like so and then I want to passed on the category ID all right let's head over to blocks controller and let's refactor here our code so here let's define yet as parents okay and then I want to make here in this statement so if Kate it's not nil well then I want to define blocks to lock where the category ID secret that and if not well then I just want to render all blocks and then let's close this and let's remove here just from the bottom and now when I head over and refresh the page and click here one of these links for example a gossip you see that it worked we got here as the parameter the ID of three and currently we don't see any posts that's because I haven't created any post with the category three because but if I click on games where no I have created a post before you see we get now first of the idea of one and as you can see we got all the posts that are associated with games and if I click on conspiracy fury it gives us all the post blank that are associated with this category so obviously this is already working which is pretty pretty awesome now I want to Stein now this so that this looks much more nicer than currently does but on all we are finished okay so this is this was pretty much the last feature and it's obviously just an additional feature but I think a very important feature because now categories make really sense right alright so let's take care of the stylus itself and obviously I won't spend here too much time on that but just for the sake of it let's add here we have a call and before let's see let's wrap up the call and the force inside of cold and the aid let's take all of that and piss the tyrion and then under d : d 8 let's create another call and the 4 and here let's paste that in right so with that that should be normally aligned like so and I guess alright so I found the issue just make sure that you have I mean you can cause to be you here and just double check everything because it's sometimes a thing with these guys and obviously I'm not a web designer but you know I I felt it here under the row ID called md-10 and wrap that up so everything inside here is now wrapped up in silico MD 10 and then when I added additional row to to this ug iteration and now it works and I'm just like I said before I had actually called Andy to like so and now it's aligned just like I wanted let's increase your designs again to four in this one we can change to four and this one to eight there we go actually we can leave it as it was I think look better before there we go all right so let's take care of this year quickly I would create the card inside here actually before I do that yeah if cart and if card header and let's just say category categories and then inside the cards buddy let's add these here and paste them in like so let's add also to the car to serve a margin top of three so there's more nicely aligned 2d the cards as well let's take care and add some styles so for that I would just use list groups and which is copied this year as always from the bootstrap documentation and paste that here in and then I will take the first of I will wrap up I'm just before the diff from the heart body d UL close it and then let's move this year just under the UL list and let's take the link and paste it here in and 4-d counts or actually let's check out how this looks now category Oh major mistake let's put the ant X down here alright so obviously this is working I also want to display the live count so all we need to do here is to get the cat I actually just category blocks count but we should get the counter ago we have three posts that are associated with the games and suppose they're associated with conspiracy theories this is obviously working now the only thing that I obviously don't like is how this currently looks like so I guess this has something to do with that I'm only using here a co MD 2 and because I made this larger I need to make this year one smaller just like a head is before actually yeah seems like that's the only way to do that to me honest I think we can Inc increase here Nicole from the card so that we are with that we are only displaying two cards but I think that looks actually much better all right so if I click on conspiracy theory this will update that immediately without really going to another half so keep that in mind we are not we have not added new paths or whatsoever so with that setup we we just made this function work without adding bunch of new paths or functions and things like that it's a really clean solution and I Hall right so we are pretty much finished with the tutorial we added blocks with a full crud we added categories with a fork rot connected them with D block added styles you also learned how to add bootstrap to ra6 we used web Packer and NPM did the new workflow in race 6 to do that we added all these dyes and then we also talked about how we can associate or search for specific post without adding bunch of new paths and additional functions and things like that so keep that in mind a lot of tutorials out there not that I want to bash them or whatsoever but a lot of suitors like have additional paths and things like that and there are many ways to achieve that the thing with what we have done we have probably found the cleaning solution to do that and it's also super fast as you can see and of course this is all working so if I click here on create block and criterium may be something or what is maybe maybe for code base camp learn how to or locks with categories awesome tutorial make sure to subscribe and make sure to LIKE the video thanks for watching the clicking on cred block you see the create a new blog post and if I go back we have now here for codebase candles category one blog post awesome so with that that will wrap up to see you here I hope you learned a lot if so I just want to remind you because it helps a lot if you enjoy my content if you learned something from this video make sure to like it and make sure to subscribe i'm currently at almost 500 subscribers I'm actually at 486 subscribers I would be actually great if we could make it to 500 until the end of December so again if you like my content if you enjoy it make sure to subscribe because it has a really a lot alright so with that being said I hope you learned a lot if you have any questions if something was not clear make sure to use the comment section other than that thanks for watching as always as you make next body [Music] [Music] you

Channel: CodeCampBase

Views: 6,144

Rating: 4.9689922 out of 5

Keywords: Rails, blog in rails, Web development, Create your own blog, Blog tutorial, Blog course, Web course, Web tutorial blog, Blog app, How to create a blog, Ruby on Rails beginner, Rails for beginner, space, Internet, crazy, coding, ruby, c#, Unity3d, unity, python, Django, how to create a blog, Ruby on rails blog tutorial, Ruby on rails for beginners, Coding for beginners, Web development for beginners, Web design for beginners, How to make a website, How to start a business

Id: MKtT1TUm7UA

Length: 53min 50sec (3230 seconds)

Published: Mon Dec 09 2019