Quick Create CRUD Application

1. laravel-admin
Quick Create CRUD Application
Yehlu Huang
2017-08-19

2. About me
• 伍伍壹企業有限公司 www.551.com.tw
• 盟立電⼦子發票加值中⼼心 inv.551.com.tw
• 台中市企業經理理協進會 www.cpmat.org.tw
• 中華⺠民國汽⾞車車駕駛教育學會監事 www.drivingroc.org.tw
• ⼤大豐汽⾞車車駕駛⼈人訓練班 www.dfds.com.tw

3. Why PHP
• Free & Open
• Run Any environment
• Easy Learn
• Many Library & Framework

4. Why Laravel
• OOP
• PSR
• COMPOSER
• Package
• TDD
• https://coderseye.com/best-php-frameworks-for-web-
developers/

5. Laravel 5.4 Require
• PHP >= 5.6.4
• OpenSSL PHP Extension
• PDO PHP Extension
• Mbstring PHP Extension
• Tokenizer PHP Extension
• XML PHP Extension
• https://laravel.com/docs/5.4

6. Demo Environment
• user01~30.551.com.tw
• Account:tfc2017
• Password:laravel2017
• mysql Account:root Password:secret Host:127.0.0.1
• Ubuntu 16.04 + Docker 17.06.0-ce
• php-fpm PHP Version 7.0.21 + MariaDB 10.2.7

7. Laravel Project Foder
• ssh -l tfc2017 user01.551.com.tw
• /home/tfc2017/Sites/user01

8. Install Laravel
• cd ~/Sites
• composer create-project --prefer-dist laravel/laravel user01

9. Set the folder permissions
• cd user01
• chmod 777 storage -fR
• chmod 777 bootstrap/cache -fR

10. set up nginx host
• cd /home/tfc2017/Dockers/auto
• cp conf/user01.conf conf.d/
• docker-compose restart nginx

11. TEST
• http://user01.551.com.tw/

12. Create Database
• mysqladmin create user01 -u root -p -h 127.0.0.1

13. config .env
• vi .env
• DB_CONNECTION=mysql
• DB_HOST=127.0.0.1
• DB_PORT=3306
• DB_DATABASE=user01
• DB_USERNAME=root
• DB_PASSWORD=secret

14. Test DataBase
• php artisan migrate

15. Import SQL
• mysql user01 -u root -p -h 127.0.0.1 < ~/1.sql

16. Install laravel-admin
• composer require encore/laravel-admin "1.4.*"
• https://github.com/z-song/laravel-admin

17. Config laravel-admin
• vi config/app.php
• EncoreAdminProvidersAdminServiceProvider::class,
• php artisan vendor:publish --tag=laravel-admin
• php artisan admin:install

19. Test laravel-admin
• http://user01.551.com.tw/admin/
• Account:admin Password:admin

20. File structure
app/Admin
├── Controllers
│ ├── ExampleController.php
│ └── HomeController.php
├── bootstrap.php
└── routes.php

21. laravel-admin

22. Add Model Generator
• composer require reliese/laravel
• https://github.com/reliese/laravel

23. Config model Generator
• vi config/app.php
• RelieseCodersCodersServiceProvider::class,
// …
'providers' => [
/*
* Package Service Providers...
*/
RelieseCodersCodersServiceProvider::class,
],
// ...

24. Config model Generator
• php artisan vendor:publish --tag=reliese-models
• php artisan config:clear

25. Create Models
• php artisan code:models

26. Create Controller
• php artisan admin:make DepartmentController --
model=AppModelsDepartment
• // 在windows系统中
• php artisan admin:make DepartmentController —
model=AppModelsDepartment

27. Controller File
• /app/Admin/Controller/DepartmentController.php

28. Add Router
• app/Admin/routes.php
• $router->resource('/departments', DepartmentController::class);

29. Add Menu
• admin/auth/menu

30. Test
• http://user01.551.com.tw/admin/departments

31. Grid
• vi app/Admin/Controllers/DepartmentController.php
• http://z-song.github.io/laravel-admin/#/zh/model-grid-
column

32. Grid
$grid->column('department_id','ID')->sortable();
$grid->column('department_name','Department Name')->sortable();
$grid->column('department_manager_id','Manager')->sortable();
$grid->column('department_is_active','Active')->editable('select', [1 => 'Actived', 0 =>
'Disable'])->sortable();
$grid->actions(function ($actions) {
$actions->disableDelete();
//$actions->disableEdit();
});

33. Filter
$grid->filter(function ($filter) {
// 如果过滤器太多，可以使⽤用弹出模态框来显⽰示过滤器.
$filter->useModal();
$filter->like('department_name', 'Manager');
$filter->is('department_manager_id', 'Manager')-
>select(Employee::all()->pluck('emp_name', 'emp_id'));
$filter->is('department_is_active','Active')->select([1 =>
'Actived', 0 => 'Disable']);
});

34. Form
$form->display('id', 'ID');
$form->text('department_name','Department Name');
$form->select('department_manager_id', 'Manager')-
>options(Employee::all()->pluck('emp_name', 'emp_id'));
$form->switch('department_is_active', 'Active')->states(['Disable' => 0,
'Actived' => 1]);

35. Grid element
$grid->title()->editable('select', [1 => 'option1', 2 => 'option2', 3 => 'option3']);
$grid->status()->switch();
// 设置text、color、和存储值
$states = [
'on' => ['value' => 1, 'text' => '打开', 'color' => 'primary'],
'off' => ['value' => 2, 'text' => '关闭', 'color' => 'default'],
];
$grid->status()->switch($states);
$states = [
'on' => ['text' => 'YES'],
'off' => ['text' => 'NO'],
];
$grid->column('switch_group')->switchGroup([
'hot' => '热⻔门',
'new' => '最新'
'recommend' => '推荐',
], $states);
$grid->options()->select([
1 => 'Sed ut perspiciatis unde omni',
2 => 'voluptatem accusantium doloremque',
3 => 'dicta sunt explicabo',
4 => 'laudantium, totam rem aperiam',
]);
$grid->options()->radio([
1 => 'Sed ut perspiciatis unde omni',
2 => 'voluptatem accusantium doloremque',
3 => 'dicta sunt explicabo',
4 => 'laudantium, totam rem aperiam',
]);

36. Grid Screen

37. Filter Screen

38. Form Screen

39. Grid element
$grid->options()->checkbox([
1 => 'Sed ut perspiciatis unde omni',
2 => 'voluptatem accusantium doloremque',
3 => 'dicta sunt explicabo',
4 => 'laudantium, totam rem aperiam',
]);
$grid->picture()->image();
//设置服务器和宽⾼高
$grid->picture()->image('http://xxx.com', 100, 100);
// 显⽰示多图
$grid->pictures()->display(function ($pictures) {
return json_decode($pictures, true);
})->image('http://xxx.com', 100, 100);
$grid->name()->label();
//设置颜⾊色，默认`success`,可选`danger`、`warning`、`info`、`primary`、`default`、`success`
$grid->name()->label('danger');
// 接收数组
$grid->keywords()->label();
$grid->name()->badge();
//设置颜⾊色，默认`success`,可选`danger`、`warning`、`info`、`primary`、`default`、`success`
$grid->name()->badge('danger');
// 接收数组
$grid->keywords()->badge();
• http://z-song.github.io/laravel-admin/#/zh/model-grid

40. Form element
$form->text($column, [$label])->rules(‘required|min:10');
$form->select($column[, $label])->options([1 => 'foo', 2 => 'bar', 'val' => 'Option name’]);
$form->textarea($column[, $label])->rows(10);
$form->radio($column[, $label])->options(['m' => 'Female', 'f'=> ‘Male'])->default('m');
$form->checkbox($column[, $label])->options([1 => 'foo', 2 => 'bar', 'val' => 'Option name’]);
$form->email($column[, $label]);
$form->password($column[, $label]);
$form->mobile($column[, $label])->options(['mask' => '999 9999 9999’]);
$form->date($column[, $label])->format(‘YYYY-MM-DD');
$form->number($column[, $label]);
$form->editor($column[, $label]);
$form->hidden($column);
$form->slider($column[, $label])->options(['max' => 100, 'min' => 1, 'step' => 1, 'postfix' => 'years old’]);
$states = [
'on' => ['value' => 1, 'text' => '打开', 'color' => 'success'],
'off' => ['value' => 0, 'text' => '关闭', 'color' => 'danger'],
];
$form->switch($column[, $label])->states($states);
$form->display($column[, $label]);
$form->icon(‘icon');
• http://z-song.github.io/laravel-admin/#/zh/model-form

41. Learning Exercise
• zh-TW Language
• Employee Controller
• Modify Grid
• Modify Form
• Add Images Upload (Field picture)

42. Thanks
• FaceBook : https://www.facebook.com/yehlu
• Line ID : yehlu
• Email:yehlu@551.com.tw
• Mobile telephone:0935-353-114