TypeRocket 3.0 - Unleash WordPress and Be Amazing

30bba44027481f0cac7ee350820a2e6e?s=47 Kevin Dees
September 25, 2016

TypeRocket 3.0 - Unleash WordPress and Be Amazing

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

30bba44027481f0cac7ee350820a2e6e?s=128

Kevin Dees

September 25, 2016
Tweet

Transcript

  1. TYPEROCKET 3.0 UNLEASH WORDPRESS AND BE AMAZING

  2. None
  3. MAYBE NOT THAT AMAZING

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

  5. HOW CAN YOU BE AMAZING WITH TYPEROCKET?

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

  7. None
  8. Build Custom Themes with Less Code

  9. None
  10. None
  11. None
  12. Clients may never have confusion over plugins.

  13. None
  14. You can take security to the next level.

  15. WORDPRESS... SECURE?

  16. ENOUGH TO SATISFY RON?

  17. None
  18. MIND BLOWING?

  19. SHOW ME HOW! MAKING A CUSTOM APPLICATION

  20. SETUP DOWNLOADING AND INSTALLING

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

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

  23. COMPOSER HTTPS://GETCOMPOSER.ORG/

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

    {user} {pass}
  25. DOWNLOADING TYPEROCKET composer create-project --prefer-dist typerocket/typerocket

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

  28. None
  29. WRAP IT UP CREATE DB AND INSTALL WP

  30. None
  31. None
  32. INSTALLATION COMPLETE

  33. LETS CODE: PART 1 1. Post Types 2. Dashboard Meta

    Box 3. Taxonomy Custom Fields 4. Theme Options 5. Profile Fields
  34. POST TYPES HOOKS NOT REQUIRED

  35. None
  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');
  37. Icons

  38. None
  39. FORMS AND FIELDS

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

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

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

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

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

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

  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);
  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'); } );
  48. None
  49. MODELS POST TYPE

  50. php galaxy make:model -c post Person

  51. None
  52. None
  53. <?php namespace App\Models; use \TypeRocket\Models\WPPost; class Person extends WPPost {

    protected $postType = 'person'; }
  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' ]; }
  55. None
  56. None
  57. <?php while( have_posts() ) : the_post(); ?> <?php // Image

    $img_id = tr_posts_field('photo'); echo wp_get_attachment_image($img_id, 'full'); ?> <h3><?php echo tr_posts_field('job_title'); ?></h3> <?php the_content(); ?> <?php endwhile; ?>
  58. DASHBOARD META BOX

  59. // Dashboard Box $dash = tr_meta_box('Dashboard Box'); $dash->addScreen('dashboard'); $dash->setCallback(function() {

    echo "<p>Your Content!</p>"; });
  60. None
  61. TAXONOMY CUSTOM FIELDS

  62. php galaxy make:model -c term Department

  63. // Remember The Taxonomy $dep = tr_taxonomy('Department')->apply($person); // Add Fields

    $dep->setMainForm(function() { $form = tr_form(); echo $form->text('Location'); });
  64. None
  65. THEME OPTIONS FOR GLOBAL THINGS

  66. None
  67. WORDPRESS OPTIONS

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

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

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

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

    '') | +---------------+-------------------------------------+
  72. <h1>Theme Options</h1> <?php $form = new \TypeRocket\Elements\Form(); $form->useJson()->setGroup( $this->getName() );

    ?> <div class="typerocket-container"> <?php 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(); ?> </div>
  73. None
  74. PROFILE USER FIELDS

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

    $form->gallery('Photo Gallery'); });
  76. None
  77. LETS CODE: PART 2 1. Page Builder 2. Custom Resource

    3. Kernel and Middleware 4. Front-end Fields and Routes
  78. PAGE BUILDER

  79. None
  80. STRUCTURE 1. resources/visuals/builder - Front-end 2. resources/components/builder - Backend and

    Forms 3. wordpress/assets/components/builder. - Thumbnails
  81. None
  82. BACKEND ▸ resources/visuals/builder/content.php ▸ wordpress/assets/components/builder/ content.png

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

    echo $form->editor('Content');
  84. None
  85. VISUAL ▸ resources/visuals/builder/content.php ▸ Fields from the backend are accessible

    through the $data variable.
  86. <div class="builder-content"> <h2><?php echo esc_html($data['headline']); ?></h2> <hr /> <?php echo

    wpautop( $data['content'] ); ?> </div>
  87. TEMPLATE page.php

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

    get_template_part('pageloop'); } get_footer();
  89. RESOURCES CUSTOM DB TABLES

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

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

    Price
  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;
  94. php galaxy make:model -c base Seat

  95. namespace App\Models; use \TypeRocket\Models\Model; class Seat extends Model { protected

    $resource = 'seats'; }
  96. <?php 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() { } }
  97. INDEX

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

  99. VIEWS

  100. None
  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();
  102. ADD

  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); }
  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();
  105. EDIT

  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(); }
  107. <?php // resources/pages/seats/edit.php 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();
  108. DESTROY

  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(); }
  110. None
  111. MODEL RELATIONSHIPS

  112. class Seat extends Model { protected $resource = 'seats'; //

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

    ... public function seats() { return $this->hasMany( Seat::class, 'persons_id' ); } }
  114. SHOW

  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')); }
  116. <h3>Seat Number <?php echo $seat->number; ?></h3> <p>Price: $<?php echo $seat->price;

    ?></p> <p>Person's Name: <?php echo $person->post_title; ?></p>
  117. KERNEL MIDDLEWARE

  118. None
  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 ] ]; }
  120. class Kernel extends \TypeRocket\Http\Kernel { protected $middleware = [ //

    ... 'person' => [ OwnsPostOrCanEditPosts::class ], 'seat' => [ AuthAdmin::class ] ]; }
  121. php galaxy make:middleware Example

  122. <?php 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 } }
  123. <?php class Example extends Middleware { public function handle() {

    $request = $this->request; $response = $this->response; $response->exitNotFound(); // Doing Stuff $this->next->handle(); } }
  124. class Kernel extends \TypeRocket\Http\Kernel { protected $middleware = [ //

    ... 'seat' => [ AuthAdmin::class, Middleware\Example::class ] ]; }
  125. FRONT-END FIELDS AND ROUTES

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

  127. <section class="typerocket-container"> <?php $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(); ?> </section>
  128. None
  129. ROUTES

  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');
  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')); }
  132. FRONT-END VIEWS

  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

  134. THEMING

  135. resources/assets

  136. None
  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');
  138. gulp watch

  139. npm run prod

  140. WANT MORE?

  141. TYPEROCKET.COM ▸ Forms ▸ All Fields ▸ Commands ▸ IOC

    Resolver ▸ And way more!
  142. TYPEROCKET 3.0 UNLEASH WORDPRESS AND BE AMAZING