TypeRocket 3.0 - Unleash WordPress and Be Amazing

In this talk, we walk through version 3.0 of TypeRocket at WordCamp Raleigh 2016.

Transcript

1. TYPEROCKET 3.0
   UNLEASH WORDPRESS AND BE AMAZING
   

   View Slide

2. View Slide

3. MAYBE NOT THAT AMAZING
   

   View Slide

4. I'M KEVIN DEES THE CREATOR OF
   TYPEROCKET
   @KEVINDEES
   

   View Slide

5. HOW CAN YOU BE AMAZING
   WITH TYPEROCKET?
   

   View Slide

6. Your WordPress admin can be clean and easy to use.
   

   View Slide

7. View Slide

8. Build Custom Themes with Less Code
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. Clients may never have confusion over plugins.
    

    View Slide

13. View Slide

14. You can take security to the next level.
    

    View Slide

15. WORDPRESS... SECURE?
    

    View Slide

16. ENOUGH TO SATISFY RON?
    

    View Slide

17. View Slide

18. MIND BLOWING?
    

    View Slide

19. SHOW ME HOW!
    MAKING A CUSTOM APPLICATION
    

    View Slide

20. SETUP
    DOWNLOADING AND INSTALLING
    

    View Slide

21. LARAVEL HOMESTEAD
    HTTPS://LARAVEL.COM/DOCS/5.3/HOMESTEAD
    

    View Slide

22. http://tr.test
    TO
    ~/Code/trtest/wordpress
    

    View Slide

23. COMPOSER
    HTTPS://GETCOMPOSER.ORG/
    

    View Slide

24. DOWNLOADING
    composer create-project --prefer-dist
    typerocket/typerocket
    ROOTING
    php galaxy use:root {db} {user} {pass}
    

    View Slide

25. DOWNLOADING TYPEROCKET
    composer create-project --prefer-dist
    typerocket/typerocket
    

    View Slide

26. View Slide

27. ROOTING TYPEROCKET
    php galaxy use:root trtest homestead secret
    

    View Slide

28. View Slide

29. WRAP IT UP
    CREATE DB AND INSTALL WP
    

    View Slide

30. View Slide

31. View Slide

32. INSTALLATION
    COMPLETE
    

    View Slide

33. LETS CODE: PART 1
    1. Post Types
    2. Dashboard Meta Box
    3. Taxonomy Custom Fields
    4. Theme Options
    5. Profile Fields
    

    View Slide

34. POST TYPES
    HOOKS NOT REQUIRED
    

    View Slide

35. View Slide

36. // Make Post Type
    $person = tr_post_type('Person', 'Team');
    // Set Icon
    $person->setIcon('users');
    // Title Only
    $person->setArgument('supports', ['title'] );
    // Set Placeholder Text
    $person->setTitlePlaceholder('Enter full name here');
    

    View Slide

37. Icons
    

    View Slide

38. View Slide

39. FORMS
    AND FIELDS
    

    View Slide

40. $form = tr_form('person', 'update', 1);
    

    View Slide

41. $form->text('Field Name');
    

    View Slide

42. $form->text('field_name');
    

    View Slide

43. FIELD TYPES
    ▸ Select
    ▸ Gallery
    ▸ Radio
    ▸ Checkbox
    ▸ And more...
    

    View Slide

44. ADVANCED FIELDS
    ▸ Repeaters
    ▸ Builder
    ▸ Matrix
    ▸ Search
    ▸ And more...
    

    View Slide

45. $form->repeater('Speakers')->setFields([
    $form->image('Photo'),
    $form->text('Name'),
    $form->text('Slides URL')
    ]);
    

    View Slide

46. // Meta Box With Fields
    $box = tr_meta_box('Team Details')->apply($person);
    $box->setCallback(function() {
    $form = tr_form();
    echo $form->text('Job Title');
    });
    // Taxonomy
    $dep = tr_taxonomy('Department')->apply($person);
    

    View Slide

47. // Inline Fields
    $person->setTitleForm( function() {
    $form = tr_form();
    echo $form->image('Photo');
    // Save To Builtin Posts Table
    $editor = $form->editor('post_content');
    echo $editor->setLabel('About Person');
    } );
    

    View Slide

48. View Slide

49. MODELS
    POST TYPE
    

    View Slide

50. php galaxy make:model -c post Person
    

    View Slide

51. View Slide

52. View Slide

53. namespace App\Models;
    use \TypeRocket\Models\WPPost;
    class Person extends WPPost
    {
    protected $postType = 'person';
    }
    

    View Slide

54. class Person extends WPPost
    {
    protected $postType = 'person';
    // Only save these fields
    protected $fillable = [
    'photo',
    'post_content',
    'job_title'
    ];
    // Format photo as an integer
    protected $format = [
    'photo' => 'intval'
    ];
    }
    

    View Slide

55. View Slide

56. View Slide

57. 
    // Image
    $img_id = tr_posts_field('photo');
    echo wp_get_attachment_image($img_id, 'full');
    ?>
    
    
    
    

    View Slide

58. DASHBOARD
    META BOX
    

    View Slide

59. // Dashboard Box
    $dash = tr_meta_box('Dashboard Box');
    $dash->addScreen('dashboard');
    $dash->setCallback(function() {
    echo "Your Content!";
    });
    

    View Slide

60. View Slide

61. TAXONOMY
    CUSTOM FIELDS
    

    View Slide

62. php galaxy make:model -c term Department
    

    View Slide

63. // Remember The Taxonomy
    $dep = tr_taxonomy('Department')->apply($person);
    // Add Fields
    $dep->setMainForm(function() {
    $form = tr_form();
    echo $form->text('Location');
    });
    

    View Slide

64. View Slide

65. THEME OPTIONS
    FOR GLOBAL THINGS
    

    View Slide

66. View Slide

67. WORDPRESS
    OPTIONS
    

    View Slide

68. $form = tr_form('option');
    $from->text('Option One');
    $from->text('Option Two');
    

    View Slide

69. wp_options
    +------------+----+
    | option_one | '' |
    +------------+----+
    | option_two | '' |
    +------------+----+
    

    View Slide

70. $form->getGroup('theme_options');
    $from->text('Opt 1');
    $from->text('Opt 2');
    

    View Slide

71. wp_options
    +---------------+-------------------------------------+
    | theme_options | array('opt_1' => '', 'opt_2' => '') |
    +---------------+-------------------------------------+
    

    View Slide

72. Theme Options
    $form = new \TypeRocket\Elements\Form();
    $form->useJson()->setGroup( $this->getName() );
    ?>
    
    echo $form->open();
    // Sections
    $about = $form->text('Company Name');
    $api = $form->password( 'Google Maps API Key');
    $save = $form->submit( 'Save' );
    // Tabs
    tr_tabs()
    ->setSidebar( $save )
    ->addTab( 'About', $about )
    ->addTab( 'APIs', $api )
    ->render( 'box' );
    echo $form->close();
    ?>
    
    

    View Slide

73. View Slide

74. PROFILE
    USER FIELDS
    

    View Slide

75. add_action('tr_user_profile', function($user) {
    $form = tr_form();
    echo $form->text('Job Title');
    echo $form->gallery('Photo Gallery');
    });
    

    View Slide

76. View Slide

77. LETS CODE: PART 2
    1. Page Builder
    2. Custom Resource
    3. Kernel and Middleware
    4. Front-end Fields and Routes
    

    View Slide

78. PAGE BUILDER
    

    View Slide

79. View Slide

80. STRUCTURE
    1. resources/visuals/builder - Front-end
    2. resources/components/builder - Backend and Forms
    3. wordpress/assets/components/builder. - Thumbnails
    

    View Slide

81. View Slide

82. BACKEND
    ▸ resources/visuals/builder/content.php
    ▸ wordpress/assets/components/builder/
    content.png
    

    View Slide

83. Content Component
    /** @var $form \TypeRocket\Elements\Form */
    echo $form->text('Headline');
    echo $form->editor('Content');
    

    View Slide

84. View Slide

85. VISUAL
    ▸ resources/visuals/builder/content.php
    ▸ Fields from the backend are accessible through the $data
    variable.
    

    View Slide

86. 
    
    
    
    
    

    View Slide

87. TEMPLATE
    page.php
    

    View Slide

88. get_header();
    if( tr_posts_field("use_builder") == '1') {
    tr_components_field('builder');
    } else {
    get_template_part('pageloop');
    }
    get_footer();
    

    View Slide

89. RESOURCES
    CUSTOM DB TABLES
    

    View Slide

90. View Slide

91. // Seat Resource
    $page = tr_resource_pages('Seat');
    $page->setIcon('plane');
    $page->setArgument('position', 10);
    

    View Slide

92. DB COLUMNS
    1. ID
    2. Person's ID
    3. Number
    4. Price
    

    View Slide

93. CREATE TABLE `wp_seats` (
    `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
    `persons_id` bigint(20) DEFAULT NULL,
    `number` varchar(255) DEFAULT NULL,
    `price` double(10,2) DEFAULT NULL,
    PRIMARY KEY (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    

    View Slide

94. php galaxy make:model -c base Seat
    

    View Slide

95. namespace App\Models;
    use \TypeRocket\Models\Model;
    class Seat extends Model
    {
    protected $resource = 'seats';
    }
    

    View Slide

96. namespace App\Controllers;
    use \TypeRocket\Controllers\Controller;
    class SeatController extends Controller
    {
    public function index() { }
    public function add() { }
    public function create() { }
    public function edit() { }
    public function update() { }
    public function destroy() { }
    }
    

    View Slide

97. INDEX
    

    View Slide

98. public function index() {
    return tr_view('seats.index');
    }
    

    View Slide

99. VIEWS
    

    View Slide

100. View Slide

101. $table = tr_tables();
     $table->setColumns('number', [
     'number' => [
     'sort' => true,
     'actions' => ['edit', 'view', 'delete'],
     'label' => 'Seat Number'
     ],
     'persons_id' => [
     'label' => 'Person',
     ],
     'price' => [
     'label' => 'Price',
     ]
     ]);
     $table->render();
     

     View Slide

102. ADD
     

     View Slide

103. public function add() {
     $form = tr_form('seat', 'create');
     return tr_view('seats.add', ['form' => $form]);
     }
     public function create() {
     $seat = new \App\Models\Seat();
     $seat->number = $this->request->getFields('number');
     $seat->price = $this->request->getFields('price');
     $seat->persons_id = $this->request->getFields('persons_id');
     $id = $seat->save();
     // Redirect
     $this->response->flashNext('Seat created!');
     return tr_redirect()->toPage('seat', 'edit', $id);
     }
     

     View Slide

104. // resources/pages/seats/add.php
     echo $form->open();
     echo $form->text('Number');
     echo $form->text('Price');
     // Search Field
     echo $form->search('persons_id')
     ->setLabel('Person')
     ->setPostType('person');
     echo $form->submit('Add');
     echo $form->close();
     

     View Slide

105. EDIT
     

     View Slide

106. public function edit($id) {
     $form = tr_form('seat', 'update', $id);
     return tr_view('seats.edit', ['form' => $form]);
     }
     public function update($id) {
     $seat = new \App\Models\Seat();
     $seat->findOrDie($id); // Find or Die
     $seat->number = $this->request->getFields('number');
     $seat->price = $this->request->getFields('price');
     $seat->persons_id = $this->request->getFields('persons_id');
     $seat->save();
     // Redirect
     $this->response->flashNext('Seat updated!');
     return tr_redirect()->back();
     }
     

     View Slide

107. echo $form->open();
     echo $form->text('Number');
     echo $form->text('Price');
     echo $form->search('persons_id')
     ->setLabel('Person')
     ->setPostType('person');
     echo $form->submit('Update'); // changed
     echo $form->close();
     

     View Slide

108. DESTROY
     

     View Slide

109. public function destroy($id) {
     $seat = new \App\Models\Seat();
     $seat->findOrDie($id);
     $seat->delete();
     $this->response->setMessage('Seat Deleted: '.$seat->number);
     return tr_redirect()->back();
     }
     

     View Slide

110. View Slide

111. MODEL
     RELATIONSHIPS
     

     View Slide

112. class Seat extends Model
     {
     protected $resource = 'seats';
     // Belongs To Person
     public function person()
     {
     return $this->belongsTo( Person::class, 'persons_id' );
     }
     }
     

     View Slide

113. class Person extends WPPost
     {
     protected $postType = 'person';
     // ...
     public function seats()
     {
     return $this->hasMany( Seat::class, 'persons_id' );
     }
     }
     

     View Slide

114. SHOW
     

     View Slide

115. public function show($id) {
     $seat = new \App\Models\Seat();
     $seat->findOrDie($id);
     $person = $seat->person()->get();
     return tr_view('seats.show', compact('seat', 'person'));
     }
     

     View Slide

116. Seat Number number; ?>
     Price: $price; ?>
     Person's Name: post_title; ?>
     

     View Slide

117. KERNEL
     MIDDLEWARE
     

     View Slide

118. View Slide

119. class Kernel extends \TypeRocket\Http\Kernel
     {
     protected $middleware = [
     'hookGlobal' =>
     [ AuthRead::class ],
     'resourceGlobal' =>
     [
     AuthRead::class,
     Middleware\VerifyNonce::class
     ],
     'noResource' =>
     [ AuthAdmin::class ],
     'user' =>
     [ IsUserOrCanEditUsers::class ],
     'post' =>
     [ OwnsPostOrCanEditPosts::class ],
     // ...
     'tag' =>
     [ CanManageCategories::class ]
     ];
     }
     

     View Slide

120. class Kernel extends \TypeRocket\Http\Kernel
     {
     protected $middleware = [
     // ...
     'person' =>
     [ OwnsPostOrCanEditPosts::class ],
     'seat' =>
     [ AuthAdmin::class ]
     ];
     }
     

     View Slide

121. php galaxy make:middleware Example
     

     View Slide

122. namespace App\Http\Middleware;
     use \TypeRocket\Http\Middleware\Middleware;
     class Example extends Middleware
     {
     public function handle()
     {
     $request = $this->request;
     $response = $this->response;
     // Do stuff before controller is called
     $this->next->handle();
     // Do stuff after controller is called
     }
     }
     

     View Slide

123. class Example extends Middleware
     {
     public function handle()
     {
     $request = $this->request;
     $response = $this->response;
     $response->exitNotFound(); // Doing Stuff
     $this->next->handle();
     }
     }
     

     View Slide

124. class Kernel extends \TypeRocket\Http\Kernel
     {
     protected $middleware = [
     // ...
     'seat' => [
     AuthAdmin::class,
     Middleware\Example::class
     ]
     ];
     }
     

     View Slide

125. FRONT-END
     FIELDS AND ROUTES
     

     View Slide

126. ENABLE
     // functions.php
     tr_frontend();
     ROUTE
     // routes.php
     tr_route()->post('/seats', 'create@Seat');
     

     View Slide

127. 
     $form = tr_form('seat', 'create'); // Create
     $form->useRoute('post', 'seats'); // Route
     echo $form->open();
     echo $form->text('Number');
     echo $form->text('Price');
     echo $form->search('persons_id')
     ->setLabel('Person')
     ->setPostType('person');
     echo $form->submit('Add');
     echo $form->close();
     ?>
     
     

     View Slide

128. View Slide

129. ROUTES
     

     View Slide

130. tr_route()->set('/seats', 'index@Seat');
     tr_route()->get('/seats/add', 'add@Seat');
     tr_route()->post('/seats', 'create@Seat');
     tr_route()->get('/seats/edit/{id}', 'edit@Seat');
     tr_route()->put('/seats/{id}', 'update@Seat');
     tr_route()->get('/seats/{id}', 'show@Seat');
     tr_route()->delete('/seats/{id}', 'destroy@Seat');
     

     View Slide

131. // Remember Me
     public function show($id) {
     $seat = new \App\Models\Seat();
     $seat->findOrDie($id);
     $person = $seat->person()->get();
     return tr_view('seats.show', compact('seat', 'person'));
     }
     

     View Slide

132. FRONT-END
     VIEWS
     

     View Slide

133. 1. resources/views/seats/index.php
     2. resources/views/seats/add.php
     3. resources/views/seats/edit.php
     4. resources/views/seats/show.php
     

     View Slide

134. THEMING
     

     View Slide

135. resources/assets
     

     View Slide

136. View Slide

137. var templates = './wordpress/assets/templates';
     // Your WordPress Templates SASS
     mix.sass('theme.scss');
     mix.sass('admin.scss');
     // Your WordPress Templates JS
     mix.scripts([
     'plugins.js',
     'theme.js'
     ], templates + '/js/theme.js');
     mix.scripts([
     'admin.js'
     ], templates + '/js/admin.js');
     

     View Slide

138. gulp watch
     

     View Slide

139. npm run prod
     

     View Slide

140. WANT MORE?
     

     View Slide

141. TYPEROCKET.COM
     ▸ Forms
     ▸ All Fields
     ▸ Commands
     ▸ IOC Resolver
     ▸ And way more!
     

     View Slide

142. TYPEROCKET 3.0
     UNLEASH WORDPRESS AND BE AMAZING
     

     View Slide