Hyper Cloud hyper Data Workshops, 5 Nov 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: hyper + NodeJS ExpressJS MVC Architecture from scratch - PART 2

Description

We're back with the Mario Wiki Part 2 of the Hyper NodeJS Workshop

Starting with this repo = https://github.com/hyper63/demo-mario-wiki-part-1

We will build out the Show, Remove and Delete of a game document.

A

Hyper with no js using mvc architecture, hi, I'm tom wilson and today we're going to do part two of the hyper nodejs workshop in the previous workshop part 1. We started from scratch built in express app built a mvc architecture with hyper with the mario wiki app and on games.

A

So we did the list and we did the ad and today we're gonna do, show, remove and update and again we're gonna kind of start from scratch. We're gonna start where we left off and we'll essentially.

A

um Clone that repository or or fork it and um go from there. So if you haven't done the previous workshop, you'll need to do that. One first are um and that would be most helpful to follow along um or you could start here, but but it may um you know you may get lost a little bit. So in the description there will be a link to the first workshop and highly recommend you do that.

A

So the first thing we're going to do is we're going to log into github.

A

Okay and then we're gonna go.

A

To um hyper 63.

A

Demo, mario wiki part 1., so what we're going to do is we're going to fork that, because that's pretty much all the code we did in the previous workshop. So we're going to fork that, um let's see it's not going to, let me fork it because.

A

So, okay, so what we'll do is we'll open it in git pod or you can clone it. If you want.

A

Either way, and what we'll we'll do is go back to our github and we'll create a new repo called mario wiki part, two.

A

We can make that public and we'll create that repository and then we're just gonna copy this um url to our get repo. So we'll copy that, and I'm just going to refresh this, sometimes it gets hung there we go. um So what we're just going to do is in our git remote.

A

And we'll zoom in on that, what we want to do is replace origin and so we'll say: git remote, remove origin, get remote, add origin and we'll paste our part, two repo and then we'll just do a get push origin master. And then that should um update our part two here and that way we've got a clean slate.

A

You could continue working on part one if you wanted to, but um this is just a have, a clean repo that has the part 2 stuff in it.

A

So let's go ahead and just make sure everything works and what we need to do is create a dot emv file, so we'll create a dot emb.

A

And then we want to put our hyper connection string in there and if you remember, our hyperconnect string is on the dashboard.hyper.io.

A

And we're just going to access that.

A

A

I can't remember which one was: let's just try that one.

B

A

And then we're going to go yarn.

A

And yarn up open that in the browser.

A

And get our games cool, so we've got our games and we've got the ability to add a game.

A

Let's make sure that works, cool and we're able to add a game, and now we can start working on our show feature.

A

So I'm going to try to to do this via um views and controllers and models kind of outside in, but you can kind of work on these features any way you want.

A

So we have our our views and then our views. We have our games and what we want to add is a show view, so we'll do show dot ejs and we're going to obviously make it html.

A

And we're going to include.

A

The head section.

A

And we have the body.

A

And then a header.

A

And then we're going to include.

A

A

And we'll set our tile.

A

And then, in our main, what we want to do is um show the game, so the user will click on a card and then we'll take them to this screen and show the game and that'll be in a section and we'll do an h2.

A

Of gain dot, name.

A

And we'll do a p of game dot description.

A

And we'll do a p of.

A

Published, let's do this.

A

And game dot published cool. So that's our view, but we do want to have kind of a little um button section here. So, um let's just add a div and then we'll say: href equals this will be games.

A

A

Edit, so this will be our edit button, giving us a button and one is called edit.

A

And we'll do a button and id will be delete and remove okay. So what we want to do is um for the delete we want to. You know prompt and say: are you sure you want to delete and then we're going to make a delete call to our server?

A

So we need kind of a script and we'll just inline it here in the html.

A

And we'll listen for the click event.

A

And when the event comes, we're going to say: if confirm, are you sure you know do you want to delete and if they click ok, then we're going to do a fetch.

A

And we're going to do window, dot, location, dot path name, so it would be the same path that we're on which we're kind of in in a show mode with the id. And so we have the path name. And then we just need to supply a method.

A

And if the result is okay, we're going to redirect.

A

To games to the game list, otherwise we're just going to alert the let's say: error.

A

And then just include the.

A

Status text there.

A

Okay, so that's our show page. It's going to give us a the view of the game document, we'll see the name, the description and it's published and we'll have two buttons to edit and remove, and then we have some script to handle our remove function and obviously the edit will link to in an edit view, which will be our form.

A

So the next thing we want to do is make our.

A

Controller we'll go ahead and make a controller so we'll go to controllers and games and create a new file called show.js and in that new controller file, we're going to import our model from.

A

Models.Game.Js then we're going to have a function. That's default.

A

And we'll take a request, object and a response object and then we're going to get our game from.

A

Our model passing the request.params.id from express and then we're going to render our view games.show, and we need to give it a title: mario wiki dash game and we'll say game dot, name and then we'll include the game document in our data object for our render, so that that will display the object just cool.

A

Now we don't have a get function in our model, so we need to go to our model and add the get function and come down here. Export a sync function, get.

A

A

We'll call hyper to get it, so this is going to take an id and we'll call hyper to get our document using the weight, dot, hyper.data dot, get id and then we'll validate. It now might think that you know it should be correct right, but what, if they pass an id that may be of a different document or whatever um we want that to air out. So we want to validate this game and make sure that it's successful.

A

And we'll return data else, return error right; okay, so that takes care of our get.

A

And now we need to create an endpoint on our server.js file for our controller function, so we'll go to server.js and we're going to import game. Show.

A

Okay and then we'll add our endpoint, so it'll be app.get. Slash games, slash id again ship that cool all right. So now we just need to modify our list view. So if we go in our views, our index view- and we just need to add an href around each card, so each aside is a card and we're just going to do an href and we're going to go to games.

A

A

That and what right so so we have our game game.id and then um I want to.

A

Mess with the styles a little bit, we just want to do text decoration none. So when it highlights this card it won't underline everything.

A

Okay, all right. So it's a good sign that our server is still running. Let's go over here to games and we do have the pointer. So that's a good sign. So let's choose one and could not find matching close tags. So we've got a little bug. um It's probably on the show. Ejs would be my guess so I'll go to show ejs and let's see.

A

Games that was it let's go back and just reload just to make sure cool. That was it so now we've got our show, we've got our edit and remove. If we hit remove. We can all, are you sure and get our error that it's not phone?

A

We hit edit, of course, that page doesn't exist yet so we're good. We can click on games to go back to the games list.

A

All right, so that's show now. Let's go ahead and do remove game. Remove game is pretty easy. The first thing we want to do is go into controllers games actions. I think controllers games actions.

A

We want to just add a a remove function. So we'll do export sync function, remove request response and then we're gonna call.

A

A

Request.Params.Id.

A

And if result is okay.

A

Then we're gonna send okay, true.

A

Else we're going to send so in this case we're not doing a view we're sending some json.

A

Okay, now remove doesn't exist in our model, so we need to add it.

A

Id now you could just um call data.remove dot id, but I want to make sure um it's a valid uh game before I remove it. So I'm gonna go ahead and just do game.

A

Await hyper data, get id and get the game and then I'm going to do a validation.

A

Make sure it's a valid game and if that's successful,.

A

Then I'm going to do result equals away dot, hyper dot data dot, remove given the id.

A

And then I'm gonna.

A

A

And then otherwise, I want to just return.

A

A

Error not found.

A

And that's my remove function and then we just need to update the server.js with our new endpoint.

A

So we'll say at dot, delete games, id game actions remove.

A

Okay, so all is well in the world. So let's give it a spin. Let's go to home gains. uh Miss pac-man is not a mario game. So let's remove it and cool. We came back. Miss pac-man's gone.

A

Awesome we were able to add it back very cool, so that's show and that's remove now. The last one is edit and update. So what we want to do is when we go here and click on this edit button.

A

We want to go to the same form that we have for our ad, but we want it to be an edit and we want all of the data to be full so that when we submit it, it's going to overwrite that record pretty cool.

A

So getting started with that. We need to kind of um work on the the server so we'll start at the server and handle our edit url.

A

So we'll go to server.js.

A

And we'll create a get slash games id edit and we want to add csrf protection. We did with the new and then a game form right.

A

And I'm going to put this.

A

I don't think it matters with express, but I'm gonna do it anyway, I'll put it up here um and yeah. So so we've got the link, so that should take us to the game form we go mario and edit, and it does now. We just need to modify our controller.

A

Form function and what we're going to do is basically, if it's and if it has an id, we'll we'll get that game and display it. But if it doesn't we'll return a blank document. So.

A

So we'll bring in our model.

A

And then we'll say, if request request.params.id.

A

Then we'll get the game.

A

I would request dot that id.

B

A

And then we'll just return, the rendered view right, game, slash form and in our data we'll set our title.

A

And we have to set our cross site reference.

A

To request dot csrf token.

A

And so descriptions optional, so we're gonna go ahead and default description equal to blank and then we're gonna basically bring in game. So if game has the description already, then it'll overwrite this default here that'll just make things easier and we're returning so on this. If then, we can just leave this all the same, and we should be good.

A

Okay, so now, let's check this out oops. What did we break.

A

Okay, so games, we add a game that looks good. We edit again cool we've got our data. We want to change this to edit and we need to um modify the view to have a id and as a hidden field.

A

So we're going to go to our forum view and we'll just do something simple here say if game.id.

A

Then we'll do.

A

A

It's a lot of templates so we'll give it an h2 of an n. If the game id doesn't exist and we'll give it an h2 and say edit.

A

If game id exists and then the same thing we're going to do another if statement right here and if the id exists, so it's just id it's helpful, then um we're going to add this hidden id field which will get posted back to our server. Okay and.

A

Now we're going to go to our controller actions.

A

And we've got this: create we're going to change that to create or update.

A

And that's going to break our server, so if we go to our server, it's calling create, we want to say, create or update.

A

All right and then what we'll we'll do is we have to just basically um do a check here.

A

And not generate an id, and then we need to you know, get to my notes.

A

Okay yeah, so we still parse the body like that, and then we change this result to a let and move it. And then we do an if request body dot id, then we're going to say, result equals away games.update request.body.id.

A

And then we would include our document and this will have request.body.id it'll, be a type of game and then name description and published.

A

And then this would be else.

A

Like that and then we'll check, if results, okay and if it is we'll just for this example, we'll say, add.

B

A

A

Otherwise, we couldn't save the game.

B

B

A

So, let's give it a shot. Oh, I think I forgot one thing so we um added this update function, but we didn't add it to our model. So we need to go to our game model and add that update function. So I get a models game.

A

And add an update function, so, let's export a sync function, update and it takes the id in the game and we want to.

A

A

The game and if that's successful, then we're going to return away, hyper dot data, dot, update and again the id and the data.

A

Otherwise, we're going to return, ok, false and the error.

A

Okay, let's give it a shot start with home, go to games.

A

Let's add a description for miss pac-man chop chop.

A

Okay, success cool worked so now you've got kind of a full crud, let's make sure add, works, um sonic edge.

A

1988 just guessing sweet. We got sonic very cool so with that, what we're going to do is check in our code.

A

Controllers get status, get views.

A

So we implemented the show the update and remove game feature uh remove for the game um model, so that kind of concludes this part of the workshop.

A

Definitely try that and then what we'll do is um behind the scenes. I'll go and do this exact same process for the character model.

A

Character literally will be the same model as game, except for having a type of character, and what I encourage you to do is practice doing the character using the same steps. We did the game, so you know views and controllers and models. You would have a character model. You would have a folder called characters and have all of these controllers and views. You would have a folder called characters and you would have all of these views and then um would wire it up.

A

Just like we started with games oops, we would start with characters and the server's not running right now. So with that. That is part two of the hyper node.js workshop and we will be looking out for part three thanks.