#Bootstrap 5 Auth Scaffolding | Explore Tumblr posts and blogs

mbaljeetsingh · 8 years ago

Text

What's New in Laravel 5.5 LTS

Some time ago Taylor Otwell (the creator of Laravel) made an announcement that Laravel will get a major update every 6 months; well it's that time of the year again.

In this article we'll talk about some of the latest features in Laravel!

But First: Gotchas

5.5 is an LTS (Long-Term Support) release. This means that this version of Laravel will get support (bug fixes and the likes for many years).

PHP7+: If you still use any version lesser than 7 of PHP, please upgrade. Apart from the new developer features offered by PHP7 there's also speed improvements that will save you money. Tumblr recently upgraded to version 7 and quoting them

Almost immediately saw the latency drop by half, and the CPU load on the servers decrease at least 50%, often more. Not only were our servers serving pages twice as fast, they were doing it using half the amount of CPU resources.

If you need help migrating to the latest version of PHP you checkout the official migration guide or take a look at Migrating a PHP 5 app to PHP 7 Guide by Prosper Otemuyiwa. You can also hire me [email protected]

Whoops

As a long time user of Laravel, I hated when whoops stack trace debugger was removed. Glad to see that it's back.

Some of the features of Whoops include:

Flexible, stack-based error handling

Stand-alone library with (currently) no required dependencies

Simple API for dealing with exceptions, trace frames & their data

Includes a pretty rad error page for your webapp projects

Includes the ability to open referenced files directly in your editor and IDE

Includes handlers for different response formats (JSON, XML, SOAP)

Easy to extend and integrate with existing libraries

Clean, well-structured & tested code-base

Blade::if() Directives

Blade received a new addition that simplifies custom if statements in your views. In our AppServiceProvider::boot() or a custom Service Provider ::boot() we can define something like this.

// make sure you import this class in service provider use Illuminate\Support\Facades\Blade; Blade::if('editor', function () { return auth()->check() && auth()->user()->isEditor(); });

After defining editor we can then move to our Blade files and do something like this.

@editor <a href="http://ift.tt/1uaQUM0">Approve Posts</a> @else <p>You shall not pass</p> @endeditor

We can also pass arguments to our directives and we do that by:

Blade::if('editor', function ($level) { // });

and it will look like this in our templates.

@editor('senior') <script src="fancy-editor.js"></script> @endeditor

Auth and Guest Blade Directives

With the addition of Blade::if Laravel also included 2 new custom directives.

The first one is @auth which we use if a user is authenticated, and there's @guess which does the opposite.

Normally, to check an authenticated user we'd do

@if (auth()->check()) <p>Welcome</p> @endif

Now we just need to do

@auth <p>welcome</p> @endauth

Fresh Migrations with migrate:fresh command

You might be wondering what the difference is between migrate:refresh and migrate:fresh. In the general sense of things, they do the same thing — with the difference being that migrate:fresh skips the down method of your migrations.

So if you run migrate:refresh the output might look like this.

$ php artisan migrate:refresh Rolling back: 2014_10_12_100000_create_password_resets_table Rolled back: 2014_10_12_100000_create_password_resets_table Rolling back: 2014_10_12_000000_create_users_table Rolled back: 2014_10_12_000000_create_users_table Migrating: 2014_10_12_000000_create_users_table Migrated: 2014_10_12_000000_create_users_table Migrating: 2014_10_12_100000_create_password_resets_table Migrated: 2014_10_12_100000_create_password_resets_table

While running migrate:fresh will give you

$ php artisan migrate:fresh Dropped all tables successfully. Migration table created successfully. Migrating: 2014_10_12_000000_create_users_table Migrated: 2014_10_12_000000_create_users_table Migrating: 2014_10_12_100000_create_password_resets_table Migrated: 2014_10_12_100000_create_password_resets_table

With this new command, you can skip the down() method of your migrations and just use the migrate:fresh command. This is particularly good news for developers that use foreign key relationships in the database.

DD and Dump Collections

Before 5.5 I used Macros by Spatie to dump collections for debugging.

With 5.5 comes Collection::dump() and Collection::dd(). If you've been using Laravel for a while, you can guess what these do. ::dump() outputs the result and continues processing while ::dd() "dumps and die".

collect([1,2,3])->map(function($i){ return $i * 2; })->reject(function($i){ return $i < 3; });

Take the above collection for example, we can do this:

collect([1,2,3])->map(function($i){ return $i * 2; })->dump()->reject(function($i){ return $i < 3; });

And we get:

Collection {#181 ▼ #items: array:3 [▼ 0 => 2 1 => 4 2 => 6 ] }

Frontend Presets

Since 5.3 Laravel has shipped with optional Bootstrap and Vue.js scaffolding. The problem is that different people mean different tools of development. Since Laravel is not trying to force you to use a particular frontend framework, in this version more presets were added..

To use the React preset just run

php artisan preset react

To use the Bootstrap preset you can run

php artisan preset bootstrap

If you want to remove the presets you can also run

php artisan preset none

Package Auto-Discovery

Installing a Laravel Package requires at least these 2 or sometimes 3 steps:

Install the package:

composer require foo/bar

[ // .... Foo\Bar\ServiceProvider::class, ]

Optionally, register the Facade:

[ // .... 'Bar' => Foo\Bar\Facade::class, ]

One cool thing in 5.5 is packages can be automatically discovered by Laravel. So for package developers, you can add an extra section in your packages composer.json.

"extra": { "laravel": { "providers": [ "Foo\\Bar\\ServiceProvider" ], "aliases": { "Bar": "Foo\\Bar\\Facade" } } }

So when a developer installs your package composer require foo/bar they automatically have access to any aliases and the service providers are automatically registered.

Request Validation Method

In older versions of Laravel validating a request looked similar to this.

public function store() { $data = $this->validate(request(), [ 'name' => 'required', 'price' => 'required|numeric', 'category_id' => 'numeric|exists:categories', ]); // no longer needed // $data = request()->only('name', 'price', 'category_id'); return Product::create($data); }

As you can see from the example above the request()->only() call is no longer needed as $this->validate() returns request()->only().

Custom Validation Rule Objects and Closure

Instead of using Validator::extend() (which we can still use) we can define a class that implements Illuminate\Contracts\Validation\Rule inteface or use a closure.

To create a new rule we use our Laravel handy helper artisan:

php artisan make:rule MyCustomRule

Our rules class will look like this.

namespace App\Rules; use Illuminate\Contracts\Validation\Rule; class MyCustomRule implements Rule { public function passes($attribute, $value) { return $value > 10; } public function message() { return 'More please...'; } }

An example of using this validation rule looks like the following:

request()->validate([ 'files' => [new MyCustomRule], 'more_cowbells' => [function ($attribute, $value, $fail) { if ($value <= 10) { $fail(':attribute needs more cowbell!'); } }] ]);

The closure style takes the attribute and value, and a fail parameter that you call if the validation rule should fail. The closure is a nice way to experiment with custom validation before you extract it to a dedicated rule object, or for one-off custom validation needs.

Responsable Interfaces for Responses

A new interface called Responsable (Illuminate\Contracts\Support\Responsable) will allow objects to be converted to an HTTP response. This interface requires us to implement a toResponse() method that is rendered as an HTTP response.

Here's an example of what a class implementing this interface will look like.

use Illuminate\Contracts\Support\Responsable; class ExampleObject implements Responsable { public function __construct($name = null) { $this->name = $name; } public function status() { return 200; } public function toResponse() { if ($this->wantsJSON()) { return response( $this->name, $this->status() ); } return view('index', ['name' => $this->name]); } }

The Router class now checks for Responsable when preparing a response.

if ($response instanceof Responsable) { $response = $response->toResponse(); }

With this new addition, we can clean up our controllers even further as we can abstract the logic that makes the view possible.

Using this new Responsable we can return something like this from our routes.

Route::get('/', function () { return new ExampleObject('Chris Sevilleja'); })

vendor:publish Gets a Prompt

We are all familiar with those Laravel packages that after installation require you to publish their assets (pretty much all of them). Running vendor:publish on its own publishes every single asset, so to avoid that we have the option to use a tag or a provider so as to publish.

Now, there's a new way to do publish vendor assets. When you run php artisan vendor:publish you get a prompt and then choose the asset to publish.

Custom Exception Reporting

When a custom exception is thrown, we usually go to App\Exceptions\Handler::report() and listen for an instance of our exception. But with 5.5 we can define a report() method on our exception and Laravel will check every exception received by the exception handler for a report() method and trigger it if it exists.

This gives us finer control of how we handle exceptions as we can log it, send to our monitoring software, alert a developer.

The former method with time will lead to a really messy code base.

throw_if() and throw_unless()

throw_if() and throw_unless() are pretty much self-explanatory. Both functions accept a minimum of 2 parameters, the first one is a boolean and the second is the exception to throw.

throw_if() will throw an exception if the first condition is true while throw_unless() will throw an exception if the first parameter is false.

$foo = true; throw_if($foo, new BarException('Foo is true')); // or throw_if($foo, BarException::class, 'Foo is true');

Here is the complete function for reference:

function throw_if($boolean, $exception, $message = '') { if ($boolean) { throw (is_string($exception) ? new $exception($message) : $exception); } }

For throw_unless()

$foo = false; throw_unless($foo, new BarException('Foo is false')); // or throw_unless($foo, BarException::class, 'Foo is false');

Here's what the function looks like

function throw_unless($boolean, $exception, $message) { if (! $boolean) { throw (is_string($exception) ? new $exception($message) : $exception); } }

Render Mailables to the Browser

Mailables also got an update as they can now be rendered to the browser.

This makes sense for those people who like to create an archive of newletters or something. No more hacks are needed to get this to work.

Route::get('/demo', function () { return new App\Mail\UserWelcome(); });

Extras

Some features not covered in this article but still worth a mention.

Resource Classes allows us transform Eloquent models in a proper JSON data structure. We can also update our models to include a toArray() method, because when building an API that is intended for the public toArray() might be lacking.

Auto-Register Artisan Commands: You'll no longer be required to register your artisan commands. Instead Laravel will scan the commands directory and auto-register them. With this in mind you can create a command php artisan make:command MyCommand and automatically trigger it.

Route helpers: the route facade now comes with a few helpers of its own. Route::redirect() to perform a redirect. Route::view() to load a view.

RefreshDatabase Trait: All this does during testing is that it chooses the optimal path when migrating databases during tests.

withoutExceptionHandling() method: The base test case (Illuminate\Foundation\Testing\TestCase) inherits a withoutExceptionHandling() that allows you to disable exception handling for a test. It is a cool addition as we can run assertions on our exceptions instead of an exception handler taking over. Another reason is when an unexpected behaviour occurs you get to see the actual exception.

Support for Email Themes in Mailables

Improvements with the Default Error Views

Pivot Casting

In Closing

In case I missed anything you can check What's new in Laravel by Laracasts.

As usual, the docs are updated — including release notes, and upgrade guide.

Let us know about your favorite addition in the comments. Thank you.

via Scotch.io http://ift.tt/2j3Rwe0

#IFTTT #Feedly

0 notes

mbaljeetsingh · 8 years ago

Text

Implement a Favoriting Feature Using Laravel and Vue.js

These days, various web applications are in one way or the other implementing a kind of favorite/like/recommend feature on the websites. These can be seen on sites like Medium, Facebook, Laracasts, and even here on scotch.io and school.scotch.io.

In this tutorial, I'll be showing you how to implement a favorites feature using Vue.js in your Laravel application. Though we'll be using the term favorites in this tutorial, this can be replaced with likes, recommends depending on your application.

What We'll Be Building

We'll be building a simple Posts app. This app will comprise of users and posts. Users will be able to create posts and as well mark posts as favorites. Finally, users will be able to see all the posts they marked as favorites.

The app will have a User model and a Post model, there will be an authentication system which will allow only authenticated users mark/unmark posts as favorites. We'll make use of VueJs and Axios to make marking/un-marking posts as favorites dynamic, that is without reloading the page.

Before we start building, let's take a quick look at what the Posts app will look like when we are done.

Let's Get started

We'll start by creating a new Laravel project, the name of the project will be laravel-vue-favorite.

laravel new laravel-vue-favorite

This will create a new Laravel 5.4 (which is the current version as at the time of this tutorial) project.

Installing NPM Dependencies

In a fresh installation of Laravel, Laravel provides some frontend frameworks and libraries with some basic setup to integrate these packages together. Among the frameworks and libraries are Bootstrap, VueJs and Axios, which we will be using in this tutorial. But we still need to install these dependencies through NPM:

npm install

Also, we'll make use of Laravel Mix to compile and build our CSS and JavaScript. The command above will also install all Laravel Mix dependencies.

Models And Migrations

For our Posts app, we'll need a User model (which comes with Laravel), a Post model and a Favorite model and their respective migration files.

php artisan make:model Post -m php artisan make:model Favorite -m

These will create a Post model and a Favorite model along with their migration files respectively. Open the posts table migration file and update the up() with:

/** * Define posts table schema */ public function up() { Schema::create('posts', function (Blueprint $table) { $table->increments('id'); $table->integer('user_id')->unsigned(); $table->string('title'); $table->text('body'); $table->timestamps(); }); }

The posts table will contain an id, user_id (ID of the user that created the post), title, body, and some timestamps columns.

Next, open the favorites table migration file and update the up() with:

/** * Define favorites table schema */ public function up() { Schema::create('favorites', function (Blueprint $table) { $table->increments('id'); $table->integer('user_id')->unsigned(); $table->integer('post_id')->unsigned(); $table->timestamps(); }); }

The favorites table will be a pivot table. It will contain two columns: user_id which will hold the ID of the user that favorited a post and post_id which will the ID of the post that was favorited.

For the users table migration, we'll be using the default Laravel provided.

Before we run our migrations, let's setup our database. Add your database details to the .env file:

DB_DATABASE=laravue DB_USERNAME=root DB_PASSWORD=root

Remember to update with your own database details. Now we can go on and run our migrations:

php artisan migrate

Database Seeder

We'll also generate some seed data which we can test our app with. To generate dummy data, we'll make use of Laravel Model Factories. Laravel model factories make use of the Faker PHP library.

We'll generate dummy data of Users and Posts. When you open the database/factories/ModelFactory.php file, you will see that Laravel provides a User model factory, which means we only need to create a Post model factory. Add the snippets below to database/factories/ModelFactory.php just after the User model factory:

// database/factories/ModelFactory.php $factory->define(App\Post::class, function (Faker\Generator $faker) { // Get a random user $user = \App\User::inRandomOrder()->first(); // generate fake data for post return [ 'user_id' => $user->id, 'title' => $faker->sentence, 'body' => $faker->text, ]; });

Let's quickly run through the code. Remember from our posts table migration, we defined that a post must have a user ID. So, we get a random user and assign the user_id of a post to the ID of the random user, then we use Faker to generate the title and body of the post.

With our model factories done, let's move on to create our database seeder classes by running these commands:

php artisan make:seeder UsersTableSeeder php artisan make:seeder PostsTableSeeder

Open database/seeds/UsersTableSeeder.php and update the run() with:

// database/seeds/UsersTableSeeder.php /** * Run the database seeds to create users. * * @return void */ public function run() { factory(App\User::class, 5)->create(); }

This will create 5 different users with dummy data when the seeder is run. We'll do the same for Posts. Open database/seeds/PostsTableSeeder.php and update the run() with:

// database/seeds/PostsTableSeeder.php /** * Run the database seeds to create posts. * * @return void */ public function run() { factory(App\Post::class, 10)->create(); }

This will create 10 different posts with dummy data when the seeder is run.

Before we run the database seeders, let's update the database/seeds/DatabaseSeeder.php which is provided by default:

// database/seeds/DatabaseSeeder.php /** * Run the database seeds. * * @return void */ public function run() { $this->call(UsersTableSeeder::class); $this->call(PostsTableSeeder::class); }

Now we can run the database seeders:

php artisan db:seed

You should now see some dummy data in your database.

Authenticating Users

Before a user can mark a post has favorite, the user must be logged in. So we need a kind of authentication system. Luckily for us, Laravel got our back on this. We'll use the artisan make:auth command to scaffold an authentication system.

php artisan make:auth

This will create all of the necessary routes and views for authentication. We can go and register as a user, which we will use to test the functionality of the application we are building.

Defining Our Routes

Let's define the routes of our application. Open routes/web.php and update with below:

// routes/web.php Auth::routes(); Route::get('/', 'PostsController@index'); Route::post('favorite/{post}', 'PostsController@favoritePost'); Route::post('unfavorite/{post}', 'PostsController@unFavoritePost'); Route::get('my_favorites', 'UsersController@myFavorites')->middleware('auth');

The routes are pretty straightforward. Auth routes that Laravel created when we ran the make:auth command. A route to the homepage that will list all posts, two other routes for favoriting and unfavoriting posts. Lastly, a route that displays all posts that have been marked as favorites by a user. This route will be accessible to only authenticated users.

When a user registers or login, Laravel will redirect them to the /home route by default. Since we have removed the /home route that Laravel created when we ran make:auth. We need to update the redirectTo property of both app/Http/Controllers/Auth/LoginController.php and app/Http/Controllers/Auth/RegisterController.php to:

protected $redirectTo = '/';

Defining Users To Favorite Posts Relationship

Since a user can mark many posts as favorites and a post can be marked as favorites by many users, the relationship between users and favorite posts will be a many to many relationships. To define this relationship, open the User model and add a favorites():

// app/User.php /** * Get all of favorite posts for the user. */ public function favorites() { return $this->belongsToMany(Post::class, 'favorites', 'user_id', 'post_id')->withTimeStamps(); }

Laravel will assume the pivot table is post_user but since we gave the pivot table a different name (favorites), we have to pass in some additional arguments. The second argument is the name of the pivot table (favorites). The third argument is the foreign key name (user_id) of the model on which you are defining the relationship (User), while the fourth argument is the foreign key name (post_id) of the model that you are joining to (Post).

Noticed we chained withTimeStamps() to the belongsToMany(). This will allow the timestamps (create_at and updated_at) columns on the pivot table be affected whenever a row is inserted or updated.

Posts Controller

Let's create a new controller that will handle displaying posts, marking a post as favorite and unfavorite a post.

php artisan make:controller PostsController

Open the newly created app/Http/Controllers/PostsController.php and add the snippet below to it:

// app/Http/Controllers/PostsController.php // remember to use the Post model use App\Post; /** * Display a paginated list of posts. * * @return Response */ public function index() { $posts = Post::paginate(5); return view('posts.index', compact('posts')); }

The index() will get all posts and paginate them into 5 per page. Then render a view file (that we are yet to create) along with the posts, which will do the actual displaying of the posts.

Remember when we ran make:auth command that Laravel created some views. We'll be using the resources/views/layouts/app.blade.php that was created and make some few additions to it. Add the code below just after the <title>:

// resources/views/layouts/app.blade.php <link rel="stylesheet" href="http://ift.tt/2mrbfp2; />

Then add this just before the Logout list item:

// resources/views/layouts/app.blade.php <li> <a href="http://ift.tt/1uaQUM0">My Favorites</a> </li>

Now let's create the index view. Create a new posts folder within views directory and create a new index.blade.php file within the newly created folder. Paste the code below into resources/views/posts/index.blade.php:

// resources/views/posts/index.blade.php @extends('layouts.app') @section('content') <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="page-header"> <h3>All Posts</h3> </div> @forelse ($posts as $post) <div class="panel panel-default"> <div class="panel-heading"> </div> <div class="panel-body"> </div> </div> @empty <p>No post created.</p> @endforelse </div> </div> </div> @endsection

Pretty simple markup that displays a paginated list of posts. Open the homepage in your browser, you should see page like the image below:

Next, let's go back to PostsController and add the methods that will handle marking a post as favorite and unfavorite a post. Add the code below to PostsController:

// app/Http/Controllers/PostsController.php // remember to use use Illuminate\Support\Facades\Auth; /** * Favorite a particular post * * @param Post $post * @return Response */ public function favoritePost(Post $post) { Auth::user()->favorites()->attach($post->id); return back(); } /** * Unfavorite a particular post * * @param Post $post * @return Response */ public function unFavoritePost(Post $post) { Auth::user()->favorites()->detach($post->id); return back(); }

The favoritePost() takes a post as an argument. Using the favorites relationship we defined above, we attach the post ID to the ID of the authenticated user then insert into the favorites table. Finally, return back to the previous page.

The unFavoritePost() is the reverse of favoritePost() which simply remove the ID of the authenticated user along with the post ID from the favorites table.

Integrating With VueJs

It's time to integrate Vue into our application. We'll make the favorite button/icon a Vue component. Making it a Vue component will allow for reuse in multiple places with our application.

Once the favorite button/icon is clicked, we'll mark the post as favorite or unfavorite without reloading the page, that is through AJAX. For this, we'll make use of Axios which is a Promise based HTTP client for the browser and node.js.

Creating The Favorite Component

Create a new Favorite.vue file within the resources/assets/js/components folder and paste the code below into it:

// resources/assets/js/components/Favorite.vue <template> <span> <a href="#" v-if="isFavorited" @click.prevent="unFavorite(post)"> <i class="fa fa-heart"></i> </a> <a href="#" v-else @click.prevent="favorite(post)"> <i class="fa fa-heart-o"></i> </a> </span> </template> <script> export default { props: ['post', 'favorited'], data: function() { return { isFavorited: '', } }, mounted() { this.isFavorited = this.isFavorite ? true : false; }, computed: { isFavorite() { return this.favorited; }, }, methods: { favorite(post) { axios.post('/favorite/'+post) .then(response => this.isFavorited = true) .catch(response => console.log(response.data)); }, unFavorite(post) { axios.post('/unfavorite/'+post) .then(response => this.isFavorited = false) .catch(response => console.log(response.data)); } } } </script>

The Favorite component has two sections: template and script. In the template section, we defined the markup that will be rendered when the component is used. We are using conditional rendering to show the appropriate button/icon. That is, if isFavorited is true, the button/icon should be marked as favorite and on click of the button/icon should trigger unFavorite(). Else the button/icon should be marked as unfavorite and on click of the button/icon should trigger favorite().

Moving on to the script section, we defined some properties for the component; post (will be the ID of the post) and favorited (will either be true or false depending on if the post has been favorited by the authenticated user). We also defined an isFavorited data which will be used for the conditional rendering from above.

When the component is mounted, we set the value of isFavorited to the value of isFavorite computed property. That is, the isFavorite computed property will return the value of favorited prop which will either be true or false. We use a computed property so as to reactively get the value of the favorited prop instead using the value of favorited prop that was passed directly.

Lastly, we defined two methods: favorite() and unFavorite() which both accepts the post prop as arguments. Using Axios, we make a POST request to the routes we defined earlier. For the favorite(), once the POST request is successful, we set isFavorited to true and otherwise console log the errors. Same is applicable to the unFavorite() just that we set isFavorited to false.

Registering The Favorite Component

Before we can start to use the Favorite component, we need to first register it on our Vue root instance. Open resources/assets/js/app.js, you will see that Laravel register an Example component. We are going to replace that with the Favorite component:

// resources/assets/js/app.js Vue.component('favorite', require('./components/Favorite.vue'));

Now we can compile and build our styles and scripts:

npm run dev

Using The Favorite Component

We can now use the Favorite component. Open resources/views/posts/index.blade.php and add the snippets below to it after the closing div of the panel-body:

// resources/views/posts/index.blade.php @if (Auth::check()) <div class="panel-footer"> <favorite :post= :favorited= ></favorite> </div> @endif

The favorite button/icon will only be displayed to authenticated users. As you can see, we passed to the Favorite component the props that we defined when we created the component. To know if a post is has been favorited by the authenticated user, we call a favorited() (which we are yet to create) on the post.

To create favorited(), open app/Post.php and add the code below to it:

// app/Post.php // remember to use use App\Favorite; use Illuminate\Support\Facades\Auth; /** * Determine whether a post has been marked as favorite by a user. * * @return boolean */ public function favorited() { return (bool) Favorite::where('user_id', Auth::id()) ->where('post_id', $this->id) ->first(); }

This gets and casts to boolean the first result where the user_id is equal to that of the authenticated user and where the post_id is equal to the ID of the post the method is called on.

If you visit the homepage of the application in the browser and login, you should get something similar to:

As you can see I have marked some posts as favorites.

Displaying User Favorite Posts

Won't it be nice for users to be able to see all the posts they have marked as favorites? Sure it will be. Remember we defined a my_favorites route that will be accessible to only authenticated users, this is where users will be able to see the posts they've marked as favorites.

Let's create a UsersController that will handle this route.

php artisan make:controller UsersController

Open app/Http/Controllers/UsersController.php and add the code below to it:

// app/Http/Controllers/UsersController.php // remember to use use Illuminate\Support\Facades\Auth; /** * Get all favorite posts by user * * @return Response */ public function myFavorites() { $myFavorites = Auth::user()->favorites; return view('users.my_favorites', compact('myFavorites')); }

The myFavorites() uses the favorites relationship we defined earlier, get all the posts that the authenticated user has marked as favorites. Then return a view along with favorites posts.

Now let's create the view. Create a new users folder within the resources/views directory and within the users folder, create a new file my_favorites.blade.php and paste the code below to it:

// resources/views/users/my_favorites.blade.php @extends('layouts.app') @section('content') <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="page-header"> <h3>My Favorites</h3> </div> @forelse ($myFavorites as $myFavorite) <div class="panel panel-default"> <div class="panel-heading"> </div> <div class="panel-body"> </div> @if (Auth::check()) <div class="panel-footer"> <favorite :post= :favorited= ></favorite> </div> @endif </div> @empty <p>You have no favorite posts.</p> @endforelse </div> </div> </div> @endsection

The markup is similar to that of index.blade.php. As you can see, we also used the Favorite component. When viewed in the browser, you should see something similar to:

Conclusion

That's it, we are done building the Post app and seen how to allow only authenticated users mark/unmark posts as favorites without reloading the page using VueJs and Axios. I hope you find this tutorial useful. If you encounter any problems following this tutorial or have questions/suggestions, kindly drop them in the comment section below. Also, I have made a vue-favorite component based on this tutorial which can be installed through NPM.

via Scotch.io http://ift.tt/2mptpr0

#IFTTT #Feedly

0 notes