Categories
Laravel Vue Js

Laravel 8.x configure Vue JS CRUD with Vue Router, Vuex, Vue-Axios

In this post I am going to showing example how to configure Vue JS CRUD with Laravel 8.x. We will create a Single Page Application(SPA) using the Laravel 8.x and Vue JS. In this post you will learn how to use vue router and v-form with vue-axios package how to work with laravel and vue js crud. I am showing example on Windows 10 with XAMPP server. More details on my previous post Install Laravel on xampp server.

First Install Composer on your computer, click here to download and install composer. Also please install git bash, click here to download and install git bash. Now we use git bash to run command.

Download the NodeJs pre-built installer for Windows, click here to download and install NodeJs on your computer.

Install Laravel 8.x in xampp directory “laravelvue”:

Go to your E:\xampp\htdocs directory, right click open git bash terminal and run command composer create-project laravel/laravel laravelvue to install Laravel.

Got to “laravelvue” directory or your project directory by command cd laravelvue.

Install Laravel UI & Auth:

Now Install Laravel UI package by command composer require laravel/ui, Once the laravel/ui package has been installed, you may install the frontend scaffolding using the ui Artisan command php artisan ui vue –auth

Now create controller with Invokable by Artisan command make:controller, That command is fired into the app/http/controllers directory, go to controllers directory and you can find a new PHP file PagesController.php

Go directory app/http/controllers and open file PagesController.php and welcome view in __invoke method.

Now we have to create resources/views/welcome.blade.php vie blade file look like following code.

Now add following route in routes/web.php

So now it’s Vue time:

Now Install NPM by command npm install && npm run dev

Now Install VUE by command npm install vue

Now install all required VUE tools and libraries by a single command:

OR

Now Install vue-router by command npm install vue-router, or for details click here

Now Install vuex by command npm install vuex –save, or for details click here

Now Install axios and v-form for client side validation by command npm install –save axios vue-axios vform, or for details click here

Now make ready resources app js in directory resources/js/app.js

Now make routes libraries js in directory resources/js/routes.js, with related component.

Now run following command to compiled js and css resource.

Now create component files in directory resources/js/components/*.vue files, with related component.

  • AppComponent.vue
  • HeaderComponent.vue
  • FooterComponent.vue
  • LoginComponent.vue
  • RegisterComponent.vue

resources/js/components/AppComponent.vue

resources/js/components/HeaderComponent.vue

resources/js/components/FooterComponent.vue

resources/js/components/LoginComponent.vue

resources/js/components/RegisterComponent.vue

Now every thing setup is done. Now you are ready to check it.

configure-vue-js-view

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

Categories
WordPress

WordPress – create different template for different post type

In this post we will learn how to create different post template for different post type on TwentyTwentyOne theme. Now we want to create a child theme TwentyTwentyOne-Child as like my previous post How to Create a Child Theme?

Another important thinks, we want to know how to create WordPress custom post type, Please visit my previous post. How to Create WordPress Custom Post Types?

I have created custom post type faqs and create new a post to tested different post template for different post type is working or not.

custom-post-type-posts

Now please go to your child theme directory and crete new single file with custom post type. Example: single-{POST-TYPE}.php wp-content\themes\twentytwentyone-child\single-faqs.php file because my custom post type is “faqs”.

Now copy all code form original single.php file. wp-content\themes\twentytwentyone\single.php Open single.php via editor and copy all code and past on wp-content\themes\twentytwentyone-child\single-faqs.php

Now copy all code form original content-single.php file wp-content\themes\twentytwentyone\template-parts\content\content-single.php Open content-single.php via editor and copy all code and past on wp-content\themes\twentytwentyone-child\template-parts\content\content-faqs.php

Now call new template parts content like this, just change “content-single” to “content-faqs” on single-faqs.php file get_template_part(‘template-parts/content/content-faqs’);

I added some text on new template for texting FAQs custom template

New custom post type template is working.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.

Categories
Magento 2

Magento 2 system config field dependent on previous field

In this post we will learn how to create a dependent field in Magento 2 admin system configuration field by XML.

So, now please open etc\adminhtml\system.xml file where this file is located in a custom module and define your configuration dropdown with a custom source model is the our first field.

Above xml code in which, on select field (custom_option_field) option with value “2” from a drop-down list a text field (dependant_field) will appear.

And if you want to create a field dependent on two or more values, use the follow code.

In above code if you select options with values “1” or “2” from (custom_option_field) dropdown list then the text field (dependant_field) will be appeared in the admin configuration.

After then, we need to create that source model for CustomOption:

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.

Categories
Magento 2

Magento 2 adding breadcrumb via layout XML or Controller

How we can add breadcrumb in page layout or controller? In this post I have added two different example how to added custom breadcrumb via XML or PHP Controller.

Added breadcrumb by layout XML file:

Add new Block on body tag like referenceBlock name=”breadcrumbs”

Added breadcrumb by PHP Controller:

Open your page controller and find public function execute() method and add $breadcrumbs->addCrumb what you want.

After added any one method for breadcrumbs just run following command via cli and check breadcrumbs is working fine.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.

Categories
Magento 2

Magento 2 admin error: Product does not exists

After migrating Magento to version I am facing below issues while navigating to Product page.

Error: Class Magento\Catalog\Model\Product\Attribute\Backend\LayoutUpdate does not exist

Also I am going to editing product in admin panel getting the below error

Error: Product does not exists

Product does not exists

In Magento 2 some version Magento created the LayoutUpdate file with the attributes custom_layout_update_file, When we revert back version, the attribute calling the file and cause the issue.

Solution:

Go to your Database and search in table eav_attribute table like below sql. If you will find two records and just remove them.

Find or Select query:

Delete query:

After delete two records from database run following command via cli

If you have redis, you will need to flush the cache from it.

redis-cli flushdb – Delete all the keys of the currently selected DB.
redis-cli flushall – Delete all the keys of all the existing databases, not just the currently selected one.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.

Categories
Magento 2

Getting exception: Missing required argument $options, when edit customer details from magento 2 admin.

Getting exception missing required argument $options, when edit customer details from magento 2 admin.

Exception:

Solution:

Open vendor\magento\module-eav\Model\Entity\Attribute\Source\Config.php file form Magento 2 project and update __construct method in very beginning of file.

To

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.

Categories
Magento 2

Magento 2 module dependency – hard and soft dependencies

In this article today I will disuse about Magento 2 module dependency. In Magento 2 we can use two types of Magento module dependencies “Hard Dependency” and “Soft Dependency

Magento 2 dependencies of modules are defined in composer.json. Hard in section require, soft in section suggest

Magento 2 HARD dependency

Module with a hard dependency on another module cannot function without the module it depends on. In app/code/Vendor/Module/composer.json require section contains hard dependency definitions for the module.

For example:

Magento 2 SOFT dependency

We can set SOFT dependency by two way – One is make dependency on suggest section on Vendor/Module/composer.json, another one is sequence node of Vendor/Module/etc/module.xml file.

Module with a SOFT dependency on another module can function properly without the other module, even if it has a dependency on the other module. In app/code/Vendor/Module/composer.json suggest section contains soft dependency definitions for the module.

For example:

The sequence node of app/code/Vendor/Module/etc/module.xml file file also contains soft dependency definitions for the module.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.

Categories
Laravel

Laravel 8 Target class [TableSeeder] does not exist

Today I am getting this error when I am trying to refresh seed with php artisan migrate:refresh –seed command. Database Seeder class is called another seeder class with $this->call(CmsPagesSeeder::class); But geeting error Target class [CmsPagesSeeder] does not exist.

Finally I have apply follwing solution and now working fine with command php artisan migrate:refresh –seed or php artisan db:seed or php artisan db:seed –class=CmsPagesSeeder

Laravel 8 Seeders and Factories are now need to add namespace at the top of class file.

Example:

STEP: 1

Rename directory database/seeds to database/seeders

STEP: 2

Open composer.json file and change on autoload section.

STEP: 3

Open Database Seeder file database/seeders/DatabaseSeeder.php and add namespace Database\Seeders; on top of page.

STEP: 4

Open your others seeders file and add namespace Database\Seeders; to all seeders class.

STEP: 5
Done! Now run following commands you can see now DB seeder is working fine.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please LIKE and SHARE

Categories
Magento 2

Magento 2 – Admin form UI Component ImageUploader Field.

In this article today I will disuse about Magento 2 – admin form UI Component imageUploader field. This article is include all steps UI Components tutorial for image upload from your custom module. UI Component imageUploader xml form field, Show image in edit form, Save image info in database.

Below example code is based on a custom module “Extendfeature_RequestQuote” this is my custom module.

Best article for frontend custom form image uploader
Magento 2 – File or image upload via frontend custom module form and Controller

Step 1: Add UI Component imageUploader field

Please add/create following UI component imageUploader code in your UI form located in Extendfeature/RequestQuote/view/adminhtml/ui_component/form.xml file. My image uploader field name is “filesubmission” show field as “File Attachment” in admin form.

Step 2: Create image-preview.html template file

Please add/create image preview template with following code located in Extendfeature/RequestQuote/view/adminhtml/web/template/image-preview.html file.

Step 3: Crate image upload admin Controller file

Now create a adminhtml image upload Controller Filesubmission.php for image upload in Extendfeature\RequestQuote\Controller\Adminhtml\Requestquote\Filesubmission.php file with following code.

Step 4: Crate image upload Model

Now we create a image upload Model ImageUploader.php, in this we added more methods related upload image into pub/media/requestaquote directory, here “requestaquote” is IMAGE_UPLOAD_DIRECTORY name. Please create a model file with following code.

Step 5: Define Image Uploader configuration in di.xml file

Define Image Uploader configuration in your module di di.xml file with following code, File located in Extendfeature/RequestQuote/etc/di.xml.

Magento 2 - Admin form UI Component ImageUploader Field

Step 6: Image name save into the database field

To save image name into the database field please add follow below code into Save controller Extendfeature/RequestQuote/Controller/Adminhtml/Requestquote/Save.php file inside execute method.

Step 7: Display image after save records in edit form

Now add following code into DataProvider like Extendfeature/RequestQuote/Model/Requestquote/DataProvider.php File to display image after save records inside public function getData() method.

Now, Execute below commands via SHELL and enjoy image uploader function in your UI form.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.

Categories
WordPress

How to Create WordPress Custom Post Types?

In this post today I will disuse How to Create WordPress Custom Post Types and displaying with Shortcode and page template. Each new developer need to learn how to easily create custom post types in WordPress site. Also WordPress regular blog posts use Categories and Tags to create an organization structure. In this article I also disuse how to crate separate Categories and Tags for custom post types.

Working With Custom Post Types

So your new custom post types need to effectively create and use, you will need to be familiar with the following:

  • Creating custom Post Types
  • Creating custom Taxonomies
  • Creating custom Tags

Creating Custom Post Types

Let’s start and register custom post type in your theme functions.php file by method register_post_type. It will be located in public_html/wp-content/themes/YOUR_THEME_NAME/functions.php Open this file via editor and add following code to register custom post type.

For more information I will shortly describe some args details in below.

  • labels The labels option should be an array defining the different labels that a custom post type can have. I have separated this out above just to make the arguments for registering a post type clearer.
  • description A short explanation of our custom post type, what it does and why we are using it.
  • public This option controls a bunch of things in one go. Setting this to true will set a bunch of other options (all to do with visibility) to true.
  • menu_position Defines the position of the custom post type menu in the back end. Setting it to “7” places it below the “posts” menu.
  • supports This option sets up the default WordPress controls that are available in the edit screen for the custom post type. By default, only the title field and editor are shown.
  • has_archive If set to true, rewrite rules will be created for you, enabling a post type archive at http://yoursite.com/posttype/ (by default)

Our current custom post types Faqs associated with a custom taxonomy called genres. I also set hierarchical to false If you would like your custom post type to behave like Pages, then you can set this value to true.

Category for Custom Post Type

Now we are going to register taxonomy for custom post type named “Faq Categories” after register_post_type method in functions.php file by register_taxonomy method. This categories we only use for Faq post types.

Registering categories for custom post type is done, We added some labels and set hierarchical option to true. This enables custom “category style” to taxonomies. When we set it to false (this is the default), taxonomy will be like the default tags.

Displaying Custom Post Types by Shortcode

Now I am going to create a shortcode [faqs] to displaying custom post type post items. Please added following code in your theme functions.php in theme public_html/wp-content/themes/YOUR_THEME_NAME/functions.php.

We can pass tow parameter via shortcode “category” Example: [faqs category=”7″] (7) is category ID, Second one is “class” Example: [faqs class=”sidebar-categories”] is CSS class.

Displaying Custom Post Types in Template

Also we can listed custom post via template file, open a template file via editor from your theme public_html/wp-content/themes/YOUR_THEME_NAME/ directory. By querying the database, you can retrieve post items from a custom post type.

So in this post we are completed 3 (three) part, 1. Create Custom Post Types, 2. Categories for Custom Post Types, 3. Displaying Custom Post Items by Shortcode and Template.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.