Slide 1
Slide 1 text
TYPEROCKET
CREATE A PAGE BUILDER
Slide 2
Slide 2 text
https://goo.gl/i24Uei
Slide 3
Slide 3 text
CODING MODERN
DESIGN IS HARD
Slide 4
Slide 4 text
KEVIN DEES
@KEVINDEES
Slide 5
Slide 5 text
ROBOJUICE
Slide 6
Slide 6 text
MODULAR BASED DESIGN
Slide 7
Slide 7 text
PAGE BUILDERS
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
INSTALL TYPEROCKET
USING COMPOSER
Slide 10
Slide 10 text
composer create-project --prefer-dist
typerocket/typerocket
Slide 11
Slide 11 text
LETS MAKE A PORTFOLIO SITE
Slide 12
Slide 12 text
DEMO
Slide 13
Slide 13 text
1. Take Screenshots and Make Thumbnails
2. Define Admin Components
3. Setup Visuals
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Review
repeater('Reviews')->setFields([ $form->text('Full Name', ['maxlength' => 60]), $form->text('Company', ['maxlength' => 60]), $form->select('Stars')->setOptions( range(1,5), 'flat' ), $form->textarea('Review', ['maxlength' => 300]), ]);Slide 18
Slide 18 text
1 ) :
$reviews = $data['reviews'];
?>
....
Slide 19
Slide 19 text
= esc_html($review['full_name']); ?>
= esc_html($review['company']); ?>
[1,2,3,4]
$stars = array_pad( $range, 5, null);
// array_pad([1,2], 4, 0)
// > [1,2,0,0]
foreach ($stars as $star) {
$star = $star ? 'fa-star' : 'fa-star-o';
echo "";
}
?>
= esc_autop($review['review']); ?>
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Promotion
textarea('Call Out', ['maxlength' => 30]); echo $form->image('Background');Slide 22
Slide 22 text
= esc_nl2br( $data['call_out'] ?? 'Contact Me
Below' ); ?>
Slide 23
Slide 23 text
function esc_nl2br($string) {
return nl2br( esc_html($string) );
}
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
REGISTER POST TYPE
php galaxy make:model -c post Work
1. Fields: Title, Image, Type (Illustration, Branding, Fashion)
2. Custom Admin Column: Image
Slide 26
Slide 26 text
$work = tr_post_type('Work');
$work->setIcon('pencil');
$work->setTitlePlaceholder('Enter project title here');
$work->setAdminOnly();
$work->setArgument('supports', ['title']);
$work->setTitleForm(function() {
$form = tr_form();
echo $form->image('Image');
echo $form->select('Type')->setOptions( portfolio_types() );
});
$work->addColumn('type', true, 'Type', function($value) {
echo array_flip( portfolio_types() )[$value];
});
$work->addColumn('image', false, 'Image', function($value) {
echo wp_get_attachment_image($value, 'thumbnail');
});
Slide 27
Slide 27 text
function portfolio_types() {
return [
'Illustrations' => 'ill',
'Branding' => 'brand',
'Graphics' => 'graph',
];
}
Slide 28
Slide 28 text
Portfolio
text('Headline');Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
tr_route()->post('/contact/send', 'send@Contact');
tr_route()->get('/contact/thanks', 'thanks@Contact');
Slide 31
Slide 31 text
class ContactController extends Controller
{
public function send()
{
// TODO: Save the fields
}
public function thanks()
{
return tr_view('contact.thanks');
}
}
Slide 32
Slide 32 text
= tr_hidden_form_fields(); ?>
Send A Massage
Slide 33
Slide 33 text
class ContactController extends Controller
{
public function send()
{
$fields = $this->request->getFields();
$options = [
'email' => 'required|email',
'name' => 'required|min:3',
'message' => 'required|min:4',
];
$validator = tr_validator($options, $fields );
$redirect = tr_redirect();
if( ! $validator->passed() ) {
$redirect
->back()
->withFields($fields)
->with( [ 'errors' => $validator->getErrors() ] );
}
// TODO: Save the fields
return $redirect->toUrl('/contact/thanks');
}
....
}
Slide 34
Slide 34 text
Thanks!
Your Email was sent!
Slide 35
Slide 35 text
-- Run At: 1506045563
-- Description: Table for contact for messages.
-- >>> Up >>>
CREATE TABLE `{!!prefix!!}contacts` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
`message` blob,
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- >>> Down >>>
DROP TABLE IF EXISTS `{!!prefix!!}contacts`;
Slide 36
Slide 36 text
$fields = $this->request->getFields();
....
$contact = new Contact();
$contact->save($fields);
Slide 37
Slide 37 text
$settings = ['capability' => 'administrator'];
$contacts = tr_page('Contact', 'index', 'Contacts', $settings);
$contacts->setIcon('send');
$contacts->useController();
Slide 38
Slide 38 text
class ContactController extends Controller
{
....
public function index()
{
return tr_view('contact.index');
}
}
Slide 39
Slide 39 text
setColumns('name', [
'name' => [
'sort' => true,
'label' => 'Name'
],
'email' => [
'label' => 'Email Address'
],
'message' => [
'label' => 'Message'
]
]);
$table->render();
Slide 40
Slide 40 text
class Kernel extends \TypeRocket\Http\Kernel
{
protected $middleware = [
'hookGlobal' => [],
'resourceGlobal' =>
[
AuthRead::class,
Middleware\VerifyNonce::class
],
'noResource' =>
[ AuthAdmin::class ],
'user' =>
[ IsUserOrCanEditUsers::class ],
'post' =>
[ OwnsPostOrCanEditPosts::class ],
'page' =>
[ OwnsPostOrCanEditPosts::class ],
.....
'tag' =>
[ CanManageCategories::class ],
'contact' => []
];
}