Build a URL Shortener with Volt and Folio
This episode is for members only

Sign up to access "Build a URL Shortener with Volt and Folio" right now.

Get started
Already a member? Sign in to continue
Playing
05. Storing a shortened URL

Episodes

0%
Your progress
  • Total: 53m
  • Played: 0m
  • Remaining: 53m
Join or sign in to track your progress

Transcript

00:00
OK, so our form is working nicely. Let's go and create out a model that we can actually use to store our URLs. I'm just going to call this URL, and I'm
00:10
going to create a migration alongside of this as well. So let's open up our Create URLs table and figure out what kind of data we need to store. So the first one is pretty obvious.
00:21
It's going to be the URL, the long URL, that the user has entered. And alongside of this, we're going to have a hash ID. That will be the end thing that gets
00:33
put onto the end of our URLs. So that's, again, going to be a string, and we're going to call that hash ID. And really importantly, we need to make sure that this is
00:42
unique. So next up, we're going to be tracking link clicks or visits. So we're going to have an unsigned integer in here, and that's just going to be called visits.
00:53
And we'll go ahead and set the default here to zero. OK, that pretty much wraps that up. So let's go ahead and migrate what we have here. And we'll head over to the URL model
01:03
and just fill in the fillable fields in here. So fillable is going to be the URL, the hash ID, and the visits as well. Great.
01:15
OK, so what we now want to do is once we've validated this and we're pretty sure that this is valid, we want to go ahead and actually create a record in the database.
01:25
But once we've created this record, we need to store this in state somewhere so we can reference it on the page. Basically, as soon as a user has submitted this,
01:35
submitted a valid URL, we want to go ahead and say, here is your short URL. So we need to change around the template that we have here to show that new URL.
01:46
So let's go ahead and start with creating out some state up here again. That's going to be a URL, so not related to our form. This is going to be the model that we get back
01:56
when we create this. So what we can do is just say this URL, and then we can use our URL model to create out a new URL with the data.
02:06
So let's go ahead and put in app models and URL at the top, and let's pass in the data that we need. So for this, usually what we would do is we would say this only or request only.
02:18
In our case, we've got a form which actually contains an only method, which allows us to pluck the URL from this form. So if we had multiple properties in this form,
02:30
we could pluck an array of what we wanted to store. So it's kind of like a request. Now, onto this, what we need to do is add in the hash ID. We've not got to that point yet, so let's go ahead and set this
02:41
to ABC. We're going to have a conflict at some point, because, of course, that's unique in the database, but this should work.
02:47
So once we've submitted this, we create the URL in the database. We assign it to this state, which means we can access it now down here. So just as an example, let's just pop this at the top
02:58
here and just say URL ID, and we'll do that only if that URL has been filled. Otherwise, we'll see an issue. So let's try this out.
03:08
We'll head over and just make sure this is good. OK, so let's go ahead and enter google.com, and let's hit Get Short URL. And it doesn't look like that's worked,
03:25
so let's figure out why. So let's head over to our database and just check this. It has been put in there. Yeah, so this needs to go within the template.
03:37
Really, really careful about that. Remember, we need an overall wrapper for our components. So I'm going to go ahead and get rid of this out of the database, and let's hop back over to the browser and enter that again.
03:49
And let's hit Get Short URL. There we go. Great. So our state has now changed.
03:54
Our template has been updated. We're currently just dumping out the ID. But what that means now is we can go ahead and update our template to show something a little bit more useful.
04:05
So we can actually keep this in here, and we can swap this out for an else and go ahead and end the if statement down here, because we don't want to show the input form when
04:14
we have a successfully generated URL. Instead, we want to show that this has been created, and we want to allow the user to copy that URL in there. So let's go ahead and create out a div in here.
04:26
And we'll go ahead and create out a paragraph and maybe do an m dash in here and say your short link is ready. Down here, we're going to go ahead and grab this input and do a very similar thing.
04:41
We're not going to need an ID for this necessarily. We definitely don't need to wire this up. And we're going to set this to read only. And basically, the value of this is
04:51
going to be the URL that we have generated. So at the moment, we don't really know that, because we don't have an easy way to grab this. So what I'm going to do is just grab the URL ID for now.
05:03
We'll just pop that in there just to demonstrate how this can work. So now, our entire state is going to change when we create this out.
05:10
So let's say google.com. Just make sure we get rid of this, because otherwise, we're going to see a conflict. Click on this, and there we go.
05:17
Boom, your short link is ready. And we'll have the short link in there ready to click and copy once we're done. OK, so let's finally just style this up a little bit better
05:27
with a little bit of spacing. We'll go ahead and set a margin top of 2 there. And that's pretty much it. We can enter a URL.
05:33
The state changes. We are going to figure this out later when we create another route to actually redirect the user to that URL.
05:40
But that's pretty much it. So just to recap, creating the URL, storing it in state, and then using the state that we have to change around the template.

Episode summary

In this episode, we take the next step in our URL shortener project by setting up the actual storage for our shortened URLs. We start off by creating a URL model and a migration file for our database. Here, we decide on the key fields: the original long URL, a unique hash ID (which will be our short link identifier), and a counter for tracking visits, which starts at zero.

Once the migration is set up, we run it so our database now has a table ready to store our URLs. We also update the URL model to allow mass assignment for all the important fields.

With our storage set up, the next task is to actually save shortened URLs. After validating the user's input (so we know it's a real URL), we create a new record in the database. To keep things simple for now, we're just hard-coding the hash ID, but we'll generate real unique hashes later.

We also update the page to only show the input form when we haven't created a short URL yet. As soon as a user submits a long URL and we store it in the database, the page updates to show the new short link, ready to be copied. We finish off by adding a bit of styling so the page looks neat and recapping that we've covered creating and storing the URL, changing the UI based on state, and getting ready for the next steps — like actually redirecting users using their new short links.

So by the end of this vid, we've set up full circle storage for our short URLs and laid the groundwork for the redirect feature coming up soon!

Episode discussion

No comments, yet. Be the first!