This is the tutorial to create a custom module step by step in Magento 2. In Magento 2 the whole system is built upon modules. We use app/code folder location for our custom module. Our custom module can have many things as our requirement so if I write everything in one post It can be a very much longer and you may get confused. That’s why I am listing my custom module posts step by step in a series. I will keep adding more steps.

 

Magento 2 Custom Module Development Step By Step

Magento 2 Custom Module Development Step By Step

 

Step 1: Create a simple custom module in Magento 2
(Check the post)

 

In step 1 we are just creating a simple custom module so no database and admin related files. It will have basic module files, controller, block, layout and phtml files.

 

Step 2: Magento 2 Add CSS and JS in the custom module
(Check the post)

 

In step 2 we are learning how to add CSS and JS to our custom module. It’s simple and easy.

 

Step 3: Create a table using InstallSchema and UpgradeSchema in Magento 2
(Check the post)

 

If you want the custom database table for your custom module you should check this post. In Magento 2 we use InstallSchema and UpgradeSchema to create and update our custom database table. It will show you how you can create a custom database table for your module and if you want to add or remove any table field after you create a table this post will also show you how to do it.

 

Step 4: Insert data into the custom table using Model, Resource Model in Magento 2
(Check the post)

 

Now that you have created a custom database table you want to insert data in it. This post will be useful for it. It will cover displaying form, submitting the form, use Model and Resource Model, use a controller to save the data into your custom table. And I would like to say again use Model and Resouce Model is the most important thing in the post.

 

Step 5: Display custom module collection data at frontend in Magento 2
(Check the post)

 

We have inserted data in our custom database table in step 4. Displaying data at frontend is in this post. It will show you how you can display data in the list page. Also, It will show you how to display single data in the view page.

 

Step 6: How to add pagination for custom collection in Magento 2
(Check the post)

 

We will see how to add pagination for our custom collection in this post. In step 5, we saw how to display data at frontend. We saw how to display data in the list page and view page. In the list page, what if you have many records like maybe 100 or more. It’s good to show data using pagination and we did not use that in step 5. So in this post, we are going to see how to add pagination in the list page.

 

Step 7: Magento 2 custom module image upload
(Check the post)

 

In this step, we are going to upload the image from the frontend. You can use this same code for your admin controller also.

 

Next Step: Coming Soon

 

I will keep adding the next steps here for the custom module.

5 Comments
  • Fil Amador
    Posted at 03:43h, 21 November Reply

    Hello, please make a tutorial for DELETE and UPDATE data into the custom table using Model in Magento 2, Thank you very much

  • Fil Amador
    Posted at 03:57h, 21 November Reply

    Hi, I’m new learner of Magento 2, i need your help please. can i ask for sample tutorial of DELETE and UPDATE data into the custom table using Model, Resource Model in Magento 2.
    Thank you very much, your help will be highly appreciated .here is my email geofilamador@gmail.com

    • Vicky
      Posted at 15:51h, 23 November Reply

      Yes, I will create a new post about “Delete” and “Update” data. Please make sure you have finished all the steps because I will continue where I left. So we will be using the same module and add the “Delete” and “Update” data process into that. This will be for the frontend.

  • Bruce
    Posted at 15:16h, 16 August Reply

    Why i only see the title of your posts when i click the link ?

    • Vicky
      Posted at 09:15h, 15 September Reply

      Sorry, that was an error. It is fixed now

Post A Comment