Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Laravel admin20170819

312 views

Published on

Quick Create CRUD Application

Published in: Technology
  • Be the first to comment

Laravel admin20170819

  1. 1. laravel-admin Quick Create CRUD Application
 Yehlu Huang
 2017-08-19
  2. 2. About me • 伍伍壹企業有限公司 www.551.com.tw • 盟立電⼦子發票加值中⼼心 inv.551.com.tw • 台中市企業經理理協進會 www.cpmat.org.tw • 中華⺠民國汽⾞車車駕駛教育學會監事 www.drivingroc.org.tw • ⼤大豐汽⾞車車駕駛⼈人訓練班 www.dfds.com.tw
  3. 3. Why PHP • Free & Open • Run Any environment • Easy Learn • Many Library & Framework
  4. 4. Why Laravel • OOP • PSR • COMPOSER • Package • TDD • https://coderseye.com/best-php-frameworks-for-web- developers/
  5. 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. 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. 7. Laravel Project Foder • ssh -l tfc2017 user01.551.com.tw • /home/tfc2017/Sites/user01
  8. 8. Install Laravel • cd ~/Sites • composer create-project --prefer-dist laravel/laravel user01
  9. 9. Set the folder permissions • cd user01 • chmod 777 storage -fR • chmod 777 bootstrap/cache -fR
  10. 10. set up nginx host • cd /home/tfc2017/Dockers/auto • cp conf/user01.conf conf.d/ • docker-compose restart nginx
  11. 11. TEST • http://user01.551.com.tw/
  12. 12. Create Database • mysqladmin create user01 -u root -p -h 127.0.0.1
  13. 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. 14. Test DataBase • php artisan migrate
  15. 15. Import SQL • mysql user01 -u root -p -h 127.0.0.1 < ~/1.sql
  16. 16. Install laravel-admin • composer require encore/laravel-admin "1.4.*" • https://github.com/z-song/laravel-admin
  17. 17. Config laravel-admin • vi config/app.php • EncoreAdminProvidersAdminServiceProvider::class, • php artisan vendor:publish --tag=laravel-admin • php artisan admin:install
  18. 18. Test laravel-admin • http://user01.551.com.tw/admin/ • Account:admin Password:admin
  19. 19. File structure app/Admin ├── Controllers │ ├── ExampleController.php │ └── HomeController.php ├── bootstrap.php └── routes.php
  20. 20. laravel-admin
  21. 21. Add Model Generator • composer require reliese/laravel • https://github.com/reliese/laravel
  22. 22. Config model Generator • vi config/app.php • RelieseCodersCodersServiceProvider::class, // … 'providers' => [ /* * Package Service Providers... */ RelieseCodersCodersServiceProvider::class, ], // ...
  23. 23. Config model Generator • php artisan vendor:publish --tag=reliese-models • php artisan config:clear
  24. 24. Create Models • php artisan code:models
  25. 25. Create Controller • php artisan admin:make DepartmentController -- model=AppModelsDepartment • // 在windows系统中 • php artisan admin:make DepartmentController — model=AppModelsDepartment
  26. 26. Controller File • /app/Admin/Controller/DepartmentController.php
  27. 27. Add Router • app/Admin/routes.php • $router->resource('/departments', DepartmentController::class);
  28. 28. Add Menu • admin/auth/menu
  29. 29. Test • http://user01.551.com.tw/admin/departments
  30. 30. Grid • vi app/Admin/Controllers/DepartmentController.php • http://z-song.github.io/laravel-admin/#/zh/model-grid- column
  31. 31. 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(); });
  32. 32. 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']); });
  33. 33. 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]);
  34. 34. 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', ]);
  35. 35. Grid Screen
  36. 36. Filter Screen
  37. 37. Form Screen
  38. 38. 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
  39. 39. 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
  40. 40. Learning Exercise • zh-TW Language • Employee Controller • Modify Grid • Modify Form • Add Images Upload (Field picture)
  41. 41. Thanks • FaceBook : https://www.facebook.com/yehlu • Line ID : yehlu • Email:yehlu@551.com.tw • Mobile telephone:0935-353-114

×