Simple CRUD Tutorial

We have set up the database and the table. So let's just create an employee CRUD with searching.

Data Base
Table Design
Section Config
Employee Section
Employee Details

Data Base

First import the database

Table Design

Create an Employee table to store details

Section Config

Following is the JSON config used to generate employee CRUD

Employee has following attributes:
Name - [textbox]
Email- [textbox]
DOB - [Datepicker]
Gender - [select]
Designation - [textbox]

Please note the configs for DOB and Gender


  {
  "keyColumn": "emp_id",
  "detailHeaderColumnPrefix": "Employee: ",
  "detailHeaderColumns": [
    "emp_name "
  ],
  "orderBy": {
    "emp_id": "DESC"
  },
  "includeJsFiles": [
    "cmsvalidations.js"
  ],
  "listColumns": [
    "emp_name",
    "emp_email",
    "emp_dob",
    "emp_gender",
    "emp_designation"
  ],
  "showColumns": [
    "emp_name",
    "emp_email",
    "emp_dob",
    "emp_gender",
    "emp_designation"
  ],
  "detailColumns": [
    "emp_name",
    "emp_email",
    "emp_dob",
    "emp_gender",
    "emp_designation"
  ],
  "columns": {
    "emp_id": {
      "name": "ID",
      "sortable": "true",
      "editoptions": {
        "type": "hidden"
      }
    },
    "emp_name": {
      "name": "Name",
      "searchable": "true",
      "editoptions": {
        "type": "textbox",
        "label": "Name",
        "class": "textbox",
        "validations": [
          "required"
        ]
      }
    },
    "emp_email": {
      "name": "Email",
      "searchable": "true",
      "sortable": "true",
      "editoptions": {
        "type": "textbox",
        "label": "email",
        "class": "textbox",
        "validations": [
          "required", "email"
        ]
      }
    },
    "emp_dob": {
      "name": "DOB",
      "searchable": "",
      "dbFormat": "date",
      "displayFormat": "d/m/Y",
      "editoptions": {
        "type": "datepicker",
        "label": "dob",
        "class": "textbox",
        "validations": [
          "required"
        ]
      }
    },
    "emp_gender": {
      "name": "Gender",
      "searchable": "true",
      "sortable": "true",
      "listoptions": {
        "type": "button",
        "enumvalues": {
          "1": "Male",
          "0": "Female"
        }

      },
      "editoptions": {
        "type": "select",
        "source": {
          "1": "Male",
          "0": "Female"
        },
        "default": "1",
        "source_type": "array",
        "label": "Gender",
        "class": "select",
        "enumvalues": {
          "1": "Male",
          "0": "Female"
        },
        "validations": [
          "required"
        ]
      }
    },
    "emp_designation": {
      "name": "Designation",
      "searchable": "true",
      "editoptions": {
        "type": "textbox",
        "label": "Designation",
        "class": "textbox",
        "validations": [
          "required"
        ]
      }
    }
  },
  "opertations": [
    "view",
    "edit",
    "delete",
    "add"
  ]
}

Employee Section

Again,login to admin panel as a developer http://localhost/icarus_project/cms with following credentials:


      username: administrator
      password: qw123#

If everything is set up correctly you can see the following screen while clicking on the Add button

Employee Details

After adding Employee details

Next Folder Structure