Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

5.3 Adding the Date Picker and Slug Generation

Let’s add more some more user experience polish: a date/time picker to make entering the publish date and time much easier. We’ll also automatically generate the post slug. Finally, we’ll set up NPM to manage our client-side dependencies and modify our Laravel Mix build.

Related Links

5.3 Adding the Date Picker and Slug Generation

In this lesson, we're going to add some JavaScript to our create and edit blog post forms because we want to have a date picker for our published date/time. And we're also going to pre-populate the slug based upon whatever the user types into the title. So when it comes to adding any type of asset, especially third party components, there are several ways that we can approach that. The old way is to manually grab those assets, either by downloading them and adding them to your project, or using a CDN. And of course you have to reference all of those script files and any CSS files as well. But in today's day and age, we use dependency management tools to do all of that. And the biggest is probably NPM, Node Package Manager. So if you don't have nodejs installed, you need to install it. I don't care if you don't think you'll ever use nodejs, it doesn't matter because you need NPM. And the way that you get NPM is by installing node. So go to nodejs.org and you will want to download the LTS version. That stands for Long Time Support. There is the current version, but LTS is going to be fine. Just download and install it, make sure that NPM is installed. It is an option in the installation process. The whole reason of installing node is for NPM. At least as far as us is concerned. If you are interested in node development itself, then yeah there's other things there. But for right now, we want NPM. So get it. So whenever you have node installed, then you will go to the command line. And in your project, you're gonna say npm install and press enter. It's going to start installing all the packages that are defined inside of package.json. This is given to us by the installer and there are several dependencies that are listed here. And there's also some commands that we're going to have to run in order to work with our dependencies. But we'll get to that here in a moment, because the dependency that we're going to use for our date time picker is this one. I'm not going to try to pronounce this. I don't know, I probably butchered that. But this is what we're going to use, it uses Bootstrap which is perfect because we are using Bootstrap, and it's very easy to use as well. So this is what we are going to use, and we're just going to add that to our project. So once again, we're gonna go to our command line and say npm install and that is eonasdan-bootstrap-datetimepicker. We will save this. And so it's going to download and install not just the datetimepicker, but any of the dependencies for that. And while this is going on, let's go into our code because what we want to do then is pull in that dependency, because as of right now, we can see that pop in there. If we look at node modules, this is [COUGH] the butt of many jokes. But everything that we install through NPM is going into this node modules folder and of course, we don't want to reference it directly within node modules. We want to pull any of the assets that we are going to use into the public folder, and of course we have the CSS and JS, but some of these are built by Laravel mix. This app.css and this app.js are two examples of that. So if we go to the mix or webpack.mix.js, we can see where that begins to take place. So we see that this mix.js, this first argument is the source, and it is essentially being compiled into the app.js inside of public/js. So what we essentially want to do is specify all of the JavaScript files so that it's going to bundle everything together inside of one JavaScript file so that there's just one request that's made for our JavaScript. So that way we don't have to reference any other JavaScript files. Now our CSS is going to be a little bit different, but it's still going to be pretty easy. So let's do this, we are going to pass an array for the call to the js method, I should say. We're going to pass an array as the first argument, and we are going to list several files here, so we're going to start by defining this resources/assets/js/app that was there to begin with. We definitely need that. But we also want to include the files for using the datetimepicker. Now there's primarily two. There's a dependency called moment, and then there's also the date time picker as well. So these are the two files that we want to pull in and be bundled into the file that's going to be output in the public/js. So as far as moment is concerned, our path is node_modules/moment/min/moment.min.js. As far as our datetimepicker, we start off the same, node_modules, but then things begin to change we have eonasdan-bootstrap and then datetimepicker/build/js/ /, and then bootstrap.datetimepicker.min.js. The next thing we want to do is copy our CSS from it's current location, which is inside of node_modules, and copy it to public/css. So we're going to call a third method here called copy. And we're going to pass in two arguments. The first is the source and then the second is the target location. So the source is going to be somewhat similar, well, very similar to the JavaScript source. So let's just copy that cuz that's a whole lot easier to start off with, and then we will simply make a few changes mainly js to css. And then were are going to copy that to public/css and then bootstrap-datetimepicker.min.css. So once we have this file done, then we can go to the command line. And we will say npm run dev. And that's going to run the development, quote unquote, compiler. It's going to build everything so that it's going to bundle all of our JavaScript into that app.js and it's going to copy our css file and it's also going to build the app.css file. So if we look at public/css, we have app.css and bootstrap-datetimepicker. We have this fonts, that was new. And then we have JS as well. So the next thing we will want to do is add our JavaScript for the forms. And we can do this on a variety of different ways but the quickest is going to be this. Let's go to our views, we'll add a new partial. So this new file, we'll call it scripts.blade.php, and we will start off with a script element. Now the script element is going to appear before our main JavaScript file. So this means that any type of setup that we want to do, because our datetimepicker needs some setup, we need to do after everything is loaded. So we're going to say window.addEventListener, and we want to listen for the load event and then we will have our handler. Now inside of this function, we want to use jQuery, and we are going to retrieve our published at input element, and then we will call the datetimepicker method. Now there are several options that we want to set, the first is called allowInputToggle. This is going to show the datetimepicker whenever the user enters the input field. So the moment that they click on it or they tab into it, that popup will display. The next is the format that we want the date and time. And we've already done this on the server side but we need to enforce it on the client side as well. So that's going to be a four digit year, two digit month, two digit day. Same with hours, the minutes and the seconds, so there we go there. The third option that is called showClear. This is going to provide a button inside of the popup, so that if the user wants to clear out the contents of the input element, they can do so, that's what that is. And then finally we want to set the defaultDate to whatever was specified as the published at date. So we're going to get this from our model. So model->published_at. So there we go. Now we just need to add these scripts to our create and edit views. And we're going to do that after our div element. So we will simply include admin, blog, partials, scripts. Let's copy that, let's paste it into edit, and then the final thing that we need to do to set all of this up is to go to our layout page. And we need to add the CSS for our datetimepicker here. So let's just copy this and we will use it as basis and we will say, bootstrap-datatimepicker.min.css. So let's go to the browser, let's refresh the page, and whenever we enter into this input element, well, we got the date, but we didn't get anything else. So let's look at the error console. Let's see, datetimepicker component should be placed within a non static positioned container. Okay, so our div element that contains our date time picker needs to be relative. So let's just cheat, and let's do this, style=position: relative. So that should fix that. Let's refresh, and let's close the console. And there we go, we have our datetimepicker. So let's go to the Edit view, and let's see what happens. It loads it as nothing, but the moment that we enter, it puts in a value. And of course, we can select whatever date at whatever time that we want. And let's save it, and that looks okay, although we have never displayed our publish date, so let's go ahead and make that quick little change inside of our index view. We had that empty cell there for it, sp we will just put it there. Post, and then published_at. So hopefully, we'll see something there. Let's refresh. And we don't see anything. If we go and edit, there's nothing there. Okay, that's something to look at later. For right now, let's do this. Let's finish what we're doing and we'll see about fixing that. So now we want to be able to update the slug based upon the title that is typed in. That will be less typing for the user most of the time. I'm sure that they will want to customize that sometimes. So we will do this. Once again we will use jQuery and we will get our title because we want to handle the blur event. So whenever the user exits the title field, we are going to then populate the slug. So the first thing we are going to do is get our slug element. So let's just call this slugEl and we will use jQuery once again to retrieve that. It has an id of slug and let's check to see if we have a value there. Because if we do, hen we don't want to do anything else. We will stick with whatever's there, because the user could have typed something in and we don't want to override that. So if there's a value, return, otherwise we are going to set its value to, we are going to manipulate our title, so we will say this value to lowercase and we want to replace anything that is not alpha numeric with a dash. So our regular expression, which I stole, because when it comes to regular expressions, yeah I have no clue. We are going to take everything that is not A-Z or 0-9 and we are going to replace it with a dash. So there's that, then we replace it with a dash but we also need to call replace again because if there's any dashes at the beginning or ending, then we want to remove those so that it kind of makes sense that way. So our other regular expression, which once again I stole, is going to look like this. I would explain what it does, but I haven't a clue. I just know what the end results are. So here we go, that should work. Let's go and refresh here. So whenever we type a title, this is a test and we blur, we can see that the slug was automatically updated there. So that looks great. Let's do this, hello world, hello laravel. Okay, that looks fine too, let's have -hi- and we of course need to get rid of that, so that we can blur, and we just have hi. So that code is working. So now we need to focus on why our published_at did not update. So let's close some of the stuff so that we don't have as much of a distraction going on, and http controllers admin blog controller and that is the update method. Okay so we are filling in title slug publish dot excerpt in body and saving it. So that looks okay, let's go to our model. And let's see what is fillable. We never did that did we, published at. So that should be our problem. Let's go back to our lists. Let's try to edit this and we have blog post one, blabbity blah, blah, blah, submit. It says it was updated and now we have the published date. So that was a problem. We fixed it, and we are done, at least as far as our blog management is concerned. In the next lesson, we are going to add some functionality to our pages. We want to be able to sort them as well as nest them.

Back to the top