In this episode, we're kicking off by setting up a fresh Laravel project so we can play around with ordering data—though if you're integrating into your own project, you can still follow along. We step through the basic initial setup: installing Livewire, pulling in TailwindCSS, and making a simple layout for our UI.
We then create a full-page Livewire component called links. This will list a bunch of “links” (just some sample data for now) that we want users to be able to reorder. Next, we define a Link model with a migration. It includes a reference to a user (so we can later scope links per user), a URL field, and an order integer so we can keep track of how entries should be sorted.
Using Tinker, we whip up a couple of test users and add some dummy links, making sure they belong to a specific user. The order is left null for now since we’re going to be messing with that as we build out the ordering feature.
With data in place, we update the Livewire component and blade file to display the links in a styled list. We add some Tailwind for aesthetics and confirm our setup is working.
To handle the actual ordering, we install the eloquent-sortable package, make a quick config tweak, and add the necessary trait and contract to our model. Now, our model supports easy reordering! We demo ordering links manually and preview how changing the order in the database affects the display. Finally, we make sure everything is properly scoped to the logged-in user, setting up the needed relationships and temporarily auto-logging in as user 1 for testing.
By the end of this video, we've got a working list of orderable items for a user, ready to hook up to a front-end drag-and-drop solution in the next steps!