Ref: https:\/\/blog.pusher.com\/ecommerce-laravel-vue-part-1\/<\/p>\n
In this article, we will cover how you can use Laravel to build a simple e-commerce application. After this tutorial, you should know how to use Laravel and Vue to make a web application and understand the basics of making an online store.<\/p>\n
With the advent of the internet, many regular things became faster and easier. One of the things that improved is commerce. Commercial activities carried out on the web are known as e-commerce.<\/p>\n
E-commerce applications make sales of goods and services over the internet possible. If you use the internet often, chances are you have come across one or even used one at some point.<\/p>\n
Introduction
\nAs we mentioned earlier, an e-commerce application makes selling goods and services online very convenient. It provides a listing of the products the seller wishes to sell showing their prices, then a page where you can see all the details of the single product selected, and finally, where to pay for the product and set how you wish to receive it.<\/p>\n
With this in mind, we know that to have a useful e-commerce application, we\u2019d need to develop the following:<\/p>\n
A listing page to view all our products.
\nA single page to view product information.
\nA checkout page where the buyer can enter a delivery address and pay.
\nA simple dashboard for a buyer to see all purchased products, and know if they have shipped.
\nA way for the seller to add products to sell.
\nA way for the seller to see which orders users placed.
\nA way for the seller to show a product has been shipped to the user.
\nA way for the seller to see and update all product information.
\nPlanning the structure of the application
\nFrom our breakdown above, you may see that this application will have two user types:<\/p>\n
Administrator\u00a0\u2013 The owner of the store.
\nBuyer\u00a0\u2013 The person who wants to buy a gift for a friend.
\nYou definitely know that the application will also have products that need to be stored. These products will be ordered and you need a way to store and track those orders. These would form the basis of any e-commerce platform.<\/p>\n
The basic details we need to store in the different parts:<\/p>\n
Table\tFields\r\nUser\tname, email, password, is_admin\r\nProduct\tname, description, price, units, image\r\nOrder\tproduct, user, quantity, address, is_delivered<\/pre>\nThe basic operations we need the app to carry out, and where these are handled, are:<\/p>\n
Operation\t Controller\r\nLogin\t UserController\r\nRegister\t UserController\r\nUser profile\t UserController\r\nView all orders by a single user\tUserController\r\nView product listing\t ProductController\r\nView a single product\t ProductController\r\nEdit a product\t ProductController\r\nAdd a new product\t ProductController\r\nAdd more units to a product\t ProductController\r\nRemove a product\t ProductController\r\nOrder product\t OrderController\r\nView all orders\t OrderController\r\nView a single order information\t OrderController\r\nDeliver an order\t OrderController\r\nDelete an order\t OrderController<\/pre>\nIf you want to go a little deeper, you can consider adding categories, tags, warehouse items, more user types and many other things. However, we will not be considering them for this guide, but you should definitely try it on your own.<\/p>\n
A good way to learn is by practicing. You can exercise your mind by doing the task in the previous paragraph.
\nCreating the application
\nWe are going to use the Laravel CLI to make a new Laravel application. To create a new Laravel application, run the following command:<\/p>\nteddy@teddy:~\/Documents\/works\/laravel$ laravel new laravel-store\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...\r\nPackage manifest generated successfully.\r\nApplication ready! Build something amazing.<\/pre>\nThen you can\u00a0cd\u00a0into the project we just created. The Laravel related commands we run throughout the article needs to be run from the root of the Laravel project.<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel$ cd laravel-store\/\r\nteddy@teddy:~\/Documents\/works\/laravel\/laravel-store$<\/pre>\nCreating the models for the application
\nModels in Laravel provide a very convenient way to interact with the database. They provide methods for all the basic operations you need to run for your database table.<\/p>\nLet\u2019s make the models that will interact with our database and hold business logic. New Laravel installations come with the\u00a0User\u00a0model out of the box, which can be found in\u00a0app directory so let\u2019s make the other two models:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-store$ php artisan make:model Product -mr\r\nModel created successfully.\r\nCreated Migration: 2019_01_31_134200_create_products_table\r\nController created successfully.<\/pre>\nWe have added the\u00a0-mr\u00a0flag to the\u00a0make:model\u00a0command so that it will generate the accompanying migration and controller for the model.<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-store$ php artisan make:model Order -mr\r\nModel created successfully.\r\nCreated Migration: 2019_01_31_134258_create_orders_table\r\nController created successfully.<\/pre>\nNext open the\u00a0app\/User.php\u00a0file and replace the contents with the following:<\/p>\n
\/\/app\/User.php\r\n\r\n namespace App;\r\n\r\n use Illuminate\\Notifications\\Notifiable;\r\n use Illuminate\\Database\\Eloquent\\SoftDeletes;\r\n use Illuminate\\Foundation\\Auth\\User as Authenticatable;\r\n\r\n class User extends Authenticatable\r\n {\r\n use Notifiable, SoftDeletes;\r\n\r\n protected $fillable = [\r\n 'name', 'email', 'password',\r\n ];\r\n\r\n protected $hidden = [\r\n 'password', 'remember_token',\r\n ];\r\n\r\n public function orders()\r\n {\r\n return $this->hasMany(Order::class);\r\n }\r\n }<\/pre>\nWe are using\u00a0SoftDeletes\u00a0to allow us to mark a database record as deleted without actually deleting it completely. This is useful if you want to be able to restore the data.<\/p>\n
We also have an array \u2013\u00a0$fillable, with the column names we want to mass assign on the users table. Mass assignment happens when we call our\u00a0User\u00a0model statically and pass an array to its\u00a0create\u00a0method.<\/p>\n
Open\u00a0app\/Product.php\u00a0file and edit as follows:<\/p>\n
\/\/app\/Product.php\r\n namespace App;\r\n\r\n use Illuminate\\Database\\Eloquent\\Model;\r\n use Illuminate\\Database\\Eloquent\\SoftDeletes;\r\n\r\n class Product extends Model\r\n {\r\n use SoftDeletes;\r\n\r\n protected $fillable = [\r\n 'name', 'price', 'units', 'description', 'image'\r\n ];\r\n\r\n public function orders(){\r\n return $this->hasMany(Order::class);\r\n }\r\n }<\/pre>\nThe\u00a0Product\u00a0model is quite similar to the\u00a0User\u00a0model. It has the\u00a0$fillable\u00a0array and also an\u00a0orders\u00a0method for establishing a relationship with orders placed on the application.<\/p>\n
Now, open\u00a0app\/Order.php\u00a0file and edit as follows:<\/p>\n
\/\/app\/Order.php\r\n namespace App;\r\n\r\n use Illuminate\\Database\\Eloquent\\Model;\r\n use Illuminate\\Database\\Eloquent\\SoftDeletes;\r\n\r\n class Order extends Model\r\n {\r\n use SoftDeletes;\r\n\r\n protected $fillable = [\r\n 'product_id', 'user_id', 'quantity', 'address' \r\n ];\r\n\r\n public function user()\r\n {\r\n return $this->belongsTo(User::class, 'user_id');\r\n }\r\n\r\n public function product()\r\n {\r\n return $this->belongsTo(Product::class, 'product_id');\r\n }\r\n\r\n }<\/pre>\nThe\u00a0Order\u00a0model looks slightly different from the other two but is essentially the same thing. We just established a different kind of relationship \u2013\u00a0belongsTo\u00a0that shows which user made an order or which product was ordered.<\/p>\n
Defining the migrations for the application
\nMigrations are a good way to create and maintain your application\u2019s database. It essentially defines how tables should be created or modified.<\/p>\nMigrations are useful because they help you manage the database tables, columns and keys. You can share migration files instead of raw SQL, and because migration files are run chronologically, they make it easy to work with git, so it\u2019s great for teams.<\/p>\n
Open the\u00a0create_users_table\u00a0migrations file in the\u00a0database\/migrations\u00a0directory and replace the content with the following:<\/p>\n
\/\/database\/migrations\/2014_10_12_000000_create_users_table.php\r\n\r\n use Illuminate\\Support\\Facades\\Schema;\r\n use Illuminate\\Database\\Schema\\Blueprint;\r\n use Illuminate\\Database\\Migrations\\Migration;\r\n\r\n class CreateUsersTable extends Migration\r\n {\r\n public function up()\r\n {\r\n Schema::create('users', function (Blueprint $table) {\r\n $table->increments('id');\r\n $table->string('name');\r\n $table->string('email')->unique();\r\n $table->boolean('is_admin')->default(false);\r\n $table->string('password');\r\n $table->rememberToken();\r\n $table->timestamps();\r\n $table->softDeletes();\r\n });\r\n }\r\n\r\n public function down()\r\n {\r\n Schema::dropIfExists('users');\r\n }\r\n }<\/pre>\nLaravel is quite readable and you can probably figure out what is going on by reading the code. We defined which columns should exist in the table and their attributes.<\/p>\n
There are many methods in the\u00a0Blueprint\u00a0class for migrations. You can\u00a0read more here<\/a>.<\/p>\n
Next, open the\u00a0create_products_table\u00a0migrations file in the\u00a0database\/migrations directory and replace the code with the following:<\/p>\n
\/\/database\/migrations\/2019_01_31_134200_create_products_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 CreateProductsTable 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('products', function (Blueprint $table) {\r\n $table->increments('id');\r\n $table->string('name');\r\n $table->string('description');\r\n \/\/$table->integer('units')->unsigned()->default(0);\r\n $table->unsignedInteger('units')->default(0);\r\n $table->double('price');\r\n $table->string('image');\r\n $table->timestamps();\r\n $table->softDeletes();\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('products');\r\n }\r\n}\r\n<\/pre>\nFinally, open the\u00a0create_orders_table\u00a0migrations file in the\u00a0database\/migrations directory and replace the contents with the following:<\/p>\n
\/\/database\/migrations\/2019_01_31_134258_create_orders_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 CreateOrdersTable 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('orders', function (Blueprint $table) {\r\n $table->increments('id');\r\n $table->unsignedInteger('product_id');\r\n $table->unsignedInteger('user_id');\r\n $table->unsignedInteger('quantity')->default(1);\r\n $table->string('address')->nullable();\r\n $table->boolean('is_delivered')->default(false);\r\n $table->timestamps();\r\n $table->softDeletes();\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('orders');\r\n }\r\n}\r\n<\/pre>\nCreating seeders for the application
\nSeeders are an excellent way to pre-populate our database with dummy data. We are going to use the seeder class to create the user account for our administration.<\/p>\nCreate a seeder class by running the command below:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-store$ php artisan make:seed UsersTableSeeder\r\nSeeder created successfully.<\/pre>\nNow, open the file\u00a0UserTableSeeder.php\u00a0at the\u00a0database\/seeds\u00a0directory and replace the content with the following:<\/p>\n
\/\/database\/seeds\/UsersTableSeeder.php\r\n\r\nuse Illuminate\\Database\\Seeder;\r\nuse App\\User;\r\n\r\nclass UsersTableSeeder 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 = \"Admin\";\r\n $user->email = \"admin@admin.com\";\r\n $user->password = bcrypt('secret');\r\n $user->is_admin = true;\r\n $user->save();\r\n }\r\n}<\/pre>\nThe seeder class above will create a new admin user in the database.<\/p>\n
Recall that when we defined the\u00a0User\u00a0model, we did not include\u00a0is_admin\u00a0in the fillable column. The reason is that we do not want anyone who tries to spoof our application to create an administrator user. This is why we had to create a user instance here so we can access all the columns from the user table.
\nMake another seeder class for our products table:<\/p>\nteddy@teddy:~\/Documents\/works\/laravel\/laravel-store$ php artisan make:seed ProductsTableSeeder\r\nSeeder created successfully.\r\n<\/pre>\nOpen the\u00a0database\/seeds\/ProductTableSeeder.php\u00a0file and replace the contents with the following:<\/p>\n
\/\/database\/seeds\/ProductsTableSeeder.php\r\n\r\nuse Illuminate\\Database\\Seeder;\r\n\r\nclass ProductsTableSeeder 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 $products = [\r\n [\r\n 'name' => \"MEN'S BETTER THAN NAKED & JACKET\",\r\n 'description' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.',\r\n 'units' => 21,\r\n 'price' => 200.10,\r\n 'image' => 'http:\/\/images.thenorthface.com\/is\/image\/TheNorthFace\/236x204_CLR\/mens-better-than-naked-jacket-AVMH_LC9_hero.png',\r\n 'created_at' => new DateTime,\r\n 'updated_at' => null,\r\n ],\r\n [\r\n 'name' => \"WOMEN'S BETTER THAN NAKED\u2122 JACKET\",\r\n 'description' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.',\r\n 'units' => 400,\r\n 'price' => 1600.21,\r\n 'image' => 'http:\/\/images.thenorthface.com\/is\/image\/TheNorthFace\/236x204_CLR\/womens-better-than-naked-jacket-AVKL_NN4_hero.png',\r\n 'created_at' => new DateTime,\r\n 'updated_at' => null,\r\n ],\r\n [\r\n 'name' => \"WOMEN'S SINGLE-TRACK SHOE\",\r\n 'description' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.',\r\n 'units' => 37,\r\n 'price' => 378.00,\r\n 'image' => 'http:\/\/images.thenorthface.com\/is\/image\/TheNorthFace\/236x204_CLR\/womens-single-track-shoe-ALQF_JM3_hero.png',\r\n 'created_at' => new DateTime,\r\n 'updated_at' => null,\r\n ],\r\n [\r\n 'name' => 'Enduro Boa\u00ae Hydration Pack',\r\n 'description' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.',\r\n 'units' => 10,\r\n 'price' => 21.10,\r\n 'image' => 'http:\/\/images.thenorthface.com\/is\/image\/TheNorthFace\/236x204_CLR\/enduro-boa-hydration-pack-AJQZ_JK3_hero.png',\r\n 'created_at' => new DateTime,\r\n 'updated_at' => null,\r\n ]\r\n ];\r\n\r\n DB::table('products')->insert($products);\r\n }\r\n}\r\n<\/pre>\nThe data we populated the database with is from\u00a0here<\/a>\u00a0and is for sample educational purposes. You may require permissions to actually use the images.
\nWhen you are done making the seeder, you need to edit the\u00a0database\/seeds\/DatabaseSeeder.php, which actually invokes the seeders:<\/p>\n\/\/database\/seeds\/DatabaseSeeder.php\r\n\r\nuse Illuminate\\Database\\Seeder;\r\n\r\nclass DatabaseSeeder extends Seeder\r\n{\r\n \/**\r\n * Seed the application's database.\r\n *\r\n * @return void\r\n *\/\r\n public function run()\r\n {\r\n $this->call([\r\n UsersTableSeeder::class,\r\n ProductsTableSeeder::class,\r\n ]);\r\n }\r\n}\r\n<\/pre>\nNow, when we execute the command to seed our database the\u00a0DatabaseSeeder\u00a0class is called and it calls the\u00a0run\u00a0which in turn class the seeder classes we had setup to run.<\/p>\n
You can learn more about seeders\u00a0here<\/a>.
\nCreating the database for our application
\nWe have defined everything we need our database to have. Now, we need to actually define the database itself. We are going to use\u00a0SQLite\u00a0for this guide, but you can any database you like. You should use a non-file based database like\u00a0MySQL\u00a0if in a production environment (NOTE: I’m going to use mysql instead).<\/p>\nIf you want to use sqlite, Create a database file at\u00a0database\/database.sqlite (NOTE: I’m going to use mysql instead). Next, open your\u00a0.env\u00a0file and replace the following lines:<\/p>\n
DB_DATABASE=homestead\r\nDB_USERNAME=username\r\nDB_PASSWORD=password<\/pre>\nwith<\/p>\n
DB_DATABASE=laravel_store\r\nDB_USERNAME=your_db_username\r\nDB_PASSWORD=your_db_password<\/pre>\nThat is all for our database setup. Run the migrations to create the database tables for our application and seed it:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-store$ php artisan migrate --seed\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_31_134200_create_products_table\r\nMigrated: 2019_01_31_134200_create_products_table\r\nMigrating: 2019_01_31_134258_create_orders_table\r\nMigrated: 2019_01_31_134258_create_orders_table\r\nSeeding: UsersTableSeeder\r\nSeeding: ProductsTableSeeder\r\nDatabase seeding completed successfully.<\/pre>\nDefining and securing our endpoints
\nOur application uses Laravel and Vue to create the best application experience. This means we would need to define APIs to provide our Vue components with data.<\/p>\nLaravel, by default, has support for\u00a0web\u00a0and\u00a0API\u00a0routes. Web routes handle routing for dynamically generated pages accessed from a web browser, while API routes handle requests from clients that need a response in mostly\u00a0JSON\u00a0or\u00a0XML\u00a0format.<\/p>\n
Our application will have APIs for most requests. We need to secure our APIs to ensure only authorised users will access it. For this, we will use\u00a0Laravel Passport<\/a>.<\/p>\n
Install passport
\nTo install passport, run the following command:<\/p>\nteddy@teddy:~\/Documents\/works\/laravel\/laravel-store$ composer require laravel\/passport\r\nUsing version ^7.1 for laravel\/passport\r\n.\/composer.json has been updated\r\nLoading composer repositories with package information\r\nUpdating dependencies (including require-dev)\r\nPackage operations: 7 installs, 0 updates, 0 removals\r\n - Installing symfony\/psr-http-message-bridge (v1.1.0): Downloading (connectingDownloading (100%) \r\n - Installing phpseclib\/phpseclib (2.0.14): Downloading (100%) \r\n - Installing defuse\/php-encryption (v2.2.1): Downloading (100%) \r\n - Installing league\/event (2.2.0): Downloading (100%) \r\n - Installing league\/oauth2-server (7.3.2): Downloading (100%) \r\n - Installing firebase\/php-jwt (v5.0.0): Loading from cache\r\n - Installing laravel\/passport (v7.1.0): Downloading (100%) \r\nsymfony\/psr-http-message-bridge suggests installing psr\/http-factory-implementation (To use the PSR-17 factory)\r\nphpseclib\/phpseclib suggests installing ext-libsodium (SSH2\/SFTP can make use of some algorithms provided by the libsodium-php extension.)\r\nphpseclib\/phpseclib suggests installing ext-gmp (Install the GMP (GNU Multiple Precision) extension in order to speed up arbitrary precision integer arithmetic operations.)\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\/passport\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>\nLaravel Passport comes with it\u2019s own migrations, run the migrations using the following command:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-store$ php artisan migrate\r\nMigrating: 2016_06_01_000001_create_oauth_auth_codes_table\r\nMigrated: 2016_06_01_000001_create_oauth_auth_codes_table\r\nMigrating: 2016_06_01_000002_create_oauth_access_tokens_table\r\nMigrated: 2016_06_01_000002_create_oauth_access_tokens_table\r\nMigrating: 2016_06_01_000003_create_oauth_refresh_tokens_table\r\nMigrated: 2016_06_01_000003_create_oauth_refresh_tokens_table\r\nMigrating: 2016_06_01_000004_create_oauth_clients_table\r\nMigrated: 2016_06_01_000004_create_oauth_clients_table\r\nMigrating: 2016_06_01_000005_create_oauth_personal_access_clients_table\r\nMigrated: 2016_06_01_000005_create_oauth_personal_access_clients_table<\/pre>\nNext, run the passport installation command to create the necessary keys for securing your application:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-store$ php artisan passport:install\r\nEncryption keys generated successfully.\r\nPersonal access client created successfully.\r\nClient ID: 1\r\nClient secret: 5B2jIrNosAkK2OmnqSKyDNshFjdrYMybEXVsbULe\r\nPassword grant client created successfully.\r\nClient ID: 2\r\nClient secret: OTm1dGfx2leOKISA7eRlLsJdx9DtuXidSqyF3CXS<\/pre>\nThe above command will create encryption keys needed to generate secure access tokens plus \u201cpersonal access\u201d and \u201cpassword grant\u201d clients, which will be used to generate access tokens.<\/p>\n
After the installation, you need to\u00a0use\u00a0the Laravel Passport\u00a0HasApiToken\u00a0trait in the\u00a0User model. This trait will provide a few helper methods to your model, which allow you to inspect the authenticated user\u2019s token and scopes.<\/p>\n
Open the\u00a0app\/User.php\u00a0file and edit as follows:<\/p>\n
\/\/app\/User.php\r\n\r\nnamespace App;\r\n\r\n...\r\nuse Laravel\\Passport\\HasApiTokens;\r\n\r\nclass User extends Authenticatable\r\n{\r\n use Notifiable, SoftDeletes, HasApiTokens;\r\n ...\r\n}<\/pre>\nNext, call the\u00a0Passport::routes\u00a0method within the\u00a0boot\u00a0method of your\u00a0AuthServiceProvider. This method will register the routes necessary to issue the tokens your app will need:<\/p>\n
In the\u00a0app\/Providers\/AuthServiceProvider.php\u00a0file update as follows:<\/p>\n
\/\/app\/Providers\/AuthServiceProvider.php\r\n\r\nnamespace App\\Providers;\r\n\r\n...\r\nuse Laravel\\Passport\\Passport;\r\n\r\nclass AuthServiceProvider extends ServiceProvider\r\n{\r\n ...\r\n\r\n \/**\r\n * Register any authentication \/ authorization services.\r\n *\r\n * @return void\r\n *\/\r\n public function boot()\r\n {\r\n $this->registerPolicies();\r\n\r\n Passport::routes();\r\n }\r\n}\r\n<\/pre>\nFinally, in your\u00a0config\/auth.php\u00a0configuration file, you should set the\u00a0driver\u00a0option of the\u00a0api\u00a0authentication guard to\u00a0passport.<\/p>\n
\/\/config\/auth.php\r\n [...]\r\n\r\n 'guards' => [\r\n\r\n [...]\r\n\r\n 'api' => [\r\n 'driver' => 'passport',\r\n 'provider' => 'users',\r\n ],\r\n ],\r\n\r\n [...]<\/pre>\nThat\u2019s all for Laravel Passport.<\/p>\n
Conclusion
\nSo far, we have set up our application by defining all the models we need. We have also added migrations for our database, and lastly, we added Laravel Passport for handling authorization for our APIs.<\/p>\nThe next thing we will look at is implementing the controllers to handle the different kinds of request we are going to make to the application and the views to interact with the application. Continue to\u00a0part two.<\/p>\n
In the\u00a0previous chapter, we set up our application\u2019s migrations and models, and installed Laravel Passport for authentication. We also planned what the application will look like. In this chapter, we will implement the controllers and handle all requests to our application.<\/p>\n
Prerequisites
\nTo continue with this part, please go through the\u00a0first part\u00a0of the series first and make sure you have all the requirements from that part.<\/p>\nBuilding our controllers
\nIn the first chapter, we already defined our models and their accompanying controllers. These controllers reside in the\u00a0app\/Http\/Controllers\u00a0directory. The\u00a0User\u00a0model, however, does not have an accompanying controller, so we are going to create that first. Run the following command:<\/p>\nteddy@teddy:~\/Documents\/works\/laravel\/laravel-store$ php artisan make:controller UserController\r\nController created successfully.<\/pre>\nNow, open the created controller file\u00a0app\/Http\/Controllers\/UserController.php\u00a0and replace the contents with the following:<\/p>\n
\/\/app\/Http\/Controllers\/UserController.php\r\n\r\nnamespace App\\Http\\Controllers;\r\n\r\nuse Illuminate\\Http\\Request;\r\nuse App\\User;\r\nuse Illuminate\\Support\\Facades\\Auth;\r\nuse Illuminate\\Support\\Facades\\Validator;\r\n\r\nclass UserController extends Controller\r\n{\r\n public function index()\r\n {\r\n return response()->json(User::with(['orders'])->get());\r\n }\r\n\r\n public function login(Request $request)\r\n {\r\n $status = 401;\r\n $response = ['error' => 'Unauthorized'];\r\n\r\n if (Auth::attempt($request->only(['email', 'password']))) {\r\n $status = 200;\r\n $response = [\r\n 'user' => Auth::user(),\r\n 'token' => Auth::user()->createToken('myStore')->accessToken,\r\n ];\r\n }\r\n\r\n return response()->json($response, $status);\r\n }\r\n\r\n public function register(Request $request)\r\n {\r\n $validator = Validator::make($request->all(), [\r\n 'name' => 'required|max:50',\r\n 'email' => 'required|email',\r\n 'password' => 'required|min:6',\r\n 'c_password' => 'required|same:password',\r\n ]);\r\n\r\n if ($validator->fails()) {\r\n return response()->json(['error' => $validator->errors()], 401);\r\n }\r\n\r\n $data = $request->only(['name', 'email', 'password']);\r\n $data['password'] = bcrypt($data['password']);\r\n\r\n $user = User::create($data);\r\n $user->is_admin = 0;\r\n\r\n return response()->json([\r\n 'user' => $user,\r\n 'token' => $user->createToken('myStore')->accessToken,\r\n ]);\r\n }\r\n\r\n public function show(User $user)\r\n {\r\n return response()->json($user);\r\n }\r\n\r\n public function showOrders(User $user)\r\n {\r\n return response()->json($user->orders()->with(['product'])->get());\r\n }\r\n}\r\n<\/pre>\nAbove we defined some class methods:<\/p>\n
index()\u00a0\u2013 returns all users with their orders.
\nlogin()\u00a0\u2013 authenticates a user and generates an access token for that user. The\u00a0createToken\u00a0method is one of the methods Laravel Passport adds to our user model.
\nregister()\u00a0\u2013 creates a user account, authenticates it and generates an access token for it.
\nshow()\u00a0\u2013 gets the details of a user and returns them.
\nshowOrders()\u00a0\u2013 gets all the orders of a user and returns them.
\nWe used Laravel\u2019s\u00a0Route-Model Binding<\/a>\u00a0to automatically inject our model instance into the controller. The only caveat is that the variable name used for the binding has to be the same as the one defined in the route as well.<\/p>\nNext, open the\u00a0app\/Http\/Controllers\/ProductController.php\u00a0file and replace the contents with the following:<\/p>\n
\/\/app\/Http\/Controllers\/ProductController.php\r\n\r\n namespace App\\Http\\Controllers;\r\n\r\n use App\\Product;\r\n use Illuminate\\Http\\Request;\r\n\r\n class ProductController extends Controller\r\n {\r\n public function index()\r\n {\r\n return response()->json(Product::all(),200);\r\n }\r\n\r\n public function store(Request $request)\r\n {\r\n $product = Product::create([\r\n 'name' => $request->name,\r\n 'description' => $request->description,\r\n 'units' => $request->units,\r\n 'price' => $request->price,\r\n 'image' => $request->image\r\n ]);\r\n\r\n return response()->json([\r\n 'status' => (bool) $product,\r\n 'data' => $product,\r\n 'message' => $product ? 'Product Created!' : 'Error Creating Product'\r\n ]);\r\n }\r\n\r\n public function show(Product $product)\r\n {\r\n return response()->json($product,200); \r\n }\r\n\r\n public function uploadFile(Request $request)\r\n {\r\n if($request->hasFile('image')){\r\n $name = time().\"_\".$request->file('image')->getClientOriginalName();\r\n $request->file('image')->move(public_path('images'), $name);\r\n }\r\n return response()->json(asset(\"images\/$name\"),201);\r\n }\r\n\r\n public function update(Request $request, Product $product)\r\n {\r\n $status = $product->update(\r\n $request->only(['name', 'description', 'units', 'price', 'image'])\r\n );\r\n\r\n return response()->json([\r\n 'status' => $status,\r\n 'message' => $status ? 'Product Updated!' : 'Error Updating Product'\r\n ]);\r\n }\r\n\r\n public function updateUnits(Request $request, Product $product)\r\n {\r\n $product->units = $product->units + $request->get('units');\r\n $status = $product->save();\r\n\r\n return response()->json([\r\n 'status' => $status,\r\n 'message' => $status ? 'Units Added!' : 'Error Adding Product Units'\r\n ]);\r\n }\r\n\r\n public function destroy(Product $product)\r\n {\r\n $status = $product->delete();\r\n\r\n return response()->json([\r\n 'status' => $status,\r\n 'message' => $status ? 'Product Deleted!' : 'Error Deleting Product'\r\n ]);\r\n }\r\n }<\/pre>\nIn the\u00a0ProductController\u00a0above we defined seven methods:<\/p>\n
index()\u00a0\u2013 fetches and returns all the product records.
\nstore()\u00a0\u2013 creates a product record.
\nshow()\u00a0\u2013 fetches and returns a single product.
\nuploadFile()\u00a0\u2013 uploads the image for a product we created and returns the url for the product.
\nupdate()\u00a0\u2013 updates the product record.
\nupdateUnits()\u00a0\u2013 adds new units to a product.
\ndelete()\u00a0\u2013 deletes a product.
\nNext, open the\u00a0app\/Http\/Controllers\/OrderController.php\u00a0file and replace the content with the following:<\/p>\n\/\/app\/Http\/Controllers\/OrderController.php\r\n\r\n namespace App\\Http\\Controllers;\r\n\r\n use App\\Order;\r\n use Illuminate\\Support\\Facades\\Auth;\r\n use Illuminate\\Http\\Request;\r\n\r\n class OrderController extends Controller\r\n {\r\n public function index()\r\n {\r\n return response()->json(Order::with(['product'])->get(),200);\r\n }\r\n\r\n public function deliverOrder(Order $order)\r\n {\r\n $order->is_delivered = true;\r\n $status = $order->save();\r\n\r\n return response()->json([\r\n 'status' => $status,\r\n 'data' => $order,\r\n 'message' => $status ? 'Order Delivered!' : 'Error Delivering Order'\r\n ]);\r\n }\r\n\r\n public function store(Request $request)\r\n {\r\n $order = Order::create([\r\n 'product_id' => $request->product_id,\r\n 'user_id' => Auth::id(),\r\n 'quantity' => $request->quantity,\r\n 'address' => $request->address\r\n ]);\r\n\r\n return response()->json([\r\n 'status' => (bool) $order,\r\n 'data' => $order,\r\n 'message' => $order ? 'Order Created!' : 'Error Creating Order'\r\n ]);\r\n }\r\n\r\n public function show(Order $order)\r\n {\r\n return response()->json($order,200);\r\n }\r\n\r\n public function update(Request $request, Order $order)\r\n {\r\n $status = $order->update(\r\n $request->only(['quantity'])\r\n );\r\n\r\n return response()->json([\r\n 'status' => $status,\r\n 'message' => $status ? 'Order Updated!' : 'Error Updating Order'\r\n ]);\r\n }\r\n\r\n public function destroy(Order $order)\r\n {\r\n $status = $order->delete();\r\n\r\n return response()->json([\r\n 'status' => $status,\r\n 'message' => $status ? 'Order Deleted!' : 'Error Deleting Order'\r\n ]);\r\n }\r\n }<\/pre>\nIn the\u00a0OrderController\u00a0above we have six methods:<\/p>\n
index()\u00a0\u2013 fetches and returns all the orders.
\ndeliverOrder()\u00a0\u2013 marks an order as delivered.
\nstore()\u00a0\u2013 creates an order.
\nshow()\u00a0\u2013 fetches and returns a single order.
\nupdate()\u00a0\u2013 updates the order.
\ndestroy()\u00a0\u2013 deletes an order.
\nThat\u2019s it for our controllers. We have created the controller according to the specifications we laid out in the first part. Next thing we need to do is define our API routes.<\/p>\nDefining our application\u2019s routes
\nNow that we have fully defined all the requests we would like to make to our application, let\u2019s expose the APIs for making these requests. Open\u00a0routes\/api.php\u00a0file and replace the content with the following:<\/p>\n\/\/routes\/api.php\r\n\r\n use Illuminate\\Http\\Request;\r\n\r\n Route::post('login', 'UserController@login');\r\n Route::post('register', 'UserController@register');\r\n Route::get('\/products', 'ProductController@index');\r\n Route::post('\/upload-file', 'ProductController@uploadFile');\r\n Route::get('\/products\/{product}', 'ProductController@show');\r\n\r\n Route::group(['middleware' => 'auth:api'], function(){\r\n Route::get('\/users','UserController@index');\r\n Route::get('users\/{user}','UserController@show');\r\n Route::patch('users\/{user}','UserController@update');\r\n Route::get('users\/{user}\/orders','UserController@showOrders');\r\n Route::patch('products\/{product}\/units\/add','ProductController@updateUnits');\r\n Route::patch('orders\/{order}\/deliver','OrderController@deliverOrder');\r\n Route::resource('\/orders', 'OrderController');\r\n Route::resource('\/products', 'ProductController')->except(['index','show']);\r\n });<\/pre>\nPutting our route definitions in the\u00a0routes\/api.php\u00a0file will tell Laravel they are API routes so Laravel will prefix the routes with a\u00a0\/api\u00a0in the URL to differentiate them from web-routes.<\/p>\n
Adding the\u00a0auth:api\u00a0middleware ensures any calls to the routes in that group must be authenticated.<\/p>\n
A thing to note is, using the\u00a0resource\u00a0method on the\u00a0Route\u00a0class helps us create some additional routes under the hood without us having to create them manually. Read\u00a0about resource controllers and routes here<\/a>.<\/p>\n
To see the full route list, run the following command:\u00a0$\u00a0php artisan route:list<\/p>\n
Since we will build the front end of this application in Vue, we need to define the\u00a0web\u00a0routes for it. Open the\u00a0routes\/web.php\u00a0file and replace the contents with the following:<\/p>\n
\/\/routes\/web.php\r\n\r\n Route::get('\/{any}', function(){\r\n return view('landing');\r\n })->where('any', '.*');<\/pre>\nThis will route every web request to a single entry point, which will be the entry for your Vue application.<\/p>\n
Setting up Vue for the frontend
\nVue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable \u2013\u00a0vuejs.org
\nLaravel comes with Vue bundled out of the box, so all we need to do to get Vue is to install the node packages. Run the following command:<\/p>\nteddy@teddy:~\/Documents\/works\/laravel\/laravel-store$ npm install\r\n\r\n> webpack-cli@3.2.1 postinstall \/home\/teddy\/Documents\/works\/laravel\/laravel-store\/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 notice created a lockfile as package-lock.json. You should commit this file.\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\nadded 943 packages from 442 contributors and audited 16939 packages in 14.858s\r\nfound 0 vulnerabilities<\/pre>\nNext, we will need\u00a0VueRouter\u00a0to handle the routing between the different components of our Vue application. To install VueRouter run the command below:<\/p>\n
teddy@teddy:~\/Documents\/works\/laravel\/laravel-store$ npm i vue-router\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+ vue-router@3.0.2\r\nadded 1 package from 1 contributor and audited 16940 packages in 5.414s\r\nfound 0 vulnerabilities\r\n\r\n\r\n\r\n \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\r\n \u2502 \u2502\r\n \u2502 New minor version of npm available! 6.5.0 \u2192 6.7.0 \u2502\r\n \u2502 Changelog: https:\/\/github.com\/npm\/cli\/releases\/tag\/v6.7.0 \u2502\r\n \u2502 Run npm install -g npm to update! \u2502\r\n \u2502 \u2502\r\n \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\r\n<\/pre>\nteddy@teddy:~\/Documents\/works\/laravel\/laravel-store$ npm i -g npm\r\n\/home\/teddy\/.nvm\/versions\/node\/v8.9.4\/bin\/npm -> \/home\/teddy\/.nvm\/versions\/node\/v8.9.4\/lib\/node_modules\/npm\/bin\/npm-cli.js\r\n\/home\/teddy\/.nvm\/versions\/node\/v8.9.4\/bin\/npx -> \/home\/teddy\/.nvm\/versions\/node\/v8.9.4\/lib\/node_modules\/npm\/bin\/npx-cli.js\r\n+ npm@6.7.0\r\nadded 50 packages from 7 contributors, removed 13 packages and updated 31 packages in 5.253s\r\nteddy@teddy:~\/Documents\/works\/laravel\/laravel-store$ npm --v\r\n6.7.0\r\n<\/pre>\nNext, let\u2019s make the\u00a0landing\u00a0view file, which would mount our Vue application. Create the file\u00a0resources\/views\/landing.blade.php\u00a0and add the following code:<\/p>\n
<!-- resources\/views\/landing.blade.php -->\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <meta name=\"csrf-token\" content=\"{{csrf_token()}}\">\r\n <title>My Store<\/title>\r\n <link href=\" {{ mix('css\/app.css') }}\" rel=\"stylesheet\">\r\n<\/head>\r\n<body>\r\n <div id=\"app\">\r\n <app><\/app>\r\n <\/div>\r\n <script src=\"{{ mix('js\/bootstrap.js') }}\"><\/script>\r\n <script src=\"{{ mix('js\/app.js') }}\"><\/script>\r\n<\/body>\r\n<\/html><\/pre>\nIn the code above, we have the HTML for our application. If you look closely, you can see the\u00a0app\u00a0tag. This will be the entry point to our Vue application and where the components will be loaded.<\/p>\n
Since we will use\u00a0app.js\u00a0to set up our\u00a0VueRouter, we still need to have\u00a0Bootstrap<\/a>\u00a0and\u00a0Axios<\/a>\u00a0compiled. The import for Bootstrap and Axios is in the\u00a0bootstrap.js\u00a0file so we need to compile that.<\/p>\n
Edit the\u00a0webpack.mix.js\u00a0file so it compiles all assets:<\/p>\n
<!-- webpack.mix.js -->\r\n [...]\r\n\r\n mix.js('resources\/assets\/js\/app.js', 'public\/js')\r\n .js('resources\/assets\/js\/bootstrap.js', 'public\/js')\r\n .sass('resources\/assets\/sass\/app.scss', 'public\/css');<\/pre>\nthe\u00a0webpack.mix.js\u00a0file holds the configuration files for\u00a0laravel-mix, which provides a wrapper around Webpack. It lets us take advantage of Webpack\u2019s amazing asset compilation abilities without having to write Webpack configurations by ourselves. You can learn more about Webpack\u00a0here<\/a>.
\nSet up the homepage for the Vue application. Create a new file,\u00a0resources\/js\/components\/Home.vue, and add the following code to the file:<\/p>\n<!-- resources\/js\/components\/Home.vue -->\r\n<template>\r\n <div>\r\n <div class=\"container-fluid hero-section d-flex align-content-center justify-content-center flex-wrap ml-auto\">\r\n <h2 class=\"title\">Welcome to My Store<\/h2>\r\n <\/div>\r\n <div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <div class=\"row\">\r\n <div class=\"col-md-4 product-box\" v-for=\"(product,index) in products\" @key=\"index\">\r\n <router-link :to=\"{ path: '\/products\/'+product.id}\">\r\n <img :src=\"product.image\" :alt=\"product.name\">\r\n <h5><span v-html=\"product.name\"><\/span>\r\n <span class=\"small-text text-muted float-right\">$ {{product.price}}<\/span>\r\n <\/h5>\r\n <button class=\"col-md-4 btn btn-sm btn-primary float-right\">Buy Now<\/button>\r\n <\/router-link>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/template>\r\n\r\n<script>\r\nexport default {\r\n data() {\r\n return {\r\n products : []\r\n }\r\n },\r\n mounted() {\r\n axios.get(\"api\/products\").then(response => {\r\n this.products = response.data;\r\n });\r\n }\r\n}\r\n<\/script><\/pre>\nThe code above within the opening and closing\u00a0template\u00a0tag we have the HTML of our Vue component. In there we loop through the contents of\u00a0products\u00a0and for each product we display the\u00a0image,\u00a0name,\u00a0id,\u00a0price\u00a0and\u00a0units\u00a0available. We use the\u00a0v-html\u00a0attribute to render raw HTML, which makes it easy for us to use special characters in the product name.<\/p>\n
In the\u00a0script\u00a0tag, we defined the\u00a0data(), which holds all the variables we can use in our template. We also defined the\u00a0mounted()\u00a0method, which is called after our component is loaded. In this mounted method, we load our products from the API then set the\u00a0products variable so that our template would be updated with API data.<\/p>\n
In the same file, append the code below to the bottom:<\/p>\n
<style scoped>\r\n.small-text {\r\n font-size: 14px;\r\n}\r\n.product-box {\r\n border: 1px solid #cccccc;\r\n padding: 10px 15px;\r\n}\r\n.hero-section {\r\n height: 30vh;\r\n background: #ababab;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n margin-top: -20px;\r\n}\r\n.title {\r\n font-size: 60px;\r\n color: #ffffff;\r\n}\r\n<\/style><\/pre>\nIn the code above, we have defined the\u00a0style\u00a0to use with the welcome component.<\/p>\n
According to the\u00a0Vue documentation<\/a>: When a\u00a0<style>\u00a0tag has the\u00a0scoped\u00a0attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in the Shadow DOM. It comes with some caveats but doesn\u2019t require any polyfills.
\nNext create another file,\u00a0resources\/js\/components\/App.vue. This will be the application container where all other components will be loaded. In this file, add the following code:<\/p>\n<!-- resources\/js\/components\/App.vue -->\r\n<template>\r\n <div>\r\n <nav class=\"navbar navbar-expand-md navbar-light navbar-laravel\">\r\n <div class=\"container\">\r\n <router-link :to=\"{name: 'home'}\" class=\"navbar-brand\">My Store<\/router-link>\r\n <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <span class=\"navbar-toggler-icon\"><\/span>\r\n <\/button>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\r\n <!-- Left Side Of Navbar -->\r\n <ul class=\"navbar-nav mr-auto\"><\/ul>\r\n <!-- Right Side Of Navbar -->\r\n <ul class=\"navbar-nav ml-auto\">\r\n <router-link :to=\"{ name: 'login' }\" class=\"nav-link\" v-if=\"!isLoggedIn\">Login<\/router-link>\r\n <router-link :to=\"{ name: 'register' }\" class=\"nav-link\" v-if=\"!isLoggedIn\">Register<\/router-link>\r\n <span v-if=\"isLoggedIn\">\r\n <router-link :to=\"{ name: 'userboard' }\" class=\"nav-link\" v-if=\"user_type == 0\"> Hi, {{name}}<\/router-link>\r\n <router-link :to=\"{ name: 'admin' }\" class=\"nav-link\" v-if=\"user_type == 1\"> Hi, {{name}}<\/router-link>\r\n <\/span>\r\n <li class=\"nav-link\" v-if=\"isLoggedIn\" @click=\"logout\"> Logout<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n <main class=\"py-4\">\r\n <router-view @loggedIn=\"change\"><\/router-view>\r\n <\/main>\r\n <\/div>\r\n<\/template><\/pre>\nIn the Vue template above we used some Vue specific tags like\u00a0router-link, which helps us generate links for routing to pages defined in our router. We also have the\u00a0router-view, which is where all the child component pages will be loaded.<\/p>\n
Next, below the closing\u00a0template\u00a0tag, add the following code:<\/p>\n
<script>\r\nexport default {\r\n data() {\r\n return {\r\n name: null,\r\n user_type: 0,\r\n isLoggedIn: localStorage.getItem('myStore.jwt') != null\r\n }\r\n },\r\n mounted() {\r\n this.setDefaults();\r\n },\r\n methods : {\r\n setDefaults() {\r\n if(this.isLoggedIn){\r\n let user = JSON.parse(localStorage.getItem('myStore.user'));\r\n this.name = user.name;\r\n this.user_type = user.is_admin;\r\n }\r\n },\r\n change() {\r\n this.isLoggedIn = localStorage.getItem('myStore.jwt') != null;\r\n this.setDefaults();\r\n },\r\n logout() {\r\n localStorage.removeItem('myStore.jwt');\r\n localStorage.removeItem('myStore.user');\r\n this.change();\r\n this.$router.push('\/');\r\n }\r\n }\r\n}\r\n<\/script><\/pre>\nIn the script definition we have the\u00a0methods\u00a0property and in there we have three methods defined:<\/p>\n
setDefaults()\u00a0\u2013 sets the name of the user when the user is logged in as well as the type of user logged in.
\nchange()\u2013 checks the current login status anytime it is called and calls the\u00a0setDefaults method.
\nlogout()\u00a0\u2013 logs the user out of the application and routes the user to the homepage.
\nIn our\u00a0router-view\u00a0component, we listen for an event\u00a0loggedIn\u00a0which calls the\u00a0change method. This event is fired by our component anytime we log in. It is a way of telling the\u00a0App component to update itself when a user logs in.<\/p>\nNext create the following files in the\u00a0resources\/js\/components\u00a0directory:<\/p>\n
Admin.vue
\nCheckout.vue
\nConfirmation.vue
\nLogin.vue
\nRegister.vue
\nSingleProduct.vue
\nUserBoard.vue
\nThese files would hold all the pages myStore\u00a0would have. They need to be created prior to setting up VueRouter, so that it won\u2019t throw an error.<\/p>\nTo set up the routing for our Vue single page app, open your\u00a0resources\/js\/app.js\u00a0file and replace the contents with the following code:<\/p>\n
\/\/resources\/js\/app.js\r\n...\r\nimport Vue from 'vue'\r\nimport VueRouter from 'vue-router'\r\n\r\nVue.use(VueRouter)\r\n\r\nimport App from '.\/components\/App'\r\nimport Home from '.\/components\/Home'\r\nimport Login from '.\/components\/Login'\r\nimport Register from '.\/components\/Register'\r\nimport SingleProduct from '.\/components\/SingleProduct'\r\nimport Checkout from '.\/components\/Checkout'\r\nimport Confirmation from '.\/components\/Confirmation'\r\nimport UserBoard from '.\/components\/UserBoard'\r\nimport Admin from '.\/components\/Admin'\r\n\r\nconst router = new VueRouter({\r\n mode: 'history',\r\n routes: [\r\n {\r\n path: '\/',\r\n name: 'home',\r\n component: Home\r\n },\r\n {\r\n path: '\/login',\r\n name: 'login',\r\n component: Login\r\n },\r\n {\r\n path: '\/register',\r\n name: 'register',\r\n component: Register\r\n },\r\n {\r\n path: '\/products\/:id',\r\n name: 'single-products',\r\n component: SingleProduct\r\n },\r\n {\r\n path: '\/confirmation',\r\n name: 'confirmation',\r\n component: Confirmation\r\n },\r\n {\r\n path: '\/checkout',\r\n name: 'checkout',\r\n component: Checkout,\r\n props: (route) => ({ pid: route.query.pid })\r\n },\r\n {\r\n path: '\/dashboard',\r\n name: 'userboard',\r\n component: UserBoard,\r\n meta: {\r\n requiresAuth: true,\r\n is_user: true\r\n }\r\n },\r\n {\r\n path: '\/admin\/:page',\r\n name: 'admin-pages',\r\n component: Admin,\r\n meta: {\r\n requiresAuth: true,\r\n is_admin: true\r\n }\r\n },\r\n {\r\n path: '\/admin',\r\n name: 'admin',\r\n component: Admin,\r\n meta: {\r\n requiresAuth: true,\r\n is_admin: true\r\n }\r\n },\r\n ],\r\n})\r\n\r\nrouter.beforeEach((to, from, next) => {\r\n if (to.matched.some(record => record.meta.requiresAuth)) {\r\n if (localStorage.getItem('myStore.jwt') == null) {\r\n next({\r\n path: '\/login',\r\n params: { nextUrl: to.fullPath }\r\n })\r\n } else {\r\n let user = JSON.parse(localStorage.getItem('myStore.user'))\r\n if (to.matched.some(record => record.meta.is_admin)) {\r\n if (user.is_admin == 1) {\r\n next()\r\n }\r\n else {\r\n next({ name: 'userboard' })\r\n }\r\n }\r\n else if (to.matched.some(record => record.meta.is_user)) {\r\n if (user.is_admin == 0) {\r\n next()\r\n }\r\n else {\r\n next({ name: 'admin' })\r\n }\r\n }\r\n next()\r\n }\r\n } else {\r\n next()\r\n }\r\n})\r\n...<\/pre>\nAbove, we have imported the\u00a0VueRouter\u00a0and we added it to our Vue application. We defined routes for our application and then registered it to the Vue instance so it is available to all Vue components.<\/p>\n
Each of the route objects has a\u00a0name, which we will use to identify and invoke that route. It also has a\u00a0path, which you can visit directly in your browser. Lastly, it has a\u00a0component, which is mounted when you visit the route.<\/p>\n
On some routes, we defined\u00a0meta, which contains variables we would like to check when we access the route. In our case, we are checking if the route requires authentication and if it is restricted to administrators or regular users only.<\/p>\n
We set up the\u00a0beforeEach\u00a0middleware on the\u00a0router\u00a0that checks each route before going to it. The method takes these variables:<\/p>\n
to\u00a0\u2013 the route you want to move to.
\nfrom\u00a0\u2013 the current route you are moving away from.
\nnext\u00a0\u2013 the method that finally moves to a defined route. When called without a route passed, it continues the navigation. If given a route, it goes to that route.
\nWe use\u00a0beforeEach\u00a0to check the routes that require authentication before you can access them. For those routes, we check if the user is authenticated. If the user isn\u2019t, we send them to the login page. If the user is authenticated, we check if the route is restricted to admin users or regular users. We redirect each user to the right place based on which access level they have.<\/p>\nNow add the following lines to the end of the\u00a0app.js\u00a0file<\/p>\n
const app = new Vue({\r\n el: '#app',\r\n components: { App },\r\n router,\r\n });<\/pre>\nThis instantiates the Vue application. In this global instance, we mount the\u00a0App\u00a0component only because the\u00a0VueRouter\u00a0needs it to switch between all the other components.<\/p>\n
Now, we are ready to start making the other views for our application.<\/p>\n
Conclusion
\nIn this part, we implemented the controller logic that handles all the requests to our application and defined all the routes the application will use. We also set up Vue and VueRouter to prepare our application for building the core frontend.<\/p>\nIn the\u00a0next chapter\u00a0of this guide, we are going to build the core frontend of the application and consume the APIs. See you in the next part.<\/p>\n
Making the authentication pages
\nIn the previous part, we created all the view files for our Vue application, although we did not add content to all of them. Let\u2019s start with the login and register pages.<\/p>\nOpen the\u00a0resources\/js\/components\/Login.vue\u00a0file and paste in the following code:<\/p>\n
<!-- resources\/js\/components\/Login.vue -->\r\n<template>\r\n <div class=\"container\">\r\n <div class=\"row justify-content-center\">\r\n <div class=\"col-md-8\">\r\n <div class=\"card card-default\">\r\n <div class=\"card-header\">Login<\/div>\r\n <div class=\"card-body\">\r\n <form>\r\n <div class=\"form-group row\">\r\n <label for=\"email\" class=\"col-sm-4 col-form-label text-md-right\">E-Mail Address<\/label>\r\n <div class=\"col-md-6\">\r\n <input id=\"email\" type=\"email\" class=\"form-control\" v-model=\"email\" required autofocus>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group row\">\r\n <label for=\"password\" class=\"col-md-4 col-form-label text-md-right\">Password<\/label>\r\n <div class=\"col-md-6\">\r\n <input id=\"password\" type=\"password\" class=\"form-control\" v-model=\"password\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group row mb-0\">\r\n <div class=\"col-md-8 offset-md-4\">\r\n <button type=\"submit\" class=\"btn btn-primary\" @click=\"handleSubmit\">\r\n Login\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/template><\/pre>\nAbove we have a login form. We don\u2019t have much functionality yet so let\u2019s append the following code to the same file to add some Vue scripting:<\/p>\n
<script>\r\n export default {\r\n data() {\r\n return {\r\n email: \"\",\r\n password: \"\"\r\n }\r\n },\r\n methods: {\r\n handleSubmit(e) {\r\n e.preventDefault()\r\n if (this.password.length > 0) {\r\n let email = this.email\r\n let password = this.password\r\n\r\n axios.post('api\/login', {email, password}).then(response => {\r\n let user = response.data.user\r\n let is_admin = user.is_admin\r\n\r\n localStorage.setItem('myStore.user', JSON.stringify(user))\r\n localStorage.setItem('myStore.jwt', response.data.token)\r\n\r\n if (localStorage.getItem('myStore.jwt') != null) {\r\n this.$emit('loggedIn')\r\n if (this.$route.params.nextUrl != null) {\r\n this.$router.push(this.$route.params.nextUrl)\r\n } else {\r\n this.$router.push((is_admin == 1 ? 'admin' : 'dashboard'))\r\n }\r\n }\r\n });\r\n }\r\n }\r\n }\r\n }\r\n<\/script><\/pre>\nAbove we have a\u00a0handleSubmit\u00a0method that is fired when the form is submitted. In this method we attempt to authenticate using the API. If the authentication is successful, we save the access token and user data in\u00a0localStorage\u00a0so we can access them across our app.<\/p>\n
We also emit a\u00a0loggedIn\u00a0event so the parent component can update as well. Lastly, we check if the user was sent to the login page from another page, then send the user to that page. If the user came to login directly, we check the user type and redirect the user appropriately.<\/p>\n
Next, open the\u00a0resources\/js\/components\/Register.vue\u00a0file and paste in the following:<\/p>\n
<template>\r\n <div class=\"container\">\r\n <div class=\"row justify-content-center\">\r\n <div class=\"col-md-8\">\r\n <div class=\"card card-default\">\r\n <div class=\"card-header\">Register<\/div>\r\n <div class=\"card-body\">\r\n <form>\r\n <div class=\"form-group row\">\r\n <label for=\"name\" class=\"col-md-4 col-form-label text-md-right\">Name<\/label>\r\n <div class=\"col-md-6\">\r\n <input id=\"name\" type=\"text\" class=\"form-control\" v-model=\"name\" required autofocus>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group row\">\r\n <label for=\"email\" class=\"col-md-4 col-form-label text-md-right\">E-Mail Address<\/label>\r\n <div class=\"col-md-6\">\r\n <input id=\"email\" type=\"email\" class=\"form-control\" v-model=\"email\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group row\">\r\n <label for=\"password\" class=\"col-md-4 col-form-label text-md-right\">Password<\/label>\r\n <div class=\"col-md-6\">\r\n <input id=\"password\" type=\"password\" class=\"form-control\" v-model=\"password\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group row\">\r\n <label for=\"password-confirm\" class=\"col-md-4 col-form-label text-md-right\">Confirm Password<\/label>\r\n <div class=\"col-md-6\">\r\n <input id=\"password-confirm\" type=\"password\" class=\"form-control\" v-model=\"password_confirmation\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group row mb-0\">\r\n <div class=\"col-md-6 offset-md-4\">\r\n <button type=\"submit\" class=\"btn btn-primary\" @click=\"handleSubmit\">\r\n Register\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/template><\/pre>\nAbove we have the HTML for the registration form. Let\u2019s add the script for the component below the closing\u00a0template\u00a0tag:<\/p>\n
<script>\r\nexport default {\r\n props : ['nextUrl'],\r\n data(){\r\n return {\r\n name : \"\",\r\n email : \"\",\r\n password : \"\",\r\n password_confirmation : \"\"\r\n }\r\n },\r\n methods : {\r\n handleSubmit(e) {\r\n e.preventDefault()\r\n if (this.password.length <= 5) {\r\n this.password = \"\"\r\n this.password_confirmation = \"\"\r\n return alert('Passwords must contain 6 or more characters')\r\n }\r\n if (this.password !== this.password_confirmation) {\r\n this.password = \"\"\r\n this.password_confirmation = \"\"\r\n return alert('Passwords do not match')\r\n }\r\n let name = this.name\r\n let email = this.email\r\n let password = this.password\r\n let c_password = this.password_confirmation\r\n axios.post('api\/register', {name, email, password, c_password}).then(response => {\r\n let data = response.data\r\n localStorage.setItem('myStore.user', JSON.stringify(data.user))\r\n localStorage.setItem('myStore.jwt', data.token)\r\n if (localStorage.getItem('myStore.jwt') != null) {\r\n this.$emit('loggedIn')\r\n let nextUrl = this.$route.params.nextUrl\r\n this.$router.push((nextUrl != null ? nextUrl : '\/'))\r\n }\r\n })\r\n }\r\n }\r\n}\r\n<\/script><\/pre>\nNOTE: I added a check for the password and the confirmation characters length. It should be more than 5 characters.
\nThe register component operates similarly to the login component. We send the user data to the API for authentication and if we get a favourable response we save the token and user to\u00a0localStorage.<\/p>\nMaking the marketplace pages
\nWe had already defined the homepage in the last chapter and returned a list of available products. Now, we are going to make all the other store pages.<\/p>\nOpen the\u00a0resources\/js\/components\/SingleProduct.vue\u00a0file and paste in the following code:<\/p>\n
<template>\r\n <div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col-md-8 offset-md-2\">\r\n <img :src=\"product.image\" :alt=\"product.name\">\r\n <h3 class=\"title\" v-html=\"product.name\"><\/h3>\r\n <p class=\"text-muted\">{{product.description}}<\/p>\r\n <h4>\r\n <span class=\"small-text text-muted float-left\">$ {{product.price}}<\/span>\r\n <span class=\"small-text float-right\">Available Quantity: {{product.units}}<\/span>\r\n <\/h4>\r\n <br>\r\n <hr>\r\n <router-link :to=\"{ path: '\/checkout?pid='+product.id }\" class=\"col-md-4 btn btn-sm btn-primary float-right\">Buy Now<\/router-link>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/template>\r\n\r\n<script>\r\nexport default {\r\n data(){\r\n return {\r\n product : []\r\n }\r\n },\r\n beforeMount(){\r\n let url = `\/api\/products\/${this.$route.params.id}`\r\n axios.get(url).then(response => this.product = response.data) \r\n }\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.small-text { font-size: 18px; }\r\n.title { font-size: 36px; }\r\n<\/style><\/pre>\nNOTE: USE backtick (`) INSTEAD OF apostroph (‘) ON let url VARIABLE TO PARSE ${this.$route.params.id}
\nAbove we have the\u00a0product\u00a0as a data attribute, which we use to display information on the page like we did in the\u00a0Home.vue\u00a0file.<\/p>\nIn the components\u00a0script\u00a0we defined Vue\u2019s\u00a0beforeMount\u00a0method and fetched the product information there.\u00a0beforeMount\u00a0is called before the component is rendered, so it fetches the necessary data for rendering the component. If we get the data after the component has mounted, we would have errors before the component updates.<\/p>\n
Next, open the\u00a0resources\/js\/components\/Checkout.vue\u00a0file and paste the following code for the HTML template and style:<\/p>\n
<template>\r\n <div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col-md-8 offset-md-2\">\r\n <div class=\"order-box\">\r\n <img :src=\"product.image\" :alt=\"product.name\">\r\n <h2 class=\"title\" v-html=\"product.name\"><\/h2>\r\n <p class=\"small-text text-muted float-left\">$ {{product.price}}<\/p>\r\n <p class=\"small-text text-muted float-right\">Available Units: {{product.units}}<\/p>\r\n <br>\r\n <hr>\r\n <label class=\"row\"><span class=\"col-md-2 float-left\">Quantity: <\/span><input type=\"number\" name=\"units\" min=\"1\" :max=\"product.units\" class=\"col-md-2 float-left\" v-model=\"quantity\" @change=\"checkUnits\"><\/label>\r\n <\/div>\r\n <br>\r\n <div>\r\n <div v-if=\"!isLoggedIn\">\r\n <h2>You need to login to continue<\/h2>\r\n <button class=\"col-md-4 btn btn-primary float-left\" @click=\"login\">Login<\/button>\r\n <button class=\"col-md-4 btn btn-danger float-right\" @click=\"register\">Create an account<\/button>\r\n <\/div>\r\n <div v-if=\"isLoggedIn\">\r\n <div class=\"row\">\r\n <label for=\"address\" class=\"col-md-3 col-form-label\">Delivery Address<\/label>\r\n <div class=\"col-md-9\">\r\n <input id=\"address\" type=\"text\" class=\"form-control\" v-model=\"address\" required>\r\n <\/div>\r\n <\/div>\r\n <br>\r\n <button class=\"col-md-4 btn btn-sm btn-success float-right\" v-if=\"isLoggedIn\" @click=\"placeOrder\">Continue<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/template>\r\n<script>\r\nexport default {\r\n props : ['pid'],\r\n data(){\r\n return {\r\n address : \"\",\r\n quantity : 1,\r\n isLoggedIn : null,\r\n product : []\r\n }\r\n },\r\n mounted() {\r\n this.isLoggedIn = localStorage.getItem('myStore.jwt') != null\r\n },\r\n beforeMount() {\r\n axios.get(`\/api\/products\/${this.pid}`).then(response => this.product = response.data)\r\n\r\n if (localStorage.getItem('myStore.jwt') != null) {\r\n this.user = JSON.parse(localStorage.getItem('myStore.user'))\r\n axios.defaults.headers.common['Content-Type'] = 'application\/json'\r\n axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('myStore.jwt')\r\n }\r\n },\r\n methods : {\r\n login() {\r\n this.$router.push({name: 'login', params: {nextUrl: this.$route.fullPath}})\r\n },\r\n register() {\r\n this.$router.push({name: 'register', params: {nextUrl: this.$route.fullPath}})\r\n },\r\n placeOrder(e) {\r\n e.preventDefault()\r\n\r\n let address = this.address\r\n let product_id = this.product.id\r\n let quantity = this.quantity\r\n\r\n axios.post('api\/orders\/', {address, quantity, product_id})\r\n .then(response => this.$router.push('\/confirmation'))\r\n },\r\n checkUnits(e){\r\n if (this.quantity > this.product.units) {\r\n this.quantity = this.product.units\r\n }\r\n }\r\n }\r\n}\r\n<\/script>\r\n<style scoped>\r\n.small-text { font-size: 18px; }\r\n.order-box { border: 1px solid #cccccc; padding: 10px 15px; }\r\n.title { font-size: 36px; }\r\n<\/style><\/pre>\nAbove we defined the\u00a0beforeMount\u00a0method where we fetch product information. Then we have the\u00a0mounted\u00a0method where we check authentication status. In the\u00a0methods\u00a0property, we defined the\u00a0checkUnits\u00a0method that checks how many units the user wants to order, and then we define the\u00a0placeOrder\u00a0method that places the order.<\/p>\n
Next, open the\u00a0resources\/js\/components\/Confirmation.vue\u00a0file and paste the following code:<\/p>\n
<template>\r\n <div>\r\n <div class=\"container-fluid hero-section d-flex align-content-center justify-content-center flex-wrap ml-auto\">\r\n <h2>\r\n <span class=\"title\"><strong>Thank You!<\/strong><\/span><br>\r\n <span class=\"medium-text\">Your order has been placed.<\/span><br>\r\n <router-link :to=\"{name: 'userboard'}\" class=\"small-link\">\r\n See your orders\r\n <\/router-link>\r\n <\/h2>\r\n <\/div>\r\n <\/div>\r\n<\/template>\r\n\r\n<script>\r\nexport default {}\r\n<\/script>\r\n\r\n<style scoped>\r\n.medium-text { font-size: 36px; }\r\n.small-link { font-size: 24px; text-decoration: underline; color: #777; }\r\n.product-box { border: 1px solid #cccccc; padding: 10px 15px; }\r\n.hero-section { height: 80vh; align-items: center; margin-top: -20px; margin-bottom: 20px; }\r\n.title { font-size: 60px; }\r\n<\/style><\/pre>\nThis component displays a simple thank you message and provides a link for the users to navigate to their dashboard to see the orders they have placed and the status of these orders. Let\u2019s create the user dashboard next.<\/p>\n
Creating the user dashboard
\nThe user dashboard is where the users can see all their orders. Open the\u00a0resources\/js\/components\/UserBoard.vue\u00a0file and paste in the following code for the template and style:<\/p>\n<template>\r\n <div>\r\n <div class=\"container-fluid hero-section d-flex align-content-center justify-content-center flex-wrap ml-auto\">\r\n <h2 class=\"title\">All your orders<\/h2>\r\n <\/div>\r\n <div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <br>\r\n <div class=\"row\">\r\n <div class=\"col-md-4 product-box\" v-for=\"(order,index) in orders\" @key=\"index\">\r\n <img :src=\"order.product.image\" :alt=\"order.product.name\">\r\n <h5><span v-html=\"order.product.name\"><\/span><br>\r\n <span class=\"small-text text-muted\">$ {{order.product.price}}<\/span>\r\n <\/h5>\r\n <hr>\r\n <span class=\"small-text text-muted\">Quantity: {{order.quantity}}\r\n <span class=\"float-right\">{{order.is_delivered == 1? \"shipped!\" : \"not shipped\"}}<\/span>\r\n <\/span>\r\n <br><br>\r\n <p><strong>Delivery address:<\/strong> <br>{{order.address}}<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/template>\r\n<script>\r\nexport default {\r\n data() {\r\n return {\r\n user : null,\r\n orders : []\r\n }\r\n },\r\n beforeMount() {\r\n this.user = JSON.parse(localStorage.getItem('myStore.user'))\r\n\r\n axios.defaults.headers.common['Content-Type'] = 'application\/json'\r\n axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('myStore.jwt')\r\n\r\n axios.get(`api\/users\/${this.user.id}\/orders`)\r\n .then(response => this.orders = response.data)\r\n }\r\n}\r\n<\/script>\r\n<style scoped>\r\n.small-text { font-size: 14px; }\r\n.product-box { border: 1px solid #cccccc; padding: 10px 15px; }\r\n.hero-section { background: #ababab; height: 20vh; align-items: center; margin-bottom: 20px; margin-top: -20px; }\r\n.title { font-size: 60px; color: #ffffff; }\r\n<\/style><\/pre>\nIn the code above, we fetch all the user\u2019s orders before the component is mounted, then loop through them and display them on the page.<\/p>\n
Creating the admin dashboard
\nThe admin dashboard is where new products are added, existing products modified and orders are set as delivered.<\/p>\nFor the admin board, we will use four different components, which we will mount based on the url a user is accessing. Let\u2019s see that in action. Open the\u00a0resources\/js\/components\/Admin.vue\u00a0file and paste in the following:<\/p>\n
<template>\r\n <div>\r\n <div class=\"container-fluid hero-section d-flex align-content-center justify-content-center flex-wrap ml-auto\">\r\n <h2 class=\"title\">Admin Dashboard<\/h2>\r\n <\/div>\r\n <div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col-md-3\">\r\n <ul style=\"list-style-type:none\">\r\n <li class=\"active\"><button class=\"btn\" @click=\"setComponent('main')\">Dashboard<\/button><\/li>\r\n <li><button class=\"btn\" @click=\"setComponent('orders')\">Orders<\/button><\/li>\r\n <li><button class=\"btn\" @click=\"setComponent('products')\">Products<\/button><\/li>\r\n <li><button class=\"btn\" @click=\"setComponent('users')\">Users<\/button><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"col-md-9\">\r\n <component :is=\"activeComponent\"><\/component>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/template>\r\n\r\n<script>\r\nimport Main from '..\/components\/admin\/Main'\r\nimport Users from '..\/components\/admin\/Users'\r\nimport Products from '..\/components\/admin\/Products'\r\nimport Orders from '..\/components\/admin\/Orders'\r\n\r\nexport default {\r\n data() {\r\n return {\r\n user: null,\r\n activeComponent: null\r\n }\r\n },\r\n components: {\r\n Main, Users, Products, Orders\r\n },\r\n beforeMount() {\r\n this.setComponent(this.$route.params.page)\r\n this.user = JSON.parse(localStorage.getItem('myStore.user'))\r\n axios.defaults.headers.common['Content-Type'] = 'application\/json'\r\n axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('myStore.jwt')\r\n },\r\n methods: {\r\n setComponent(value) {\r\n switch(value) {\r\n case \"users\":\r\n this.activeComponent = Users\r\n this.$router.push({name: 'admin-pages', params: {page: 'users'}})\r\n break;\r\n case \"orders\":\r\n this.activeComponent = Orders\r\n this.$router.push({name: 'admin-pages', params: {page: 'orders'}})\r\n break;\r\n case \"products\":\r\n this.activeComponent = Products\r\n this.$router.push({name: 'admin-pages', params: {page: 'products'}})\r\n break;\r\n default:\r\n this.activeComponent = Main\r\n this.$router.push({name: 'admin'})\r\n break;\r\n }\r\n }\r\n }\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.hero-section { height: 20vh; background: #ababab; align-items: center; margin-bottom: 20px; margin-top: -20px; }\r\n.title { font-size: 60px; color: #ffffff; }\r\n<\/style><\/pre>\nIn the code above, we import and register four components, which we have not yet created. They\u2019ll be used as components inside\u00a0Admin.vue\u00a0parent component.<\/p>\n
In our template, we defined the navigation for switching between the components. Each navigation link calls the\u00a0setComponent\u00a0method and then passes a value to it. The\u00a0setComponent\u00a0method just sets the component using a\u00a0switch\u00a0statement.<\/p>\n
Let\u2019s create the first component for the Admin component. Create the\u00a0Main.vue\u00a0file in\u00a0resources\/js\/components\/admin\u00a0directory and paste the following into the file:<\/p>\n
<template>\r\n <div class=\"row\">\r\n <div class=\"col-md-4 product-box d-flex align-content-center justify-content-center flex-wrap big-text\">\r\n <a href='\/admin\/orders'>Orders ({{orders.length}})<\/a>\r\n <\/div>\r\n <hr>\r\n <div class=\"col-md-4 product-box d-flex align-content-center justify-content-center flex-wrap big-text\">\r\n <a href='\/admin\/products'>Products ({{products.length}})<\/a>\r\n <\/div>\r\n <div class=\"col-md-4 product-box d-flex align-content-center justify-content-center flex-wrap big-text\">\r\n <a href='\/admin\/users'>Users ({{users.length}})<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/template>\r\n\r\n<script>\r\nexport default {\r\n data() {\r\n return {\r\n user : null,\r\n orders : [],\r\n products : [],\r\n users : []\r\n }\r\n },\r\n mounted() {\r\n axios.get('\/api\/users\/').then(response => this.users = response.data)\r\n axios.get('\/api\/products\/').then(response => this.products = response.data)\r\n axios.get('\/api\/orders\/').then(response => this.orders = response.data)\r\n }\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.big-text { font-size: 28px; }\r\n.product-box { border: 1px solid #cccccc; padding: 10px 15px; height: 20vh }\r\n<\/style><\/pre>\nIn the code above we are calling the APIs for users, orders and products, and returning their data.<\/p>\n
Create the\u00a0Orders.vue\u00a0file in\u00a0resources\/js\/components\/admin\u00a0and paste the following into the file:<\/p>\n
<template>\r\n <div>\r\n <table class=\"table table-responsive table-striped\">\r\n <thead>\r\n <tr>\r\n <td><\/td>\r\n <td>Product<\/td>\r\n <td>Quantity<\/td>\r\n <td>Cost<\/td>\r\n <td>Delivery Address<\/td>\r\n <td>is Delivered?<\/td>\r\n <td>Action<\/td>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr v-for=\"(order,index) in orders\" @key=\"index\">\r\n <td>{{index+1}}<\/td>\r\n <td v-html=\"order.product.name\"><\/td>\r\n <td>{{order.quantity}}<\/td>\r\n <td>{{order.quantity * order.product.price}}<\/td>\r\n <td>{{order.address}}<\/td>\r\n <td>{{order.is_delivered == 1? \"Yes\" : \"No\"}}<\/td>\r\n <td v-if=\"order.is_delivered == 0\"><button class=\"btn btn-success\" @click=\"deliver(index)\">Deliver<\/button><\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n<\/template>\r\n\r\n<script>\r\nexport default {\r\n data() {\r\n return {\r\n orders : []\r\n }\r\n },\r\n beforeMount(){\r\n axios.get('\/api\/orders\/').then(response => this.orders = response.data)\r\n },\r\n methods: {\r\n deliver(index) {\r\n let order = this.orders[index]\r\n axios.patch(`\/api\/orders\/${order.id}\/deliver`).then(response => {\r\n this.orders[index].is_delivered = 1\r\n this.$forceUpdate()\r\n })\r\n }\r\n }\r\n}\r\n<\/script><\/pre>\nIn\u00a0beforeMount\u00a0we fetch all the orders placed before the component is rendered.<\/p>\n
When the\u00a0Deliver\u00a0button is clicked, the\u00a0deliver\u00a0method is fired. We call the API for delivering orders. To get the change to reflect on the page instantly, we call\u00a0[$forceUpdate](https:\/\/vuejs.org\/v2\/api\/#vm-forceUpdate).<\/p>\n
Create the\u00a0Users.vue\u00a0file in\u00a0resources\/js\/components\/admin\u00a0and paste in the following code:<\/p>\n
<template>\r\n <div>\r\n <table class=\"table table-responsive table-striped\">\r\n <thead>\r\n <tr>\r\n <td><\/td>\r\n <td>Name<\/td>\r\n <td>Email<\/td>\r\n <td>Joined<\/td>\r\n <td>Total Orders<\/td>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr v-for=\"(user,index) in users\" @key=\"index\">\r\n <td>{{index+1}}<\/td>\r\n <td>{{user.name}}<\/td>\r\n <td>{{user.email}}<\/td>\r\n <td>{{user.created_at}}<\/td>\r\n <td>{{user.orders.length}}<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n<\/template>\r\n\r\n<script>\r\nexport default {\r\n data() {\r\n return {\r\n users : []\r\n }\r\n },\r\n beforeMount() {\r\n axios.get('\/api\/users\/').then(response => this.users = response.data)\r\n }\r\n}\r\n<\/script><\/pre>\nAbove we fetch all the user data and then display it on the page.<\/p>\n
Next, create the\u00a0Products.vue\u00a0file in\u00a0resources\/js\/components\/admin\u00a0and paste the following template code:<\/p>\n
<template>\r\n <div>\r\n <table class=\"table table-responsive table-striped\">\r\n <thead>\r\n <tr>\r\n <td><\/td>\r\n <td>Product<\/td>\r\n <td>Units<\/td>\r\n <td>Price<\/td>\r\n <td>Description<\/td>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr v-for=\"(product,index) in products\" @key=\"index\" @dblclick=\"editingItem = product\">\r\n <td>{{index+1}}<\/td>\r\n <td v-html=\"product.name\"><\/td>\r\n <td v-model=\"product.units\">{{product.units}}<\/td>\r\n <td v-model=\"product.price\">{{product.price}}<\/td>\r\n <td v-model=\"product.price\">{{product.description}}<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <modal @close=\"endEditing\" :product=\"editingItem\" v-show=\"editingItem != null\"><\/modal>\r\n <modal @close=\"addProduct\" :product=\"addingProduct\" v-show=\"addingProduct != null\"><\/modal>\r\n <br>\r\n <button class=\"btn btn-primary\" @click=\"newProduct\">Add New Product<\/button>\r\n <\/div>\r\n<\/template>\r\n<script>\r\nimport Modal from '.\/ProductModal'\r\n\r\nexport default {\r\n data() {\r\n return {\r\n products: [],\r\n editingItem: null,\r\n addingProduct: null\r\n }\r\n },\r\n components: {Modal},\r\n beforeMount() {\r\n axios.get('\/api\/products\/').then(response => this.products = response.data)\r\n },\r\n methods: {\r\n newProduct() {\r\n this.addingProduct = {\r\n name: null,\r\n units: null,\r\n price: null,\r\n image: null,\r\n description: null,\r\n }\r\n },\r\n endEditing(product) {\r\n this.editingItem = null\r\n\r\n let index = this.products.indexOf(product)\r\n let name = product.name\r\n let units = product.units\r\n let price = product.price\r\n let description = product.description\r\n\r\n axios.put(`\/api\/products\/${product.id}`, {name, units, price, description})\r\n .then(response => this.products[index] = product)\r\n },\r\n addProduct(product) {\r\n this.addingProduct = null\r\n\r\n let name = product.name\r\n let units = product.units\r\n let price = product.price\r\n let description = product.description\r\n let image = product.image \r\n\r\n axios.post('\/api\/products\/', {name, units, price, description, image})\r\n .then(response => this.products.push(product))\r\n }\r\n }\r\n}\r\n<\/script><\/pre>\nIn the\u00a0methods\u00a0property we defined the following methods:<\/p>\n
newProduct()\u00a0\u2013 called when we want to initiate a new local product object.
\nendEditing()\u00a0\u2013 called when we are done editing a product.
\naddProduct()\u00a0\u2013 called when we are want to add a new product.
\nWe imported a\u00a0ProductModal\u00a0component, which we will create next. The modal will be used to edit an existing or create a new product. Double clicking on a product listed fires up the modal for editing the product.<\/p>\nCreate the\u00a0ProductModal.vue\u00a0file in\u00a0resources\/js\/components\/admin\u00a0and paste in the following template and style code:<\/p>\n
<template>\r\n <div class=\"modal-mask\">\r\n <div class=\"modal-wrapper\">\r\n <div class=\"modal-container\">\r\n <div class=\"modal-header\">\r\n <slot name=\"header\" v-html=\"data.name\"><\/slot>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <slot name=\"body\">\r\n Name: <input type=\"text\" v-model=\"data.name\">\r\n Units: <input type=\"text\" v-model=\"data.units\">\r\n Price: <input type=\"text\" v-model=\"data.price\">\r\n <textarea v-model=\"data.description\" placeholder=\"description\"><\/textarea>\r\n <span >\r\n <img :src=\"data.image\" v-show=\"data.image != null\">\r\n <input type=\"file\" id=\"file\" @change=\"attachFile\">\r\n <\/span>\r\n <\/slot>\r\n <\/div>\r\n <div class=\"modal-footer\">\r\n <slot name=\"footer\">\r\n <button class=\"modal-default-button\" @click=\"uploadFile\">\r\n Finish\r\n <\/button>\r\n <\/slot>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/template>\r\n<script>\r\nexport default {\r\n props: ['product'],\r\n data() {\r\n return {\r\n attachment: null\r\n }\r\n },\r\n computed: {\r\n data: function() {\r\n if (this.product != null) {\r\n return this.product\r\n }\r\n return {\r\n name: \"\",\r\n units: \"\",\r\n price: \"\",\r\n description: \"\",\r\n image: false\r\n }\r\n }\r\n },\r\n methods: {\r\n attachFile(event) {\r\n this.attachment = event.target.files[0];\r\n },\r\n uploadFile(event) {\r\n if (this.attachment != null) {\r\n var formData = new FormData();\r\n formData.append(\"image\", this.attachment)\r\n let headers = {'Content-Type': 'multipart\/form-data'}\r\n axios.post('\/api\/upload-file', formData, {headers}).then(response => {\r\n this.product.image = response.data\r\n this.$emit('close', this.product)\r\n })\r\n } else {\r\n this.$emit('close', this.product)\r\n }\r\n }\r\n }\r\n}\r\n<\/script>\r\n<style scoped>\r\n.modal-mask {\r\n position: fixed;\r\n z-index: 9998;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, .5);\r\n display: table;\r\n transition: opacity .3s ease;\r\n}\r\n.modal-wrapper {\r\n display: table-cell;\r\n vertical-align: middle;\r\n}\r\n.modal-container {\r\n width: 300px;\r\n margin: 0px auto;\r\n padding: 20px 30px;\r\n background-color: #fff;\r\n border-radius: 2px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, .33);\r\n transition: all .3s ease;\r\n font-family: Helvetica, Arial, sans-serif;\r\n}\r\n.modal-header h3 {\r\n margin-top: 0;\r\n color: #42b983;\r\n}\r\n.modal-body {\r\n margin: 20px 0;\r\n}\r\n.modal-default-button {\r\n float: right;\r\n}\r\n.modal-enter {\r\n opacity: 0;\r\n}\r\n.modal-leave-active {\r\n opacity: 0;\r\n}\r\n.modal-enter .modal-container,\r\n.modal-leave-active .modal-container {\r\n -webkit-transform: scale(1.1);\r\n transform: scale(1.1);\r\n}\r\n<\/style><\/pre>\nWhen the modal receives a\u00a0product\u2019s data, it pre-fills each field with the data. When we attach an image and submit the modal\u2019s form, it is uploaded and the url for the image is returned to us.<\/p>\n
We update the image attribute of the product with the url, then emit a\u00a0close\u00a0event and return the product with it. If no image is attached, we emit a\u00a0close\u00a0event and return the product data along with it.<\/p>\n
This modal component is an example provided in Vue documentation\u00a0here<\/a><\/p>\n
Payments
\nThere are many payment options for e-commerce platforms. You choose depending on your needs and what is available in your country. Many popular payment processors like Stripe have excellent guides on integrating into a JavaScript or PHP application which you can use. This tutorial won\u2019t cover that though, you can take it as an exercise for practise.<\/p>\nBuilding our application
\nWe are done building our application. The next thing to do will be to compile our Vue application and serve our Laravel backend. Run the command to build the application.<\/p>\nAdmin user:
\nemail: admin@admin.com
\nname: Admin
\npassword: secret<\/p>\nCreate\/Register a new user:
\nemail: advcha@yahoo.com
\nname: Satria
\npassword: satria<\/p>\n","protected":false},"excerpt":{"rendered":"Ref: https:\/\/blog.pusher.com\/ecommerce-laravel-vue-part-1\/ In this article, we will cover how you can use Laravel to build a simple e-commerce application. After this tutorial, you should know how to use Laravel and Vue to make a web application and understand the basics of making an online store. With the advent of the internet, many regular things became … Continue reading “Create Laravel Store with Vue”<\/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-3482","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\/3482","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=3482"}],"version-history":[{"count":31,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/3482\/revisions"}],"predecessor-version":[{"id":3484,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/3482\/revisions\/3484"}],"wp:attachment":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/media?parent=3482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/categories?post=3482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/tags?post=3482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}