Allowing Admins to Create Movies

In This Lesson

We'll allow our administrators to create movies via our admin panel. We'll walk through getting the form set up, validated, and our movies created.

Created by: @tomgobich
Published: 1 year ago

🕰️ Chapters
00:00 - Adding the Create Movie Button
00:38 - Defining All Resource Routes for Our Movies
02:24 - Planning Our Movie Create Fields
03:30 - Querying Select Options
03:56 - Defining Our Movie Create Page and Form
07:46 - Creating and Defining Our Movie Store Validator
10:06 - Creating An Exists Helper Validator Rule
11:50 - Finishing Our Movie Store Validator
13:15 - Validating Dates and Transforming to Luxon DateTime
14:02 - Validating and Storing our Movies
14:30 - Testing Our Movie Store Form

Join the Discussion 0 comments

Be the first to comment!

Transcript

[MUSIC] For our admin movie actions, let's start by adding the ability to create a new movie inside of our application.
So we'll start by adding in a create movie button right over there. So scroll on up to where we have our H1, wrap this inside of a div class flex justify
between and add a gap of four there for safety sake. For our H1, and then we'll do a div and add a button into it that goes to an href,
and we'll put a pound there for right now because we don't have the route created, and our button, and we'll do create movie, and we'll probably also want this to be items center there as well.
Next, let's go ahead and create the route for our create movie page. So let's jump into our routes file,
and then let's do router.get/movies create admin movies controller, and we have our create method there as movies create.
Now, let's pause here for a second. So if you recall to when we created this controller, we created it as a resourceful controller, and there's also resource routes.
It's my personal preference to list out the routes individually, but I know that may not be everybody's preference. So an alternative that we could do to listing them out
individually is router.define this as a resource route group. You define the resource name, so that's our movies, and then provide in the controller that handles the resource,
which is our admin movies controller, and that takes care of the rest. So we can remove those, and now we have a route defined for each of our resource actions.
For example, if we stop our server, clear that out, and do node ace list, there is an actual list command called list routes. I don't think we've taken a look at this quite yet.
Maybe we did early on, but let's clear this out. Node ace list routes, hit enter on that, and we're going to get a list of all of our defined application routes.
Right down here are all of the routes being defined via that one line where we're doing router.resource movies. It's prefixing all of the defined routes with movies.
For our create route, it's doing /create. For our show, edit, update, delete, and destroy routes, it's appending on an ID route parameter,
and on edit, it's making it unique by doing /edit there as well. Additionally, you can see each of these get a name too. So we have our admin movies index, the same as we had it before,
admin movies create, the same as we had just manually defined it. We also have our store, show, edit, update, and destroy names as well.
You can see put and patch get the same route name as they're discerned via their HTTP action. So we can clear that out, boot our server back up, so npm run dev.
So we should be done defining our routes for our movies resource actions. Meaning that we can now jump into our movies controller. For our admin section, scroll down to where we have the create method,
grab the view, return view, render, pages, admin, movies, and we'll create a create page. We're going to want to provide some things in.
So first, let's go ahead and take a look at our movies model to remind ourselves what all we have on here. So we're going to need to provide the status options as a select, so that we can select the status to apply to a movie. In a real-world application,
it would be great to just pull this writer and director in as an autocomplete. So as you type out, it will fetch and provide options in.
That behavior is not quite manually supported by the browser, and we would need to pull in a third-party package to support that on the browser side.
So we're going to bypass that approach here today, and just provide our sinister as a select list, so that we can select our writer and director IDs there.
Then we'll have a title, our slug will be auto-generated from the title, summary, abstract, poster URL, release that, and that looks like it. So that we don't have to remember that,
what I'm going to do is drag this off to the right-hand side, and we can nudge it in there a little bit to make it smaller, just so that we have the property names here to reference and remind ourselves what we need.
So we're going to need the statuses. So const statuses equals await movie status. We can import that model query,
order by, let's just order it by the movie status name. Then we'll also want to get our sinist. So sinist equals awaits, import our sinist controller there,
query, and let's order them by, we'll just do their last name. That should be all that we need to provide in for our form. So we have our statuses and our sinists.
So let's go create our movies create page. So let's scroll on down to where we have our admin movies directories, right-click that movie directory,
new file, add in create.edge@layoutadmin, and that layout, do an h1, create a new movie,
add a form in, method of post, and an action reaching for a route admin movies store method, and that form out.
We're going to want to add in our CSRF field, and let's start with a form, input label will be title, name will be title,
the type will be text, which is our default input type. So we'll leave that out. So that should be all that we need for our title input. Can actually go ahead and just collapse that down to a single line there too.
So then we have our form.input, the type for this one is going to be select, label will be status,
and the name we'll do as movie status ID, matching how we have it defined on the model. We'll end our input and add in our option slot.
So do at each status in statuses, go ahead and end our each, add in an option value,
status ID, and then the status.name as the display value. Next, we have our writer and director. So we can go ahead and give this select for our status copy, paste it in once,
switch status to writer, switch the name to writer ID, and rather than looping over our statuses,
we're going to be looping over our synists with a synist there. Give that a copy because it's hard to type and paste that in for the ID, and rather the name that should be named there.
Once we have that applied, we can give that a copy once more, paste it in there, and switch writer to our director. So we'll have a director ID, and then the options should remain the same for that.
Then we have our summary and abstract. So we can do @forminput type, and I believe we added support for a text area. If not, we'll add that in here momentarily, but I believe we did.
We'll have our label of summary and name of summary, just like so. Then we can give that one there a copy as well, paste it in, and switch summary to our abstract.
Now, an abstract is something that you would probably want to add a WYSIWYG into your application for, what you see is what you get editor. Those can take time to actually add into an application.
We're going to cover how you can go about that in a separate series later on, but for now, we're just going to leave this here as a text area. Then it looks like we have our release that as the last field that we'll need.
Let's go and scroll up and put that underneath the title. So we can use the native browser input for that. So we can do @forminput type, and it looks like we have this as a date time,
but let's just worry about the date in terms of actually setting up a value. So name, give that a name of released at. Again, we're just naming all of these fields to match how we have them defined in the model,
just to simplify taking our form data, validating it, and passing it directly into our movie model as the property values. We need a label on this one here as well.
So label and we'll do release date there. Let's scroll on down to the end and give ourselves a submit button. So @button, type, submit,
end our button, and create movie there as the action. We do also have that poster URL. Take care of that here in the next lesson. Let's first just see what we get. So let's jump into our create movie page.
Oops, forgot to break up the route. Let's go break that up real quick. Jump into our movies index page right there, route, admin, movies, create.
There we go. So now we should be able to jump into our browser and hit create movie. There we go. Could use some spacing, but we do indeed get our form here. We have our date input right here.
For browsers, you can still click on the little calendar icon and get a nice little date selector right there. So that's nice. For our statuses, we have casting, post-production, production, released, and writing.
For our writers and directors, we have a list of all of our cinests, just like so. So everything there seems to be working A-okay. Let's go ahead and minimize that back away. Scroll up to our form.
And to add some spacing in here, I think what we'll do is we'll just do class, flex, flex, call, and gap of form. So we'll just use flex gap there to add spacing
in between each of our little form groups there. Okay, cool. So next we need to do our validator and then actually create our movie. So we do already have a movie validator file.
We could reuse this here if we wanted to, or we could create a brand new file specifically for our admin movie section. What would probably make the most sense
is to rename this validator file to movie filter validator, since this is specifically for our movie filters. So I think what we'll do is we'll right-click this file,
rename, and append in filter to the end of that file name. And Visual Studio Code's gonna ask us whether or not we want to update the existing imports
for this file to match what we've renamed this file to. Go ahead and hit yes for that so that we don't have to worry about it. The only thing it doesn't do that I wish it would do is automatically save for us.
So you can see movie service right up here, just switch to needing to be saved. So we can jump into here. This may be the only file where we were using it since we normalized everything into this service.
So we can go ahead and give that a save, close that back out, which should now give us room to do command control P, make validator, and we'll create a brand new movie validator. So now we have a validator for our movie filters
and a validator specifically for our movie itself. So let's export const movie store validator
equals vine compile, and we'll do vine object. We're gonna have a title of type vine string, and let's just roll through and put the types in first, and then we'll add in additional checks.
So let's scroll on up to make sure we get everything here. We'll leave slug out because that's gonna be auto-generated by our model, have our summary type vine string,
our abstract as type vine string, our writer ID as type vine number, director ID of type vine number,
and let's see, status ID vine number. And let's see, here we have our poster URL, which we'll take care of here in the next lesson, and our released at.
So released at vine, and that will be a date. Okay, so for each of these, we're gonna have varying additional validations to do.
And for that, it would be great to reference what we've defined on our database as requirements. So we'll scroll down to our database, migrations,
and let's go find our movies table migration and open that up here on our right-hand side. Clips that back down, scroll back up there, and minimize that back down too.
Okay, so for our status writer and director IDs, these all reference their relationships, and all three are not nullable, so they're not gonna be optional.
So we're gonna wanna add exists checks to those three. And if you recall, Mac, we created an is unique utility so that we didn't actually have to write a unique query over and over again for our validation.
So let's go ahead and do that for unique as well real quick. So we'll scroll on down. We had that within our start directory, rules. We have this unique file here. Rather than squeezing an additional rule
inside of this file, let's go ahead and create a new file. So let's right-click our rules directory, create a new file, and add in exists.ts,
and paste what we had for our unique within here for our exists check. For this one, I think we only care about numbers for it, so we'll go ahead and remove strings. And we're gonna want to update the name
from is unique to is exists, or whatever you feel is applicable there. My goal with the naming here is just to not overwrite the currently existing unique and exist validator methods
in case we should ever need them. Our query here remains the same, but if we don't get a result, that's when we wanna report an error. So we'll flip our result check there
and switch our error to something like value for field does not exist, and switch the reported error name to is exists. Scroll down a little bit.
And now we have our is exists rule, and create that with our is exists method. Scroll down a little bit further. We're not gonna apply this to strings,
but rather just numbers, so we'll remove the bind string and switch our bind number to is exists. Scroll down a little bit further. Again, we'll remove the string, so we'll get rid of that macro,
and switch this macro to is exists, and use our is exists rule. Awesome, so we manually created this exists preload file,
so we also need to manually register it inside of our javasrc.ts file. So within here, we'll scroll down to where we have our preloads, and add in an additional item,
port import start rules exists. Up till now, we've used ACE to create these files for us, and it automatically registered it within here for us as well.
So that's why we need to manually do it here, because we manually created that file. Awesome, so now we can jump back into our movie validator, and do .is exists here,
provide in our options of our table. This will be our Cineasts table, and the column will be ID, and give that a copy, and paste it on our writer there as well.
And then for our status, this will be is exists table movie_statuses, and column of ID. All right, cool, so both of those should be good.
Then we come down to our title, which is not nullable, and has a max length of 100 characters. So we're gonna want to validate against that as well. So we'll do .max_length 100 there
to enforce that limitation. Our slug is auto-generated, so we'll skip over that. Our summary is not nullable, but it does default to an empty string, meaning that we can make it optional here inside of our validator.
Our summary is also a type of string here, so it's going to have a default max length of whatever your database's max length for string is. I believe in most cases,
a max length of 255 should be a safe bet there, or our summary, and then our abstract is a type of text. So we don't really need to worry
about adding a max length in there, as it can go as long as needed. We're omitting our poster URL for now. We have that as not nullable and defaulting to an empty string,
so that is technically optional as well. Then we have our release_stat, which is nullable. So we'll wanna make sure that that is optional as well. And we're going to want to get this back
as a lux in the time. So we'll also want to transform the value here. This transformer, we can provide a callback to that takes in our value as a JavaScript date,
which we can return date time, dot from JS date, provide our value in, and there we go. So now we'll have a lux and date time returned
after we validate our release_stat, if it has a value. Now, since we're using a native date input, the format should come up as year, year, year,
month, month, day, day, separated by hyphens, which should be accepted by default from Vine here. But if you have any issues,
you can specify additional formats into here as well. You can specify that as an array as needed. So you could do something like year, year, year,
month, month, day, day, which is I think supported by default and I believe that's how our dates will be sent up. So we should be able to omit that altogether. Then we'll jump up into our movies controller
or our admin. So right here, scroll down to our store method. We'll do const data equals await request validate
using our movie store validator. Then we'll do const movie equals await movie, import that if we need to, it looks like it's already imported, dot create
and provide our data in. So with that in place, we should be good to go ahead and just response and return response redirect.
And let's go to route admin movies index. And of course, since we're not using our movie, we can go ahead and get rid of that variable there. All right, let's go ahead and jump into our browser
and test it out. So first and foremost, let's just try to hit create without specifying anything. And you can see, we get the title must be defined and our abstract must be defined. Apart from that though,
it looks like everything's working a-okay. So let's go ahead and try my cool movie one. Let's provide in a release date to make sure that that's working okay.
Let's say maybe the 26th of June. Let's say it is in post-production. Let's say the writer is Leila Abernathy and the director is Trudy Berner.
We'll leave our summary out, but we will provide an abstract of, this is a cool movie right here. And let's go ahead and hit create. And it looks like something failed,
but I'm not quite sure what. We got redirected back here with our old values, but no error was displayed. All right, so let's jump back into our create page here
and let's see what's going wrong. So let's add an inspect/messages.all and let's try this all again. So we'll do test movie,
do everything the exact same as we had it before, not necessarily with the exact same values. And let's hit create to see what's going wrong. All right, so here's all of our old values and then here's our error status ID.
The status ID must be the, oh, in our validator, we called it status ID, but on our model and here in our field, it is movie status ID. Okay, so let's hide that back away,
jump back into our movie validator. Right here, it's status ID, but we need to call this movie status ID. Or did we call it just status ID on our model? Oh, we sure did.
Okay, so let's leave that as status ID then. And it's our form that needs to change. So let's go down to our movie status select
and switch that to just status ID. All right, now let's jump back into our browser. My cool movie one, select the date here.
So we'll do the 26th again, say that this is post-production, Leila Abernathy, Trudy Bernard, and this is a cool movie right here.
Create our movie and there we go. So now we see the most recent movie that we have inside of our movies list is now my cool movie one, it's in post-production, the writer is Leila Abernathy
and the director is Trudy Bernard. And we're not worrying about our cast or crew members for this particular format at this point.

Let's Learn AdonisJS 6

113 Lessons

14h 15m

Introduction

Fundamentals

Building Views with EdgeJS

Database and Lucid ORM Basics

Lucid ORM Relationships

Working With Forms

Authentication & Middleware

Filtering and Paginating Queries

User Watchlist

User Profiles

Admin Panel

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.