HTMX & Go

Contacts List & Endpoint

ThePrimeagen

ThePrimeagen

Netflix
HTMX & Go

Check out a free preview of the full HTMX & Go course

The "Contacts List & Endpoint" Lesson is part of the full, HTMX & Go course featured in this preview video. Here's what you'd learn in this lesson:

ThePrimeagen explains how to create a contacts object and an endpoint for posting contacts in an index.html file. They demonstrate creating a struct for contacts, a function for creating a new contact, and a struct for data. They also show how to append new contacts to the data object and render it on the page.

Preview
Close

Transcript from the "Contacts List & Endpoint" Lesson

[00:00:00]
>> Our index.html now requires an object with contacts on it, and we need to create an endpoint slash context that is a post endpoint. So, let's do those couple things. So I'm gonna jump back here. I'll just use this, and we'll go contacts, awesome. And we render out the index here and we have this down here.

[00:00:22]
We'll just call this currently index for now until we can figure out what to do with this template. We'll create this here in just one moment, but before we create it, let's start by creating the contacts item, right? We need something that, well, we need that. So let's first start off with type Contact is gonna be a struct and it's gonna have a name that's a string and it's gonna have an email that's a string.

[00:00:44]
And then we want to be able to have a nice little function that say newContact. I always like that kind of stuff, plus co pilot can really just make this stuff kind of fly right through. And do we want it as a pointer? No, let's just create a nice little contact right here, very beautiful.

[00:00:59]
And then I also want a type Contacts that is going to equal a array of contact, this will make parts of things easier later on having a nice little type item right here. And then we also need some sort of type data that is a struct, right? This is just the data for the page.

[00:01:17]
I don't care what you call it, Contacts Contact, fantastic we're moving, okay? We're just trying to move fast here people. I'm also gonna have a func newData that's gonna return out a data object and I wanna make sure I fill it, I wanna precede it with a little bit of data.

[00:01:34]
Because if you don't, that means every time we try to do something, you have to like type multiple times to do all the stuff and it's super annoying, it's just, I don't want to do that. So we're gonna have jd@gmail.com and then the next one since I'll call Clara Doe, because if you do Jane Doe then the emails like the same, it's just super annoying, so we can't do that.

[00:01:57]
There we go. So now we have our beautiful data that has a contact that has a couple preceded contacts in there. Just to go over everything we did, we created a new contact, which is name and email. We have a function to create a new contact, name and email.

[00:02:10]
You don't have to put this extra string there, okay, okay, calm down and let co-pilot take control. Okay, let co-pilot take the wheel. Next, have a little type alias for contacts. We have a data that just has contacts on there, and then we create a newData with some preceded values.

[00:02:29]
Okay, so hopefully everyone's kind of following along. You should be able to program this all on your own. Even if you're not familiar with Go, I bet you could probably google /copilot your way into an answer here, not too hard. All right, fantastic. So we don't need Count anymore, I'm just gonna call it data.

[00:02:42]
You know why? Cuz I'm not good at naming things, I've never been good at naming things. I admit that, I admit how bad I am at naming things. So now we have a newData. When we do our GET, I'm just gonna pass in data cuz remember, we need something with the .Context on it.

[00:02:56]
Fantastic, now when we do post a contacts, well, I don't really know what we should be doing here, right? Where should we be putting the data? What kind of data should we pass in? So for now, let's just render out the index because we don't really have a strong plan here.

[00:03:11]
And let's see what happens. See, did I get everything correct? I just want to make sure. Yeah, look at how beautiful, I used HTMX, rookie mistake right there. Yeah, I forgot to actually implement the post. Let's implement the post, probably a good idea, right? So I want name from the form value, I want email from the form value, and then I'm just simply going to go data.Contacts equals append data.Contacts, newContacts, name and email, right?

[00:03:39]
Your classic Go code right here, fantastic. And now we're just gonna render this out. So we've added the contact to the end of the list and we're rendering it out. Sounds good? Awesome, did I get it all correct? All right, so before we display all this, let's jump over here.

[00:03:57]
I'm gonna refresh it. Look at how beautiful this is. We have ourselves this wonderful modern looking form and so now I'm just gonna type in a name and email. Remember, we're putting no validation on email right now and look at what happens when we create a contact. If everyone's followed along mostly correct, you should be seeing something that looks like this.

[00:04:18]
So before I go on, do people need time? Time calls? Anybody? You look distraught, you need time?
>> I'm fine.
>> You're fine? You good? Yeah, no, yeah? Okay, yeah. Yeah, good? Yeah, okay. Yeah, Mark, you good? Okay, we got thumbs up everyone, just making sure. Twitch, you good?

[00:04:40]
Yeah, no, yeah? Frontendmasters.com, yeah, no, yeah? All right, everyone says, yeah, okay, we've got a couple of nos in there but mostly yeah, yeah, yeah, yeah, yeah, yeah. Okay, now we're getting a lot of nos in there, I'm sorry. Sorry, fantastic times.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now