Knowledge supporting Tool for human-computer Interaction Design

Table of Contents

• Installation
• Usage

Installation

# clone the repo
$ git clone https://github.com/murillobit/ktid.git

# go into app's directory
$ cd ktid/laravel

# install app's dependencies
$ composer install

# install app's dependencies
$ npm install

If you choice to use SQLite

# create database
$ touch database/database.sqlite

Copy file ".env.example", and change its name to ".env". Then in file ".env" replace this database configuration:

• DB_CONNECTION=mysql
• DB_HOST=127.0.0.1
• DB_PORT=3306
• DB_DATABASE=laravel
• DB_USERNAME=root
• DB_PASSWORD=

To this:

• DB_CONNECTION=sqlite
• DB_DATABASE=/path_to_your_project/database/database.sqlite

If you choice to use MySQL

Copy file ".env.example", and change its name to ".env". Then in file ".env" complete this database configuration:

• DB_CONNECTION=mysql
• DB_HOST=127.0.0.1
• DB_PORT=3306
• DB_DATABASE=laravel
• DB_USERNAME=root
• DB_PASSWORD=

Next step

# in your app (laravel) directory
# generate laravel APP_KEY
$ php artisan key:generate

# generate jwt secret
$ php artisan jwt:secret

# run database migration and seed
$ php artisan migrate:refresh --seed

# go to coreui directory
$ cd ../coreui

# install app's dependencies
$ npm install

# back to laravel directory
$ cd ../laravel

# generate mixing
$ npm run dev

# and repeat generate mixing
$ npm run dev

# to watch changes on vue files and auto build
$ npm run watch

Usage

# start local server
$ php artisan serve

# test
$ php vendor/bin/phpunit

Open your browser with address: localhost:8000
Click "Login" on sidebar menu and log in with credentials:

• E-mail: admin@admin.com
• Password: password

This user has roles: user and admin

Creating new resources

Back-end

1. Run the following command to scaffold resource files, replacing Project with the resource name in CamelCase notation:

php artisan make:model -a Project

# Output:
# Model created successfully.
# Factory created successfully.
# Created Migration: 2020_11_05_193752_create_projects_table
# Seeder created successfully.
# Controller created successfully.

2. Edit the new migration file, adding new columns.
3. Run the migration with the following command:

php artisan migrate

# Output
# Migrating: 2020_11_05_192214_create_projects_table
# Migrated:  2020_11_05_192214_create_projects_table (0.03 seconds)

4. Edit the routes/api.php file, adding routes for the new resource:

    // inside Route::group(['middleware' => 'admin'], function ($router)
    Route::resource('project',        'ProjectController');

5. Edit the controller with the proper handling methods.

Front-end

1. Create the resource folder under src/views and the views files for listing, creating, editing and showing the resource (ex: Projects, ShowProject, EditProject, CreateProject).
2. Fill each file with the proper template.
3. Edit the routing file (src/router/index.js) adding routes for the previous views:

// Projects
const Projects = () => import('@/views/projects/Projects')
const CreateProject = () => import('@/views/projects/CreateProject')
const EditProject = () => import('@/views/projects/EditProject')
const ShowProject = () => import('@/views/projects/ShowProject')

// [...]

// as a child of Home
{
  path: 'projects',
  meta: { label: 'Projects' },
  component: {
    render (c) { return c('router-view') }
  },
  children: [
    {
      path: '',
      component: Projects,
    },
    {
      path: 'create',
      meta: { label: 'Create Project' },
      name: 'Create Project',
      component: CreateProject
    },
    {
      path: ':id',
      meta: { label: 'Show Project' },
      name: 'Show Project',
      component: ShowProject,
    },
    {
      path: ':id/edit',
      meta: { label: 'Edit Project' },
      name: 'Edit Project',
      component: EditProject
    },
  ]
},

4. Update the generated bundle

npm run dev

# or watch changes while editing files, updating automatically
npm run watch