API Call to Ensure Unique URL (Ep 24) - Build an Advanced Blog/CMS

[Music] everybody welcome back to the dev marketer Channel today we're gonna be dump jumping back into our advanced blog in CMS series the goal of today's video is to create an API endpoint to check if our blog post urls are unique so as you can see here as we automatically create a new post we generate a slug automatically well the one problem with this is if we create a slug that is not already unique and the user saves it that will cause a problem so what we want to do is before we show them the slug way that we've generated we want to see if it's unique and if it's not unique we need to do something to make it unique and then check to make sure that's unique before we show it to the user so there's a couple steps in today's video first we're going to make our API endpoint that actually checks if the blog post is unique once we get that done and we test it make sure it works then we can go over to our vgs component and integrate that endpoint into our vgs component so that whenever we update that slug that we check to see if it's unique and we adjust it to make it unique if it's not so that's the goal of today's video let's jump into the code and get started so we're gonna be getting started by creating an API endpoint today and we'll get make sure that's all working so we can put that behind us and then just focus on the BJS component so inside of our API dot PHP this is inside of routes this is our API routes for our project and I went ahead here and just kind of made one minor change before we before I filmed it but basically we created a group here so if you're looking from the previous video this was set this was basically our user function so this was a get request I think and it was slash user right so all we did is just change that so I just changed this to be a group and that way we can put everything inside of here we'll have this off API middleware attached to it okay and then we can have a different group down here if we end up having a different type of middleware we want to use that's not the token based API that we're using right now okay and so then everything we make inside of here will be wrapped with that API token authentication that we've set up and we can just add as many of those as we want so let's create a endpoint now are going to create one and everything is already gonna be slash API so keep that in mind as well so we'll have slash API slash posts slash I'll just make one called slash unique this little way we check if our post is unique after that we're going to tell it where to go I'm gonna create a post well we already have a post controller but I'm gonna put it in the post controller and I'm going to create a function called API check unique now there's a lot of ways that people like I'm just going to name a quick API dot posts dot unique there we go okay so there we go we have a name API to post unique so now the way that I like to handle this is I like to just keep my API requests inside the same controller that they're basically manipulating so in this case this route is working with the posts so I like to have an API request inside of my post controller some people like to do like a post API Rick controller so let's um thing like this to have all their API requests that relate to posts in a separate controller it really just depends on what you want to do this is how I like to do it ok so now that we have that created let's go into our controller and make it happen so let's go into that post controller and then I'm at the bottom here I'm gonna create that method so we'll do public function eight API check unique and then we're also gonna need the request there we go ok so there we go so now we have our check unique function so that's great now let's go ahead and actually run it so we're gonna just simply do a return statement we're gonna grab posts where slug column is equal to oops I'm doing this backwards equal to the request slug and then we want to just see if it exists alright so what this is gonna do is this statement is just gonna look to see if there because we did exist it's just gonna see if there is what the slug we're passing in if there is a slug equal to it or not and it's gonna pass in true or false true if it doesn't exist and false if it exist what we're gonna do then is we actually want it to be the opposite the way that I like to do it I want it to be the opposite because if you think about it API check unique you're checking to see if it's unique so you would expect it to return true if it is unique and false if it's not unique whereas right now we're checking to see if it exists so it's actually flip-flopped its returning true if it exists which means that it's not unique because it exists so it's not unique and then it's returning false if it is unique and it doesn't exist so we want to flip-flop it so that's why I like to put the exclamation point up there or the bang whatever you want to call it JSON and then we're gonna encode this real quick just so that if you don't encode it you're actually gonna get an error because you can't pass in a true and a false value randomly inside of a payload it would so it's gonna cause an HTTP error now if you were just passing in a string you don't need to JSON encode it technically but it's always a good idea to anyway okay there we go that's everything we really need for our check unique function now let's go ahead and test this in the HTTP client to see if it works before we integrate it okay so here we are we're inside of our thing we've got Def marketer dev slash API slash posts slash unique okay cuz that's the URL we created now that we've created that let's go ahead we've already got our API token here and then we need to create another query parameter called slug and we will set it equal to new post all right that's the slug we're currently trying to test and as we were changing what we want to test we obviously just change that value here okay so we'll just test that the new post exists and we have our API token here now let's just head over to our database real quick I want to show you that I went ahead and created a d2 I created a blog post that has the slug of new - post so that does exist so this would not be unique when we when we run this test we would expect it to return false because it's not unique there's already one that exists okay and then the last thing I gotta get is our actual API token so we're going to users I'm just gonna grab this super administrator API token and check it in fact actually we didn't check we didn't create this should work but let's go but this in here and click send o post not found if we see here you can see controller posts not found we have a few things we got to fix so we created this this is great there's a few things I wanted to fix which is first of all up here we need to import the post second of all I actually want to create add some middleware here so let's um ok so those are all the roles that we want and so now we should be able to authenticate those types of roles so now let's jump back over to insomnia and run it again I still got an error at post not found oh we don't have a freaking model called post okay that's random let's do that okay so there we go make a pot open post I don't know how we didn't have that before we never integrated that okay so now we have it so now let's try it once more send it again and there we go so now we get false because we know that it already exists this new - posts already exists now let's do new - post - one and see if that works click it again now that's unique so we get true perfect so this is working the way we want it to work we just do something like slash new it would also be true but again you check that new - post and it's not true perfect so we get false also if we go ahead and check to see that validation works let's grab a normal subscriber so he should not have access to check if it uni is unique so let's go ahead and add his API token and click send and we don't he doesn't have access to that it is that it's valid ok so what we do want to do though here is and we'll fix that later okay well I had to get hub request ok so now our API point worked so that's working now what we need to do is actually integrate it into our vgs component alright so now that we're inside of our beauty is component let's go ahead and make this so that it works so we have our endpoint we know where to hit it now to make it work in our component now if you come down here to kind of the nuts of our vgs component you can kind of i thought about lots different ways to do this and the the thing that made the most sense to me was to basically refactor this a little bit so that every time we set the value of slug we actually do it through a setter method this is a very common way to do a lot of stuff with programming in general and that is to instead of setting this property directly since we need to ensure that certain things are valid when we set that property we would set it through a setter method we need to create that but we would create a setter method and then we would run that setter method to set the property and then let that method handle any validation or verification that needs to be done instead of manually setting it like you see here where we just say this slug equals and we just set the value of it the reason that's gonna be good is then after it runs through that method the method will once it verifies it and very you know knows that it's unique and all that stuff once it's gone through and ran it's going to be the one that actually sets the value for slug at which point then we're actually emitting the slug changed event back to the parent and then every time the parent gets it it's gonna be a valid unique URL okay so that's kind of the goal so let's create a setter method to work with here and that's what we're gonna add our logic in so we only have to add it once keep seeing it dry do not repeat yourself by having it all inside that one method and then we'll just pass the value we want into that method in order to set the value and leave all the logic up to the setter method so down here we're gonna create that we're gonna call set slug and that's going to actually set be our setter method passing a function we do want to accept a value here we're going to call it new val that new val is going to be the basically the value we want to set the string equal to or we want to set the slug equal to so then this is going to contain our logic inside of here so we're basically going to start off by we also it'd be handy to go ahead and extrapolate this where we actually slugga fie the value we extrapolate that out into into this method here so we would slug off' i the new val then we would go ahead and we would test to see if it's unique we'll do that through an ajax request and then we would if it's unique then set the slug if not then we need to customize the slug to make it unique and test again alright so that's kind of the method that we're gonna be running here so we're gonna get the value set it then we want to test it if it's unique using our endpoint if it's unique then great we go ahead and set the slug and then well that'll also then because this is the slug is being watched so it's also gonna emit our event so it's gonna go ahead and do that in fact you could actually get rid of this watch event now because and we could just pull this emit into here which is actually what we should do so let's go ahead and put that up here as well so we'll say hey if it's unique then set the slug and emit event and now you don't need to have our watcher here which is actually gonna be pretty good alright and then if it's not unique then what we want to do is we want to change it to make it unique and then run it again so in our case we'll just keep it simple we'll say like a new post and then if that's not unique we'll just add a number on the back and check it again and if that like new post one is not unique then we'll just make it new post two or something like that that's a simple way to do it that's how WordPress does it I'm pretty sure if you duplicate it I think WordPress just keeps adding a number on the back just until it gets unique so that's how we're gonna handle it alright so let's go ahead and do this so to do that what we're gonna do is we're gonna take our new value and let's go ahead and slug apply it so we're gonna run let's actually create a variable called slug that we can reference inside of this function and that'll just be kind of the current slug we're working with and that's not the don't to be confused with this slug which is the universal slug version okay so we're just gonna have this the normal slug is the slug that's contained inside of this little method so we'll have this law equals and we'll start off by setting it equal to the slugga fide using our slug method this dot new Val we don't need this we just need new Val okay so we're basically just gonna grab the value that gets passed in we're gonna slugga phi it after that we can check if it's unique let's go ahead just clarify how this is gonna work so then down here you can see we have our d bounds method up if it's not being edited here's where we take the value of slug and we use we set it equal to the convert title now what we would really do in this case is we're gonna use set slug and then we're gonna pass in something the value that we want to set it equal to so like convert title like that so that's kind of what we want to do so then any time we set slug we're just gonna run the method instead of actually setting it all right now if you look at this start convert title I don't think it does anything it doesn't all it does this slug if I the title so really we could get rid of this convert title we don't need it anymore and we'll just go ahead and because our sets log is aren't even running the slug slug if I method so really we don't need to do anything we can just actually pass in this title in two sets log and it will do the exact same thing so right here where we do this stock convert title let's go ahead and get rid of it and we'll just say this dot title so now we're just passing the value of title in to set slug and now that will be in the new valve so the new Val will contain the title all right and then we'll slug if I it and now we're basically at the same thing that convert title was doing all right and then every up here every time we set it like here this slug equals so I'll just say this set slug and then we'll just set it equal once again to title there we go now when we saved the slug let's see for setting it equal to this dot custom slug this time so it's a little different so what we'll do is we'll say this dot set slug and then we'll just say this dot custom slug okay so that's gonna be the same and then up here edit slug let's see that we can actually leave alone that's okay perfect okay oh and then up here we set the default value for slug equal to this duck convert title so once again we're gonna want to do this set slug and we'll do this title okay so now everything is gonna start using set slug we're not directly modifying slug in any way it's all happening through set slug okay so here we get the basic value of slug this is a temporary value and we're setting equal to the slug defied version of new Val so now we also won't need to worry about that slug method because that's handling being handled in here now let's go ahead and test if it's unique so the way we can test this is we're gonna run our Ajax request so we'll do Axios again we'll do our get request we'll send it to API dot use our posts dot unique and then we'll go ahead and pass in our parameters so we'll do params and then we'll pass in our parameters so we need to get the API token we need to pass that in and then we also need to pass in our slug all right so slug is easy because we're this is the value that we want to test and slug is equal up here so we can just set slug to slug that's easy API tokens a little more complicated now you might instinctively think oh I'll just run off user API token like we've done in the past right and you'll just do that to grab the current API token the problem is this doesn't work because we're inside of a view component we're not inside of level there's no level being ran so when you'd use like these double curly braces it's being rendered by view it's not being rendered by bi-level so we can't actually do this we don't have access to any level objects inside of here because we're inside of a view component this is straight JavaScript has really nothing to do with level the reason it worked before is because if we go to our main post our create page this page down here we've gone we've been used to where we can we can pass in something like that in here but that's because we're inside of a blade file so blade renders it and and renders the object that it gets from level but we can't do it when we're inside of a separate slug component in there so instead what we're going to do is we have a couple options first of all we could pass it into our thing here so we could create a property called API token and do it that way the problem with that is then you would have to remember to set it when you're up here creating the slug widget we would have to remember to do API token equals and then we'd have to set it equal to you know to something to the label thing so then we would do this here just like we had talked about so that's one way and that will work but then if you have multiple these widgets or whatever you just have to remember to do that every single time otherwise the item would fail to render this slug widget would fail to render but then we would have access to it here and that's great you have to be careful not to overdo what we're overused what we're about to do only do what we're about to do if you absolutely have to because the preferred way of getting data into our component is to use properties which is what we're doing up here that's the preferred way to do it however what we're gonna be doing is we're actually going to reach outside of our component and manually get a parent property so we're actually gonna grant go into this into this blade file and we're going to get a property from the data object here so what we'll do is create an API token and then we'll go ahead and do exactly what we've been talking about here API token and we'll be rendering it through blade so that with its updated for each user and it's going to be equal here into our data component now instead of manually passing it in here where we might forget to do it I'm just going to have the I'm gonna have the the component reach outside of itself go to the parent component grab that value and pull it back in by itself without using properties so it's really frowned upon to do this unless you absolutely have to the method does exist because there are times where you need to use it and this is a good case to do that okay so we're gonna be do it like this but I just wanted to mention that because even though I'm going to show you guys how to do this you only want to do it if it's necessary the preferred way of getting odd of getting data into your components is using properties okay that way you have a lot better control you also can validate it there you can set optional or required values or default values and stuff like that you don't really want to reach out here unless you have to in our case it's actually what makes the most sense so to go out into our parent component we would go into this dot parent and then we can grab API token from the parent object okay so this is something that you can do now what we're actually gonna do is slightly different we're gonna do route just because in case this is a there's another component that's a parent of this for example let's say you just had a nested component inside of here like I don't know you're putting this inside of a the WYSIWYG editor which is probably going to be a component as well so in that case you have the parent would actually be the WYSIWYG editor since you don't know what it's going to be we're just gonna say we always want to go to the route object in this case instead of the parent object and the route object would be the actual that's gonna be like on your your HTML template the file that it's being rendered in which is this is the route object so that's what we're gonna do so we're gonna say this route API token we're gonna set API token to that okay so anyway there's that I wanted to give you guys the lecture and just to be careful about that but there now you have it so then down here where we get the API token what we're gonna do is we're gonna tell it to get the API token from we're gonna say this to API token which represents this one up here okay because this represents this up here in fact actually we don't not gonna have access to this now that I think about it because we're inside of Axios oh I think this one actually would work but we're gonna have problems later so what we're gonna do also is we're gonna say we're gonna create another object we're going to do VM for view model and we'll just say view model equals this that way that as we get deeper into these other functions like your promises and stuff where this isn't gonna work anymore we'll just reference this by the VM so we'll just say in this case we'll say API token equals BMD API token and then slug eagle slug that's fine because the slug is available outside of all that okay so now that we have that what we can do is we can do then and this is if it's successful then what we're gonna do is grab function response and then we'll also set up another one with such catch function error okay now for this I'm just going to go ahead and console.log the error if we have a problem we might want to do something better long term but that's okay for now then for the venn function this is where we actually want to be doing these two things inside of the then function so now the request came back correctly don't get confused then confused with our request coming back and saying it's not it's an it's a it's not a unique value and in returning faults that has you know you're gonna get it's gonna go into the then function regardless because the actual request was successful even if it came back saying that our item is not unique right so it's always gonna come into then unless there's an actual problem or error with the HTTP request okay so now inside of here we have to check to see whether came back as true or false so what we'll say is we'll just say if response data which should be if we go back to insomnia once again and we were to send this okay well we don't have this it's easier users okay so here where we get our value is gonna be false response data without will represent this here which in our case is false or true so we'll just say if response data then that means that it's true which means it is unique so if it's unique then it's okay because all we need to do is we need to just set the value of slug now so we're just gonna say that VM slug equals and we're gonna set it equal to slug which is you know this value up here now if it's not we'll just say else which we can just assume that it came back false so in this case what we're going to do is we're going to customize the slug and test it again so to do that what we're actually gonna do is we're gonna make this kind of recursive we're gonna call them function again within itself that's how we're gonna basically loop through this and keep it synchronous so we'll just say this VM set slug in order to call this set slug method again and then we're gonna go ahead and pass in the value that we want to run again all right so let's see here how are we going to handle this also while I'm up here and thinking about it let's also remember to move we're gonna omit this right here and do it here okay so we're setting the value of slug and then we're gonna omit that slug changed event all right and that way we don't need to have that watcher so that'll just keep it a little more performant okay so now down here what we're gonna do is we're gonna do setup for a recursive value so what we'll do is we will pass in new value again so we're gonna pass in the same value that we tested this time but what we'll do is we'll also add a counter to it okay so we will count up here at the top let's set up a second property called count and we'll set this by default equal to zero so I don't have to worry about it so the first time you you enter this slug it'll be zero well then what we'll do here is we'll actually go ahead and say count plus one to increase the count to number one and then we will modify the slug to add that count to the end of its value so here where we set slug will say slug new value and then we'll test we'll say plus we'll do a ternary operator here I will just say if count is greater than zero then what we want to do is we want to return the value of count and if it's not then we'll just return an empty string and actually what we need to do in here is do a we'll do it a - and then the value of count that should also convert it to a string okay so we're just gonna do basically like if new value is new post this would be new post and then count would be more than zero so nobody new post - and then the value of count which is one or two or whatever and that way we don't really need to add a lot more logic here it's just gonna automatically be that whatever value so then our new slug value is now new post - 1 and then it's gonna run through this again run another API request this time it's gonna set it equal to new post - one is the VAT is the fug is going to check and then we'll see if that one's value if there's already a new post - one then we'll it's going to come down here it's gonna set it equal Scout now - to run through it again and now we're gonna be checking new post - - and then keep doing that until we find a valid one so you that's what we're gonna do let's go ahead and do it so we might also change this to + 50 milliseconds to 500 just to kind of reduce some load on our server [Music] okay yeah I think I'm just looking through everything I think we're good to go all right let's do it so let's head back over to our browser and test this out so here we are in a browser will refresh just make sure there's no errors before we continue there is an error okay the server respond at the status of 401 hold on let's check out the network and unique slug for one unauthorized we're not passing in our sea here okay something's going wrong with the Axios get params API token PMDD API token okay so I think what's happening here is that this drives me crazy I'm actually gonna write in and figure out if there's a better way this drives me crazy this happens a lot it seems like methods run once no matter what in view GS so they run at the very beginning and then on top of that it also seems like methods seem to mount before your data objects gets set which is also weird and so I'm not a big fan of that it seems like they don't really want to run this method right at the beginning and I don't like that buta just seems to do it automatically so if you guys know the answer to this leave a comment down below because I am dying to know if not I'm actually going to follow up with some VJ s people and see if there's a reason for this but basically when you first have all of your methods run through like one time whenever your component is built and I think I'll see your main component as well whenever it gets built and it comes live it all your methods run at least once and then they wait to be ran and I really don't like that because I'll build methods sometimes where I don't need them to be ran I just need them which is why you see me doing things like wrapping them in if statements and stuff anyway this is the solution for right now until I can find a better one is that we test to see whether the API token exists and the slug exists and if so then we go ahead and we run the Ajax request and if not we just ignore it that's basically my solution right now and I can't I really want to have a better one but I just don't have one at this point okay so we're gonna check this dot API token and then make sure there is one and then we'll also check this log or no no no we'll just check slug okay so we're gonna check that and then we'll wrap everything inside of this Ajax request so let's now let's put this up here like that okay now I think it should run oops I ain't closed it okay we don't get the error and we haven't ran in API requests yet so that's good let's mount this down below and run this okay so now let's go ahead and do this so we'll do new post we get I took a pause there so we should we had our 500 millisecond pause so we get our we sent our request when we sent the request you can see yet we passed in the API token and the new slug so that's good and then we got back true which means that our value got passed in as new - P which now should also be set on the root instance our title or or slug is not set did not emit our that's weird did it not emit our event oh we did this we had to do VM dot he meant okay so there we go oh and then also VM does look or we get a set slug let's just set slug so we just set it here that way you don't need to go out to the main object can grab it okay so now let's try it once more so let's just refresh real quick we're gonna check that there's no way no notice I've got I'm sorry I'm filtering here with exit xhr requests so I'm only looking at Ajax requests you'll see stuff if you guys are looking at yours you'll probably see a whole bunch of crap here cuz you're getting you're doing other HTTP requests for fonts and stuff like that I'm filtering it just egg HR requests so we only see Ajax requests in here okay so now let's go and run it so we're gonna do like new P again for a new post strangely we didn't see any oh I'm there we go okay so we did run one and we had our slug as new P say it came back good and it should come back true let's come over to view and refresh this and there we go we have our new slug I don't know why this is sometimes this little components gets glitchy sometimes okay great so now let's go ahead and our slug which it should be that too so now let's go through and set it a little more so we're gonna do new post and notice how it does new - post - one which new - post - one if we go to our root object it's also new - post so everything's working in sync that's really good okay but if we go to our network you can see we we ran two requests so we ran our new - post that came back as false and then we come down here and we ran it as new - post - one and that one came back true so now new - post - one is the valid URL and all of that happened very dynamically so if we just get rid of that we have another request came back true so it it set it to new - POS and if we go back to new - POS T now it adds that - one and notice we did two more API requests one which was faults which had our original new post and then one which was true came back true after we set it nat back to new - post - 1 now the reason that is is because we should have in our post here we have already a new - post slug that's why it didn't come back true so now let's duplicate this real quick and let's just set this we'll do new - post - 1 and just for fun let's set another one which is new - post - - so now if we do the new - post slug we would expect it to come back as a new - post - 3 so let's refresh and try it again actually we didn't need to refresh because oh well we didn't need to do that new - post and there we go new - post - 3 and you can see unfortunately it does run a whole bunch of Age API requests if we wanted to refactor this I guess I didn't think about this but one way we could refactor it is we could actually just do like unique into PHP and then we could have had PHP just give us return us back yeah we should have we could have done that oh we could have had PHP figure out what a unique post was and just returned back on the unique post for us so then basically instead of returning true or false it would return the valid post so if we passed in new - post and that was unique it would just pass it would return new - post and we would set that if it came back if PHP took it and it wasn't unique it would add the one it would add the - it would add the 3 until it finds it not unique and then return back the new - post - 3 and then we could set it equal to that so that's another way to do it I guess oh well we've done it this way if now I don't know if it makes a big difference whether it's on the front end of the back end but we are saving HTTP requests so it might have been ideal to save those but anyway we'll just do it like this I think this is fine all right let's go ahead and clean this up and that's basically it for today's video we've gone ahead and set that up and it's working beautifully alright guys so that's everything for today's video I will see you guys in the next video be sure to download the code if you guys want it's over available on github links down in the description if you guys have any comments or questions about today's video leave a comment below if not see you guys in the next video

Channel: DevMarketer

Views: 12,275

Keywords: code, tutorial, best, easy

Id: MknE1T415KQ

Length: 37min 11sec (2231 seconds)

Published: Fri Nov 10 2017