{"id":19270,"date":"2020-11-05T09:42:10","date_gmt":"2020-11-05T09:42:10","guid":{"rendered":"http:\/\/www.devopsschool.com\/blog\/?p=19270"},"modified":"2022-03-07T16:48:40","modified_gmt":"2022-03-07T16:48:40","slug":"simple-ajax-crud-application-in-laravel","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/simple-ajax-crud-application-in-laravel\/","title":{"rendered":"Simple Ajax CRUD Application in Laravel"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>Step 1 &#8211; Create a fresh laravel projet <\/strong><\/h3>\n\n\n\n<p>First off all , create a project using following command given below &#8211;<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/sumitidea\/f14abca247c9b3d3c189276d7802b3af.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"718\" height=\"237\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/1.jpg\" alt=\"\" class=\"wp-image-19271\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/1.jpg 718w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/1-300x99.jpg 300w\" sizes=\"auto, (max-width: 718px) 100vw, 718px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"725\" height=\"270\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/2.jpg\" alt=\"\" class=\"wp-image-19272\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/2.jpg 725w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/2-300x112.jpg 300w\" sizes=\"auto, (max-width: 725px) 100vw, 725px\" \/><\/figure>\n\n\n\n<p>Change Directory to AjaxCrud folder<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">$ cd AjaxCrud<\/code><\/span><\/pre>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"722\" height=\"136\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/3.jpg\" alt=\"\" class=\"wp-image-19273\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/3.jpg 722w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/3-300x57.jpg 300w\" sizes=\"auto, (max-width: 722px) 100vw, 722px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2 &#8211; Configure Database in .env file<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"999\" height=\"415\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/4.jpg\" alt=\"\" class=\"wp-image-19274\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/4.jpg 999w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/4-300x125.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/4-768x319.jpg 768w\" sizes=\"auto, (max-width: 999px) 100vw, 999px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3 &#8211; Open Xampp tool<\/strong> and start the server<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"657\" height=\"395\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/5.jpg\" alt=\"\" class=\"wp-image-19275\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/5.jpg 657w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/5-300x180.jpg 300w\" sizes=\"auto, (max-width: 657px) 100vw, 657px\" \/><\/figure>\n\n\n\n<p>Go to phpMyAdmin and create database with same name as .env database name<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"907\" height=\"491\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/6.jpg\" alt=\"\" class=\"wp-image-19276\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/6.jpg 907w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/6-300x162.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/6-768x416.jpg 768w\" sizes=\"auto, (max-width: 907px) 100vw, 907px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4 &#8211; Set default string length<\/strong><\/h3>\n\n\n\n<p>Locate the file <strong>&#8220;app\/Providers\/AppServiceProvider.php&#8221;<\/strong> and add  following line of code to the top of the file.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">use<\/span> <span class=\"hljs-title\">Illuminate<\/span>\\<span class=\"hljs-title\">Support<\/span>\\<span class=\"hljs-title\">Facades<\/span>\\<span class=\"hljs-title\">Schema<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>add inside the boot method set a default string length as given below &#8211;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">Schema<\/span><span class=\"hljs-selector-pseudo\">::defaultStringLength(191)<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"659\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/7-1-1024x659.jpg\" alt=\"\" class=\"wp-image-19278\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/7-1-1024x659.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/7-1-300x193.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/7-1-768x494.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/7-1.jpg 1055w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5 &#8211; <strong>Create Database table and Migrate<\/strong><\/h3>\n\n\n\n<p>Now, we have to define table schema for\u00a0<strong>posts<\/strong>\u00a0table. Open terminal and let\u2019s run the following command to generate a migration file to create\u00a0<strong>posts<\/strong>\u00a0table in our database<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/sumitidea\/10f6edaaf213c22214e2422afbc0c1d7.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"158\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/8.jpg\" alt=\"\" class=\"wp-image-19279\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/8.jpg 728w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/8-300x65.jpg 300w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 6 &#8211; <\/strong>Open Migration file and put the following code in it<\/h3>\n\n\n\n<script src=\"https:\/\/gist.github.com\/sumitidea\/b92d33a9673471c5954d2b707c3feb3d.js\"><\/script>\n\n\n\n<p>Run <strong>Migration <\/strong>Command <\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">$ php artisan migrate<\/code><\/span><\/pre>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"727\" height=\"252\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/9.jpg\" alt=\"\" class=\"wp-image-19280\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/9.jpg 727w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/9-300x104.jpg 300w\" sizes=\"auto, (max-width: 727px) 100vw, 727px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 7 &#8211; Create Model and Some Code<\/strong> <\/h3>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">$ php artisan make:model Post<\/code><\/span><\/pre>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"592\" height=\"176\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/10.jpg\" alt=\"\" class=\"wp-image-19281\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/10.jpg 592w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/10-300x89.jpg 300w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><\/figure>\n\n\n\n<p>Inside Model, we are adding some code<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/sumitidea\/d30b6277ac9652d948dc7e4d66dce93c.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 8 &#8211; Create Controller Using Command<\/strong><\/h3>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">php artisan make:controller ajaxcrud\/AjaxPostController<\/code><\/span><\/pre>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"543\" height=\"164\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/11.jpg\" alt=\"\" class=\"wp-image-19282\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/11.jpg 543w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/11-300x91.jpg 300w\" sizes=\"auto, (max-width: 543px) 100vw, 543px\" \/><\/figure>\n\n\n\n<p>Inside AjaxPostController, we are adding following code given below &#8211;<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/dharmu9898\/5b5714c51c8d6d2dbe232407bd46e38d.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Step 9 &#8211; Create Blade File\/View File<\/h3>\n\n\n\n<p>Let&#8217;s Create a blade file <strong>&#8220;index.blade.php&#8221;<\/strong> in the <strong>&#8220;resources\/views\/ajaxcrud\/&#8221; <\/strong>directory and put the following code in it respectively<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/dharmu9898\/93904d7cfd7ad722210155a241cae32d.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 10 &#8211; Create Reso<\/strong>urce Routes<\/h3>\n\n\n\n<p>We need to add a resource route in <strong>&#8220;routes\/web.php&#8221;<\/strong>. Let&#8217;s open <strong>&#8220;routes\/web.php&#8221;<\/strong> file and add the following route.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">Route::resource(<span class=\"hljs-string\">'ajax-posts'<\/span>, <span class=\"hljs-string\">'ajaxcrud\\AjaxPostController'<\/span>);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Start The Development Server<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">$ php artisan serve<\/code><\/span><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Output <\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/12-1-1024x576.jpg\" alt=\"\" class=\"wp-image-19292\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/12-1-1024x576.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/12-1-300x169.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/12-1-768x432.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/12-1-355x199.jpg 355w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/12-1.jpg 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Add Post<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"431\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/13-1024x431.jpg\" alt=\"\" class=\"wp-image-19287\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/13-1024x431.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/13-300x126.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/13-768x323.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/13.jpg 1195w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"273\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/14-2-1024x273.jpg\" alt=\"\" class=\"wp-image-19294\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/14-2-1024x273.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/14-2-300x80.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/14-2-768x205.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/14-2.jpg 1099w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Edit<\/strong>, we are editing and updating the data<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"443\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/15-1024x443.jpg\" alt=\"\" class=\"wp-image-19289\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/15-1024x443.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/15-300x130.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/15-768x333.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/15.jpg 1097w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"289\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/16-1-1024x289.jpg\" alt=\"\" class=\"wp-image-19293\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/16-1-1024x289.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/16-1-300x85.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/16-1-768x216.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/16-1.jpg 1047w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Step 1 &#8211; Create a fresh laravel projet First off all , create a project using following command given below &#8211; Change Directory to AjaxCrud folder Step 2 &#8211; Configure Database in .env file Step 3 &#8211; Open Xampp tool and start the server Go to phpMyAdmin and create database with same name as .env&#8230;<\/p>\n","protected":false},"author":1,"featured_media":19296,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[2,5201],"tags":[5838,6245,5203,3415,5356],"class_list":["post-19270","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised","category-laravel","tag-ajax","tag-git-bash","tag-laravel","tag-visual-studio-2010","tag-xampp"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=19270"}],"version-history":[{"count":6,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19270\/revisions"}],"predecessor-version":[{"id":19304,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19270\/revisions\/19304"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/19296"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=19270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=19270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=19270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}