1<!DOCTYPE html> 2<html data-html-server-rendered="true" lang="en" data-vue-tag="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D"> 3 <head> 4 <title>Component Structure - Laravel EasyPanel</title><meta name="gridsome:hash" content="79ad2d364ec297ef2551b97fadf7e5fcac02a5f7"><meta data-vue-tag="ssr" charset="utf-8"> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=2edd368f-5240-4443-bcbd-b6d82ab5b4e8 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --><meta data-vue-tag="ssr" name="generator" content="Gridsome v0.7.11"><meta data-vue-tag="ssr" data-key="viewport" name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><meta data-vue-tag="ssr" data-key="format-detection" name="format-detection" content="telephone=no"><meta data-vue-tag="ssr" name="theme-color" content="#4E56A6"><meta data-vue-tag="ssr" name="google-site-verification" content="undefined"><meta data-vue-tag="ssr" name="apple-mobile-web-app-status-bar-style" content="default"><meta data-vue-tag="ssr" data-key="description" name="description" content="undefined"><link data-vue-tag="ssr" rel="icon" href="data:,"><link data-vue-tag="ssr" rel="icon" type="image/png" sizes="16x16" href="/assets/static/favicon.ce0531f.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="icon" type="image/png" sizes="32x32" href="/assets/static/favicon.ac8d93a.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="icon" type="image/png" sizes="96x96" href="/assets/static/favicon.b9532cc.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="apple-touch-icon" type="image/png" sizes="76x76" href="/assets/static/favicon.f22e9f3.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="apple-touch-icon" type="image/png" sizes="152x152" href="/assets/static/favicon.62d22cb.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="apple-touch-icon" type="image/png" sizes="120x120" href="/assets/static/favicon.1539b60.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="apple-touch-icon" type="image/png" sizes="167x167" href="/assets/static/favicon.dc0cdc5.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="apple-touch-icon" type="image/png" sizes="180x180" href="/assets/static/favicon.7b22250.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="manifest" href="/manifest.json"><link rel="preload" href="/assets/css/0.styles.8581b417.css" as="style"><link rel="preload" href="/assets/js/app.5f2318c4.js" as="script"><link rel="preload" href="/assets/js/page--src--templates--doc-vue.c9b7ae84.js" as="script"><link rel="prefetch" href="/assets/js/page--node-modules--gridsome--app--pages--404-vue.8f2a916a.js"><link rel="prefetch" href="/assets/js/page--src--pages--index-vue.3385d69c.js"><link rel="stylesheet" href="/assets/css/0.styles.8581b417.css"><noscript data-vue-tag="ssr"><style>.g-image--loading{display:none;}</style></noscript> 8 </head> 9 <body > 10 <div data-server-rendered="true" id="app" class="site" data-v-911841cc data-v-b32654a2><header class="header" data-v-57449993 data-v-911841cc><a href="/" title="Back to home" class="logo active" data-v-69568d74 data-v-57449993><!----><div data-v-69568d74 data-v-69568d74><img alt="logo" src="data:image/svg+xml,%3csvg fill='none' viewBox='0 0 800 248' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cfilter id='__svg-blur-0'%3e%3cfeGaussianBlur in='SourceGraphic' stdDeviation='40'/%3e%3c/filter%3e%3c/defs%3e%3cimage x='0' y='0' filter='url(%23__svg-blur-0)' width='800' height='248' xlink:href='data:image/png%3bbase64%2ciVBORw0KGgoAAAANSUhEUgAAAEAAAAAUCAYAAAA9djs/AAAACXBIWXMAAC4jAAAuIwF4pT92AAAHZklEQVRYw%2b1Xa1BUZRj%2bzll1zKmsJiumLB2HzMomHTXHJu2HVmrklIKCLHIVAUG5LuxyjQARb2WammhGosveueyyuIASiCiOaFc1s340xVRaouw5B3V7zncOB3D3RzP6o2n4Zs6c77zvd3nf533e9/sOIcNtuA03sa1ababvxLQ6snSlnl268jD7XshhdvmqKnZtai3VRcVb72qP69/%2b
10SoRsaQ0hx8YIaUZWSDGwQpqB5QvrGFHel1BJuH1td%2b0P/36N9C62EyEVe2hMrHvvl7Ku1vekMBkEX211ou2egS3ofAMpZBiZwcbfPQjejvZ%2b0eF78Lp0O33nftD0cMQayxtgREBYjDkgMs4akJpV/6Co0xW4yLJQPft24EFVoFrPFm44SuccMnxFgiMMbADk7wRVqkIijOzFy3%2bQTz87Q9TRJnbNOsmh8DUWZmeKjaXGbXT6gQVvCVrrYiHbFsB92PgEBUFrYdAXwVD1JR1W4ZvttZ3tB47hi%2byMkGlmhWS9iv9AYo3YuDInI6RWqfrWQ55XzXDbmyQQSusfxBqLhNzqWdebzrPS2AZvAILDDVQZnWALAPWvLw%2brMgaG6m0hkUZzssYxQdT5TdroNe/7i7//q2ggfZgh0c40a4R04xVeY/oczh4Vssxtbn3nGF9zPaIj%2bdWMT9akVBE%2b2%2bqlQ1qpqLMb6yeA/la6V7H9cQoK0s8bgAgJAER8GfqHfG3mav5RFRFnUYdGmzIxLtDj8bD9OkR5AeQpSKM0gLgYOrJtRwfqR92cdJ2TOpaUbp%2bozbBPp0ZkmgsQmTKx34N1AEILn2ubSo3%2bqPERPr8mjtdZNIjyQoXSGxxTuE%2bOTuRzq%2bdj7DowZVy/zl3e9jBkcXyONZ0vcbxMQQAjFECyzJ0A6mm6jg/AFACiEqxLEPn2FeGG12LW2p4UZXCCGVQnkpAGeStWGc6Ex1rWi7K49bXzwJie4AjjRuhKAcSRVK3zqdNd3aOw7jfRCVZ/cZw6xqxVg1G0IGaai2DUFmpQ%2bfHRAKAd1H2R5qnlzP1IjxzICsGU8wBhsexEyS2N2YO3HToHAKRJ7q48eZ%2bgszQJGSYDIr0Z%2bu8BFgXaM7MALHCOETJNP8DxCf1p1lvzlW8A4PRCpMCf%2bG6KT655U5SFRplU8gnxLOQ65HgsQGoFSJ/I8klIldMro4yWhJTaV0WZamwBI6/rRC2JEvuY54qKMSVSJzXmdDhxBYbbYPApPA29VZ2jKSBF9jn4zkXOJ2LM1xiTIqWNaRPoTBPY/VHjowDnGzo%2b1/YC%2bj9zm4/49zRfGIMxTl5r0Ym6m0G7WHnMp3xh7UO0X%2bLwpnfIQAoshdF6XykAJ7%2bEbi8cUgeFVTUBgJ2D9WBELGrJOTBgX396oKCGiCBk5DRMA2vOHys/8YCcAjoYbUR0pyAyc927jo2l9N/R/Bgc/lpMD8ij4UyXoDVr5Mhtg07qZ1snYX6X7NxkAPU7QLNAZsOcZr6gZoFSIEvrZ%2bD7IL%2bhfrbMJOZG2%2bWhzq2Qi2BkvHUZonsKzj4XqK6aAWenrUmqHi1H8yLkS7T5jWNxPzgKEMwya14CvdWRcbZxKHaLsVa3tsA1XtRV6M/dhzmtGNuNE0E3qAhugCHbvY6u0vpJcPQSojWTL3ZMxLgf8JTKhu/GUyYVMut4OPoj57owkiux%2b0H%2bC%2bpGKOrDdNwp5rj3H79fWTOv2oBnJ9LKJBVVf9SZpqEbh8eaKQCJqXWzgtT6djjogNHOlZFGJ2qAv1zJwyBvQyRdiHQDjrV1ojwhufZF0N%2b1fJWhEbWgBSxKF%2bWzX9%2bjkgvkGwC1Nyvf5acAkFcdDKNiaV9jGsltdTGeKTn9BmshOwHHXQCjHtELluUxeELkC85DiPw2bnuzxKiCmiDMaUEdqKEMKLa/pgBQWLsCwLjwVtPLVmwF4z7QfsdR4/Eob5G%2bnZ0/jeg4eXnEQKVfouivXr2hVNcHHi9SCmSl4dwo6BWd3XVJhToyDYyoQFrsF2Uz5perrs3bNOiImztwU%2bwYoOXfQp%2bKyDZJ49iB/ivFQ233Sx1Yo%2b7sqGuXukfcySw4rDDi72u877PaM2hDX23RexWKFeOeKWVHjs2XToYYM0CIV4BY%2bK40TgQPjpeJbMIR%2bKwoi0%2bSznPP1Hxye3K2cs6797TQ/g3Xd6Qv8jNln9sLtrCekbFSf9r7xDNbcv7Wko%2bJx1/HCFny1TpZz955d7j%2bF0cuwKeb4fvpnjfDypmrso/uva1DncvIdtJ3QUkzEe/%2b4pOQXENSMh1k%2b%2b4TVHegsgvf9eKxSLbuaCf5xc3K/LyiZoITgKzXOHADPE2qHRe8AHwn6KDS58pbCbdHuptzu46Rnht99E2NO3xKvNkRblMDcVecIG7534Db3YLzXjK813iaOsHtP06/e779jXDbXAT1gM51D/qf6D3YQXBCkH7aezl/r1tRmeTIrn2dZOLzW5jxkzcxqAE0CnPfLCfX3Lf/33%2bWp7q6ydRZH9O%2bJvcISdM1kAOHpPt86dZWMtyG23%2bn/QPMNSI%2b0iilxwAAAABJRU5ErkJggg==' /%3e%3c/svg%3e" width="800" data-src="/assets/static/logo.775f9c8.57240b887086ebf549093eff12709633.png" data-srcset="/assets/static/logo.82a2fbd.57240b887086ebf549093eff12709633.png 480w, /assets/static/logo.775f9c8.57240b887086ebf549093eff12709633.png 800w" data-sizes="(max-width: 800px) 100vw, 800px" class="g-image g-image--lazy g-image--loading" data-v-69568d74><noscript data-v-69568d74><img src="/assets/static/logo.775f9c8.57240b887086ebf549093eff12709633.png" class="g-image g-image--loaded" width="800" alt="logo"></noscript></div></a><nav class="nav" data-v-57449993><button id="themeSwitch" aria-label="Switch theme between light and dark" data-v-2a25ef95 data-v-57449993><!----><!----></button><button aria-label="Toggle the sidebar" class="toggle" data-v-def1a688 data-v-57449993><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="open feather feather-menu" data-v-def1a688 data-v-def1a688><line x1="3" y1="12" x2="21" y2="12" data-v-def1a688></line><line x1="3" y1="6" x2="21" y2="6" data-v-def1a688></line><line x1="3" y1="18" x2="21" y2="18" data-v-def1a688></line></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="close feather feather-x" style="display:none;" data-v-def1a688 data-v-def1a688><line x1="18" y1="6" x2="6" y2="18" data-v-def1a688></line><line x1="6" y1="6" x2="18" y2="18" data-v-def1a688></line></svg></button></nav></header>
10<aside class="sidebar" data-v-460eb486 data-v-911841cc><nav data-v-460eb486><ul data-v-460eb486><li class="section" data-v-460eb486><h3 class="section-title" data-v-460eb486>Introduction</h3><ul data-v-460eb486><li data-v-460eb486><a href="/getting-started" class="topic" data-v-460eb486>Getting started</a><!----><!----><!----><ul class="nested-list" data-v-460eb486><li data-v-460eb486><a href="/getting-started#what-is-easypanel" class="sub-topic" data-v-460eb486>What is EasyPanel</a></li><li data-v-460eb486><a href="/getting-started#installation" class="sub-topic" data-v-460eb486>Installation</a></li></ul><!----><!----></li><li data-v-460eb486><a href="/manage-administrators" class="topic" data-v-460eb486>Manage Administrators</a><!----><ul class="nested-list" data-v-460eb486><li data-v-460eb486><a href="/manage-administrators#authentication-strategy" class="sub-topic" data-v-460eb486>Authentication Strategy</a></li><li data-v-460eb486><a href="/manage-administrators#create-an-administrator" class="sub-topic" data-v-460eb486>Create an Administrator</a></li><li data-v-460eb486><a href="/manage-administrators#remove-an-administrator" class="sub-topic" data-v-460eb486>Remove an Administrator</a></li><li data-v-460eb486><a href="/manage-administrators#admin-list" class="sub-topic" data-v-460eb486>Admin List</a></li></ul><!----><!----><!----><!----></li></ul></li><li class="section" data-v-460eb486><h3 class="section-title" data-v-460eb486>CRUD Settings</h3><ul data-v-460eb486><li data-v-460eb486><a href="/component-structure" class="topic active--exact active" data-v-460eb486>Component Structure</a><!----><!----><!----><!----><!----><ul class="nested-list" data-v-460eb486><li data-v-460eb486><a href="/component-structure#what-is-the-component" class="sub-topic" data-v-460eb486>What is the component</a></li><li data-v-460eb486><a href="/component-structure#how-to-create-a-component" class="sub-topic" data-v-460eb486>How to create a component</a></li><li data-v-460eb486><a href="/component-structure#component-methods" class="sub-topic" data-v-460eb486>Component Methods</a></li><li data-v-460eb486><a href="/component-structure#build-crud" class="sub-topic" data-v-460eb486>Build CRUD</a></li></ul></li><li data-v-460eb486><a href="/inputs" class="topic" data-v-460eb486>Inputs</a><!----><!----><ul class="nested-list" data-v-460eb486><li data-v-460eb486><a href="/inputs#provide-inputs" class="sub-topic" data-v-460eb486>Provide Inputs</a></li><li data-v-460eb486><a href="/inputs#simple-inputs" class="sub-topic" data-v-460eb486>Simple inputs</a></li><li data-v-460eb486><a href="/inputs#inputs-but-pro" class="sub-topic" data-v-460eb486>Inputs, but pro!</a></li></ul><!----><!----><!----></li><li data-v-460eb486><a href="/fields" class="topic" data-v-460eb486>Fields</a><ul class="nested-list" data-v-460eb486><li data-v-460eb486><a href="/fields#what-is-a-field" class="sub-topic" data-v-460eb486>What is a field</a></li><li data-v-460eb486><a href="/fields#define-simple-fields" class="sub-topic" data-v-460eb486>Define simple fields</a></li><li data-v-460eb486><a href="/fields#control-your-fields" class="sub-topic" data-v-460eb486>Control Your Fields</a></li><li data-v-460eb486><a href="/fields#images" class="sub-topic" data-v-460eb486>Images</a></li><li data-v-460eb486><a href="/fields#badges" class="sub-topic" data-v-460eb486>Badges</a></li></ul><!----><!----><!----><!----><!----></li></ul></li><li class="section" data-v-460eb486><h3 class="section-title" data-v-460eb486>Configuration</h3><ul data-v-460eb486><li data-v-460eb486><a href="/configuration" class="topic" data-v-460eb486>Configuration</a><!----><!----><!----><!----><ul class="nested-list" data-v-460eb486><li data-v-460eb486><a href="/configuration#how-to-manage-configuration" class="sub-topic" data-v-460eb486>How to Manage Configuration</a></li><li data-v-460eb486><a href="/configuration#changing-language" class="sub-topic" data-v-460eb486>Changing Language</a></li></ul><!----></li></ul></li></ul><a target="_blank" href="https://github.com/rezaamini-ir/laravel-easypanel" title="Git-repository" aria-label="EasyPanel on Github" class="git small" data-v-9b5c2936 data-v-460eb48
106><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon feather feather-github" data-v-9b5c2936 data-v-9b5c2936><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" data-v-9b5c2936 data-v-9b5c2936></path></svg> 11 Project on Github 12</a></nav></aside><main class="main" data-v-911841cc><h1 data-v-911841cc data-v-b32654a2> 13 Component Structure 14 </h1><div class="markdown" data-v-911841cc data-v-b32654a2><ul> 15<li><a href="#what-is-the-component">What is the component</a></li> 16<li><a href="#how-to-create-a-component">How to create a component</a></li> 17<li> 18<p><a href="#component-methods">Component Methods</a></p> 19<ul> 20<li><a href="#actions">Actions</a></li> 21<li><a href="#model-for-component">Model for Component</a></li> 22<li><a href="#fields">Fields</a></li> 23<li> 24<p><a href="#searchable">Searchable</a></p> 25<ul> 26<li><a href="#laze-mode-for-searching">Lazy Mode for Searching</a></li> 27<li><a href="#disable-searching">Disable Searching</a></li> 28</ul> 29</li> 30<li><a href="#inputs">Inputs</a></li> 31<li><a href="#validation">Validation</a></li> 32<li><a href="#store-files">Store Files</a></li> 33</ul> 34</li> 35<li><a href="#build-crud">Build CRUD</a></li> 36</ul> 37<h2 id="what-is-the-component"><a href="#what-is-the-component" aria-hidden="true"><span class="icon icon-link"></span></a>What is the component</h2> 38<p>Components in EasyPanel are the classes that have been located in the <code class="language-text">app/CRUD</code> directory, and You can manage your CRUDs by editing these components!</p> 39<p>To have CRUD action for our models, each of them must have a single component in <code class="language-text">app/CRUD</code>.</p> 40<h2 id="how-to-create-a-component"><a href="#how-to-create-a-component" aria-hidden="true"><span class="icon icon-link"></span></a>How to create a component</h2> 41<p>To create a CRUD for your models, you can easily go to the <code class="language-text">/admin</code> route (this address can be modified in the config file), then open the <code class="language-text">CRUD Manager</code> page. 42Now you can manage or create new CRUDs.</p> 43<p>There is a button called <code class="language-text">Create CRUD</code>, after opening this page a form will be shown, and You can pass your model namespace, CRUD's route, and CRUD's icon. 44After creating the CRUD with the <code class="language-text">create</code> button, a new file will be created in the <code class="language-text">app/CRUD</code> directory which has this format:</p> 45<pre class="language-php">ModelComponent<span class="token operator">.</span>php <span class="token comment">// Model is your model name</span></pre> 46<h2 id="component-methods"><a href="#component-methods" aria-hidden="true"><span class="icon icon-link"></span></a>Component Methods</h2> 47<p>Each component has a few methods and properties to be managed by them.</p> 48<h3 id="actions"><a href="#actions" aria-hidden="true"><span class="icon icon-link"></span></a>Actions</h3> 49<p>As you may know, CRUD stands for 4 words:</p> 50<ul> 51<li>Create</li> 52<li>Read</li> 53<li>Update</li> 54<li>Delete</li> 55</ul> 56<p>3 of these actions are manageable in CRUD components, and you can manage them easily in properties:</p> 57<pre class="language-php"><span class="token keyword">public</span> <span class="token variable">$create</span> <span class="token operator">=</span> <span class="token constant boolean">true</span><span class="token punctuation">;</span> 58<span class="token keyword">public</span> <span class="token variable">$delete</span> <span class="token operator">=</span> <span class="token constant boolean">true</span><span class="token punctuation">;</span> 59<span class="token keyword">public</span> <span class="token variable">$update</span> <span class="token operator">=</span> <span class="token constant boolean">true</span><span class="token punctuation">;</span></pre> 60<p>If you want to turn one of them off, you can set it as <code class="language-text">false</code>, that's it!</p> 61<h3 id="model-for-component"><a href="#model-for-component" aria-hidden="true"><span class="icon icon-link"></span></a>Model for Component</h3> 62<p>As was said before, each CRUD component must have a model. 63This model will be parsed automatically after creating a CRUD component on the CRUD Manager page. 64If You want to change this model for any reason <em>(is not recommended!)</em>, you can pass a new model in the <code class="language-text">getModel()</code> component method:</p> 65<pre class="language-php"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">getModel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 66<span class="token punctuation">{</span> 67 <span class="token keyword">return</span> <span class="token scope">Article<span class="token punctuation">::</span></span><span class="token keyword">class</span><span class="token punctuation">;</span> 68<span class="token punctuation">}</span></pre> 69<p><strong>This Method must return a model namespace!</strong></p> 70<h3 id="fields"><a href="#fields" aria-hidden="true"><span class="icon icon-link"></span></a>Fields</h3> 71<p>We have documented a lot about Fields in <a href="/fields">Field Page</a>.</p> 72<h3 id="searchable"><a href="#searchable" aria-hidden="true"><span class="icon icon-link"></span></a>Searchable</h3> 73<p>As you may be noticed, there is a feature in EasyPanel to search on our model data and its relations.</p> 74<p>To define the searchable fields, you can return an array with some properties which are available on model properties:</p> 75<pre class="language-php"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">searchange</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 76 <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'content'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> 77<span class="token punctuation">}</span></pre> 78<p>To search in relational values, first you must define the relationship in your model, then:</p> 79<pre class="language-php"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">searchange</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 80 <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'content'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'user.name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'user.email'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> 81<span class="token punctuation">}</span></pre> 82<p>These <code class="language-text">.</code> will be replaced by <code class="language-text">-></code> in behind scene, take care about the values and properties and their existence.</p> 83<h4 id="laze-mode-for-searching"><a href="#laze-mode-for-searching" aria-hidden="true"><span class="icon icon-link"></span></a>Laze Mode for Searching</h4> 84<p>If you want to use lazy mode for your searching strategy, to decrease pressure on your server you can change the <code class="language-text">lazy_mode</code> key on your config file in the <code class="language-text">config/easy_panel.php</code> directory:</p> 85<pre class="language-php"><span class="token keyword">return</span> <span class="token punctuation">[</span> 86 <span class="token operator">...</span> 87 <span class="token string single-quoted-string">'lazy_mode'</span> <span class="token operator">=></span> <span class="token constant boolean">true</span><span class="token punctuation">,</span> 88 <span class="token operator">...</span> 89<span class="token punctuation">]</span><span class="token punctuation">;</span> 90 </pre> 91<p>In behind scene, It will use <code class="language-text">wire:model.lazy</code> instead of <code class="language-text">wire:model</code>.</p> 92<h4 id="disable-searching"><a href="#disable-searching" aria-hidden="true"><span class="icon icon-link"></span></a>Disable Searching</h4> 93<p>To turn the searching feature off, You can return an empty array in the <code class="language-text">searchable()</code> method:</p> 94<pre class="language-php"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">searchange</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 95 <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> 96<span class="token punctuation">}</span></pre> 97<h3 id="inputs"><a href="#inputs" aria-hidden="true"><span class="icon icon-link"></span></a>Inputs</h3> 98<p>We have documented a lot about Inputs in <a href="/inputs">Inputs Page</a>.</p> 99<h3 id="validation"><a href="#validation" aria-hidden="true"><span class="icon icon-link"></span></a>Validation</h3> 100<p>Validation rules in EasyPanel components uses the <a href="https://laravel.com/docs/master/validation" target="_blank" rel="nofollow noopener noreferrer">default validation in Laravel</a>. 101To use validation you need to return an array with keys and values in the <code class="language-text">validationRules()</code> method in the CRUD component:</p> 102<pre class="language-php"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">validationRules</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 103<span class="token punctuation">{</span> 104 <span class="token keyword">return</span> <span class="token punctuation">[</span>
105 <span class="token string single-quoted-string">'title'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'required|min:2|max:255'</span><span class="token punctuation">,</span> 106 <span class="token string single-quoted-string">'content'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'required|min:30'</span> 107 <span class="token punctuation">]</span><span class="token punctuation">;</span> 108<span class="token punctuation">}</span> </pre> 109<p><strong>The key should be matched with the key of inputs!</strong></p> 110<h3 id="store-files"><a href="#store-files" aria-hidden="true"><span class="icon icon-link"></span></a>Store Files</h3> 111<p>If you use inputs with file type, You may be wondering how can you change the path of the store method?</p> 112<p>It's really easy in EasyPanel:</p> 113<pre class="language-php"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">storePaths</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 114<span class="token punctuation">{</span> 115 <span class="token keyword">return</span> <span class="token punctuation">[</span> 116 <span class="token string single-quoted-string">'profile'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'photos/profile-photo'</span> 117 <span class="token punctuation">]</span><span class="token punctuation">;</span> 118<span class="token punctuation">}</span> </pre> 119<p>In behind scene it will do something like this:</p> 120<pre class="language-php"><span class="token this">$this</span><span class="token operator">-></span><span class="token property">profile</span><span class="token operator">-></span><span class="token function">store</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'photos/profile-photo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre> 121<p>The <code class="language-text">store()</code> method belong to Livewire, <a href="https://laravel-livewire.com/docs/2.x/file-uploads#basic-upload" target="_blank" rel="nofollow noopener noreferrer">Read more about store()</a>.</p> 122<p><strong>The key must be equal to the input key.</strong></p> 123<h2 id="build-crud"><a href="#build-crud" aria-hidden="true"><span class="icon icon-link"></span></a>Build CRUD</h2> 124<p>When you make the CRUD Component customize based on your needs. 125You need to build or rebuild the CRUD on the <code class="language-text">CRUD Manager</code> Page.</p> 126<p>It will create 2 new directories for your project in <code class="language-text">app/Http/Livewire/Admin</code> and <code class="language-text">resources/views/livewire/admin/</code> with the name of your model!</p> 127<p>These 2 folders contain CRUD components, and you can customize them based on your needs.</p> 128<p>For example, if our model is <code class="language-text">Article</code> we will have these components:</p> 129<pre class="language-text">app/Http/Livewire/Admin/Article: 130ââââ Create.php 131ââââ Read.php 132ââââ Single.php 133ââââ Update.php 134 135resources/views/livewire/admin/article: 136ââââ create.blade.php 137ââââ read.blade.php 138ââââ single.blade.php 139ââââ update.blade.php </pre> 140<p>Be careful, when you rebuild a CRUD all components will be rebuilt again, and every custom change will be removed!</p> 141<p><strong>Any changes in validationRules(), storePaths(), inputs(), fields() and getModel() need rebuilt!</strong></p> 142</div></main></div> 143
143<script>window.__INITIAL_STATE__={"data":{"doc":{"title":"Component Structure","path":"\u002Fcomponent-structure\u002F","date":"18. January 2022","timeToRead":3,"content":"\u003Cul\u003E\n\u003Cli\u003E\u003Ca href=\"#what-is-the-component\"\u003EWhat is the component\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ca href=\"#how-to-create-a-component\"\u003EHow to create a component\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\n\u003Cp\u003E\u003Ca href=\"#component-methods\"\u003EComponent Methods\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Ca href=\"#actions\"\u003EActions\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ca href=\"#model-for-component\"\u003EModel for Component\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ca href=\"#fields\"\u003EFields\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\n\u003Cp\u003E\u003Ca href=\"#searchable\"\u003ESearchable\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Ca href=\"#laze-mode-for-searching\"\u003ELazy Mode for Searching\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ca href=\"#disable-searching\"\u003EDisable Searching\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ca href=\"#inputs\"\u003EInputs\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ca href=\"#validation\"\u003EValidation\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ca href=\"#store-files\"\u003EStore Files\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ca href=\"#build-crud\"\u003EBuild CRUD\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003Ch2 id=\"what-is-the-component\"\u003E\u003Ca href=\"#what-is-the-component\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat is the component\u003C\u002Fh2\u003E\n\u003Cp\u003EComponents in EasyPanel are the classes that have been located in the \u003Ccode class=\"language-text\"\u003Eapp\u002FCRUD\u003C\u002Fcode\u003E directory, and You can manage your CRUDs by editing these components!\u003C\u002Fp\u003E\n\u003Cp\u003ETo have CRUD action for our models, each of them must have a single component in \u003Ccode class=\"language-text\"\u003Eapp\u002FCRUD\u003C\u002Fcode\u003E.\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-create-a-component\"\u003E\u003Ca href=\"#how-to-create-a-component\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to create a component\u003C\u002Fh2\u003E\n\u003Cp\u003ETo create a CRUD for your models, you can easily go to the \u003Ccode class=\"language-text\"\u003E\u002Fadmin\u003C\u002Fcode\u003E route (this address can be modified in the config file), then open the \u003Ccode class=\"language-text\"\u003ECRUD Manager\u003C\u002Fcode\u003E page.\nNow you can manage or create new CRUDs.\u003C\u002Fp\u003E\n\u003Cp\u003EThere is a button called \u003Ccode class=\"language-text\"\u003ECreate CRUD\u003C\u002Fcode\u003E, after opening this page a form will be shown, and You can pass your model namespace, CRUD's route, and CRUD's icon.\nAfter creating the CRUD with the \u003Ccode class=\"language-text\"\u003Ecreate\u003C\u002Fcode\u003E button, a new file will be created in the \u003Ccode class=\"language-text\"\u003Eapp\u002FCRUD\u003C\u002Fcode\u003E directory which has this format:\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003EModelComponent\u003Cspan class=\"token operator\"\u003E.\u003C\u002Fspan\u003Ephp \u003Cspan class=\"token comment\"\u003E\u002F\u002F Model is your model name\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Ch2 id=\"component-methods\"\u003E\u003Ca href=\"#component-methods\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EComponent Methods\u003C\u002Fh2\u003E\n\u003Cp\u003EEach component has a few methods and properties to be managed by them.\u003C\u002Fp\u003E\n\u003Ch3 id=\"actions\"\u003E\u003Ca href=\"#actions\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EActions\u003C\u002Fh3\u003E\n\u003Cp\u003EAs you may know, CRUD stands for 4 words:\u003C\u002Fp\u003E\n\u003Cul\u003E\n\u003Cli\u003ECreate\u003C\u002Fli\u003E\n\u003Cli\u003ERead\u003C\u002Fli\u003E\n\u003Cli\u003EUpdate\u003C\u002Fli\u003E\n\u003Cli\u003EDelete\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003Cp\u003E3 of these actions are manageable in CRUD components, and you can manage them easily in properties:\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token variable\"\u003E$create\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\"token constant boolean\"\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token variable\"\u003E$delete\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\"token constant boolean\"\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token variable\"\u003E$update\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\"token constant boolean\"\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003EIf you want to turn one of them off, you can set it as \u003Ccode class=\"language-text\"\u003Efalse\u003C\u002Fcode\u003E, that's it!\u003C\u002Fp\u003E\n\u003Ch3 id=\"model-for-component\"\u003E\u003Ca href=\"#model-for-component\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EModel for Component\u003C\u002Fh3\u003E\n\u003Cp\u003EAs was said before, each CRUD component must have a model.\nThis model will be parsed automatically after creating a CRUD component on the CRUD Manager page.\nIf You want to change this model for any reason \u003Cem\u003E(is not recommended!)\u003C\u002Fem\u003E, you can pass a new model in the \u003Ccode class=\"language-text\"\u003EgetModel()\u003C\u002Fcode\u003E component method:\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function-definition function\"\u003EgetModel\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n \u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token scope\"\u003EArticle\u003Cspan class=\"token punctuation\"\u003E::\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token keyword\"\u003Eclass\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003E\u003Cstrong\u003EThis Method must return a model namespace!\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n\u003Ch3 id=\"fields\"\u003E\u003Ca href=\"#fields\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EFields\u003C\u002Fh3\u003E\n\u003Cp\u003EWe have documented a lot about Fields in \u003Ca href=\"\u002Ffields\"\u003EField Page\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\n\u003Ch3 id=\"searchable\"\u003E\u003Ca href=\"#searchable\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESearchable\u003C\u002Fh3\u003E\n\u003Cp\u003EAs you may be noticed, there is a feature in EasyPanel to search on our model data and its relations.\u003C\u002Fp\u003E\n\u003Cp\u003ETo define the searchable fields, you can return an array with some properties which are available on model properties:\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function-definition function\"\u003Esearchange\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n \u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'title'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'content'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003ETo search in relational values, first you must define the relationship in your model, then:\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function-definition function\"\u003Esearchange\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n \u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'title'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'content'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'user.n
143ame'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'user.email'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003EThese \u003Ccode class=\"language-text\"\u003E.\u003C\u002Fcode\u003E will be replaced by \u003Ccode class=\"language-text\"\u003E->\u003C\u002Fcode\u003E in behind scene, take care about the values and properties and their existence.\u003C\u002Fp\u003E\n\u003Ch4 id=\"laze-mode-for-searching\"\u003E\u003Ca href=\"#laze-mode-for-searching\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003ELaze Mode for Searching\u003C\u002Fh4\u003E\n\u003Cp\u003EIf you want to use lazy mode for your searching strategy, to decrease pressure on your server you can change the \u003Ccode class=\"language-text\"\u003Elazy_mode\u003C\u002Fcode\u003E key on your config file in the \u003Ccode class=\"language-text\"\u003Econfig\u002Feasy_panel.php\u003C\u002Fcode\u003E directory:\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\n \u003Cspan class=\"token operator\"\u003E...\u003C\u002Fspan\u003E \n \u003Cspan class=\"token string single-quoted-string\"\u003E'lazy_mode'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token constant boolean\"\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n \u003Cspan class=\"token operator\"\u003E...\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n \u003C\u002Fpre\u003E\n\u003Cp\u003EIn behind scene, It will use \u003Ccode class=\"language-text\"\u003Ewire:model.lazy\u003C\u002Fcode\u003E instead of \u003Ccode class=\"language-text\"\u003Ewire:model\u003C\u002Fcode\u003E.\u003C\u002Fp\u003E\n\u003Ch4 id=\"disable-searching\"\u003E\u003Ca href=\"#disable-searching\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDisable Searching\u003C\u002Fh4\u003E\n\u003Cp\u003ETo turn the searching feature off, You can return an empty array in the \u003Ccode class=\"language-text\"\u003Esearchable()\u003C\u002Fcode\u003E method:\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function-definition function\"\u003Esearchange\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n \u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Ch3 id=\"inputs\"\u003E\u003Ca href=\"#inputs\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EInputs\u003C\u002Fh3\u003E\n\u003Cp\u003EWe have documented a lot about Inputs in \u003Ca href=\"\u002Finputs\"\u003EInputs Page\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\n\u003Ch3 id=\"validation\"\u003E\u003Ca href=\"#validation\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EValidation\u003C\u002Fh3\u003E\n\u003Cp\u003EValidation rules in EasyPanel components uses the \u
143003Ca href=\"https:\u002F\u002Flaravel.com\u002Fdocs\u002Fmaster\u002Fvalidation\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003Edefault validation in Laravel\u003C\u002Fa\u003E.\nTo use validation you need to return an array with keys and values in the \u003Ccode class=\"language-text\"\u003EvalidationRules()\u003C\u002Fcode\u003E method in the CRUD component:\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function-definition function\"\u003EvalidationRules\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n \u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\n \u003Cspan class=\"token string single-quoted-string\"\u003E'title'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'required|min:2|max:255'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n \u003Cspan class=\"token string single-quoted-string\"\u003E'content'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'required|min:30'\u003C\u002Fspan\u003E\n \u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003C\u002Fpre\u003E\n\u003Cp\u003E\u003Cstrong\u003EThe key should be matched with the key of inputs!\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n\u003Ch3 id=\"store-files\"\u003E\u003Ca href=\"#store-files\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EStore Files\u003C\u002Fh3\u003E\n\u003Cp\u003EIf you use inputs with file type, You may be wondering how can you change the path of the store method?\u003C\u002Fp\u003E\n\u003Cp\u003EIt's really easy in EasyPanel:\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function-definition function\"\u003EstorePaths\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n \u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\n \u003Cspan class=\"token string single-quoted-string\"\u003E'profile'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'photos\u002Fprofile-photo'\u003C\u002Fspan\u003E\n \u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003C\u002Fpre\u003E\n\u003Cp\u003EIn behind scene it will do something like this:\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token this\"\u003E$this\u003C\u002Fspan\u003E\u003Cspan class=\"token operator\"\u003E-\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token property\"\u003Eprofile\u003C\u002Fspan\u003E\u003Cspan class=\"token operator\"\u003E-\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003Estore\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'photos\u002Fprofile-photo'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E \u003C\u002Fpre\u003E\n\u003Cp\u003EThe \u003Ccode class=\"language-text\"\u003Estore()\u003C\u002Fcode\u003E method belong to Livewire, \u003Ca href=\"https:\u002F\u002Flaravel-livewire.com\u002Fdocs\u002F2.x\u002Ffile-uploads#basic-upload\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003ERead more about store(
143)\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cstrong\u003EThe key must be equal to the input key.\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"build-crud\"\u003E\u003Ca href=\"#build-crud\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EBuild CRUD\u003C\u002Fh2\u003E\n\u003Cp\u003EWhen you make the CRUD Component customize based on your needs.\nYou need to build or rebuild the CRUD on the \u003Ccode class=\"language-text\"\u003ECRUD Manager\u003C\u002Fcode\u003E Page.\u003C\u002Fp\u003E\n\u003Cp\u003EIt will create 2 new directories for your project in \u003Ccode class=\"language-text\"\u003Eapp\u002FHttp\u002FLivewire\u002FAdmin\u003C\u002Fcode\u003E and \u003Ccode class=\"language-text\"\u003Eresources\u002Fviews\u002Flivewire\u002Fadmin\u002F\u003C\u002Fcode\u003E with the name of your model!\u003C\u002Fp\u003E\n\u003Cp\u003EThese 2 folders contain CRUD components, and you can customize them based on your needs.\u003C\u002Fp\u003E\n\u003Cp\u003EFor example, if our model is \u003Ccode class=\"language-text\"\u003EArticle\u003C\u002Fcode\u003E we will have these components:\u003C\u002Fp\u003E\n\u003Cpre class=\"language-text\"\u003Eapp\u002FHttp\u002FLivewire\u002FAdmin\u002FArticle:\nââââ Create.php\nââââ Read.php \nââââ Single.php \nââââ Update.php \n\nresources\u002Fviews\u002Flivewire\u002Fadmin\u002Farticle:\nââââ create.blade.php\nââââ read.blade.php \nââââ single.blade.php \nââââ update.blade.php \u003C\u002Fpre\u003E\n\u003Cp\u003EBe careful, when you rebuild a CRUD all components will be rebuilt again, and every custom change will be removed!\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cstrong\u003EAny changes in validationRules(), storePaths(), inputs(), fields() and getModel() need rebuilt!\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n"}},"context":{}};(function(){var s;(s=document.currentScript||document.scripts[document.scripts.length-1]).parentNode.removeChild(s);}());</script>
143<script src="/assets/js/app.5f2318c4.js" defer></script>
143<script src="/assets/js/page--src--templates--doc-vue.c9b7ae84.js" defer></script>
143 144 </body> 145</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.