Tracking Forked Snippets0:00
Welcome back. So, in the last episode, we ended with a bit of a cliffhanger. We can create a snippet, and we also learned that we can fork a snippet, but when we publish this forked snippet, we still have no connection between this and the original one. So, let's fix that. Let's go back to Sublime, and we're going to visit our create view. Now, at the very top, I'm going to say, within our form, if we have an id for the snippet, then we are, in fact, forking an existing snippet. So, if that's the case, why don't we store a hidden input here? Now, we're going to give it a name of forked_id, and you'll remember, from the last episode, when we created the table, we stored a column on our table called forked_id, but it can be null. So, in this case, if we are forking an existing snippet, that's not going to be null. We're going to make that equal to the id of the original.
forked ID, but it can be null. So, in this case, if we are forking an existing snippet, that's not going to be null. We're going to make that equal to the ID of the original snippet. That way, we create a new snippet, but we have a identifier or a reference to the original snippet that we're forking. With that in mind, let's go back to our SnippetsController and update our store method to reference that. forkedID will be $request->forkedID. Now, if this does not exist, for example, like if we are just creating a snippet by itself and it's not forking anything, then this call is going to return null, and that's fine. Now, real quick, before we leave, let's do a quick bit of validation. Validate the $request, and the title will be required, and the body is required, and that's good enough for me. Validate the $request, create the snippet, and then redirect home. Let's
the request, and the title will be required, and the body is required, and that's good enough for me. Validate the request, create the snippet, and then redirect home. Let's give it a shot. Let's go back to Chrome, and you know what? I'd love to start from scratch, so let's just steal a little snippet here, and then I'm going to say php artisan migrate --refresh to roll everything back and then rerun it, and of course, that's going to reset the data. Okay, so we can say ES2015, save it, but now I'm going to fork this, and we'll say modified class syntax that will accept a name, like so. Publish it. Okay, so now we have two, but more importantly, if we were to, let's see, right up here, let's just return snippets so we can review the JSON. So now you'll see, here's the very first one we created, but now the second one, the forked ID was set, so we have a reference between this and this.
Listing Snippet Forks2:28
so we can review the JSON. So now you'll see, here's the very first one we created, but now the second one, the forked id was set, so we have a reference between this and this one, which means now it'll be very easy to store or track or list the relationship, maybe something like this. Let's go to, within our views, if we show a specific snippet, down here we'll say if, and I don't have the syntax for this yet, so what do we want it to be? If we have a relationship called forks, if we have any of them, well, then let's spit them out. So maybe we'll have a horizontal rule here, and then like a H3. Now we'll say foreach snippet.forks as fork, and we'll list it within a list item here. So snippet fork_id, and then fork, and we want the title, right? Okay, so we're only going to display this if we have forks for this particular snippet, but right now it's going.
slash forked_id, and then fork, and we want the title, right? Okay, so we're only going to display this if we have forks for this particular snippet, but right now it's going to fail, right? So let's come back, I'm sorry, let's go to SnippetsController and get rid of that. Okay, so if we click on this, yeah, it's going to fail because we don't have that forks relationship yet. So we can define that on our Snippet model like this. Okay, so what would we want to do here? We basically want to say select * from snippets table where the forked_id equals what we give it. But even beyond the query itself, what is the relationship here? One Snippet can have many forks, right? So we want a hasMany relationship. This has many of itself, and then the joining column will be the forked_id. Okay, so let's come back and give that a refresh, and there you go. We have our Snippet, but then we also
Linking to Original Snippet4:20
This has many of itself, and then the joining column will be the forked_id. Okay, so let's come back and give that a refresh, and there you go. We have our snippet, but then we also have exactly one fork, and here's our modified snippet. Okay, but next, you know what? I'd like to do the exact same thing the other way around. If I visit this page, I want to be able to tell that this was forked from that, right? So maybe, let's come back here, we'll do this one at the top, and we'll say something like, once again, we don't have the syntax yet, but maybe something like, if this snippet is a fork, then we could say forked from, and then we'll have a link to somewhere. We know it's going to be some ID, and then we also know it's going to be some title. So maybe it could be the snippet, and let's see. If a Snippet can have many forks, what would be the inverse? Would it be forked?
and then we also know it's going to be some title. So maybe it could be the snippet, and let's see. If a Snippet can have many Forks, what would be the inverse? Would it be forked? That's kind of weird. I think technically that might be the word for it, but maybe just something like original Snippet or owner. Well, that makes me think of the User. Yeah, this is hard, owning Snippet. Let's just stick with original Snippet, and if you have a better name, just substitute. So we will link to that original Snippet's ID, and then this would be the original Snippet's title. All right, so it looks like we need two bits of logic, an isAFork method, and then an original Snippet relationship. Let's see. isAFork, well, really that's just sugar that's going to check the relationship. So we could just say original Snippet, and if you want to ensure that it's a Boolean, we could cast that, but
well, really that's just sugar that's going to check the relationship. So we could just say originalSnippet, and if you want to ensure that it's a Boolean, we could cast that, but it would be fine either way. Next, if we're going to have originalSnippet, well, yeah, that's just going to be the inverse, right? So a ForkedSnippet belongs to another Snippet. So belongsTo Snippet. Okay, let's give it a shot. So if we refresh this, there you go. And of course, maybe once again, we could use maybe an H3. Okay, refresh. And then also maybe add some more spacing. Okay, so once again, the styling isn't pretty. You can of course clean that up quite a bit, but this is what we want. We can click on any Snippet we want, and if anyone has created a fork of it, we can track that here. So let's try this. Let's go back, and now we're going to fork the modified Snippet to accept maybe
Adding Syntax Highlighting8:34
but this one's really quick to get set up with, so I often use it. If we take a look at usage, it looks like we link to the style.css, the highlight.pack.js, and then we call initHighlighting on load. So maybe something like this. Let's go to our layout.blade.php file. We'll put this at the bottom, or if it's only conditional, like you'll only have highlighting on a couple of pages, then you could activate it there. Next, if we come back, let's go to get version 9.9, and it looks like they offer CDNs, which is great for tutorials. So let's do this. At the very top, we're going to import highlight.js CSS, and then the JavaScript. Once again, we'll go at the bottom here. And of course, we doubled up. So now it's going to automatically track down any pre-code tags we have and automatically determine the syntax and apply the highlighting here. Let's give it a try. So we switch back, and there we go. We see our syntax highlighting.
Next Steps and Ideas9:20
down any pre-code tags we have and automatically determine the syntax and apply the highlighting here. Let's give it a try. So we switch back, and there we go. We see our syntax highlighting. Why don't we add a new one for the famous dd function. Function dd data, and we will die and var dump the data and publish it. Okay, we have our syntax highlighting. Okay, so I think that's going to do it for our little two-part series, but the point of this is for you to take it further. So I'm going to give you some ideas. One, it would be nice if snippets could be associated with Users. So it sounds like you would need to run php artisan make:auth to set up all of the login and registration. You would need to update your original snippets table to associate a user_id, something like this maybe. That way, every snippet belongs to a User. Then maybe you could have a dedicated section
your original snippets table to associate a User ID, something like this maybe. That way, every snippet belongs to a User. Then maybe you could have a dedicated section for a User to view only their snippets. You could then add a sidebar where you have maybe a list of the top performing users. So maybe you sort them by the number of snippets each User has created. Or maybe you have a like feature where for any snippet, you can click a star icon that will update a pivot table, and then you could sort all of the popular users by the number of likes they have cumulative. Some other things. Maybe your snippets table could also track the snippet type. So in this case, we have a PHP snippet, but if we go back to the home page, this of course is a JavaScript snippet. So maybe you could add categories or tagging, and then once again, users could sort all of the snippets in your database.
