Let's Build with Laravel: A Linktree Clone

hey everyone andrew here this video is going to be a little longer than my previous ones because we'll be building a larval application starting completely from scratch and going into a usable product what we're going to be left with might not be super rich in features but it will be a completely functional app so what are we building well we're going to try and mimic a service called linktree if you're unfamiliar with the name it's a service that lets you add a variety of links to websites social network profiles or anything else and consolidates them into a page under a single url this way on sites like instagram or twitter where you're only allowed one url your followers can click this and see more than just one website you can also use it to track visitors to each of your links and even customize your page to match your specific style so this is what we're going to try to build in laravel both the dashboard side where someone can add in their links and a front-facing side where a visitor can click on those links from a single page so right now we have a blank larval project right out of the box for starters i like to think about my app in terms of data and what we'll be storing using lucidchart i created this database diagram showing the three tables that we'll be using in our app as well as the columns associated with each of them we have a users table a links table and a visits table each user has multiple links and each link has multiple visits let's open up our code base and get started implementing this we are already provided a user model by default so we'll just create our other two models that we'll need using artisan php artisan make model link and passing in the migration flag so that we can skip a step and create the migration at the same time and let's do the same for the visit model now that we have our models and migrations created it's time to get our columns added in that were specified in the diagram let's open up all three of our migrations and we're going to start with the users table we don't need a name instead we'll use this same column for username i'll also move that after the email column and get rid of the email verification okay looks like we'll also need a string to serve as the background color and we'll also give this a default value of white and lastly a text color string with a default value of black those default values will save us from having to specify the initial background and text colors whenever a user is created okay let's take a look at our links table now first thing we need an integer to represent our user underscore id column so that we can form that relationship back to a user model looking back at our data diagram we'll need a string to represent the name of our link and we also need a column for the link itself we could use a string here but i'm going to actually use text just in case someone ends up adding a link that's longer than 255 characters that's all we need for links so finally let's create the columns for our visits table just like with our previous migration an integer for link id that forms the relationship of a visit back to a link and the only other thing that we're going to be storing in here is the visitor's user agent which a text column with a default null value will do just fine for now that we have our actual database organization laid out it's time to work on our larval models let's open up all three and get started on user first under this fillable property is a list of columns that you can mass fill in with data when creating an instance of this model we are not using name anymore so let's change that to user name and also add in the background color and text color properties we can also get rid of this email verification property since we're not using that for this application what we do need though is a connection to our links table each user will have multiple links associated with them so to reference that using our model we create a public function called links that just returns this has many and then our link class i'll show you how these are pulled through our user model later in this video don't worry now let's bring our attention to the link model just like with the user we want to be able to easily mass assigned data to a new link whenever it's created the easiest way to allow any column to be mass assigned is by adding a protected guarded property to this class and assigning it an empty array we're telling laravel don't guard any column from being mass assigned instead of specifying the ones that should be just like our links relationship on our user model we'll need to create the inverse here public function user and it returns this belongs to our user class each link belongs to a user likewise each link has many visits so using the same syntax we'll add that method below this one finally our visit class just like with link we are not going to be guarding any mass assignment and all visits belong to a link so we can add that relationship in here as well this completes the chain hierarchy of our models where each user has multiple links and each link has multiple visits with each of the relationships working backwards as well each visit belongs to a link and that link belongs to a user however what if we wanted to skip the links table and see how many total visits a particular user has in their account larval makes this relationship super easy if we go back to our user model and create a new method called visits we can return this has many through it accepts two arguments the final class you want to collect and the intermediary class that the relationship passes through we want to get all the visits for all the links that a user has all right now it looks like we're all done setting up our data layer and we can start building out these tables in our database let's head over to the console and run php artisan migrate to build them a quick side note i'm actually going to be using dcr artisan instead of php artisan periodically throughout this video this is because my setup is running through a local docker installation and it's an alias shortcut that i've created for using docker compose run if you'd like to learn more about how i've set that up and use it i provided a link to the video in the description alright our database has been built successfully now it's time to turn our attention to the routes let's open up the routes web.php file and clean out this commented area for some room by default we have our welcome view being rendered on the landing page of our app but we also want to be able to render out a list of links each time that a user's profile page is visited and that should be designated by whatever the url is slash the user's username so let's create that with route get a user placeholder and it will call user controllers show method that controller isn't created yet but we'll circle back to it once we have all of our routes scoped out keeping this going we'll also need a route to record visits to our links so the user can see when a visitor has clicked on one and do something like slash visit link placeholder calling the visit controllers store method there's a slight problem with this current setup though because the user placeholder is directly after a slash with nothing after it it should be the absolute last url laravel reads these route paths from the top down to decide when to render one so if this slash anything route was before another defined route it would be the one to fire off the render i like to call these catch-all routes and it should stay at the bottom of our routes web.php file now that we have our visitor facing routes out of the way we need our dashboard routes like when a user sees all of their links or creates a new one or edits one for convenience sake let's have all of these wrapped under a slash dashboard path and we need all of these only to be accessible to a logged in user otherwise how would we know how to display which links both of those can easily be done by creating a route group and passing in an array that specifies the middleware as auth and the prefix as dashboard the second argument is a closure function that will contain all of the routes inside of this group now if we describe something like route get links which uses the link controller's index function that route is actually accessible at our domain dashboard links and only available to view by an authenticated user let's add in all of our other dashboard routes that we'll need for this app just as an aside we could use something like route resource for the above which would condense something like this into a single line however i'm making some slight deviations from the way that would be used and also i just like having all of my routes defined individually like this that should be everything we need for our dashboard we're giving our users the ability to create or edit their links as well as update some profile settings skipping back to what i mentioned earlier these dashboard routes are wrapped in an auth middleware so we need a way to register and authenticate users coming into our application while we could roll our own authentication routes controllers and methods we're going to let laravel handle this for us previous versions of the framework used to include boilerplate registration and authentication out of the box but ever since version 6 was released it's installed through a separate package and not included by default no problem though all we have to do is run composer require laravel ui in our terminal from the project root and once that's done we can look at the documentation to determine what artisan command will need to generate the authentication scaffolding we're going to use some bootstrap styling and aren't using a front-end javascript framework so it looks like ui bootstrap with the auth flag will be the best choice let's head back to our project and in the terminal run php artisan ui bootstrap off alright that went through successfully and we can see a bunch of new controllers and views have been added to our project it looks like all we need to do now is install and compile these assets using npm so npm install and npm rundev in our terminal once that's finished we can refresh our site and verify that the view in bootstrap css is displaying correctly back in our project's routes web file we need to add in all routes which is a helper that will populate all the paths for the registration login and password reset routes if we head back into our browser now we can go to the register page and start signing up for an account but there's a problem here we are not storing a name for our user we changed that to username so we'll need to make some adjustments in our code to reflect that let's head back into our project opening up the views auth register.blade.php file we can change all the instances of name to username and then in the register controller update the indexes under the validation and user create calls from name to username okay let's head back to our browser and refresh perfect name is now username let's add in some test data and try signing up well we are presented with an error that user controller doesn't exist but we've landed on the home path though which means that our signup worked we can actually verify that by going into our apps database and seeing that our user object was created and stored successfully well why the error remember our catch-all route at the bottom of our routes web file that goes to the user controller show method well we don't have a home route defined so it's catching that and trying to route to it but we haven't created that user controller or show method yet now would actually be a good time to get those created using the terminal let's run php artisan make controller user controller we'll also need a link controller and a visit controller after those are created let's go into each one and add in the methods needed from our routes web.php file starting off with user controller we're going to be using the user model and our routes file specifies an edit method as well as an update method since the update method is a post request we'll pass through the request object next comes the visit controller this uses the app visit model and just as a store post request so we just need the one method we're also passing in a link to this and using the implicit model binding method to easily retrieve it so as a second parameter we'll add link blink finally the link controller we have all these methods defined in our route file so let's go through and add them all all right all done looks like the last route we have to add a method for is user controllers show for that we'll just need to pass through the user object as a parameter and we're just going to return that user to test it out we have a problem right off the bat though i want our urls to look like this the domain then slash the username we have a user in the database but it's returning a 404 that's because by default when using implicit model binding methods like we are it expects the id of the model in the url see if we use slash one we get the user that we're expecting it's easy to change this though so let's take care of it if we head to the bottom of our user model class all we need to do is add in a method called get route key name and have it return the name of the column that we want to use in our case that's username all right let's save this and go back to our browser perfect it's pulling in our user when using the username in the url the next quick fix i want to make is what happens when a user finishes registering or signs in laravel is going to automatically redirect them to slash home but we want them to go to slash dashboard links where they can view all the links associated with their accounts if we go to the login controller we can see there's a protected redirect to property and that's calling a constant called home in the route service provider opening up that file we just have to scroll down to that definition and change slash home to slash dashboard slash links you could even make this like an env call or a config setting if you want it to change depending on the environment now logging in brings us to dashboard links which is exactly what we want unfortunately though this is blank right now so let's get to fixing it in our link controllers index method we're going to return a view and attach to that view some links now we could do something like links equals link where user underscore id equals auth id get but that's a little too convoluted for me i personally like working from a parent model down whenever possible and what i mean by that is this since each user has multiple links attached to them we can say links equals auth user links get it's a cleaner syntax and one that i personally like working with more oops almost forgot to add in the use auth statement at the top now all we have to do is determine the actual view to return since we're in the link controller index method i'm going to use that naming convention and have it as links index let's go ahead and create the links directory and index.blade.php under it extending the layouts app template and the content section we'll add in some markup for our links page this is just default bootstrap classes we'll have a container holding a single card titled your links and a table containing the name url number of visits last visited date and actions of those links and now we can run a for each loop on the links that we passed in returning the name the link actually let's make this an actual link and for the visits we'll just come back to that for now we'll just hard code in zero same with the last visited date and our action is going to be a link going to slash dashboard slash links and the link id which will route us to the edit page for this particular link at the bottom let's add in a button to send us to the create links page okay let's see what that looks like in our browser hmm there's a row displaying here and there's something else missing from the top right oh i see what happened this row didn't auto complete correctly let's fix that and let's open up the main layout app.blade.php file and see what's missing from the header oh it's trying to display the user's name which doesn't exist let's switch that to user name all right let's see how this looks now much better although we want to be able to add in some links right now that button sends us to a blank links new page so that's what we'll build out next navigating back to the link controller and scrolling down to the create method all we have to do for this is just return a view we'll call it links create and make that blade template file under our links folder for simplicity's sake we'll also just copy and paste what was in our index.blade file into this and make some adjustments changing the page title removing the whole links table and adding in a form to create our link our method is going to be the link controller store route that we set up which is the same path that we're currently on just with a method of post and let's start scaffolding out this form we have an input for a name an input for a link url the csrf field and a button to submit this form by the way this at csrf line here protects laravel post requests against common cross site attacks it's essentially a shorthand way of writing out a hidden input with the value of laravel's generated csrf token helper method so this is what our create a new link page looks like now we can add in a name for our link a url and do nothing we haven't hooked up the functionality of this form yet going back into our link controller the store method that we previously added in is what will handle that instinct might be to run with link create and pass in the user underscore id from the auth facade then the name and link from request variables but just like with our index method i prefer a slightly different approach instead we'll start with our main user object from auth and then chain on our links relationship after that we call create to make a new link that's automatically associated with our authenticated user then instead of passing in an array of values we can use request only with an array of keys that we just want to get passed in from the form in this case name and link the create method expects an array and request only is returning an array keyed by the form fields we specified along with their values attached then if the link is created successfully we'll return back to the main links page otherwise we'll just return back to the previous page so let's try this out perfect our link was created successfully and shows up in our links index view there's a problem that we should address though what if someone tries adding in a url that isn't the right format or leaves one of the fields blank there's no default in the database so it would error out when creating the link this is where laravel's request validation comes in handy before we do anything else in our store method we can run request validate which expects an array of keys and values the keys align with the request attributes or in this case form fields being passed in and the values are rules that we can use to determine if the values of those fields are appropriate for our method for the name it's required and we want to have a max length of 255 characters for the link it's also required and it should be in a valid url format there's a long list of these validation rules on larval's documentation site and you can chain multiple together using the pipe character the attribute won't be valid unless all of the rules for that key pass the best part is that if this validation fails the application automatically redirects back to the last request and flashes some error data to the session for display in your front end opening back up our create.blade file let's create spaces to use that error data under our link input we can use if errors first and then the name of our input which happens to be name then we'll return an invalid input div echoing out the value of errors first name we'll copy the same to our link input because we're using bootstrap these errors won't appear though unless we add in a class to our input elements so in the class field for them we'll echo out using an inline conditional for the errors first name value and return the is invalid class for nothing copy the same thing to our link input and we should be good to go let's check this out in the browser okay so let's leave the name blank and add in a word instead of a url for our link hitting save link the application returns back generic error messages based on what the validation determined was missing from our inputs you might notice though that each time we submitted the inputs were wiped out we can decide to return back the invalid data that the user added in by setting the value of our inputs to old with the input name passed in as the argument old contains the flashback data the user provided whenever the error messages are returned using it as the value will keep that input persistent see still showing what i added in okay the links create page looks good so let's use it to create two more links for my account now what if i wanted to edit one of these links using our edit action it's leading to another blank view so that's what we'll be working on next in our link controller's edit method we're just going to return a link edit blade template passing through the link that we want to edit but what if i decide to manually change the link id in the url to something else maybe a link that's not in my account i shouldn't be able to edit another user's link so we'll have to add in a check to prevent this from happening it should be pretty simple if the user id of the link i'm trying to edit isn't the authenticated user's id then we'll just return a 404 error one returns fine and 5 throws the error perfect now for that edit blade template well it's going to be super similar to the one that we use for create so we can just copy its contents into an edit.blade.php file all we need to do is change out the title of the page switch the form action url to the one used for the link controller update method and use the passthrough link name and link values for the form's input values viewing this in the browser we have our edit form that's pre-populated with our link info saving the changes to a link we'll also take a decent portion from the store method in our link controller so let's copy that over the biggest thing we have to change in this method is the create call here we're getting a valid link object due to our implicit model binding so we can just call update directly on that then pass through an array containing the name and link values by using the request only call that we use in the create method and we'll remove this conditional returning back to the main links in next page almost forgot one thing we'll need to make sure the link we're updating belongs to our authenticated user if it doesn't we'll return a 403 unauthorized error all right let's open up our browser and see how this looks we'll just change out something in our link and perfect our link name was updated successfully let's just change it back and that works too but what about deletion surely our users would want to be able to delete a link they might have added by accident so let's go back to our edit.blade template and add in a button to delete the link that looks good now if we look back at our routes web file you can see that the delete route expects a delete header as opposed to a get or post this means two things one is that we'll have to submit a form to delete the link and that form needs to be sent with the delete method unfortunately forms can only be natively submitted with get or post but luckily laravel has an easy work around let's create our simple delete form outside of the edit form it will use the same method but after the csrf directive we'll attach this method helper passing in delete as the argument this is a shortcode that will generate a hidden input helping laravel overwrite the default form method instead sending it with a delete header on our delete button we want to submit the delete form when it's clicked we can use some inline native javascript to get the job done by hooking into the on click attribute event prevent default will negate any effects of the button click and then get element by id delete form submit that's pretty simple right this form doesn't do anything yet so let's head over to the destroy method we set up in the link controller we'll use the same verification from the update and edit methods making sure this link belongs to our authenticated user and redirect back to the links index page when we're done between those it's just a matter of running link delete to remove it from the database time to test it out uh oh something went wrong let's take a look at that form again oh wow okay i see what i did wrong i just swapped the action and method all right one more time perfect my link was deleted successfully let's just add that back in and we're good to go next up the actual link page if i head to my app slash my username i expect to see a list of my links here so let's make that happen in our user controller under the show method right now we're just displaying this home view let's replace that with one called users show and we'll pass in our user that's given to us through the model binding all that's left to do is actually create the view users show.blade.php just like with our dashboard views we'll extend the layouts app template and add in some markup to the content section a container row thin column and a for each loop of our links each one will be wrapped up in a div and contain the link going out to the url add in a few classes target blank and rel nofollow and some inline styles for a border that matches the text color value and the actual color as well the link will display the name associated with it and that should wrap it up you may notice that we're doing for each user links instead of for each links we could do it that way and then in the user controller pull in the links by finding the ones associated with the user id of our authenticated user but like everything else we've done so far i like working from a single point down our user has many links and that's how we're going to pull them through one thing to note though is that using this method causes a secondary sql query to happen when rendering the blade template we can help remedy that though by offsetting that to our controller if we call the load method on our user object and pass through the name of a relationship in our case links it will lazy load those relationships automatically onto our user object before passing it through to the view let's head to our browser and here's our links page it's looking good and works exactly how link tree does opening each link in its own separate tab now let's try pulling in the background color by using an inline style for the background looking even better however i really don't want that large bar at the top of this screen when you're on an individual users page i just want it to be links so let's take care of that instead of extending layouts app let's use the app.blade template and copy it to one called links.blade.php in this layout we're going to use an inline style tag to give the whole body the background color that our user object has and then remove the entire header and any other elements that we don't want okay that's almost perfect let's just add a little bit of padding at the top of the list awesome we have a single page of our users links with the full background color of their choice speaking of background color what if we wanted to change that right now we don't have a settings option or anything in our dashboard so let's add one to this drop-down in our app.blade layout we'll just tack on another drop down item link here and it will go to our previously added dashboard settings route which that uses the user controller's edit method just like the edit method for our links we need to return a view and then pass through our user which we can get with the auth helper now let's create that view under our users folder edit.blade.php since i'm just going to be adding two input fields one for the background color and one for the text color we'll just go ahead and copy over the links edit template into this and make some small adjustments remove the delete button change the button text to save settings update the form action and page title and let's go through these inputs and change them to the desired attributes all right back to the browser and looking good now we just have to handle this form submission so back to our user controller and into the update method which just like what we did with the link controller's update method we can chain update on our authenticated user object and pass through just the request attributes that we want to update in our case that's background underscore color and text underscore color after that's done we'll just redirect right back to the settings page but i only want my users to add in hexadecimal codes for these values i don't want text and i don't want them to leave it blank otherwise it might affect their links page being rendered just like with our links we can validate the requests to make sure the values being passed through are appropriate using a combination of larval validation rules this is actually pretty easy to accomplish starting with the background color it's required it has to be exactly seven characters long and it has to start with a pound symbol text color is the exact same rule set since they're both hex color values going back to the browser updating these values with full hexadecimal colors goes through fine and if we remove some of the characters or don't include the pound symbol at the front we get an error message back and checking out our users links page we can see the background and text colors have updated to the values that we set actually that color is a little bright let's tone it down a bit that's slightly better something i notice though is that there's no feedback when the settings are saved successfully so our users might not know that their colors were updated we can fix this let's head back to our user controller's update method at the end of this where we're doing our redirect we can tack on the with method this takes in an array of key value pairs and flashes them to this session when the redirect happens by attaching this simple message to the success key we'll be able to check and echo out that session variable using the same key on the blade template under our save button we'll add if session success and provide a valid feedback element echoing out that message in the session just like our error messages though we have to include a class on the button in order for this message to show up so i'll just add in this quick inline conditional here that'll add is valid to the class list if that success message is present all right let's check it out back on our browser in our user settings let's hit save settings and our success message appears it's flashed over which means it just exists for this one instance and refreshing or loading the page again will make it disappear it looks like the last thing that we have to cover is the visits for our links let's first tackle displaying the appropriate data in our dashboard instead of these hard-coded values in the links index.blade template we need to get the total count of visits for each of these links we could do something like echo out link visits count getting the count of the visits relationship but there's of course an easier way in our link controllers index method between the links and get call we can chain on with counts and pass through the visit relationship name what this does is create a new attribute in our data a combination of the relationship name and underscore counts returning a single integer that's the amount of attached relationships to that specific data object by using this we can then update our blade template to just echo out link visits underscore count they're all zeros but that's accurate right now since we have no visits in our database all right what about the latest visit date well we could use some inline php in our blade template to pull out the latest visit from the links visits relationship then echo out the created at date for it in a format that's more readable to our users we'll also probably have to make this a conditional in case there's no latest visit which is true in our current dashboard but see i don't really like this approach that much especially because it contains inline php in our blade template which i like to avoid as much as possible where i can i use my controller or method classes to organize and format the data and the blade templates are just for displaying it so let's head back to our link controller and between our with count and get methods we're going to chain on another one called with passing in latest underscore visit with works the same way as our load call from the user controller it lazy loads in a relationship's data to our original data object in this case each link will have an attached latest underscore visit attribute but what is that well we'll have to define it in our link model at the bottom of our class let's add in a new public method called latest underscore visit it's going to return a relationship to visits but instead of a one-to-many relationship like the one above it's going to return has one with latest chain on the end this is a nice little shortcut in larval and lets us get the single newest associated relationship by the created at date by the way off screen here i'm going to manually add in a test visit so you can see what it looks like now if we refresh our browser we can see this attribute pulling in to each of our links two have a value of null while the first is a full visit data object this is what we'll be using in our blade template now to display the latest visit date in our links index template all we have to do is check for that latest underscore visit attribute not being null and return the formatted created update for it otherwise we'll just display in a refreshing the browser and nice exactly what we want but right now clicking these links doesn't record a visit we could route these links to a specific get route to do that and then redirect to the actual url but it would defeat the purpose of having visitors be able to save or copy these links on their device instead let's use some simple javascript to record them asynchronously thanks to the bootstrapped files that the laravel ui package pulled in earlier we have a bootstrap.js file and an app.js file that includes some helpful libraries out of the box like jquery and axios let's open up the app.js file and get started you may have noticed that i added this user link class on the individual links on the user's show template and that's what we're going to use to create our click event listener using jquery when a user link is clicked we're going to store that link by firing off a request asynchronously that way the link click and visit isn't interrupted using axios we'll post to the visits store route slash visit slash link id and pass in a link that's composed of the clicked on links url after that finishes we'll just dump the response in the console log and if there happens to be an error we'll add that to the console as well so what about the values for link id and link url well link url is easy to get by the way feel free to use let instead of var but i'll keep it for this demo using jquery we can just grab the href attribute of what we clicked on through the this object the id is harder because we don't currently have an easy way of getting that with the data we have now what i've decided to do is just head back to the user's show blade template and add in a data link id attribute for the value just echoing out the id of the link then back on our app.js file we can just use the this object data link id okay our last piece of this is the functionality to actually store this visit let's open up visit controller and the only method here is our store method off the bat we could easily do visit create and pass through the link id but we are already getting a link object due to the model binding in the method parameters so we can just use that link object and chain on the visit's relationship then the create method which will automatically associate this visit with this links id the only value we need to pass through is the user agent which we can get with request user agent okay looks good time to compile our javascript by running npm run dev in the terminal and take a look at our site in the browser on our users link page we have our console open so we can check that the link visits are working if we click on one it opens a link in a new tab and going back to our links list we can see that the visit was recorded and its data sent back to the console we can verify that our dashboard data is also displaying correctly by refreshing the links index view and seeing that the github profile links visits have gone up by one let's visit a few more of these and the data is updating as expected both the views and latest view date are displaying correctly refreshing the opened pages doesn't record new visits but clicking the links in the user's link list does we could probably perform some validation and checks to prevent that from happening but that's for another video alright that's about it in this video we've learned how to create a basic link tree clone from scratch using laravel and laravel's ui package we've organized a data structure implemented it with models and migrations created routes for application gated some with authentication and set post requests asynchronously with some basic javascript as always if you have any questions please feel free to reach out to me in the comments or on my twitter linked below huge thanks to my github sponsors and everyone else who continues to support these videos thanks for watching

Channel: Andrew Schmelyun

Views: 15,058

Rating: 5 out of 5

Keywords: coding example, coding tutorial, how to make linktree, laravel, laravel clone, laravel example, laravel project, laravel social network, laravel tutorial, laravel tutorials, linktree, linktree clone, php example, php tutorial, programming tutorials, web dev, web dev tutorial, web development, web development tutorial

Id: 30qk04BG9G4

Length: 58min 49sec (3529 seconds)

Published: Tue Aug 25 2020

Reddit Comments

[u/aschmelyun]

Just a head's up, it's a bit longer than my usual 20-30 minute videos, clocking in at just under an hour. I wanted to try and aim it toward both newcomers to the Laravel ecosystem as well as those who might have some moderate experience with the framework already.

If this is something you'd like to see more of in the future (or have suggestions of sites/apps you'd like to see me attempt at copying in Laravel), please let me know!

[u/batmonpls]

Gonna try this !

[u/Halladj]

You Just Love to see it❤️❤️❤️

[u/CitronRed]

Love this, thank you.

Also I found that when I started the video first step is using a laravel command, but there's no info on what I need to have installed, or what other videos should I watch first. And that would be really helpful.

[u/wise_young_man]

What is a Linktree?