Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:16Length:2.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Creating the Ticket Submission Component

In the previous lesson, we created our tickets table. And while we could have seeded it using seeder, we really need the functionality of submitting tickets. So it just makes sense to go ahead and implement that, so that's then we would have the ability to add data to our table whenever we need to. So we are also going to be molding our user interface throughout this lesson, and the next lesson, and so on, and so forth. So by the end of this lesson, it's going to look rather ugly, but I promise you we're going to fix that. So actually, the first thing we should do is start up the servers. So, php artisan serve so that we have that running. We can go ahead and open up the browser as well just so that we have something to look at. And we will see the Bootstrap 4 version of this from that preset that we installed a couple of lessons ago. So, looks mostly the same, coloring a little different, but that's okay. And I want to start with our welcome view, because we really don't need a whole lot of this. As far as the title is concerned, let's change that to Support Master. And then we are going to get rid of practically everything. So let's get rid of this CSS here. We can leave the fonts, that's perfectly fine. But we don't need the CSS. We also don't need anything inside of the body here. Well, we do, just nothing that was there to begin with. And we're going to add in our style sheet. So let's have a link element, the href is going to be set to our app.css inside of the css folder that is inside of the public folder of course. And so we have a reference to that. And, of course, we need to specify that this is a stylesheet and that will work. And as far as our body is concerned, we want at div element that's going to serve as the container for our application. So we'll just have a single div element with an id of app. And then we need to bring in our app.js file. So, we will add a script element at the bottom of the page that links to that file. So, this is the file that we are going to be working with, at least for right now. And let's just close that and let's just make sure that everything is going to look okay. Of course it does, it just looks blank. So let's go to our assets folder in js. And of course we have app.js here. And here I just want to clean things up a little bit. The first thing I want to do is use our new import syntax because why not? So we'll import view so that we don't have to require it down here. And we can get rid of the comments. We can also get rid of this registration for the example components because we don't need that. In fact let's just look at it and there's nothing here that we can use at all. So let's just delete that as well. And our first component is going to be for submitting our tickets. So let's create a new file, we'll call it SubmitTicketsFormComponent, that's a little long but that's rather descriptive as to what it is. And we will have our template and our script. So as far as the template is concerned, we're going to have a form. We don't really need an action or a method because everything is going to be done through JavaScript. So having that here in the form isn't really going to be beneficial. So we'll just have plain, ordinary form tags. And I'm going to paste in the contents of this form because it's rather mundane and you don't want to see me type this on screen. So we have three fields. The first is for the email address of whoever is submitting the ticket. The second is for the title. The third is for the content. Now notice that the names and the IDs are equal on each of these. The first is email, the second is title, the third is content. And I've also gone ahead and set up the v-model attributes here. This is going to give us easy access to this information whenever we submit the form. So let's go ahead and define our data. This needs to be a function that is going to return an object that has the title. Let's go ahead and initialize that as an empty string, and in fact we will do that for all of these values, just so that we have something to start with. And then, we will simply write the code for submitting our form, and we will do that inside of our methods. So let's go ahead and define that, as well. And the only method that we will have, let's call it on submit for the lack of a better name. We will have our event object which we aren't going to use because we have all of the information that we need. And then we just need to make our HTTP request. So we could use fetch if we wanted to, but we also have access to axios. That is one of the packages defined the inside of package.json. There it is right there. So let's just use that, we have it. So we will make a post request. Now, we don't have a URL but we can go ahead and do it like this. We're going to have api/tickets. We are going to be submitting a post request to that resource and we will simply provide the necessary data. So we will have our title, and then our email, and then our content as well. Now we do need to set up the event handler for the form submission. So we haven't done that but that's easy enough to do. So inside of the form element we are going to say v-on. And we want to save the prevent the submit so we will say submit.prevent. And then we will set that to our "onSubmit" method. Now just so that we can see what is going to happen, let's go ahead and for our post request, let's use then. And we will get a reference to the response, so that we can just write that to the console, and we can see what the response is going to be. Now of course we don't have anything to handle that request so we are going to see a 404. But we do need to say that we want to use this submit ticket form component inside of our application. And for right now we're going to do that here, where we are creating our new view object. We're going to say render, and we're going to tell it to render our component. SubmitTicketFormComponent, now we do need to add a few imports here. We need an import for the component that we just wrote, so let's bring that in from and the path here is going to be in our components, and then SubmitTicketFormComponent.vue. But inside of our components I don't think I added an import for axios, we kind of need that there as well. So let's go back there, and before we export we will import axios from 'axios'. And there we go. So now we're not going to see anything yet in the browser. We need to say npm run watch, so that it's going to compile everything and build it so that everything will be inside of our JavaScript file. If we get any errors, we will see that here. But hopefully we won't and yay, everything looks good. So let's hop on over. Let's refresh the page and there we have our form. Now as I said, it's not going to look great but we have something to work with. Let's pull up the console. Now we are going to see this, that there is no CSRF token found and this is because of axios. If we drill down a little bit more, it's not going to tell us anything. Well, the reason why we are seeing this is because of axios. So if we wanted to get rid of this, we could add a meta tag to our welcome page, but we will deal with that later on. So, let's enter something into the email address. We have foo@foo.com, this is a title, and then this is description. Of course this is not going to work but we can at least see what the response is. And a 404, that is what we expected. So we have our form, we just need something in the back end to handle that request. And we will do that in the next lesson.

Back to the top