{"id":3395,"date":"2019-01-21T03:00:35","date_gmt":"2019-01-21T03:00:35","guid":{"rendered":"http:\/\/myprojects.advchaweb.com\/?p=3395"},"modified":"2019-01-31T03:33:35","modified_gmt":"2019-01-31T03:33:35","slug":"create-laravel-cms","status":"publish","type":"post","link":"https:\/\/myprojects.advchaweb.com\/index.php\/2019\/01\/21\/create-laravel-cms\/","title":{"rendered":"Create Laravel CMS"},"content":{"rendered":"

Ref: https:\/\/pusher.com\/tutorials\/cms-laravel-vue-part-1<\/p>\n

Install Laravel Installer globally (It’d be better than ‘create project’ and download from the laravel source):<\/p>\n

teddy@teddy:~\/Documents\/works\/laravel$ composer global require \"laravel\/installer\"\r\nChanged current directory to \/home\/teddy\/.composer\r\n.\/composer.json is not writable.\r\nteddy@teddy:~\/Documents\/works\/laravel$ sudo composer global require \"laravel\/installer\"\r\n[sudo] password for teddy: \r\nChanged current directory to \/home\/teddy\/.composer\r\nDo not run Composer as root\/super user! See https:\/\/getcomposer.org\/root for details\r\nUsing version ^2.0 for laravel\/installer\r\n.\/composer.json has been updated\r\nLoading composer repositories with package information\r\nUpdating dependencies (including require-dev)\r\nNothing to install or update\r\nGenerating autoload files\r\nteddy@teddy:~\/Documents\/works\/laravel$ echo 'export PATH=\"$HOME\/.composer\/vendor\/bin:$PATH\"' >> ~\/.bashrc\r\nteddy@teddy:~\/Documents\/works\/laravel$ source ~\/.bashrc\r\nteddy@teddy:~\/Documents\/works\/laravel$ laravel\r\nLaravel Installer 2.0.1\r\n\r\nUsage:\r\n  command [options] [arguments]\r\n\r\nOptions:\r\n  -h, --help            Display this help message\r\n  -q, --quiet           Do not output any message\r\n  -V, --version         Display this application version\r\n      --ansi            Force ANSI output\r\n      --no-ansi         Disable ANSI output\r\n  -n, --no-interaction  Do not ask any interactive question\r\n  -v|vv|vvv, --verbose  Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug\r\n\r\nAvailable commands:\r\n  help  Displays help for a command\r\n  list  Lists commands\r\n  new   Create a new Laravel application.<\/pre>\n
Create the Laravel CMS Project ‘laravel-cms’:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel$ laravel new laravel-cms\r\nCrafting application...\r\nLoading composer repositories with package information\r\nInstalling dependencies (including require-dev) from lock file\r\nPackage operations: 86 installs, 0 updates, 0 removals\r\n  - Installing doctrine\/inflector (v1.3.0): Loading from cache\r\n  - Installing doctrine\/lexer (v1.0.1): Loading from cache\r\n  - Installing dragonmantank\/cron-expression (v2.2.0): Loading from cache\r\n  - Installing erusev\/parsedown (1.7.1): Loading from cache\r\n  - Installing vlucas\/phpdotenv (v2.5.2): Downloading (100%)         \r\n  - Installing symfony\/css-selector (v4.2.2): Downloading (100%)         \r\n  - Installing tijsverkoyen\/css-to-inline-styles (2.2.1): Loading from cache\r\n  - Installing symfony\/polyfill-php72 (v1.10.0): Downloading (100%)         \r\n  - Installing symfony\/polyfill-mbstring (v1.10.0): Loading from cache\r\n  - Installing symfony\/var-dumper (v4.2.2): Downloading (100%)         \r\n  - Installing symfony\/routing (v4.2.2): Downloading (100%)         \r\n  - Installing symfony\/process (v4.2.2): Downloading (100%)         \r\n  - Installing symfony\/polyfill-ctype (v1.10.0): Loading from cache\r\n  - Installing symfony\/http-foundation (v4.2.2): Downloading (100%)         \r\n  - Installing symfony\/contracts (v1.0.2): Downloading (100%)         \r\n  - Installing symfony\/event-dispatcher (v4.2.2): Downloading (100%)         \r\n  - Installing psr\/log (1.1.0): Loading from cache\r\n  - Installing symfony\/debug (v4.2.2): Downloading (100%)         \r\n  - Installing symfony\/http-kernel (v4.2.2): Downloading (100%)         \r\n  - Installing symfony\/finder (v4.2.2): Downloading (100%)         \r\n  - Installing symfony\/console (v4.2.2): Downloading (100%)         \r\n  - Installing egulias\/email-validator (2.1.7): Downloading (100%)         \r\n  - Installing swiftmailer\/swiftmailer (v6.1.3): Loading from cache\r\n  - Installing paragonie\/random_compat (v9.99.99): Loading from cache\r\n  - Installing ramsey\/uuid (3.8.0): Loading from cache\r\n  - Installing psr\/simple-cache (1.0.1): Loading from cache\r\n  - Installing psr\/container (1.0.0): Loading from cache\r\n  - Installing opis\/closure (3.1.5): Downloading (100%)         \r\n  - Installing symfony\/translation (v4.2.2): Downloading (100%)         \r\n  - Installing nesbot\/carbon (1.36.2): Loading from cache\r\n  - Installing monolog\/monolog (1.24.0): Loading from cache\r\n  - Installing league\/flysystem (1.0.49): Loading from cache\r\n  - Installing ralouphie\/getallheaders (2.0.5): Loading from cache\r\n  - Installing psr\/http-message (1.0.1): Loading from cache\r\n  - Installing guzzlehttp\/psr7 (1.5.2): Loading from cache\r\n  - Installing guzzlehttp\/promises (v1.3.1): Loading from cache\r\n  - Installing guzzlehttp\/guzzle (6.3.3): Loading from cache\r\n  - Installing laravel\/slack-notification-channel (v1.0.3): Downloading (connectDownloading (100%)         \r\n  - Installing zendframework\/zend-diactoros (1.8.6):Downloading (100%)         )\r\n  - Installing php-http\/promise (v1.0.0): Downloading (100%)         \r\n  - Installing php-http\/httplug (v1.1.0): Downloading (100%)         \r\n  - Installing php-http\/guzzle6-adapter (v1.1.1): Downloading (100%)         \r\n  - Installing lcobucci\/jwt (3.2.5): Downloading (100%)         \r\n  - Installing nexmo\/client (1.6.0): Downloading (100%)         \r\n  - Installing laravel\/nexmo-notification-channel (v1.0.1): Downloading (connectDownloading (100%)         \r\n  - Installing laravel\/framework (v5.7.21): Downloading (100%)         \r\n  - Installing fideloper\/proxy (4.1.0): Downloading (100%)         \r\n  - Installing jakub-onderka\/php-console-color (v0.2): Loading from cache\r\n  - Installing nikic\/php-parser (v4.2.0): Downloading (100%)         \r\n  - Installing jakub-onderka\/php-console-highlighter (v0.4): Downloading (connecDownloading (100%)         \r\n  - Installing dnoegel\/php-xdg-base-dir (0.1): Loading from cache\r\n  - Installing psy\/psysh (v0.9.9): Downloading (100%)         \r\n  - Installing laravel\/tinker (v1.0.8): Downloading (100%)         \r\n  - Installing beyondcode\/laravel-dump-server (1.2.2): Downloading (connecting..Downloading (100%)         \r\n  - Installing fzaninotto\/faker (v1.8.0): Loading from cache\r\n  - Installing hamcrest\/hamcrest-php (v2.0.0): Loading from cache\r\n  - Installing mockery\/mockery (1.2.0): Loading from cache\r\n  - Installing filp\/whoops (2.3.1): Downloading (100%)         \r\n  - Installing nunomaduro\/collision (v2.1.1): Downloading (100%)         \r\n  - Installing webmozart\/assert (1.4.0): Loading from cache\r\n  - Installing phpdocumentor\/reflection-common (1.0.1): Loading from cache\r\n  - Installing phpdocumentor\/type-resolver (0.4.0): Loading from cache\r\n  - Installing phpdocumentor\/reflection-docblock (4.3.0): Loading from cache\r\n  - Installing phpunit\/php-token-stream (3.0.1): Downloading (100%)         \r\n  - Installing sebastian\/version (2.0.1): Loading from cache\r\n  - Installing sebastian\/resource-operations (2.0.1): Downloading (connecting...Downloading (100%)         \r\n  - Installing sebastian\/recursion-context (3.0.0): Loading from cache\r\n  - Installing sebastian\/object-reflector (1.1.1): Loading from cache\r\n  - Installing sebastian\/object-enumerator (3.0.3): Loading from cache\r\n  - Installing sebastian\/global-state (2.0.0): Loading from cache\r\n  - Installing sebastian\/exporter (3.1.0): Loading from cache\r\n  - Installing sebastian\/environment (4.0.1): Downloading (100%)         \r\n  - Installing sebastian\/diff (3.0.1): Loading from cache\r\n  - Installing sebastian\/comparator (3.0.2): Loading from cache\r\n  - Installing phpunit\/php-timer (2.0.0): Loading from cache\r\n  - Installing phpunit\/php-text-template (1.2.1): Loading from cache\r\n  - Installing phpunit\/php-file-iterator (2.0.2): Loading from cache\r\n  - Installing theseer\/tokenizer (1.1.0): Loading from cache\r\n  - Installing sebastian\/code-unit-reverse-lookup (1.0.1): Loading from cache\r\n  - Installing phpunit\/php-code-coverage (6.1.4): Downloading (100%)         \r\n  - Installing doctrine\/instantiator (1.1.0): Loading from cache\r\n  - Installing phpspec\/prophecy (1.8.0): Loading from cache\r\n  - Installing phar-io\/version (2.0.1): Loading from cache\r\n  - Installing phar-io\/manifest (1.0.3): Loading from cache\r\n  - Installing myclabs\/deep-copy (1.8.1): Loading from cache\r\n  - Installing phpunit\/phpunit (7.5.2): Downloading (100%)         \r\nsymfony\/routing suggests installing doctrine\/annotations (For using the annotation loader)\r\nsymfony\/routing suggests installing symfony\/config (For using the all-in-one router or any loader)\r\nsymfony\/routing suggests installing symfony\/dependency-injection (For loading routes from a service)\r\nsymfony\/routing suggests installing symfony\/expression-language (For using expression matching)\r\nsymfony\/routing suggests installing symfony\/yaml (For using the YAML loader)\r\nsymfony\/contracts suggests installing psr\/cache (When using the Cache contracts)\r\nsymfony\/contracts suggests installing symfony\/cache-contracts-implementation ()\r\nsymfony\/contracts suggests installing symfony\/service-contracts-implementation ()\r\nsymfony\/event-dispatcher suggests installing symfony\/dependency-injection ()\r\nsymfony\/http-kernel suggests installing symfony\/browser-kit ()\r\nsymfony\/http-kernel suggests installing symfony\/config ()\r\nsymfony\/http-kernel suggests installing symfony\/dependency-injection ()\r\nsymfony\/console suggests installing symfony\/lock ()\r\nswiftmailer\/swiftmailer suggests installing true\/punycode (Needed to support internationalized email addresses, if ext-intl is not installed)\r\nparagonie\/random_compat suggests installing ext-libsodium (Provides a modern crypto API that can be used to generate random bytes.)\r\nramsey\/uuid suggests installing ext-libsodium (Provides the PECL libsodium extension for use with the SodiumRandomGenerator)\r\nramsey\/uuid suggests installing ext-uuid (Provides the PECL UUID extension for use with the PeclUuidTimeGenerator and PeclUuidRandomGenerator)\r\nramsey\/uuid suggests installing ircmaxell\/random-lib (Provides RandomLib for use with the RandomLibAdapter)\r\nramsey\/uuid suggests installing moontoast\/math (Provides support for converting UUID to 128-bit integer (in string form).)\r\nramsey\/uuid suggests installing ramsey\/uuid-console (A console application for generating UUIDs with ramsey\/uuid)\r\nramsey\/uuid suggests installing ramsey\/uuid-doctrine (Allows the use of Ramsey\\Uuid\\Uuid as Doctrine field type.)\r\nsymfony\/translation suggests installing symfony\/config ()\r\nsymfony\/translation suggests installing symfony\/yaml ()\r\nnesbot\/carbon suggests installing friendsofphp\/php-cs-fixer (Needed for the `composer phpcs` command. Allow to automatically fix code style.)\r\nnesbot\/carbon suggests installing phpstan\/phpstan (Needed for the `composer phpstan` command. Allow to detect potential errors.)\r\nmonolog\/monolog suggests installing aws\/aws-sdk-php (Allow sending log messages to AWS services like DynamoDB)\r\nmonolog\/monolog suggests installing doctrine\/couchdb (Allow sending log messages to a CouchDB server)\r\nmonolog\/monolog suggests installing ext-amqp (Allow sending log messages to an AMQP server (1.0+ required))\r\nmonolog\/monolog suggests installing ext-mongo (Allow sending log messages to a MongoDB server)\r\nmonolog\/monolog suggests installing graylog2\/gelf-php (Allow sending log messages to a GrayLog2 server)\r\nmonolog\/monolog suggests installing mongodb\/mongodb (Allow sending log messages to a MongoDB server via PHP Driver)\r\nmonolog\/monolog suggests installing php-amqplib\/php-amqplib (Allow sending log messages to an AMQP server using php-amqplib)\r\nmonolog\/monolog suggests installing php-console\/php-console (Allow sending log messages to Google Chrome)\r\nmonolog\/monolog suggests installing rollbar\/rollbar (Allow sending log messages to Rollbar)\r\nmonolog\/monolog suggests installing ruflin\/elastica (Allow sending log messages to an Elastic Search server)\r\nmonolog\/monolog suggests installing sentry\/sentry (Allow sending log messages to a Sentry server)\r\nleague\/flysystem suggests installing league\/flysystem-aws-s3-v2 (Allows you to use S3 storage with AWS SDK v2)\r\nleague\/flysystem suggests installing league\/flysystem-aws-s3-v3 (Allows you to use S3 storage with AWS SDK v3)\r\nleague\/flysystem suggests installing league\/flysystem-azure (Allows you to use Windows Azure Blob storage)\r\nleague\/flysystem suggests installing league\/flysystem-cached-adapter (Flysystem adapter decorator for metadata caching)\r\nleague\/flysystem suggests installing league\/flysystem-eventable-filesystem (Allows you to use EventableFilesystem)\r\nleague\/flysystem suggests installing league\/flysystem-rackspace (Allows you to use Rackspace Cloud Files)\r\nleague\/flysystem suggests installing league\/flysystem-sftp (Allows you to use SFTP server storage via phpseclib)\r\nleague\/flysystem suggests installing league\/flysystem-webdav (Allows you to use WebDAV storage)\r\nleague\/flysystem suggests installing league\/flysystem-ziparchive (Allows you to use ZipArchive adapter)\r\nleague\/flysystem suggests installing spatie\/flysystem-dropbox (Allows you to use Dropbox storage)\r\nleague\/flysystem suggests installing srmklive\/flysystem-dropbox-v2 (Allows you to use Dropbox storage for PHP 5 applications)\r\nlcobucci\/jwt suggests installing mdanter\/ecc (Required to use Elliptic Curves based algorithms.)\r\nlaravel\/framework suggests installing aws\/aws-sdk-php (Required to use the SQS queue driver and SES mail driver (^3.0).)\r\nlaravel\/framework suggests installing doctrine\/dbal (Required to rename columns and drop SQLite columns (^2.6).)\r\nlaravel\/framework suggests installing league\/flysystem-aws-s3-v3 (Required to use the Flysystem S3 driver (^1.0).)\r\nlaravel\/framework suggests installing league\/flysystem-cached-adapter (Required to use the Flysystem cache (^1.0).)\r\nlaravel\/framework suggests installing league\/flysystem-rackspace (Required to use the Flysystem Rackspace driver (^1.0).)\r\nlaravel\/framework suggests installing league\/flysystem-sftp (Required to use the Flysystem SFTP driver (^1.0).)\r\nlaravel\/framework suggests installing moontoast\/math (Required to use ordered UUIDs (^1.1).)\r\nlaravel\/framework suggests installing pda\/pheanstalk (Required to use the beanstalk queue driver (^3.0).)\r\nlaravel\/framework suggests installing predis\/predis (Required to use the redis cache and queue drivers (^1.0).)\r\nlaravel\/framework suggests installing pusher\/pusher-php-server (Required to use the Pusher broadcast driver (^3.0).)\r\nlaravel\/framework suggests installing symfony\/dom-crawler (Required to use most of the crawler integration testing tools (^4.1).)\r\nlaravel\/framework suggests installing symfony\/psr-http-message-bridge (Required to psr7 bridging features (^1.0).)\r\npsy\/psysh suggests installing ext-pdo-sqlite (The doc command requires SQLite to work.)\r\npsy\/psysh suggests installing hoa\/console (A pure PHP readline implementation. You'll want this if your PHP install doesn't already support readline or libedit.)\r\nfilp\/whoops suggests installing whoops\/soap (Formats errors as SOAP responses)\r\nsebastian\/global-state suggests installing ext-uopz (*)\r\nphpunit\/phpunit suggests installing ext-soap (*)\r\nphpunit\/phpunit suggests installing phpunit\/php-invoker (^2.0)\r\nGenerating optimized autoload files\r\n> @php -r \"file_exists('.env') || copy('.env.example', '.env');\"\r\n> @php artisan key:generate --ansi\r\nApplication key set successfully.\r\n> Illuminate\\Foundation\\ComposerScripts::postAutoloadDump\r\n> @php artisan package:discover --ansi\r\nDiscovered Package: beyondcode\/laravel-dump-server\r\nDiscovered Package: fideloper\/proxy\r\nDiscovered Package: laravel\/nexmo-notification-channel\r\nDiscovered Package: laravel\/slack-notification-channel\r\nDiscovered Package: laravel\/tinker\r\nDiscovered Package: nesbot\/carbon\r\nDiscovered Package: nunomaduro\/collision\r\nPackage manifest generated successfully.\r\nApplication ready! Build something amazing.<\/pre>\n
Go to the project directory and check the laravel version:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel$ cd laravel-cms\/\r\nteddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan help -V\r\nLaravel Framework 5.7.21<\/pre>\n
Run it for the first time:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan serve<\/pre>\n
Open it on your browser : http:\/\/localhost:8000\/\"\"<\/a>Set up the database (MySql)
\nCreate a new database ‘laravel_cms’
\nthen modify .env file to match your mysql server setting and database<\/p>\n
SETTING UP USER ROLES
\nLike most content management systems, we are going to have a user role system so that our blog can have multiple types of users; the admin and regular user. The admin should be able to create a post and perform other CRUD operations on a post. The regular user, on the other hand, should be able to view and comment on a post.<\/p>\n
For us to implement this functionality, we need to implement user authentication and add a simple role authorization system.<\/p>\n
SETTING UP USER AUTHENTICATION
\nLaravel provides user authentication out of the box, which is great, and we can key into the feature by running a single command:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan make:auth\r\nAuthentication scaffolding generated successfully.<\/pre>\n
The above will create all that\u2019s necessary for authentication in our application so we do not need to do anything extra.<\/p>\n
SETTING UP ROLE AUTHORIZATION
\nWe need a model for the user roles so let\u2019s create one and an associated migration file:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan make:model Role -m\r\nModel created successfully.\r\nCreated Migration: 2019_01_21_031440_create_roles_table<\/pre>\n
In the\u00a0database\/migrations\u00a0folder, find the newly created migration file and update the\u00a0CreateRolesTable class (2019_01_21_031440_create_roles_table.php) with this snippet:
\nUpdate with adding two new fields: $table->string(‘name’) and
\n$table->string(‘description’):<\/p>\n
\/\/laravel-cms\/database\/migrations\/2019_01_21_031440_create_roles_table.php\r\n\r\nuse Illuminate\\Support\\Facades\\Schema;\r\nuse Illuminate\\Database\\Schema\\Blueprint;\r\nuse Illuminate\\Database\\Migrations\\Migration;\r\n\r\nclass CreateRolesTable extends Migration\r\n{\r\n    \/**\r\n     * Run the migrations.\r\n     *\r\n     * @return void\r\n     *\/\r\n    public function up()\r\n    {\r\n        Schema::create('roles', function (Blueprint $table) {\r\n            $table->increments('id');\r\n            $table->string('name');\r\n            $table->string('description');\r\n            $table->timestamps();\r\n        });\r\n    }\r\n\r\n    \/**\r\n     * Reverse the migrations.\r\n     *\r\n     * @return void\r\n     *\/\r\n    public function down()\r\n    {\r\n        Schema::dropIfExists('roles');\r\n    }\r\n}<\/pre>\n
We intend to create a many-to-many relationship between the\u00a0User\u00a0and\u00a0Role\u00a0models so let\u2019s add a relationship method on both models.<\/p>\n
Open the\u00a0User\u00a0model and add the following method:<\/p>\n
\/\/laravel\/laravel-cms\/app\/User.php\r\npublic function roles(){\r\n    return $this->belongsToMany(Role::class);\r\n}<\/pre>\n
Open the\u00a0Role\u00a0model and include the following method:<\/p>\n
\/\/laravel-cms\/app\/Role.php\r\npublic function users(){\r\n    return $this->belongsToMany(User::class);\r\n}<\/pre>\n
We are also going to need a pivot table to associate each user with a matching role so let\u2019s create a new migration file for the\u00a0role_user<\/strong>\u00a0table:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan make:migration create_role_user_table\r\nCreated Migration: 2019_01_21_032646_create_role_user_table<\/pre>\n
In the\u00a0database\/migrations\u00a0folder, find the newly created migration file and update the\u00a0CreateRoleUserTable class with this snippet:<\/p>\n
    \/\/laravel-cms\/database\/migrations\/2019_01_21_032646_create_role_user_table.php\r\n    public function up()\r\n    {\r\n        Schema::create('role_user', function (Blueprint $table) {\r\n            $table->increments('id');\r\n            $table->integer('role_id')->unsigned();\r\n            $table->integer('user_id')->unsigned();\r\n            \/\/$table->timestamps();\r\n        });\r\n    }<\/pre>\n
Next, let\u2019s create seeders that will populate the\u00a0users\u00a0and\u00a0roles\u00a0tables with some data. In your terminal, run the following command to create the database seeders:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan make:seeder RoleTableSeeder\r\nSeeder created successfully.\r\nteddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan make:seeder UserTableSeeder\r\nSeeder created successfully.<\/pre>\n
In the\u00a0database\/seeds\u00a0folder, open the\u00a0RoleTableSeeder.php\u00a0file and replace the contents with the following code:<\/p>\n
\/\/laravel-cms\/database\/seeds\/RoleTableSeeder.php\r\nuse Illuminate\\Database\\Seeder;\r\nuse App\\Role;\r\n\r\nclass RoleTableSeeder extends Seeder\r\n{\r\n    \/**\r\n     * Run the database seeds.\r\n     *\r\n     * @return void\r\n     *\/\r\n    public function run()\r\n    {\r\n        $role_regular_user = new Role;\r\n        $role_regular_user->name = 'user';\r\n        $role_regular_user->description = 'A regular user';\r\n        $role_regular_user->save();    \r\n\r\n        $role_admin_user = new Role;\r\n        $role_admin_user->name = 'admin';\r\n        $role_admin_user->description = 'An admin user';\r\n        $role_admin_user->save();    \r\n    }\r\n}<\/pre>\n
Open the\u00a0UserTableSeeder.php\u00a0file and replace the contents with the following code:<\/p>\n
\/\/laravel-cms\/database\/seeds\/UserTableSeeder.php\r\nuse Illuminate\\Database\\Seeder;\r\nuse Illuminate\\Support\\Facades\\Hash;\r\nuse App\\User;\r\nuse App\\Role;\r\n\r\nclass UserTableSeeder extends Seeder\r\n{\r\n    \/**\r\n     * Run the database seeds.\r\n     *\r\n     * @return void\r\n     *\/\r\n    public function run()\r\n    {\r\n        $user = new User;\r\n        $user->name = 'Satria Faestha';\r\n        $user->email = 'satriaf@yahoo.com';\r\n        $user->password = bcrypt('teddy');\r\n        $user->save();\r\n        $user->roles()->attach(Role::where('name', 'user')->first());\r\n\r\n        $admin = new User;\r\n        $admin->name = 'Admin';\r\n        $admin->email = 'advcha@yahoo.com';\r\n        $admin->password = bcrypt('teddy');\r\n        $admin->save();\r\n        $admin->roles()->attach(Role::where('name', 'admin')->first());\r\n    }\r\n}<\/pre>\n
We also need to update the\u00a0DatabaseSeeder\u00a0class. Open the file and update the\u00a0run\u00a0method as seen below:<\/p>\n
    \/\/laravel-cms\/database\/seeds\/DatabaseSeeder.php\r\n    public function run()\r\n    {\r\n        $this->call([\r\n            RoleTableSeeder::class,\r\n            UserTableSeeder::class,\r\n        ]);\r\n    }<\/pre>\n
Next, let\u2019s update the\u00a0User\u00a0model. We will be adding a\u00a0checkRoles\u00a0method that checks what role a user has. We will return a 404 page where a user doesn\u2019t have the expected role for a page. Open the\u00a0User\u00a0model and add these methods:<\/p>\n
    \/\/laravel-cms\/app\/User.php\r\n    public function checkRoles($roles){\r\n        if(!is_array($roles)){\r\n            $roles = [$roles];\r\n        }\r\n        \r\n        if(!$this->hasAnyRole($roles)){\r\n            auth()->logout();\r\n            abort(404);\r\n        }\r\n    }\r\n    \r\n    public function hasAnyRole($roles):bool {\r\n        return (bool) $this->roles()->whereIn('name', $roles)->first();\r\n    }\r\n    \r\n    public function hasRole($role):bool {\r\n        return (bool)$this->roles()->where('name', $role)->first();\r\n    }<\/pre>\n
Let\u2019s modify the\u00a0RegisterController.php\u00a0file in the\u00a0Controllers\/Auth\u00a0folder so that a default role, the user role, is always attached to a new user at registration.<\/p>\n
Open the\u00a0RegisterController\u00a0and update the\u00a0create\u00a0action with the following code:<\/p>\n
    \/\/laravel-cms\/app\/Http\/Controllers\/Auth\/RegisterController.php \r\n    protected function create(array $data)\r\n    {\r\n        \/*return User::create([\r\n            'name' => $data['name'],\r\n            'email' => $data['email'],\r\n            'password' => Hash::make($data['password']),\r\n        ]);*\/\r\n        $user = User::create([\r\n            'name' => $data['name'],\r\n            'email' => $data['email'],\r\n            'password' => Hash::make($data['password']),\r\n        ]);\r\n        \r\n        $user->roles()->attach(\\App\\Role::where('name', 'user')->first());\r\n        \r\n        return $user;\r\n    }<\/pre>\n
Now let\u2019s migrate and seed the database so that we can log in with the sample accounts. To do this, run the following command in your terminal:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan migrate:fresh --seed\r\nDropped all tables successfully.\r\nMigration table created successfully.\r\nMigrating: 2014_10_12_000000_create_users_table\r\nMigrated:  2014_10_12_000000_create_users_table\r\nMigrating: 2014_10_12_100000_create_password_resets_table\r\nMigrated:  2014_10_12_100000_create_password_resets_table\r\nMigrating: 2019_01_21_031440_create_roles_table\r\n\r\n   Illuminate\\Database\\QueryException  : SQLSTATE[42S21]: Column already exists: 1060 Duplicate column name 'created_at' (SQL: create table `roles` (`created_at` timestamp null, `updated_at` timestamp null, `name` varchar(255) not null, `description` varchar(255) not null, `created_at` timestamp null, `updated_at` timestamp null) default character set utf8mb4 collate 'utf8mb4_unicode_ci')\r\n\r\n  at \/home\/teddy\/Documents\/works\/laravel\/laravel-cms\/vendor\/laravel\/framework\/src\/Illuminate\/Database\/Connection.php:664\r\n    660|         \/\/ If an exception occurs when attempting to run a query, we'll format the error\r\n    661|         \/\/ message to include the bindings with SQL, which will make this exception a\r\n    662|         \/\/ lot more helpful to the developer instead of just the database's errors.\r\n    663|         catch (Exception $e) {\r\n  > 664|             throw new QueryException(\r\n    665|                 $query, $this->prepareBindings($bindings), $e\r\n    666|             );\r\n    667|         }\r\n    668| \r\n\r\n  Exception trace:\r\n\r\n  1   PDOException::(\"SQLSTATE[42S21]: Column already exists: 1060 Duplicate column name 'created_at'\")\r\n      \/home\/teddy\/Documents\/works\/laravel\/laravel-cms\/vendor\/laravel\/framework\/src\/Illuminate\/Database\/Connection.php:458\r\n\r\n  2   PDOStatement::execute()\r\n      \/home\/teddy\/Documents\/works\/laravel\/laravel-cms\/vendor\/laravel\/framework\/src\/Illuminate\/Database\/Connection.php:458\r\n\r\n  Please use the argument -v to see more details.<\/pre>\n
SOLUTION: check again ‘CreateRolesTable’ Class in \/home\/teddy\/Documents\/works\/laravel\/laravel-cms\/database\/migrations\/2019_01_21_031440_create_roles_table.php. Somehow the ‘up’ function is changed!!!<\/p>\n
Illuminate\\Database\\QueryException  : SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'role_id' cannot be null (SQL: insert into `role_user` (`role_id`, `user_id`) values (, 1))\r\n<\/pre>\n
SOLUTION: It’s related with the above problem!
\nThis is working:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan migrate:fresh --seed\r\nDropped all tables successfully.\r\nMigration table created successfully.\r\nMigrating: 2014_10_12_000000_create_users_table\r\nMigrated:  2014_10_12_000000_create_users_table\r\nMigrating: 2014_10_12_100000_create_password_resets_table\r\nMigrated:  2014_10_12_100000_create_password_resets_table\r\nMigrating: 2019_01_21_031440_create_roles_table\r\nMigrated:  2019_01_21_031440_create_roles_table\r\nMigrating: 2019_01_21_032646_create_role_user_table\r\nMigrated:  2019_01_21_032646_create_role_user_table\r\nSeeding: RoleTableSeeder\r\nSeeding: UserTableSeeder\r\nDatabase seeding completed successfully.<\/pre>\n
In order to test that our roles work as they should, we will make an update to the\u00a0HomeController.php\u00a0file. Open the\u00a0HomeController\u00a0and update the\u00a0index\u00a0method as seen below:<\/p>\n
    \/\/laravel-cms\/app\/Http\/Controllers\/HomeController.php\r\n    public function index(Request $request)\r\n    {\r\n        $request->user()->checkRoles('admin');\r\n        \r\n        return view('home');\r\n    }<\/pre>\n
Now, only administrators should be able to see the dashboard. In a more complex application, we would use a\u00a0middleware\u00a0to do this instead.
\nWe can test that this works by serving the application and logging (http:\/\/localhost:8000\/login) in both user accounts: satriaf@yahoo.com (user) and advcha@yahoo.com (admin).<\/p>\n
Remember that in our\u00a0UserTableSeeder.php\u00a0file, we defined satriaf@yahoo.com as a regular user and advcha@yahoo.com as an admin, so satriaf@yahoo.com should see a 404 error after logging in and advcha@yahoo.com should be able to see the homepage. Also http:\/\/localhost:8000\/home would be redirected to http:\/\/localhost:8000\/login if none logged in!<\/p>\n
We will also confirm that whenever a new user registers, he is assigned a role and it is the role of a regular user. We will create a new user and call him user1@yahoo.com (password: user1_123) , he should see a 404 error right after:<\/p>\n
It works just as we wanted it to, however, it doesn\u2019t really make any sense for us to redirect a regular user to a 404 page. Instead, we will edit the\u00a0HomeController\u00a0so that it redirects users based on their roles, that is, it redirects a regular user to a regular homepage and an admin to an admin dashboard.<\/p>\n
Open the\u00a0HomeController.php\u00a0file and update the\u00a0index\u00a0method as seen below:<\/p>\n
    \/\/laravel-cms\/app\/Http\/Controllers\/HomeController.php\r\n    public function index(Request $request)\r\n    {\r\n        \/\/$request->user()->checkRoles('admin');\r\n        if($request->user()->hasRole('user')){\r\n            return redirect('\/');\r\n        }\r\n\r\n        if($request->user()->hasRole('admin')){\r\n            return redirect('\/admin\/dashboard');\r\n        }\r\n        \r\n        \/\/return view('home');\r\n    }<\/pre>\n
After we login as an user, we missed the logout link here. So modify the main template welcome.blade.php to add the logout link:<\/p>\n
\/\/laravel-cms\/resources\/views\/welcome.blade.php\r\n@if (Route::has('login'))\r\n    <div class=\"top-right links\">\r\n        @auth\r\n            <a href=\"{{ url('\/home') }}\">Home<\/a>\r\n            <a href=\"{{ url('\/logout') }}\">Logout<\/a>\r\n        @else\r\n            <a href=\"{{ route('login') }}\">Login<\/a>\r\n\r\n            @if (Route::has('register'))\r\n                <a href=\"{{ route('register') }}\">Register<\/a>\r\n            @endif\r\n        @endauth\r\n    <\/div>\r\n@endif\r\n<\/pre>\n
But if we click the logout link, it’d show an error:<\/p>\n
Symfony \\ Component \\ HttpKernel \\ Exception \\ MethodNotAllowedHttpException\r\nNo message<\/pre>\n
It means we need to add a route for ‘logout’. Add the route in web.php:<\/p>\n
\/\/laravel\/laravel-cms\/routes\/web.php\r\nRoute::get('\/logout', 'Auth\\LoginController@logout')->name('logout' );<\/pre>\n
Ref: https:\/\/stackoverflow.com\/questions\/44716379\/laravel-5-4-24-throws-methodnotallowedhttpexception-during-logout-of-users<\/p>\n
If we serve our application and try to log in using the admin account, we will hit a 404 error because we do not have a controller or a view for the\u00a0admin\/dashboard\u00a0route. Let\u2019s create the\u00a0AdminController\u00a0with this command:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan make:controller AdminController\r\nController created successfully.<\/pre>\n
We will add the\u00a0\/admin\/\u00a0route to our\u00a0routes\/web.php\u00a0file:<\/p>\n
\/\/laravel-cms\/routes\/web.php\r\nRoute::get('\/admin\/{any}', 'AdminController@index')->where('any', '.*');<\/pre>\n
Note that we wrote\u00a0\/admin\/{any}\u00a0here because we intend to serve every page of the admin dashboard using the Vue router. When we start building the admin dashboard in the next article, we will let Vue handle all the routes of the\u00a0\/admin\u00a0pages.<\/p>\n
Let\u2019s update the\u00a0AdminController.php\u00a0file to use the auth middleware and include an\u00a0index()\u00a0action method:<\/p>\n
\/\/laravel-cms\/app\/Http\/Controllers\/AdminController.php\r\nclass AdminController extends Controller\r\n{\r\n    public function __construct(){\r\n        $this->middleware('auth');\r\n    }\r\n    \r\n    public function index(){\r\n        if(request()->user()->hasRole('admin')){\r\n            return view('admin.dashboard');\r\n        }\r\n\r\n        if(request()->user()->hasRole('user')){\r\n            return redirect('\/');\r\n        }\r\n    }\r\n}<\/pre>\n
In the\u00a0index() action method, we included a snippet that will ensure that only admin users can visit the admin dashboard and perform CRUD operations on posts. If we try to login as an admin, it’d show this error:<\/p>\n
InvalidArgumentException\r\nView [admin.dashboard] not found.<\/pre>\n
Because we haven’t create any view for the admin route. We’ll create it with vue router later.<\/p>\n
Here, we will create the\u00a0Post\u00a0model and start building the frontend for the application.<\/p>\n
Our application allows different levels of accessibility for two kinds of users; the regular user and admin. Now, we will focus on building the view that the regular users are permitted to see.<\/p>\n
Before we build any views, let\u2019s create the\u00a0Post\u00a0model as it is imperative to rendering the view. We will create the\u00a0Post\u00a0model with an associated resource controller and a migration file using this command:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan make:model Post -mr\r\nModel created successfully.\r\nCreated Migration: 2019_01_21_083457_create_posts_table\r\nController created successfully.\r\n<\/pre>\n
We added the\u00a0r\u00a0flag because we want the controller to be a resource controller. The\u00a0m\u00a0flag will generate a migration for the model.<\/p>\n
Let\u2019s navigate into the\u00a0database\/migrations\u00a0folder and update the\u00a0CreatePostsTable\u00a0class that was generated for us:<\/p>\n
    \/\/laravel-cms\/database\/migrations\/2019_01_21_083457_create_posts_table.php\r\n    public function up()\r\n    {\r\n        Schema::create('posts', function (Blueprint $table) {\r\n            $table->increments('id');\r\n            $table->integer('user_id')->unsigned();\r\n            $table->string('title');\r\n            $table->text('body');\r\n            $table->binary('image')->nullable();\r\n            $table->timestamps();\r\n        });\r\n    }<\/pre>\n
We included a\u00a0user_id\u00a0property because we want to create a relationship between the\u00a0User\u00a0and\u00a0Post\u00a0models. A\u00a0Post\u00a0also has an\u00a0image\u00a0field, which is where its associated image\u2019s address will be stored.<\/p>\n
CREATING A DATABASE SEEDER FOR THE POST TABLE
\nWe will create a new seeder file for the\u00a0posts\u00a0table using this command:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan make:seeder PostTableSeeder\r\nSeeder created successfully.<\/pre>\n
Let\u2019s navigate into the\u00a0database\/seeds\u00a0folder and update the\u00a0PostTableSeeder.php\u00a0file:<\/p>\n
    \/\/laravel-cms\/database\/seeds\/PostTableSeeder.php\r\n    public function run()\r\n    {\r\n        $post = new Post;\r\n        $post->user_id = 2;\r\n        $post->title = \"Using Laravel Seeders\";\r\n        $post->body = \"Laravel includes a simple method of seeding your database with test data using seed classes. All seed classes are stored in the database\/seeds directory. Seed classes may have any name you wish, but probably should follow some sensible convention, such as UsersTableSeeder, etc. By default, a DatabaseSeeder class is defined for you. From this class, you may use the  call method to run other seed classes, allowing you to control the seeding order.\";\r\n        $post->save();\r\n\r\n        $post = new Post;\r\n        $post->user_id = 2;\r\n        $post->title = \"Database: Migrations\";\r\n        $post->body = \"Migrations are like version control for your database, allowing your team to easily modify and share the application's database schema. Migrations are typically paired with Laravel's schema builder to easily build your application's database schema. If you have ever had to tell a teammate to manually add a column to their local database schema, you've faced the problem that database migrations solve.\";\r\n        $post->save();\r\n    }<\/pre>\n
Let\u2019s open the\u00a0DatabaseSeeder\u00a0and update it with the following code:<\/p>\n
    \/\/laravel-cms\/database\/seeds\/DatabaseSeeder.php\r\n    public function run()\r\n    {\r\n        $this->call([\r\n            RoleTableSeeder::class,\r\n            UserTableSeeder::class,\r\n            PostTableSeeder::class,\r\n        ]);\r\n    }<\/pre>\n
When we run this seeder, it will create two new posts and assign both of them to the admin user whose ID is 2. We are attaching both posts to the admin user because the regular users are only allowed to view posts and make comments; they can\u2019t create a post. We will use this command to migrate our tables and seed the database:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan migrate:fresh --seed\r\nDropped all tables successfully.\r\nMigration table created successfully.\r\nMigrating: 2014_10_12_000000_create_users_table\r\nMigrated:  2014_10_12_000000_create_users_table\r\nMigrating: 2014_10_12_100000_create_password_resets_table\r\nMigrated:  2014_10_12_100000_create_password_resets_table\r\nMigrating: 2019_01_21_031440_create_roles_table\r\nMigrated:  2019_01_21_031440_create_roles_table\r\nMigrating: 2019_01_21_032646_create_role_user_table\r\nMigrated:  2019_01_21_032646_create_role_user_table\r\nMigrating: 2019_01_21_083457_create_posts_table\r\nMigrated:  2019_01_21_083457_create_posts_table\r\nSeeding: RoleTableSeeder\r\nSeeding: UserTableSeeder\r\nSeeding: PostTableSeeder\r\nDatabase seeding completed successfully.<\/pre>\n
DEFINING THE RELATIONSHIPS
\nJust as we previously created a many-to-many relationship between the\u00a0User\u00a0and\u00a0Role\u00a0models, we need to create a different kind of relationship between the\u00a0Post\u00a0and\u00a0User\u00a0models.<\/p>\n
We will define the relationship as a one-to-many relationship because a user will have many posts but a post will only ever belong to one user.<\/p>\n
Open the\u00a0User\u00a0model and include the method below:<\/p>\n
    \/\/ File: .\/app\/User.php\r\n    public function posts()\r\n    {\r\n        return $this->hasMany(Post::class);\r\n    }<\/pre>\n
Open the\u00a0Post\u00a0model and include the method below:<\/p>\n
    \/\/ File: .\/app\/Post.php\r\n    public function user()\r\n    {\r\n        return $this->belongsTo(User::class);\r\n    }<\/pre>\n
SETTING UP THE ROUTES
\nAt this point in our application, we do not have a front page with all the posts listed. Let\u2019s create so anyone can see all of the created posts. Asides from the front page, we also need a single post page in case a user needs to read a specific post.<\/p>\n
Let\u2019s include two new routes to our\u00a0routes\/web.php\u00a0file:<\/p>\n
The first route will match requests to the root of our application and will be handled by the\u00a0PostController@all\u00a0action:<\/p>\n
Route::get('\/', 'PostController@all');<\/pre>\n
In the\u00a0routes\/web.php\u00a0file, there will already be a route definition for the\u00a0\/\u00a0address, you will have to replace it with the new route definition above.
\nThe second route will handle requests for specific\u00a0Post\u00a0items and will be handled by the\u00a0PostController@single\u00a0action:<\/p>\n
Route::get('\/posts\/{post}', 'PostController@single');<\/pre>\n
With these two new routes added, here\u2019s what the\u00a0routes\/web.php\u00a0file should look like this:<\/p>\n
\/\/laravel-cms\/routes\/web.php\r\n\/*Route::get('\/', function () {\r\n    return view('welcome');\r\n});*\/\r\nAuth::routes();\r\n\r\nRoute::get('\/home', 'HomeController@index')->name('home');\r\n\r\nRoute::get('\/logout', 'Auth\\LoginController@logout')->name('logout' );\r\n\r\nRoute::get('\/', PostController@all);\r\nRoute::get('\/posts\/{post}', PostController@single);<\/pre>\n
SETTING UP THE POST CONTROLLER
\nIn this section, we want to define the handler action methods that we registered in the\u00a0routes\/web.php\u00a0file so that our application know how to render the matching views.<\/p>\n
First, let\u2019s add the\u00a0all()\u00a0method:<\/p>\n
    \/\/ File: .\/app\/Http\/Controllers\/PostController.php\r\n    public function all()\r\n    {\r\n        return view('landing', [\r\n            'posts' => Post::latest()->paginate(5)\r\n        ]);\r\n    }<\/pre>\n
Here, we want to retrieve five created posts per page and send to the\u00a0landing\u00a0view. We will create this view shortly.<\/p>\n
Next, let\u2019s add the\u00a0single()\u00a0method to the controller:<\/p>\n
    \/\/ File: .\/app\/Http\/Controllers\/PostController.php\r\n    public function single(Post $post)\r\n    {\r\n        return view('single', compact('post'));\r\n    }<\/pre>\n
In the method above, we used a feature of Laravel named\u00a0route model binding\u00a0to map the URL parameter to a\u00a0Post\u00a0instance with the same ID. We are returning a\u00a0single\u00a0view, which we will create shortly. This will be the view for the single post page.<\/p>\n
BUILDING OUR VIEWS
\nLaravel uses a templating engine called Blade for its frontend. We will use Blade to build these parts of the frontend before switching to Vue in the next chapter.<\/p>\n
Navigate to the\u00a0resources\/views\u00a0folder and create two new Blade files. They are landing.blade.php and single.blade.php<\/p>\n
These are the files that will load the views for the landing page and single post page. Before we start writing any code in these files, we want to create a simple layout template that our page views can use as a base.<\/p>\n
In the\u00a0resources\/views\/layouts\u00a0folder, create a Blade template file and call it\u00a0master.blade.php. This is where we will define the inheritable template for our single and landing pages.<\/p>\n
Open the\u00a0master.blade.php\u00a0file and update it with this code:<\/p>\n
<!-- File: .\/resources\/views\/layouts\/master.blade.php -->\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\r\n    <meta name=\"description\" content=\"\">\r\n    <meta name=\"author\" content=\"Satria Faestha\">\r\n    <title>LaravelCMS<\/title>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\">\r\n    <style> \r\n    body {\r\n      padding-top: 54px;\r\n    }\r\n    @media (min-width: 992px) {\r\n      body {\r\n          padding-top: 56px;\r\n      }\r\n    }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <nav class=\"navbar navbar-expand-lg navbar-dark bg-dark fixed-top\">\r\n      <div class=\"container\">\r\n        <a class=\"navbar-brand\" href=\"\/\">LaravelCMS<\/a>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarResponsive\">\r\n          <ul class=\"navbar-nav ml-auto\">\r\n             @if (Route::has('login'))\r\n                @auth\r\n                <li class=\"nav-item\">\r\n                     <a class=\"nav-link\" href=\"{{ url('\/home') }}\">Home<\/a>\r\n                <\/li>\r\n                <li class=\"nav-item\">\r\n                  <a class=\"nav-link\" href=\"{{ route('logout') }}\"\r\n                                       onclick=\"event.preventDefault();document.getElementById('logout-form').submit();\">\r\n                    Log out ({{ Auth::user()->name }})\r\n                  <\/a>\r\n                  <form id=\"logout-form\" action=\"{{ route('logout') }}\" method=\"POST\" style=\"display: none;\">\r\n                    @csrf\r\n                  <\/form>\r\n                 <\/li>\r\n                 @else\r\n                 <li class=\"nav-item\">\r\n                     <a class=\"nav-link\" href=\"{{ route('login') }}\">Login<\/a>\r\n                <\/li>\r\n                 <li class=\"nav-item\">\r\n                     <a class=\"nav-link\" href=\"{{ route('register') }}\">Register<\/a>\r\n                 <\/li>\r\n                 @endauth\r\n             @endif\r\n          <\/ul>\r\n        <\/div>\r\n      <\/div>\r\n    <\/nav>\r\n\r\n    <div id=\"app\">\r\n        @yield('content')\r\n    <\/div>\r\n\r\n    <footer class=\"py-5 bg-dark\">\r\n      <div class=\"container\">\r\n        <p class=\"m-0 text-center text-white\">Copyright &copy; LaravelCMS 2018<\/p>\r\n      <\/div>\r\n    <\/footer>\r\n  <\/body>\r\n<\/html><\/pre>\n
Now we can inherit this template in the\u00a0landing.blade.php\u00a0file, open it and update it with this code:<\/p>\n
{{-- File: .\/resources\/views\/landing.blade.php --}}\r\n@extends('layouts.master')\r\n\r\n@section('content')\r\n<div class=\"container\">\r\n  <div class=\"row align-items-center\">\r\n    <div class=\"col-md-8 mx-auto\">\r\n      <h1 class=\"my-4 text-center\">Welcome to the Blog <\/h1>\r\n\r\n      @foreach ($posts as $post)\r\n      <div class=\"card mb-4\">\r\n        <img class=\"card-img-top\" src=\" {!! !empty($post->image) ? '\/uploads\/posts\/' . $post->image :  'http:\/\/placehold.it\/750x300' !!} \" alt=\"Card image cap\">\r\n        <div class=\"card-body\">\r\n          <h2 class=\"card-title text-center\">{{ $post->title }}<\/h2>\r\n          <p class=\"card-text\"> {{ str_limit($post->body, $limit = 280, $end = '...') }} <\/p>\r\n          <a href=\"\/posts\/{{ $post->id }}\" class=\"btn btn-primary\">Read More &rarr;<\/a>\r\n        <\/div>\r\n        <div class=\"card-footer text-muted\">\r\n          Posted {{ $post->created_at->diffForHumans() }} by\r\n          <a href=\"#\">{{ $post->user->name }} <\/a>\r\n        <\/div>\r\n      <\/div>\r\n      @endforeach\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n@endsection<\/pre>\n
Let\u2019s do the same with the\u00a0single.blade.php\u00a0file, open it and update it with this code:<\/p>\n
{{-- File: .\/resources\/views\/single.blade.php --}}\r\n@extends('layouts.master')\r\n\r\n@section('content')\r\n<div class=\"container\">\r\n  <div class=\"row\">\r\n    <div class=\"col-lg-10 mx-auto\">\r\n      <h3 class=\"mt-4\">{{ $post->title }} <span class=\"lead\"> by <a href=\"#\"> {{ $post->user->name }} <\/a><\/span> <\/h3>\r\n      <hr>\r\n      <p>Posted {{ $post->created_at->diffForHumans() }} <\/p>\r\n      <hr>\r\n      <img class=\"img-fluid rounded\" src=\" {!! !empty($post->image) ? '\/uploads\/posts\/' . $post->image :  'http:\/\/placehold.it\/750x300' !!} \" alt=\"\">\r\n      <hr>\r\n      <p class=\"lead\">{{ $post->body }}<\/p>\r\n      <hr>\r\n      <div class=\"card my-4\">\r\n        <h5 class=\"card-header\">Leave a Comment:<\/h5>\r\n        <div class=\"card-body\">\r\n          <form>\r\n            <div class=\"form-group\">\r\n              <textarea class=\"form-control\" rows=\"3\"><\/textarea>\r\n            <\/div>\r\n            <button type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\r\n          <\/form>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n@endsection<\/pre>\n
TESTING THE APPLICATION
\nWe can test the application to see that things work as we expect. When we serve the application, we expect to see a landing page and a single post page. We also expect to see two posts because that\u2019s the number of posts we seeded into the database.<\/p>\n
We will serve the application using this command:<\/p>\n
php artisan serve<\/pre>\n
We have used simple placeholder images here because we haven\u2019t built the admin dashboard that allows CRUD operations to be performed on posts.<\/p>\n
In the coming chapters, we will add the ability for an admin to include a custom image when creating a new post.<\/p>\n
CONCLUSION
\nIn this chapter, we created the\u00a0Post\u00a0model and defined a relationship on it to the\u00a0User\u00a0model. We also built the landing page and single page.<\/p>\n
We will start building the admin frontend of the CMS. This is the first part of the series where we will integrate Vue and explore Vue\u2019s magical abilities.<\/p>\n
Laravel ships with Vue out of the box so we do not need to use the Vue-CLI or reference Vue from a CDN.\u00a0 Please see package.json file on the project root.<\/p>\n
     \/\/laravel-cms\/package.json\r\n     \"devDependencies\": {\r\n        \"axios\": \"^0.18\",\r\n        \"bootstrap\": \"^4.0.0\",\r\n        \"cross-env\": \"^5.1\",\r\n        \"jquery\": \"^3.2\",\r\n        \"laravel-mix\": \"^4.0.7\",\r\n        \"lodash\": \"^4.17.5\",\r\n        \"popper.js\": \"^1.12\",\r\n        \"resolve-url-loader\": \"^2.3.1\",\r\n        \"sass\": \"^1.15.2\",\r\n        \"sass-loader\": \"^7.1.0\",\r\n        \"vue\": \"^2.5.17\"\r\n    },<\/pre>\n
This makes it possible for us to have all of our application, the frontend, and backend, in a single codebase.<\/p>\n
Every newly created instance of a Laravel installation has some Vue files included by default, we can see these files when we navigate into the\u00a0resources\/js\/components\u00a0folder.<\/p>\n
SETTING UP VUE AND VUEROUTER
\nBefore we can start using Vue in our application, we need to first install some dependencies using NPM. To install the dependencies that come by default with Laravel, run the command below:<\/p>\n
npm install<\/pre>\n
We will be managing all of the routes for the admin dashboard using\u00a0vue-router\u00a0so let\u2019s pull it in:<\/p>\n
npm install --save vue-router<\/pre>\n
When the installation is complete, the next thing we want to do is open the\u00a0resources\/js\/app.js\u00a0file and replace its contents with the code below:<\/p>\n
    \/\/ File: .\/resources\/js\/app.js\r\n    require('.\/bootstrap');\r\n\r\n    import Vue from 'vue'\r\n    import VueRouter from 'vue-router'\r\n    import Homepage from '.\/components\/Homepage'\r\n    import Read from '.\/components\/Read'\r\n\r\n    Vue.use(VueRouter)\r\n\r\n    const router = new VueRouter({\r\n        mode: 'history',\r\n        routes: [\r\n            {\r\n                path: '\/admin\/dashboard',\r\n                name: 'read',\r\n                component: Read,\r\n                props: true\r\n            },\r\n        ],\r\n    });\r\n\r\n    const app = new Vue({\r\n        el: '#app',\r\n        router,\r\n        components: { Homepage },\r\n    });<\/pre>\n
In the snippet above, we imported the\u00a0VueRouter\u00a0and added it to the Vue application. We also imported a\u00a0Homepage\u00a0and a\u00a0Read\u00a0component. These are the components where we will write our markup so let\u2019s create both files.<\/p>\n
NOTE: IF YOU EDIT THE JS\/VUE TEMPLATE, DON’T FORGET TO STOP ‘php artisan serve’ THEN RUN ‘npm run dev’ THEN START AGAIN ‘php artisan serve’. IF NOT, YOU’D NOT SEE THE CHANGES YOU MADE!!!<\/p>\n
Open the\u00a0resources\/js\/components\u00a0folder and create four files:
\nHomepage.vue\u00a0– this will be the parent component for the admin dashboard frontend.
\nRead.vue\u00a0– this will be component that displays all the available posts on the admin dashboard.
\nCreate.vue\u00a0– this will be the component where an admin user can create a new post.
\nUpdate.vue\u00a0– this will be the component that displays the view where an admin user can update an existing post.
\nNote that we didn\u2019t create a component file for the delete operation, this is because it is going to be possible to delete a post from the\u00a0Read\u00a0component. There is no need for a view.
\nIn the\u00a0resources\/js\/app.js\u00a0file, we defined a\u00a0routes\u00a0array and in it, we registered a\u00a0read\u00a0route. During render time, this route\u2019s path will be mapped to the\u00a0Read\u00a0component.<\/p>\n
In the previous article, we specified that admin users should be shown an\u00a0admin.dashboard\u00a0view in the\u00a0index method, however, we didn\u2019t create this view. Let\u2019s create the view. Open the\u00a0resources\/views\u00a0folder and create a new folder called\u00a0admin. Within the new\u00a0resources\/views\/admin\u00a0folder, create a new file and called\u00a0dashboard.blade.php. This is going to be the entry point to the admin dashboard, further from this route, we will let the\u00a0Vue Router\u00a0handle everything else.<\/p>\n
Open the\u00a0resources\/views\/admin\/dashboard.blade.php\u00a0file and paste in the following code:<\/p>\n
    <!-- File: .\/resources\/views\/admin\/dashboard.blade.php -->\r\n    <!DOCTYPE html>\r\n    <html lang=\"en\">\r\n    <head>\r\n        <meta charset=\"UTF-8\">\r\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n        <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\r\n        <title> Welcome to the Admin dashboard <\/title>\r\n        <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\">\r\n        <style>\r\n            html, body {\r\n            background-color: #202B33;\r\n            color: #738491;\r\n            font-family: \"Open Sans\";\r\n            font-size: 16px;\r\n            font-smoothing: antialiased;\r\n            overflow: hidden;\r\n            }\r\n        <\/style>\r\n    <\/head>\r\n    <body>\r\n\r\n      <script src=\"{{ asset('js\/app.js') }}\"><\/script>\r\n    <\/body>\r\n    <\/html><\/pre>\n
Our goal here is to integrate Vue into the application, so we included the\u00a0resources\/js\/app.js\u00a0file with this line of code:<\/p>\n
<script src=\"{{ asset('js\/app.js') }}\"><\/script><\/pre>\n
For our app to work, we need a root element to bind our Vue instance unto. Before the\u00a0<script>\u00a0tag, add this snippet of code:<\/p>\n
    ...\r\n    <body>\r\n        <div id=\"app\">\r\n            <Homepage \r\n                :user-name='@json(auth()->user()->name)' \r\n                :user-id='@json(auth()->user()->id)'>\r\n            <\/Homepage>\r\n        <\/div>\r\n        <script src=\"{{ asset('js\/app.js') }}\"><\/script>\r\n    <\/body>\r\n    ...<\/pre>\n
We earlier defined the\u00a0Homepage\u00a0component as the wrapping component, that\u2019s why we pulled it in here as the root component. For some of the frontend components to work correctly, we require some details of the logged in admin user to perform CRUD operations. This is why we passed down the\u00a0userName (:user-name) and\u00a0userId (:user-id) props to the\u00a0Homepage\u00a0component.<\/p>\n
We need to prevent the\u00a0CSRF\u00a0error from occurring in our Vue frontend, so include this snippet of code just before the\u00a0<title>\u00a0tag:<\/p>\n
<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\r\n<script> window.Laravel = { csrfToken: 'csrf_token() ' } <\/script><\/pre>\n
This snippet will ensure that the correct token is always included in our frontend, Laravel provides the\u00a0CSRFprotection for us out of the box.<\/p>\n
SETTING UP THE HOMEPAGE VIEW
\nOpen the\u00a0Homepage.vue\u00a0file that we created some time ago and include this markup template:<\/p>\n
    <!-- File: .\/resources\/js\/components\/Homepage.vue -->\r\n    <template>\r\n      <div>\r\n        <nav>\r\n          <section>\r\n            <a style=\"color: white\" href=\"\/admin\/dashboard\">Laravel-CMS<\/a> &nbsp; ||  &nbsp;\r\n            <a style=\"color: white\" href=\"\/\">HOME<\/a>\r\n            <hr>\r\n            <ul>\r\n               <li>\r\n                 <router-link :to=\"{ name: 'create', params: { userId } }\">\r\n                   NEW POST\r\n                 <\/router-link>\r\n               <\/li>\r\n            <\/ul>\r\n          <\/section>\r\n        <\/nav>\r\n        <article>\r\n          <header>\r\n            <header class=\"d-inline\">Welcome, {{ userName }}<\/header>\r\n            <p @click=\"logout\" class=\"float-right mr-3\" style=\"cursor: pointer\">Logout<\/p>\r\n          <\/header>\r\n          <div> \r\n            <router-view><\/router-view> \r\n          <\/div>\r\n        <\/article>\r\n      <\/div>\r\n    <\/template><\/pre>\n
We added a\u00a0router-link\u00a0in this template, which routes to the\u00a0Create\u00a0component.<\/p>\n
We are passing the\u00a0userId\u00a0data to the\u00a0create\u00a0component because a\u00a0userId\u00a0is required during\u00a0Post\u00a0creation.<\/p>\n
UPDATED: I want to pass more variables (like user-email and user-admin. DON’T USE SINGLE WORD VARIABLE LIKE title. USE DASH SEPARATED VARIABLE) to vue template. So modify resources\/views\/admin\/dashboard.blade.php:<\/p>\n
    <body>\r\n        <div id=\"app\">\r\n            <Homepage \r\n                :user-name='@json(auth()->user()->name)' \r\n                :user-id='@json(auth()->user()->id)' \r\n                :user-email='@json(auth()->user()->email)' \r\n                :user-admin='@json(auth()->user()->hasRole(\"admin\"))'>\r\n            <\/Homepage>\r\n        <\/div>\r\n        <script src=\"{{ asset('js\/app.js') }}\"><\/script>\r\n    <\/body><\/pre>\n
Then catch the variables in resources\/js\/components\/Homepage.vue:<\/p>\n
<script>\r\nexport default {\r\n  name: \"Homepage\",\r\n  props: {\r\n    userId: {\r\n      type: Number,\r\n      required: true\r\n    },\r\n    userName: {\r\n      type: String,\r\n      required: true\r\n    },\r\n    userEmail: {\r\n      type: String,\r\n      required:  true\r\n    },\r\n    userAdmin: {\r\n      type: Boolean,\r\n      required:  true\r\n    }\r\n  },\r\n...<\/pre>\n
Here is the passing variables in Vue chrome toolbars\"\"<\/a>How to get user role name on the vue template???
\nI need to create a helper function in User model (app\/User.php):<\/p>\n
    public function getRole(){\r\n        return $this->roles()->first()->name;\r\n    }<\/pre>\n
Ref: https:\/\/stackoverflow.com\/questions\/36719279\/laravel-5-2-how-to-get-the-role-of-current-user-when-using-zizaco-entrust
\nThen modify again resources\/views\/admin\/dashboard.blade.php to get the user role with auth()->user()->getRole():<\/p>\n
            <Homepage \r\n                :user-name='@json(auth()->user()->name)' \r\n                :user-id='@json(auth()->user()->id)' \r\n                :user-email='@json(auth()->user()->email)' \r\n                :user-admin='@json(auth()->user()->hasRole(\"admin\"))' \r\n                :user-role='@json(auth()->user()->getRole())'>\r\n            <\/Homepage><\/pre>\n
Then catch the props value in resources\/js\/components\/Homepage.vue:<\/p>\n
  props: {\r\n    ...\r\n    userRole: {\r\n      type: String,\r\n      required:  true\r\n    }\r\n  },<\/pre>\n
 <\/p>\n
Let\u2019s include some styles so that the page looks good. Below the closing\u00a0template\u00a0tag, paste the following code:<\/p>\n
   <style scoped>\r\n      @import url(https:\/\/fonts.googleapis.com\/css?family=Dosis:300|Lato:300,400,600,700|Roboto+Condensed:300,700|Open+Sans+Condensed:300,600|Open+Sans:400,300,600,700|Maven+Pro:400,700);\r\n      @import url(\"https:\/\/netdna.bootstrapcdn.com\/font-awesome\/4.2.0\/css\/font-awesome.css\");\r\n      * {\r\n        -moz-box-sizing: border-box;\r\n        -webkit-box-sizing: border-box;\r\n        box-sizing: border-box;\r\n      }\r\n      header {\r\n        color: #d3d3d3;\r\n      }\r\n      nav {\r\n        position: absolute;\r\n        top: 0;\r\n        bottom: 0;\r\n        right: 82%;\r\n        left: 0;\r\n        padding: 22px;\r\n        border-right: 2px solid #161e23;\r\n      }\r\n      nav > header {\r\n        font-weight: 700;\r\n        font-size: 0.8rem;\r\n        text-transform: uppercase;\r\n      }\r\n      nav section {\r\n        font-weight: 600;\r\n      }\r\n      nav section header {\r\n        padding-top: 30px;\r\n      }\r\n      nav section ul {\r\n        list-style: none;\r\n        padding: 0px;\r\n      }\r\n      nav section ul a {\r\n        color: white;\r\n        text-decoration: none;\r\n        font-weight: bold;\r\n      }\r\n      article {\r\n        position: absolute;\r\n        top: 0;\r\n        bottom: 0;\r\n        right: 0;\r\n        left: 18%;\r\n        overflow: auto;\r\n        border-left: 2px solid #2a3843;\r\n        padding: 20px;\r\n      }\r\n      article > header {\r\n        height: 60px;\r\n        border-bottom: 1px solid #2a3843;\r\n      }\r\n    <\/style><\/pre>\n
We are using the scoped attribute on the\u00a0<style>\u00a0tag because we want the CSS to only be applied on the\u00a0Homepage\u00a0component.
\nNext, let’s add the\u00a0<script>\u00a0section that will use the props we passed down from the parent component. We will also define the method that controls the\u00a0log out\u00a0feature here. Below the closing\u00a0style\u00a0tag, paste the following code:<\/p>\n
    <script>\r\n    export default {\r\n      name: \"Homepage\",\r\n      props: {\r\n        userId: {\r\n          type: Number,\r\n          required: true\r\n        },\r\n        userName: {\r\n          type: String,\r\n          required: true\r\n        }\r\n      },\r\n      data() {\r\n        return {};\r\n      },\r\n      methods: {\r\n        logout() {\r\n          axios.post(\"\/logout\").then(() => {\r\n            window.location = \"\/\";\r\n          });\r\n        }\r\n      }\r\n    };\r\n    <\/script><\/pre>\n
SETTING UP THE READ VIEW
\nIn the\u00a0resources\/js\/app.js\u00a0file, we defined the path of the\u00a0read\u00a0component as\u00a0\/admin\/dashboard, which is the same address as the\u00a0Homepage\u00a0component. This will make sure the\u00a0Read\u00a0component always loads by default.<\/p>\n
In the\u00a0Read\u00a0component, we want to load all of the available posts. We are also going to add\u00a0Update\u00a0and\u00a0Delete options to each post. Clicking on these options will lead to the\u00a0update\u00a0and\u00a0delete\u00a0views respectively.<\/p>\n
Open the\u00a0Read.vue\u00a0file and paste the following:<\/p>\n
    <!-- File: .\/resources\/js\/components\/Read.vue -->\r\n    <template>\r\n        <div id=\"posts\">\r\n            <p class=\"border p-3\" v-for=\"post in posts\">\r\n                {{ post.title }}\r\n                <router-link :to=\"{ name: 'update', params: { postId : post.id } }\">\r\n                    <button type=\"button\" class=\"p-1 mx-3 float-right btn btn-light\">\r\n                        Update\r\n                    <\/button>\r\n                <\/router-link>\r\n                <button \r\n                    type=\"button\" \r\n                    @click=\"deletePost(post.id)\" \r\n                    class=\"p-1 mx-3 float-right btn btn-danger\"\r\n                >\r\n                    Delete\r\n                <\/button>\r\n            <\/p>\r\n            <div>\r\n                <button \r\n                    v-if=\"next\" \r\n                    type=\"button\" \r\n                    @click=\"navigate(next)\" \r\n                    class=\"m-3 btn btn-primary\"\r\n                >\r\n                  Next\r\n                <\/button>\r\n                <button \r\n                    v-if=\"prev\" \r\n                    type=\"button\" \r\n                    @click=\"navigate(prev)\" \r\n                    class=\"m-3 btn btn-primary\"\r\n                >\r\n                  Previous\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/template><\/pre>\n
Above, we have the template to handle the posts that are loaded from the API (Will get the data via API later). Next, paste the following below the closing\u00a0template\u00a0tag:<\/p>\n
    <script>\r\n    export default {\r\n      mounted() {\r\n        this.getPosts();\r\n      },\r\n      data() {\r\n        return {\r\n          posts: {},\r\n          next: null,\r\n          prev: null\r\n        };\r\n      },\r\n      methods: {\r\n        getPosts(address) {\r\n          axios.get(address ? address : \"\/api\/posts\").then(response => {\r\n            this.posts = response.data.data;\r\n            this.prev = response.data.links.prev;\r\n            this.next = response.data.links.next;\r\n          });\r\n        },\r\n        deletePost(id) {\r\n          axios.delete(\"\/api\/posts\/\" + id).then(response => this.getPosts())\r\n        },\r\n        navigate(address) {\r\n          this.getPosts(address)\r\n        }\r\n      }\r\n    };\r\n    <\/script><\/pre>\n
In the script above, we defined a\u00a0getPosts()\u00a0method that requests a list of posts from the backend server. We also defined a\u00a0posts\u00a0object as a data property. This object will be populated whenever posts are received from the backend server.<\/p>\n
We defined\u00a0next\u00a0and\u00a0prev\u00a0data string properties to store pagination links and only display the pagination options where it is available.<\/p>\n
Lastly, we defined a\u00a0deletePost()\u00a0method that takes the\u00a0id\u00a0of a post as a parameter and sends a\u00a0DELETE request to the API interface using\u00a0Axios.<\/p>\n
TESTING THE APPLICATION
\nNow that we have completed the first few components, we can serve the application using this command:<\/p>\n
php artisan serve<\/pre>\n
We will also build the assets so that our JavaScript is compiled for us. To do this, will run the command below in the root of the project folder:<\/p>\n
npm run dev<\/pre>\n
We can visit the application\u2019s URL\u00a0http:\/\/localhost:8000\u00a0and log in as an admin user. It’d show the admin dashboard but no post will show up because we haven’t set up the ‘api’ route yet.
\nNOTE: If you got an error like<\/p>\n
Unknown custom element: <homepage> - did you register the component correctly? For recursive components, make sure to provide the \"name\" option.<\/pre>\n
It because the app.js file not loaded. Probably you call it wrong. Make sure app.js in this path:<\/p>\n
laravel-cms\/resources\/js\/app.js<\/pre>\n
NOT in laravel-cms\/resources\/assets\/js\/app.js<\/p>\n
We will start building the API for the application. We will create an API for CRUD operations that an admin will perform on posts and we will test the endpoints using Postman.<\/p>\n
BUILDING THE API USING LARAVEL\u2019S API RESOURCES
\nThe Laravel framework makes it very easy to build APIs. It has an\u00a0API resources\u00a0feature that we can easily adopt in our project. You can think of API resources as a transformation layer between Eloquent models and the JSON responses that will be sent back by our API.<\/p>\n
ALLOWING MASS ASSIGNMENT ON SPECIFIED FIELDS
\nSince we are going to be performing CRUD operations on the posts in the application, we have to explicitly specify that it\u2019s permitted for some fields to be mass-assigned data. For security reasons, Laravel\u00a0prevents mass assignment\u00a0of data to model fields by default.<\/p>\n
Open the\u00a0Post.php\u00a0file and include this line of code:<\/p>\n
\/\/ File: .\/app\/Post.php\r\nprotected $fillable = ['user_id', 'title', 'body', 'image'];<\/pre>\n
DEFINING API ROUTES
\nWe will use the\u00a0apiResource() method to generate only API routes. Open the\u00a0routes\/api.php\u00a0file and add the following code:<\/p>\n
\/\/ File: .\/routes\/api.php\r\nRoute::apiResource('posts', 'PostController');<\/pre>\n
Because we will be handling the API requests on the\u00a0\/posts\u00a0URL using the\u00a0PostController, we will have to include some additional action methods in our post controller.<\/p>\n
CREATING THE POST RESOURCE
\nAt the beginning of this section, we already talked about what Laravel\u2019s API resources are. Here, we create a resource class for our\u00a0Post\u00a0model. This will enable us to retrieve\u00a0Post\u00a0data and return formatted JSON format.<\/p>\n
To create a resource class for our\u00a0Post\u00a0model run the following command in your terminal:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan make:resource PostResource\r\nResource created successfully.<\/pre>\n
A new\u00a0PostResource.php\u00a0file will be available in the\u00a0app\/Http\/Resources\u00a0directory of our application. Open up the\u00a0PostResource.php\u00a0file and replace the\u00a0toArray()\u00a0method with the following:<\/p>\n
    \/\/ File: .\/app\/Http\/Resources\/PostResource.php\r\n    public function toArray($request)\r\n    {\r\n        \/\/return parent::toArray($request);\r\n        return [\r\n            'id' => $this->id,\r\n            'title' => $this->title,\r\n            'body' => $this->body,\r\n            'image' => $this->image,\r\n            'created_at' => (string) $this->created_at,\r\n            'updated_at' => (string) $this->updated_at,\r\n        ];\r\n    }<\/pre>\n
The job of this\u00a0toArray()\u00a0method is to convert our\u00a0Post\u00a0resource into an array. As seen above, we have specified the fields on our\u00a0Post\u00a0model, which we want to be returned as JSON when we make a request for posts.<\/p>\n
We are also explicitly casting the dates,\u00a0created_at\u00a0and\u00a0update_at, to strings so that they would be returned as date strings. The dates are normally an instance of\u00a0Carbon.<\/p>\n
Now that we have created a resource class for our\u00a0Post\u00a0model, we can start building the API\u2019s action methods in our\u00a0PostController\u00a0and return instances of the\u00a0PostResource\u00a0where we want.<\/p>\n
ADDING THE ACTION METHODS TO THE POST CONTROLLER
\nThe usual actions performed on a post include the following:
\nCreate – the process of creating a new post.
\nRead – the process of reading one or more posts.
\nUpdate – the process of updating an already published post.
\nDelete – the process of deleting a post.
\nIn the last article, we already implemented a kind of \u2018Read\u2019 functionality when we defined the\u00a0all\u00a0and\u00a0single methods. These methods allow users to browse through posts on the homepage.<\/p>\n
In this section, we will define the methods that will resolve our API requests for creating, reading, updating and deleting posts.<\/p>\n
The first thing we want to do is import the\u00a0PostResource\u00a0class at the top of the\u00a0PostController.php\u00a0file:<\/p>\n
\/\/ File: .\/app\/Http\/Controllers\/PostController.php\r\nuse App\\Http\\Resources\\PostResource;<\/pre>\n
Because we created the\u00a0PostController\u00a0as a resource controller, we already have the resource action methods included for us in the\u00a0PostController.php\u00a0file, we will be updating them with fitting snippets of code.<\/p>\n
BUILDING THE HANDLER ACTION FOR THE CREATE OPERATION
\nIn the\u00a0PostController\u00a0update the\u00a0store()\u00a0action method with the code snippet below. It will allow us to validate and create a new post:<\/p>\n
    \/\/ File: .\/app\/Http\/Controllers\/PostController.php\r\n    public function store(Request $request)\r\n    {\r\n        $this->validate($request, [\r\n            'title' => 'required',\r\n            'body' => 'required',\r\n            'user_id' => 'required',            \r\n            'image' => 'required|mimes:jpeg,png,jpg,gif,svg',\r\n        ]);\r\n\r\n        $post = new Post;\r\n\r\n        if ($request->hasFile('image')) {\r\n            $image = $request->file('image');\r\n            $name = str_slug($request->title).'.'.$image->getClientOriginalExtension();\r\n            $destinationPath = public_path('\/uploads\/posts');\r\n            $imagePath = $destinationPath . \"\/\" . $name;\r\n            $image->move($destinationPath, $name);\r\n            $post->image = $name;\r\n        }\r\n\r\n        $post->user_id = $request->user_id;\r\n        $post->title = $request->title;\r\n        $post->body = $request->body;\r\n        $post->save();\r\n\r\n        return new PostResource($post);\r\n    }<\/pre>\n
Here\u2019s a breakdown of what this method does:
\nReceives a new request.
\nValidates the request.
\nCreates a new post.
\nReturns the post as a\u00a0PostResource, which in turn returns a JSON formatted response.<\/p>\n
BUILDING THE HANDLER ACTION FOR THE READ OPERATIONS
\nWhat we want here is to be able to read all the created posts or a single post. This is possible because the\u00a0apiResource()\u00a0method defines the API routes using standard REST rules.<\/p>\n
This means that a\u00a0GET\u00a0request to this address,\u00a0http:\/\/localhost:8000\/api\/posts, should be resolved by the\u00a0index()\u00a0action method. Let\u2019s update the\u00a0index\u00a0method with the following code:<\/p>\n
    \/\/ File: .\/app\/Http\/Controllers\/PostController.php\r\n    public function index()\r\n    {\r\n        return PostResource::collection(Post::latest()->paginate(5));\r\n    }<\/pre>\n
This method will allow us to return a JSON formatted collection of all of the stored posts. We also want to paginate the response as this will allow us to create a better view on the admin dashboard.<\/p>\n
Following the RESTful conventions as we discussed above, a\u00a0GET\u00a0request to this address,\u00a0http:\/\/localhost:8000\/api\/posts\/id, should be resolved by the\u00a0show()\u00a0action method. Let\u2019s update the method with the fitting snippet:<\/p>\n
    \/\/ File: .\/app\/Http\/Controllers\/PostController.php\r\n    public function show(Post $post)\r\n    {\r\n        return new PostResource($post);\r\n    }<\/pre>\n
Awesome, now this method will return a single instance of a post resource upon API query.<\/p>\n
BUILDING THE HANDLER ACTION FOR THE UPDATE OPERATION
\nNext, let\u2019s update the\u00a0update()\u00a0method in the\u00a0PostController\u00a0class. It will allow us to modify an existing post:<\/p>\n
    \/\/ File: .\/app\/Http\/Controllers\/PostController.php\r\n    public function update(Request $request, Post $post)\r\n    {\r\n        $this->validate($request, [\r\n            'title' => 'required',\r\n            'body' => 'required',\r\n        ]);\r\n\r\n        $post->update($request->only(['title', 'body']));\r\n\r\n        return new PostResource($post);\r\n    }<\/pre>\n
This method receives a request and a post\u00a0id\u00a0as parameters, then we use route model binding to resolve the\u00a0id into an instance of a\u00a0Post. First, we validate the\u00a0$request\u00a0attributes, then we update the title and body fields of the resolved post.<\/p>\n
BUILDING THE HANDLER ACTION FOR THE DELETE OPERATION
\nLet\u2019s update the\u00a0destroy()\u00a0method in the\u00a0PostController\u00a0class. This method will allow us to remove an existing post:<\/p>\n
    \/\/ File: .\/app\/Http\/Controllers\/PostController.php\r\n    public function destroy(Post $post)\r\n    {\r\n        $post->delete();\r\n\r\n        return response()->json(null, 204);\r\n    }<\/pre>\n
In this method, we resolve the\u00a0Post\u00a0instance, then delete it and return a 204 response code.<\/p>\n
Our methods are complete. We have a method to handle our CRUD operations.\"\"<\/a>We are not done with the dashboard just yet. In the next part, we will add the views that lets us create and update posts.<\/p>\n
we have built the first parts of the admin dashboard using Vue. We also made it into an SPA with the\u00a0VueRouter, this means that visiting the pages does not cause a reload to the web browser.<\/p>\n
We only built the wrapper component and the\u00a0Read\u00a0component that retrieves the posts to be loaded so an admin can manage them.<\/p>\n
we will build the view that will allow users to create and update posts. We will start writing code in the\u00a0Update.vue\u00a0and\u00a0Create.vue\u00a0files that we created in the previous article.<\/p>\n
When we are done with this part, we will have additional functionalities like create and updating.<\/p>\n
INCLUDING THE NEW ROUTES IN VUE ROUTER
\nIn the previous article, we only defined the route for the\u00a0Read\u00a0component, we need to include the route configuration for the new components that we are about to build;\u00a0Update\u00a0and\u00a0Create.<\/p>\n
Open the\u00a0resources\/js\/app.js\u00a0file and replace the contents with the code below:<\/p>\n
import Homepage from '.\/components\/Homepage'\r\nimport Create from '.\/components\/Create'\r\nimport Read from '.\/components\/Read'\r\nimport Update from '.\/components\/Update'\r\n\r\nVue.use(VueRouter)\r\n\r\nconst router = new VueRouter({\r\n    mode: 'history',\r\n    routes: [\r\n        {\r\n            path: '\/admin\/dashboard',\r\n            name: 'read',\r\n            component: Read,\r\n            props: true\r\n        },\r\n        {\r\n            path: '\/admin\/create',\r\n            name: 'create',\r\n            component: Create,\r\n            props: true\r\n        },\r\n        {\r\n            path: '\/admin\/update',\r\n            name: 'update',\r\n            component: Update,\r\n            props: true\r\n        },\r\n    ],\r\n});<\/pre>\n
Above, we have added two new components to the JavaScript file. We have the\u00a0Create\u00a0and\u00a0Read\u00a0components. We also added them to the\u00a0router\u00a0so that they can be loaded using the specified URLs.<\/p>\n
BUILDING THE CREATE VIEW
\nOpen the\u00a0Create.vue\u00a0file and update it with this markup template:<\/p>\n
    <!-- File: .\/resources\/js\/components\/Create.vue -->\r\n    <template>\r\n      <div class=\"container\">\r\n        <form>\r\n          <div :class=\"['form-group m-1 p-3', (successful ? 'alert-success' : '')]\">\r\n            <span v-if=\"successful\" class=\"label label-sucess\">Published!<\/span>\r\n          <\/div>\r\n          <div :class=\"['form-group m-1 p-3', error ? 'alert-danger' : '']\">\r\n            <span v-if=\"errors.title\" class=\"label label-danger\">\r\n              {{ errors.title[0] }}\r\n            <\/span>\r\n            <span v-if=\"errors.body\" class=\"label label-danger\"> \r\n              {{ errors.body[0] }} \r\n            <\/span>\r\n            <span v-if=\"errors.image\" class=\"label label-danger\"> \r\n              {{ errors.image[0] }} \r\n            <\/span>\r\n          <\/div>\r\n\r\n          <div class=\"form-group\">\r\n            <input type=\"title\" ref=\"title\" class=\"form-control\" id=\"title\" placeholder=\"Enter title\" required>\r\n          <\/div>\r\n\r\n          <div class=\"form-group\">\r\n            <textarea class=\"form-control\" ref=\"body\" id=\"body\" placeholder=\"Enter a body\" rows=\"8\" required><\/textarea>\r\n          <\/div>\r\n\r\n          <div class=\"custom-file mb-3\">\r\n            <input type=\"file\" ref=\"image\" name=\"image\" class=\"custom-file-input\" id=\"image\" required>\r\n            <label class=\"custom-file-label\" >Choose file...<\/label>\r\n          <\/div>\r\n\r\n          <button type=\"submit\" @click.prevent=\"create\" class=\"btn btn-primary block\">\r\n            Submit\r\n          <\/button>\r\n        <\/form>\r\n      <\/div>\r\n    <\/template><\/pre>\n
Above we have the template for the\u00a0Create\u00a0component. If there is an error during post creation, there will be a field indicating the specific error. When a post is successfully published, there will also a message saying it was successful.<\/p>\n
Let\u2019s include the\u00a0script\u00a0logic that will perform the sending of posts to our backend server and read back the response.<\/p>\n
After the closing\u00a0template\u00a0tag add this:<\/p>\n
    <script>\r\n    export default {\r\n      props: {\r\n        userId: {\r\n          type: Number,\r\n          required: true\r\n        }\r\n      },\r\n      data() {\r\n        return {\r\n          error: false,\r\n          successful: false,\r\n          errors: []\r\n        };\r\n      },\r\n      methods: {\r\n        create() {\r\n          const formData = new FormData();\r\n          formData.append(\"title\", this.$refs.title.value);\r\n          formData.append(\"body\", this.$refs.body.value);\r\n          formData.append(\"user_id\", this.userId);\r\n          formData.append(\"image\", this.$refs.image.files[0]);\r\n\r\n          axios\r\n            .post(\"\/api\/posts\", formData)\r\n            .then(response => {\r\n              this.successful = true;\r\n              this.error = false;\r\n              this.errors = [];\r\n            })\r\n            .catch(error => {\r\n              if (!_.isEmpty(error.response)) {\r\n                if ((error.response.status = 422)) {\r\n                  this.errors = error.response.data.errors;\r\n                  this.successful = false;\r\n                  this.error = true;\r\n                }\r\n              }\r\n            });\r\n\r\n          this.$refs.title.value = \"\";\r\n          this.$refs.body.value = \"\";\r\n        }\r\n      }\r\n    };\r\n    <\/script><\/pre>\n
In the script above, we defined a\u00a0create()\u00a0method that takes the values of the\u00a0input\u00a0fields and uses the\u00a0Axios library to send them to the API interface on the backend server. Within this method, we also update the status of the operation, so that an admin user can know when a post is created successfully or not.<\/p>\n
BUILDING THE UPDATE VIEW
\nLet\u2019s start building the\u00a0Update\u00a0component. Open the\u00a0Update.vue\u00a0file and update it with this markup template:<\/p>\n
    <!-- File: .\/resources\/js\/components\/Update.vue -->\r\n    <template>\r\n      <div class=\"container\">\r\n        <form>\r\n          <div :class=\"['form-group m-1 p-3', successful ? 'alert-success' : '']\">\r\n            <span v-if=\"successful\" class=\"label label-sucess\">Updated!<\/span>\r\n          <\/div>\r\n\r\n          <div :class=\"['form-group m-1 p-3', error ? 'alert-danger' : '']\">\r\n            <span v-if=\"errors.title\" class=\"label label-danger\">\r\n              {{ errors.title[0] }}\r\n            <\/span>\r\n            <span v-if=\"errors.body\" class=\"label label-danger\">\r\n              {{ errors.body[0] }}\r\n            <\/span>\r\n          <\/div>\r\n\r\n          <div class=\"form-group\">\r\n            <input type=\"title\" ref=\"title\" class=\"form-control\" id=\"title\" placeholder=\"Enter title\" required>\r\n          <\/div>\r\n\r\n          <div class=\"form-group\">\r\n            <textarea class=\"form-control\" ref=\"body\" id=\"body\" placeholder=\"Enter a body\" rows=\"8\" required><\/textarea>\r\n          <\/div>\r\n\r\n          <button type=\"submit\" @click.prevent=\"update\" class=\"btn btn-primary block\">\r\n            Submit\r\n          <\/button>\r\n        <\/form>\r\n      <\/div>\r\n    <\/template><\/pre>\n
This template is similar to the one in the\u00a0Create\u00a0component. Let\u2019s add the\u00a0script\u00a0for the component.<\/p>\n
Below the closing\u00a0template\u00a0tag, paste the following:<\/p>\n
    <script>\r\n    export default {\r\n      mounted() {\r\n        this.getPost();\r\n      },\r\n      props: {\r\n        postId: {\r\n          type: Number,\r\n          required: true\r\n        }\r\n      },\r\n      data() {\r\n        return {\r\n          error: false,\r\n          successful: false,\r\n          errors: []\r\n        };\r\n      },\r\n      methods: {\r\n        update() {\r\n          let title = this.$refs.title.value;\r\n          let body = this.$refs.body.value;\r\n\r\n          axios\r\n            .put(\"\/api\/posts\/\" + this.postId, { title, body })\r\n            .then(response => {\r\n              this.successful = true;\r\n              this.error = false;\r\n              this.errors = [];\r\n            })\r\n            .catch(error => {\r\n              if (!_.isEmpty(error.response)) {\r\n                if ((error.response.status = 422)) {\r\n                  this.errors = error.response.data.errors;\r\n                  this.successful = false;\r\n                  this.error = true;\r\n                }\r\n              }\r\n            });\r\n        },\r\n        getPost() {\r\n          axios.get(\"\/api\/posts\/\" + this.postId).then(response => {\r\n            this.$refs.title.value = response.data.data.title;\r\n            this.$refs.body.value = response.data.data.body;\r\n          });\r\n        }\r\n      }\r\n    };\r\n    <\/script><\/pre>\n
In the script above, we make a call to the\u00a0getPosts()\u00a0method as soon as the component is\u00a0mounted. The\u00a0getPosts()\u00a0method fetches the data of a single post from the backend server, using the\u00a0postId.<\/p>\n
When Axios sends back the data for the post, we update the input fields in this component so they can be updated.<\/p>\n
Finally, the\u00a0update()\u00a0method takes the values of the fields in the components and attempts to send them to the backend server for an update. In a situation where the fails, we get instant feedback.<\/p>\n
TESTING THE APPLICATION
\nTo test that our changes work, we want to refresh the database and restore it back to a fresh state. To do this, run the following command in your terminal:<\/p>\n
$ php artisan migrate:fresh --seed<\/pre>\n
Next, let\u2019s compile our JavaScript files and assets. This will make sure all the changes we made in the Vue component and the\u00a0app.js\u00a0file gets built. To recompile, run the command below in your terminal:<\/p>\n
$ npm run dev<\/pre>\n
Lastly, we need to serve the application. To do this, run the following command in your terminal window:<\/p>\n
$ php artisan serve<\/pre>\n
If you had the serve command running before, then you might need to restart it.
\nWe will visit the application\u2019s\u00a0http:\/\/localhost:8000\u00a0and log in as an admin user. From the dashboard, you can test the create and update feature<\/p>\n
Now, we will be adding support for comments. We will also ensure that the comments on each post are updated in realtime, so a user doesn\u2019t have to refresh the page to see new comments.<\/p>\n
ADDING COMMENTS TO THE BACKEND
\nWhen we were creating the API, we did not add the support for comments to the post resource, so we will have to do so now. Open the API project in your text editor as we will be modifying the project a little.<\/p>\n
The first thing we want to do is create a model, controller, and a migration for the comment resource. To do this, open your terminal and\u00a0cd\u00a0to the project directory and run the following command:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan make:model Comment -mc\r\nModel created successfully.\r\nCreated Migration: 2019_01_30_042953_create_comments_table\r\nController created successfully.<\/pre>\n
The command above will create a model called\u00a0Comment, a controller called\u00a0CommentController, and a migration file in the\u00a0database\/migrations\u00a0directory.<\/p>\n
UPDATING THE COMMENTS MIGRATION FILE
\nTo update the comments migration navigate to the\u00a0database\/migrations\u00a0folder and find the newly created migration file for the\u00a0Comment\u00a0model. Let\u2019s update the\u00a0up()\u00a0method in the file:<\/p>\n
    \/\/database\/migrations\/2019_01_30_042953_create_comments_table.php\r\n    public function up()\r\n    {\r\n        Schema::create('comments', function (Blueprint $table) {\r\n            $table->increments('id');\r\n            $table->timestamps();\r\n            $table->integer('user_id')->unsigned();\r\n            $table->integer('post_id')->unsigned();\r\n            $table->text('body');\r\n        });\r\n    }<\/pre>\n
We included\u00a0user_id\u00a0and\u00a0post_id\u00a0fields because we intend to create a link between the comments, users, and posts. The\u00a0body\u00a0field will contain the actual comment.<\/p>\n
DEFINING THE RELATIONSHIPS AMONG THE COMMENT, USER, AND POST MODELS
\nIn this application, a comment will belong to a user and a post because a user can make a comment on a specific post, so we need to define the relationship that ties everything up.<\/p>\n
Open the\u00a0User\u00a0model and include this method:<\/p>\n
    \/\/ File: .\/app\/User.php\r\n    public function comments()\r\n    {\r\n        return $this->hasMany(Comment::class);\r\n    }<\/pre>\n
This is a relationship that simply says that a user can have many comments. Now let\u2019s define the same relationship on the\u00a0Post\u00a0model. Open the\u00a0Post.php\u00a0file and include this method:<\/p>\n
    \/\/ File: .\/app\/Post.php\r\n    public function comments()\r\n    {\r\n        return $this->hasMany(Comment::class);\r\n    }<\/pre>\n
Finally, we will include two methods in the\u00a0Comment\u00a0model to complete the second half of the relationships we defined in the\u00a0User\u00a0and\u00a0Post\u00a0models.<\/p>\n
Open the\u00a0app\/Comment.php\u00a0file and include these methods:<\/p>\n
    \/\/ File: .\/app\/Comment.php\r\n    public function user()\r\n    {\r\n        return $this->belongsTo(User::class);\r\n    }\r\n\r\n    public function post()\r\n    {\r\n        return $this->belongsTo(Post::class);\r\n    }<\/pre>\n
Since we want to be able to mass assign data to specific fields of a comment instance during comment creation, we will include this array of permitted assignments in the\u00a0app\/Comment.php\u00a0file:<\/p>\n
protected $fillable = ['user_id', 'post_id', 'body'];<\/pre>\n
We can now run our database migration for our comments:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan migrate\r\nMigrating: 2019_01_30_042953_create_comments_table\r\nMigrated:  2019_01_30_042953_create_comments_table<\/pre>\n
CONFIGURING LARAVEL TO BROADCAST EVENTS USING PUSHER
\nWe already said that the comments will have a realtime functionality and we will be building this using Pusher, so we need to enable Laravel\u2019s event broadcasting feature.<\/p>\n
Open the\u00a0config\/app.php\u00a0file and uncomment the following line in the\u00a0providers\u00a0array:<\/p>\n
App\\Providers\\BroadcastServiceProvider,<\/pre>\n
Next, we need to configure the broadcast driver in the\u00a0.env\u00a0file. Replace from BROADCAST_DRIVER=log TO<\/p>\n
BROADCAST_DRIVER=pusher<\/pre>\n
Let\u2019s pull in the Pusher PHP SDK using composer:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ composer require pusher\/pusher-php-server\r\nUsing version ^3.3 for pusher\/pusher-php-server\r\n.\/composer.json has been updated\r\nLoading composer repositories with package information\r\nUpdating dependencies (including require-dev)\r\nPackage operations: 2 installs, 0 updates, 0 removals\r\n  - Installing paragonie\/sodium_compat (v1.8.1): Downloading (100%)         \r\n  - Installing pusher\/pusher-php-server (v3.3.1): Downloading (100%)         \r\nparagonie\/sodium_compat suggests installing ext-libsodium (PHP < 7.0: Better performance, password hashing (Argon2i), secure memory management (memzero), and better security.)\r\nWriting lock file\r\nGenerating optimized autoload files\r\n> Illuminate\\Foundation\\ComposerScripts::postAutoloadDump\r\n> @php artisan package:discover --ansi\r\nDiscovered Package: beyondcode\/laravel-dump-server\r\nDiscovered Package: fideloper\/proxy\r\nDiscovered Package: laravel\/nexmo-notification-channel\r\nDiscovered Package: laravel\/slack-notification-channel\r\nDiscovered Package: laravel\/tinker\r\nDiscovered Package: nesbot\/carbon\r\nDiscovered Package: nunomaduro\/collision\r\nPackage manifest generated successfully.<\/pre>\n
CONFIGURING PUSHER
\nFor us to use Pusher in this application, it is a prerequisite that you have a Pusher account. You can create a free Pusher account\u00a0here\u00a0then login to your dashboard and create an app.<\/p>\n
Once you have created an app, we will use the app details to configure pusher in the\u00a0.env\u00a0file:<\/p>\n
    PUSHER_APP_ID=xxxxxx\r\n    PUSHER_APP_KEY=xxxxxxxxxxxxxxxxxxxx\r\n    PUSHER_APP_SECRET=xxxxxxxxxxxxxxxxxxxx\r\n    PUSHER_APP_CLUSTER=xx<\/pre>\nSORRY, ONLY ADMIN CAN SHOW THIS!<\/span>\n
Update the Pusher keys with the app credentials provided for you under the\u00a0Keys\u00a0section on the\u00a0Overview\u00a0tab on the Pusher dashboard.<\/p>\n
BROADCASTING AN EVENT FOR WHEN A NEW COMMENT IS SENT
\nTo make the comment update realtime, we have to broadcast an event based on the comment creation activity. We will create a new event and call it\u00a0CommentSent. It is to be fired when there is a successful creation of a new comment.<\/p>\n
Run command in your terminal:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan make:event CommentSent\r\nEvent created successfully.<\/pre>\n
There will be a newly created file in the\u00a0app\\Events\u00a0directory, open the\u00a0CommentSent.php\u00a0file and ensure that it implements the\u00a0ShouldBroadcast\u00a0interface.<\/p>\n
Open and replace the file with the following code:<\/p>\n
    \/\/ File: .\/app\/Events\/CommentSent.php\r\n    <?php \r\n\r\n    namespace App\\Events;\r\n\r\n    use App\\Comment;\r\n    use App\\User;\r\n    use Illuminate\\Broadcasting\\Channel;\r\n    use Illuminate\\Queue\\SerializesModels;\r\n    use Illuminate\\Broadcasting\\PrivateChannel;\r\n    use Illuminate\\Broadcasting\\PresenceChannel;\r\n    use Illuminate\\Foundation\\Events\\Dispatchable;\r\n    use Illuminate\\Broadcasting\\InteractsWithSockets;\r\n    use Illuminate\\Contracts\\Broadcasting\\ShouldBroadcast;\r\n\r\n    class CommentSent implements ShouldBroadcast\r\n    {\r\n        use Dispatchable, InteractsWithSockets, SerializesModels;\r\n\r\n        public $user;\r\n\r\n        public $comment;\r\n\r\n        public function __construct(User $user, Comment $comment)\r\n        {\r\n            $this->user = $user;\r\n\r\n            $this->comment = $comment;\r\n        }\r\n\r\n        public function broadcastOn()\r\n        {\r\n            return new PrivateChannel('comment');\r\n        }\r\n    }<\/pre>\n
In the code above, we created two public properties,\u00a0user\u00a0and\u00a0comment, to hold the data that will be passed to the channel we are broadcasting on. We also created a private channel called\u00a0comment. We are using a private channel so that only authenticated clients can subscribe to the channel.
\nNOTE: Make sure ‘CommentSent’ class implements ‘ShouldBroadcast’ class. When I accidentally missing to implement it, the message can’t be broadcasted at real time properly. I need to refresh the page to see the incoming message on the another login.<\/p>\n
DEFINING THE ROUTES FOR HANDLING OPERATIONS ON A COMMENT
\nWe created a controller for the comment model earlier but we haven\u2019t defined the web routes that will redirect requests to be handled by that controller.<\/p>\n
Open the\u00a0routes\/web.php\u00a0file and include the code below:<\/p>\n
    \/\/ File: .\/routes\/web.php\r\n    Route::get('\/{post}\/comments', 'CommentController@index');\r\n    Route::post('\/{post}\/comments', 'CommentController@store');<\/pre>\n
SETTING UP THE ACTION METHODS IN THE COMMENTCONTROLLER
\nWe need to include two methods in the\u00a0CommentController.php\u00a0file, these methods will be responsible for storing and retrieving methods. In the\u00a0store()\u00a0method, we will also be broadcasting an event when a new comment is created.<\/p>\n
Open the\u00a0CommentController.php\u00a0file and replace its contents with the code below:<\/p>\n
    \/\/ File: .\/app\/Http\/Controllers\/CommentController.php\r\n    <?php \r\n\r\n    namespace App\\Http\\Controllers;\r\n\r\n    use App\\Comment;\r\n    use App\\Events\\CommentSent;\r\n    use App\\Post;\r\n    use Illuminate\\Http\\Request;\r\n\r\n    class CommentController extends Controller\r\n    {\r\n        public function store(Post $post)\r\n        {\r\n            $this->validate(request(), [\r\n                'body' => 'required',\r\n            ]);\r\n\r\n            $user = auth()->user();\r\n\r\n            $comment = Comment::create([\r\n                'user_id' => $user->id,\r\n                'post_id' => $post->id,\r\n                'body' => request('body'),\r\n            ]);\r\n\r\n            broadcast(new CommentSent($user, $comment))->toOthers();\r\n\r\n            return ['status' => 'Message Sent!'];\r\n        }\r\n\r\n        public function index(Post $post)\r\n        {\r\n            return $post->comments()->with('user')->get();\r\n        }\r\n    }<\/pre>\n
In the\u00a0store\u00a0method above, we are validating then creating a new post comment. After the comment has been created, we broadcast the\u00a0CommentSent\u00a0event to other clients so they can update their comments list in realtime.<\/p>\n
In the\u00a0index\u00a0method we just return the comments belonging to a post along with the user that made the comment.<\/p>\n
ADDING A LAYER OF AUTHENTICATION
\nLet\u2019s add a layer of authentication that ensures that only authenticated users can listen on the private\u00a0comment channel we created.<\/p>\n
Add the following code to the\u00a0routes\/channels.php\u00a0file:<\/p>\n
    \/\/ File: .\/routes\/channels.php\r\n    Broadcast::channel('comment', function ($user) {\r\n        return auth()->check();\r\n    });<\/pre>\n
ADDING COMMENTS TO THE FRONTEND
\nIn the second article of this series, we created the view for the single post landing page in the\u00a0single.blade.php\u00a0file, but we didn\u2019t add the comments functionality. We are going to add it now. We will be using Vue to build the comments for this application so the first thing we will do is to include Vue in the frontend of our application.<\/p>\n
Open the master layout template and include Vue to its\u00a0<head>\u00a0tag. Just before the\u00a0<title>\u00a0tag appears in the\u00a0master.blade.php\u00a0file, include this snippet:<\/p>\n
    <!-- File: .\/resources\/views\/layouts\/master.blade.php -->\r\n    <meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\r\n    <script src=\"{{ asset('js\/app.js') }}\" defer><\/script><\/pre>\n
The\u00a0csrf_token()\u00a0is there so that users cannot forge requests in our application. All our requests will pick the randomly generated\u00a0csrf-token\u00a0and use that to make requests.<\/p>\n
Related:\u00a0CSRF in Laravel: how VerifyCsrfToken works and how to prevent attacks<\/a><\/p>\n
Now the next thing we want to do is update the\u00a0resources\/js\/app.js\u00a0file so that it includes a template for the comments view.<\/p>\n
Open the file and replace its contents with the code below:<\/p>\n
    \/\/resources\/js\/app.js\r\n    require('.\/bootstrap');\r\n\r\n    import Vue          from 'vue'\r\n    ...\r\n    import Comments from '.\/components\/Comments'\r\n\r\n    Vue.use(VueRouter)\r\n\r\n    const router = new VueRouter({\r\n        ...\r\n    });\r\n\r\n    const app = new Vue({\r\n        el: '#app',\r\n        components: { Homepage, Comments },\r\n        router,\r\n    });<\/pre>\n
Above we imported the\u00a0Comment\u00a0component and then we added it to the list of components in the applications Vue instance.<\/p>\n
Now create a\u00a0Comments.vue\u00a0file in the\u00a0resources\/js\/components\u00a0directory. This is where all the code for our comment view will go. We will populate this file later on.<\/p>\n
INSTALLING PUSHER AND LARAVEL ECHO
\nFor us to be able to use Pusher and subscribe to events on the frontend, we need to pull in both Pusher and Laravel Echo. We will do so by running this command:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ npm install --save laravel-echo pusher-js\r\nnpm WARN rm not removing \/home\/teddy\/Documents\/works\/laravel\/laravel-cms\/node_modules\/.bin\/regjsparser as it wasn't installed by \/home\/teddy\/Documents\/works\/laravel\/laravel-cms\/node_modules\/regjsparser\r\nnpm WARN rm not removing \/home\/teddy\/Documents\/works\/laravel\/laravel-cms\/node_modules\/.bin\/json5 as it wasn't installed by \/home\/teddy\/Documents\/works\/laravel\/laravel-cms\/node_modules\/json5\r\nnpm WARN rm not removing \/home\/teddy\/Documents\/works\/laravel\/laravel-cms\/node_modules\/.bin\/jsesc as it wasn't installed by \/home\/teddy\/Documents\/works\/laravel\/laravel-cms\/node_modules\/jsesc\r\nnpm WARN rm not removing \/home\/teddy\/Documents\/works\/laravel\/laravel-cms\/node_modules\/.bin\/cssesc as it wasn't installed by \/home\/teddy\/Documents\/works\/laravel\/laravel-cms\/node_modules\/cssesc\r\n\r\n> webpack-cli@3.2.1 postinstall \/home\/teddy\/Documents\/works\/laravel\/laravel-cms\/node_modules\/webpack-cli\r\n> lightercollective\r\n\r\n\r\n     *** Thank you for using webpack-cli! ***\r\n\r\nPlease consider donating to our open collective\r\n     to help us maintain this package.\r\n\r\n  https:\/\/opencollective.com\/webpack\/donate\r\n\r\n                    ***\r\n\r\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\/fsevents):\r\nnpm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {\"os\":\"darwin\",\"arch\":\"any\"} (current: {\"os\":\"linux\",\"arch\":\"x64\"})\r\n\r\n+ laravel-echo@1.5.2\r\n+ pusher-js@4.3.1\r\nadded 87 packages from 71 contributors, removed 51 packages, updated 852 packages and audited 16870 packages in 12.86s\r\nfound 0 vulnerabilities<\/pre>\n
Laravel Echo<\/a>\u00a0is a JavaScript library that makes it easy to subscribe to channels and listen for events broadcast by Laravel.
\nNow let\u2019s configure Laravel Echo to work in our application. In the\u00a0resources\/js\/bootstrap.js\u00a0file, find and uncomment this snippet of code:<\/p>\n
    \/\/resources\/js\/bootstrap.js\r\n    import Echo from 'laravel-echo'\r\n\r\n    window.Pusher = require('pusher-js');\r\n\r\n    window.Echo = new Echo({\r\n         broadcaster: 'pusher',\r\n         key: process.env.MIX_PUSHER_APP_KEY,\r\n         cluster: process.env.MIX_PUSHER_APP_CLUSTER,\r\n         encrypted: true\r\n    });<\/pre>\n
The\u00a0key\u00a0and\u00a0cluster\u00a0will pull the keys from your\u00a0.env\u00a0file so no need to enter them manually again.
\nNow let\u2019s import the\u00a0Comments\u00a0component into the\u00a0single.blade.php\u00a0file and pass along the required the props.<\/p>\n
Open the\u00a0single.blade.php\u00a0file and replace its contents with the code below:<\/p>\n
{{-- File: .\/resources\/views\/single.blade.php --}}\r\n@extends('layouts.master')\r\n\r\n@section('content')\r\n<div class=\"container\">\r\n  <div class=\"row\">\r\n    <div class=\"col-lg-10 mx-auto\">\r\n      <h3 class=\"mt-4\">{{ $post->title }} <span class=\"lead\"> by <a href=\"#\"> {{ $post->user->name }} <\/a><\/span> <\/h3>\r\n      <hr>\r\n      <p>Posted {{ $post->created_at->diffForHumans() }} <\/p>\r\n      <hr>\r\n      <img class=\"img-fluid rounded\" src=\" {!! !empty($post->image) ? '\/uploads\/posts\/' . $post->image :  'http:\/\/placehold.it\/750x300' !!} \" alt=\"\">\r\n      <hr>\r\n      <div>\r\n        <p>{{ $post->body }}<\/p>\r\n        <hr>\r\n        <br>\r\n      <\/div>\r\n\r\n      <!--<div class=\"card my-4\">\r\n        <h5 class=\"card-header\">Leave a Comment:<\/h5>\r\n        <div class=\"card-body\">\r\n          <form>\r\n            <div class=\"form-group\">\r\n              <textarea class=\"form-control\" rows=\"3\"><\/textarea>\r\n            <\/div>\r\n            <button type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\r\n          <\/form>\r\n        <\/div>\r\n      <\/div>-->\r\n\r\n      @auth\r\n      <Comments \r\n        :post-id = '@json($post->id)' \r\n        :user-name = '@json(auth()->user()->name)'>\r\n      <\/Comments>\r\n      @endauth\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n@endsection<\/pre>\n
BUILDING THE COMMENTS VIEW
\nOpen the\u00a0Comments.vue\u00a0file and add the following markup template below:<\/p>\n
    <!-- File: .\/resources\/js\/components\/Comments.vue -->\r\n    <template>\r\n      <div class=\"card my-4\">\r\n        <h5 class=\"card-header\">Leave a Comment:<\/h5>\r\n        <div class=\"card-body\">\r\n          <form>\r\n            <div class=\"form-group\">\r\n              <textarea ref=\"body\" class=\"form-control\" rows=\"3\"><\/textarea>\r\n            <\/div>\r\n            <button type=\"submit\" @click.prevent=\"addComment\" class=\"btn btn-primary\">\r\n              Submit\r\n            <\/button>\r\n          <\/form>\r\n        <\/div>\r\n        <p class=\"border p-3\" v-for=\"comment in comments\">\r\n           <strong>{{ comment.user.name }}<\/strong>: \r\n           <span>{{ comment.body }}<\/span>\r\n        <\/p>\r\n      <\/div>\r\n    <\/template><\/pre>\n
Now, we\u2019ll add a script that defines two methods:<\/p>\n
fetchComments()\u00a0– this will fetch all the existing comments when the component is created.
\naddComment()\u00a0– this will add a new comment by hitting the backend server. It will also trigger a new event that will be broadcast so all clients receive them in realtime.
\nIn the same file, add the following below the closing\u00a0template\u00a0tag:<\/p>\n
<!-- File: .\/resources\/js\/components\/Comments.vue -->\r\n<template>\r\n    ...\r\n<\/template>\r\n<script>\r\nexport default {\r\n    props: {\r\n        userName: {\r\n            type: String,\r\n            required: true\r\n        },\r\n        postId: {\r\n            type: Number,\r\n            required: true\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            comments: []\r\n        };\r\n    },\r\n    created() {\r\n        this.fetchComments();\r\n    },\r\n    methods: {\r\n        fetchComments() {\r\n            axios.get(\"\/\" + this.postId + \"\/comments\").then(response => {\r\n                this.comments = response.data;\r\n            });\r\n        },\r\n        addComment() {\r\n            let body = this.$refs.body.value;\r\n\r\n            axios.post(\"\/\" + this.postId + \"\/comments\", { body }).then(response => {\r\n                this.comments.push({\r\n                    user: {name: this.userName},\r\n                    body: this.$refs.body.value\r\n                });\r\n\r\n                this.$refs.body.value = '';\r\n            });\r\n        }\r\n    },\r\n}\r\n<\/script><\/pre>\n
In the\u00a0created()\u00a0method above, we first made a call to the\u00a0fetchComments()\u00a0method, then we created a listener to the private\u00a0comment\u00a0channel using Laravel Echo. Once this listener is triggered, the\u00a0comments property is updated.<\/p>\n
TESTING THE APPLICATION
\nNow let\u2019s test the application to see if it is working as intended. Before running the application, we need to refresh our database so as to revert any changes. To do this, run the command below in your terminal:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-cms$ php artisan migrate:fresh --seed\r\nDropped all tables successfully.\r\nMigration table created successfully.\r\nMigrating: 2014_10_12_000000_create_users_table\r\nMigrated:  2014_10_12_000000_create_users_table\r\nMigrating: 2014_10_12_100000_create_password_resets_table\r\nMigrated:  2014_10_12_100000_create_password_resets_table\r\nMigrating: 2019_01_21_031440_create_roles_table\r\nMigrated:  2019_01_21_031440_create_roles_table\r\nMigrating: 2019_01_21_032646_create_role_user_table\r\nMigrated:  2019_01_21_032646_create_role_user_table\r\nMigrating: 2019_01_21_083457_create_posts_table\r\nMigrated:  2019_01_21_083457_create_posts_table\r\nMigrating: 2019_01_30_042953_create_comments_table\r\nMigrated:  2019_01_30_042953_create_comments_table\r\nSeeding: RoleTableSeeder\r\nSeeding: UserTableSeeder\r\nSeeding: PostTableSeeder\r\nDatabase seeding completed successfully.<\/pre>\n
Next, let\u2019s build the application so that all the changes will be compiled and included as a part of the JavaScript file. To do this, run the following command on your terminal:<\/p>\n
npm run dev<\/pre>\n
Finally, let\u2019s serve the application using this command:<\/p>\n
php artisan serve<\/pre>\n
To test that our application works visit the application URL\u00a0http:\/\/localhost:8000\u00a0on two separate browser windows, we will log in to our application on each of the windows as a different user.<\/p>\n
We will finally make a comment on the same post on each of the browser windows and check that it updates in realtime on the other window:<\/p>\n
IMPROVEMENTS:
\nCurrently the comments can only be displayed if the user is logged in. But I want to display them also if no user is logged in but it only read the comments and can’t add the comment. So modify resources\/views\/single.blade.php:<\/p>\n
      @auth\r\n      <Comments \r\n        :post-id='@json($post->id)' \r\n        :user-name='@json(auth()->user()->name)'>\r\n      <\/Comments>\r\n      @else\r\n      <Comments \r\n        :post-id='@json($post->id)' \r\n        :user-name='@json(\"\")'>\r\n      <\/Comments>\r\n      @endauth<\/pre>\n
Make user-name variable is empty string. Then modify resources\/js\/components\/Comments.vue on the template and the script:<\/p>\n
<template>\r\n    <div class=\"card my-4\">\r\n        <h5 class=\"card-header\" v-if=\"userName\">\r\n            Leave a comment:\r\n        <\/h5>\r\n        <h5 class=\"card-header\" v-else>\r\n            Comments: (<a href=\"\/login\">Login<\/a> to add comment)\r\n        <\/h5>\r\n        <div class=\"card-body\" v-if=\"userName\">\r\n            ...\r\n        <\/div>\r\n        <p class=\"border p-3\" v-for=\"comment in comments\">\r\n            ...\r\n        <\/p>\r\n    <\/div>\r\n<\/template><\/pre>\n
On the template, show the text input if ‘userName’ is exist. Otherwise just show the login link. Then on the script, get the broadcast only if the ‘userName’ is exist:<\/p>\n
    created() {\r\n        this.fetchComments();\r\n\r\n        if(this.userName){\r\n            Echo.private(\"comment\").listen(\"CommentSent\", e => {\r\n                ...\r\n            });\r\n        }\r\n    },<\/pre>\n
Anyway if the user not logged in, they can’t get the real time message!<\/p>\n
How to show the message counter?
\nModify the template and the script in resources\/js\/components\/Comments.vue. On the script, add a new computed variable ‘commentCount’ in ‘data’. Why not in ‘props’? because the variables in ‘data’ can be changed real time. not only on the page load.<\/p>\n
    data() {\r\n        return {\r\n            comments: [],\r\n            commentCount: 0\r\n        };\r\n    },\r\n    created() {\r\n        ...\r\n\r\n        if(this.userName){\r\n            Echo.private(\"comment\").listen(\"CommentSent\", e => {\r\n                this.comments.push({\r\n                    ...\r\n                });\r\n\r\n                this.commentCount = this.comments.length;\r\n            });\r\n        }\r\n    },\r\n    methods: {\r\n        fetchComments() {\r\n            axios.get(\"\/\" + this.postId + \"\/comments\").then(response => {\r\n                this.comments = response.data;\r\n                this.commentCount = response.data.length;\r\n            });\r\n        },\r\n        addComment() {\r\n            ...\r\n            axios.post(\"\/\" + this.postId + \"\/comments\", { body }).then(response => {\r\n                this.comments.push({\r\n                    ...\r\n                });\r\n\r\n                this.commentCount = this.comments.length;\r\n\r\n                this.$refs.body.value = '';\r\n            });\r\n        }\r\n    },<\/pre>\n
‘commentCount’ is calculated in ‘addComment’ method when the new comment is inserted. Also in ‘fetchComments’ when the page is loaded. To calculate it at real time, also put it in ‘created’. Then show the counter on the template:<\/p>\n
        <h5 class=\"card-header\" v-if=\"userName\">\r\n            There are {{ commentCount }} comments. Leave a comment:\r\n        <\/h5>\r\n        <h5 class=\"card-header\" v-else>\r\n            There are {{ commentCount }} comments. <a href=\"\/login\">Login<\/a> to add comment.\r\n        <\/h5><\/pre>\n
So the message counter would appear on the post page (single page). But how to show the counter on the homepage?
\nSo modify resources\/views\/landing.blade.php to show the counter:<\/p>\n
        ...\r\n        <div class=\"card-body\">\r\n          ...\r\n          <a href=\"\/posts\/{{ $post->id }}\" class=\"btn btn-primary\">Read More &rarr;<\/a>\r\n          <a href=\"\/posts\/{{ $post->id }}#comments\" class=\"btn btn-primary\">Comments ({{ $post->comments()->count() }})<\/a>\r\n        <\/div>\r\n        ...<\/pre>\n
give the bookmark link (#) to jump straight to the comments section. Modify resources\/js\/components\/Comments.vue to add the bookmark ‘comments’:<\/p>\n
<template>\r\n    <div id=\"comments\" class=\"card my-4\">\r\n    ...<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Ref: https:\/\/pusher.com\/tutorials\/cms-laravel-vue-part-1 Install Laravel Installer globally (It’d be better than ‘create project’ and download from the laravel source): teddy@teddy:~\/Documents\/works\/laravel$ composer global require “laravel\/installer” Changed current directory to \/home\/teddy\/.composer .\/composer.json is not writable. teddy@teddy:~\/Documents\/works\/laravel$ sudo composer global require “laravel\/installer” [sudo] password for teddy: Changed current directory to \/home\/teddy\/.composer Do not run Composer as root\/super user! See … Continue reading “Create Laravel CMS”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82,83],"tags":[],"class_list":["post-3395","post","type-post","status-publish","format-standard","hentry","category-laravel-2","category-vue"],"_links":{"self":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/3395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/comments?post=3395"}],"version-history":[{"count":67,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/3395\/revisions"}],"predecessor-version":[{"id":3481,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/3395\/revisions\/3481"}],"wp:attachment":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/media?parent=3395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/categories?post=3395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/tags?post=3395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}