Magento 2 Module

How to create a grid using UI component in Magento 2

Hide/Show description

Hi Everybody, I am Cuong, Welcome to my Magento 2 Tutorial video series. In the previous lessons, I showed everyone: 1. How to create a new module in Magento 2 at the video link https://www.youtube.com/watch?v=JwxtiEwEZpk 2. How to add new tables for a custom module in Magento 2 at the video link https://www.youtube.com/watch?v=gtSx1BUxYtw To continue the previous lessons, today, I am going to show everybody How to create a grid using UI component in Magento 2. I will create a grid showing the banners saved in the table named phpcuong_banners_slider To complete this best practice you need to complete the following high-level steps: 1. Create the new menu named Banner Slider - Create the file named menu.xml in the path app\code\PHPCuong\BannerSlider\etc\adminhtml - Create the file named acl.xml in the path app\code\PHPCuong\BannerSlider\etc 2. Create the new route named phpcuong_banners_slider for using - Create the file named routes.xml in the path app\code\PHPCuong\BannerSlider\etc\adminhtml 3. Create the new controller, action - Create the folder named Banner in the path app\code\PHPCuong\BannerSlider\Controller\Adminhtml - Create the file named Index.php in the path app\code\PHPCuong\BannerSlider\Controller\Adminhtml\Index 4. Create the new layout - Create the new layout named phpcuong_banners_slider_banner_index.xml in the path app\code\PHPCuong\BannerSlider\view\adminhtml\layout - The structure of a layout will be routeName_controllerName_actionName.xml 5. Create the new ui_component - Create the new ui component named phpcuong_banners_slider_banner_listing.xml in the path app\code\PHPCuong\BannerSlider\view\adminhtml\ui_component 6. Create the di.xml - Create the new file named di.xml in the path app\code\PHPCuong\BannerSlider\etc 7. Create the new model named Banner - Create the new file named Banner.php in the path app\code\PHPCuong\BannerSlider\Model 8. Create the new ResourceModel named Banner - Create the new file named Banner.php in the path app\code\PHPCuong\BannerSlider\Model\ResourceModel 9. Create the new Collection - Create the new file named Collection.php in the path app\code\PHPCuong\BannerSlider\Model\ResourceModel\Banner 10. Create the new grid collection - Create the new file named Collection.php in the path app\code\PHPCuong\BannerSlider\Model\ResourceModel\Banner\Grid 11. Flush the caches and See the results. - php bin/magento cache:flush It works perfectly. Thank you for your watching. If you have any questions about this exercise please feel free to leave a comment below. Don't forget to like, comment, share and subscribe to my channel for getting the latest videos. Please do not hesitate to contact me if you need me to join your Magento project. My rate is $25/hour in Magento 1 and $30/hour in Magento 2. Get the source codes of this tutorial on the github https://github.com/php-cuong/magento2-banners-slider

Today Hex Color Code

#052418
#264539
#47665a
#68877b
#89a89c
#aac9bd