DEV Community: Gabriel Alejandro López López

Integrating Yii3 packages into WordPress

Gabriel Alejandro López López — Sun, 03 Mar 2024 00:00:00 +0000

I was recently assigned with the task of integrating several extensive forms into a WordPress website. These forms comprised numerous fields, intricate validation rules, dynamic fields (one to many relationships) and even interdependencies, where employing PHP inheritance could mitigate code duplication.

Upon initial exploration, it became evident that the conventional approach for handling forms in WordPress typically involves either installing a plugin or manually embedding markup using the editor or custom page templates. Subsequently, one largely relies on the plugin’s functionality to manage form submissions or resorts to custom coding.

Given that part of my task entailed logging data, interfacing with API endpoints, sending emails, and more, I opted to develop the functionality myself, rather than verifying if existing plugins supported these requirements.

Furthermore, considering the current landscape (as of March 2024) where most Yii 3 packages are deemed production-ready according to official sources, and being a long-time user of the Yii framework, I deemed it an opportune moment to explore and acquaint myself with these updates.

Source code available

You can explore the entire project and review the code by accessing it on Github.

Additionally, you can deploy it effortlessly using Docker by simply executing docker-compose up from the project’s root directory. Check the Dockerfile for the WordPress setup and content generation which is done automatically.

Goal

My objective was to render and manage forms within a WordPress framework utilizing Yii3 packages. For demonstration purposes, I chose to implement a basic Rating Form, where the focus is solely on validating the data without executing further actions.

Approach

To proceed, let’s start with a minimalistic classic theme as an example. I created a WordPress page named “The Rating Form” within the dashboard. Then, a file named page-the-rating-form.php is to be created within the theme’s root folder to display this specific page.

This designated file serves as the blueprint for defining our form’s markup.

Adding Yii3 Packages to the Project:

To harness Yii3’s functionalities, we’ll incorporate the following packages:

yiisoft/form-model: For defining a model class representing the form’s fields and facilitating field rendering.
yiisoft/form: To handle markup-related tasks.
yiisoft/validator: For input validation.

To begin, let’s initialize a Composer project in the root of our theme by executing composer init. This process will generate a composer.json file. Subsequently, we’ll proceed to include the Yii3 packages in our project.

composer require yiisoft/form-model:dev-master yiisoft/validator yiisoft/form:dev-master

and instruct the theme to load the composer autoload by adding the following line to the functions.php file:

require __DIR__. '/vendor/autoload.php';

Create the form model

Following the execution of the composer init command, a src directory has been created in the root directory of the theme. We will now proceed to add our form model class within this directory.

Anticipating the expansion of the project, it’s imperative to maintain organization. Thus, we shall create the directory src/Forms and place the RatingForm class inside it.

<?php

namespace Glpzzz\Yii3press\Forms;

use Yiisoft\FormModel\FormModel;

class RatingForm extends FormModel
{

    private ?string $name = null;
    private ?string $email = null;
    private ?int $rating = null;
    private ?string $comment = null;
    private string $action = 'the_rating_form';

    public function getPropertyLabels(): array
    {
        return [
            'name' => 'Name',
            'email' => 'Email',
            'rating' => 'Rating',
            'comment' => 'Comment',
        ];
    }

}

Beyond the requisite fields for our rating use case, it’s crucial to observe the action class attribute. This attribute is significant as it instructs WordPress on which theme hook should manage the form submission. Further elaboration on this will follow.

Adding Validation Rules to the Model:

Now, let’s incorporate some validation rules into the model to ensure input integrity. Initially, we’ll configure the class to implement the RulesProviderInterface. This enables the form package to access these rules and augment the HTML markup with native validation attributes.

class RatingForm extends FormModel implements RulesProviderInterface

Now we need to implement the getRules() method on the class.

public function getRules(): iterable
{
    return [
        'name' => [
            new Required(),
        ],
        'email' => [
            new Required(),
            new Email(),
        ],
        'rating' => [
            new Required(),
            new Integer(min: 0, max: 5),
        ],
        'comment' => [
            new Length(min: 100),
        ],
    ];
}

Create the form markup

To generate the form markup, we require an instance of RatingForm to be passed to the template. In WordPress, the approach I’ve adopted involves creating a global variable (admittedly not the most elegant solution) prior to rendering the page.


$hydrator = new Hydrator(
    new CompositeTypeCaster(
        new NullTypeCaster(emptyString: true),
        new PhpNativeTypeCaster(),
        new HydratorTypeCaster(),
    )
);

add_filter('template_redirect', function () use ($hydrator) {
    // Get the queried object
    $queried_object = get_queried_object();

    // Check if it's a page
    if ($queried_object instanceof WP_Post && is_page()) {
        if ($queried_object->post_name === 'the-rating-form') {
            global $form;
            if ($form === null) {
                $form = $hydrator->create(RatingForm::class, []);
            }
        }
    }
});

It’s worth noting that we’ve instantiated the Hydrator class outside any specific function, enabling us to reuse it for all necessary callbacks. With the RatingForm instance now available, we’ll proceed to craft the markup for the form within the page-the-rating-form.php file.


<?php

use Glpzzz\Yii3press\Forms\RatingForm;
use Yiisoft\FormModel\Field;
use Yiisoft\Html\Html;

/** @var RatingForm $form */
global $form;

?>

<?php get_header(); ?>

<h1><?php the_title(); ?></h1>

<?php the_content(); ?>

<?= Html::form()
  ->post(esc_url(admin_url('admin-post.php')))
  ->open()
?>

<?= Field::hidden($form, 'action')->name('action') ?>
<?= Field::text($form, 'name') ?>
<?= Field::email($form, 'email') ?>
<?= Field::range($form, 'rating') ?>
<?= Field::textarea($form, 'comment') ?>

<?= Html::submitButton('Send') ?>

<?= "</form>" ?>

<?php get_footer(); ?>

In the markup generation of our form, we’ve leveraged a combination of Yii3’s Html helpers and the Field class. Notable points include:

The form employs the POST method with the action specified as the admin-post.php WordPress endpoint.
To include the action value in the form submission, we utilized a hidden field named 'action'. We opted to rename the input to 'action' as the Field::hidden method generates field names in the format TheFormClassName[the_field_name], whereas we required it to be simply named 'action'.

This adjustment facilitates hooking into a theme function to handle the form request, as elucidated in the subsequent section.

Before delving further, let’s capitalize on Yii’s capabilities to enhance the form. Although we’ve already defined validation rules in the model for validating input post-submission, it’s advantageous to validate input within the browser as well. While we could reiterate defining these validation rules directly on the input elements, Yii offers a streamlined approach. By incorporating the following code snippet into the functions.php file:

add_action('init', function () {
    ThemeContainer::initialize([
            'default' => [
                'enrichFromValidationRules' => true,
            ]
        ], 'default', new ValidationRulesEnricher()
    );
});

By implementing this code snippet, we activate the ValidationRulesEnricher for the default form theme. Upon activation, we’ll notice that the form fields are now enriched with validation rules such as ‘required’, ‘min’, and ‘ max’, aligning with the validation rules previously defined in the model class. This feature streamlines the process, saving us valuable time and minimizing the need for manual code composition. Indeed, this showcases some of the remarkable functionality offered by Yii3.

Process the POST request

When the form is submitted, it is directed to admin-post.php, an endpoint provided by WordPress. However, when dealing with multiple forms, distinguishing the processing of each becomes essential. This is where the inclusion of the action value in the POST request proves invaluable.

Take note of the initial two lines in the following code snippet: the naming convention for the hook is admin_post_<action_name>. Therefore, if a form has action = 'the-rating-form', the corresponding hook name will be admin_post_the_rating_form.

As for the inclusion of both admin_post_<action_name> and admin_post_nopriv_<action_name>, this is because WordPress allows for different handlers depending on whether the user is logged in or not. In our scenario, we require the same handler regardless of the user’s authentication status.

add_action('admin_post_the_rating_form', fn() => handleForms($hydrator));
add_action('admin_post_nopriv_the_rating_form', fn() => handleForms($hydrator));

function handleForms(Hydrator $hydrator): void
{
  global $form;
  $form = $hydrator->create(RatingForm::class, $_POST['RatingForm']);
  $result = (new Yiisoft\Validator\Validator())->validate($form);

  if ($form->isValid()) {
    // handle the form
  }

  get_template_part('page-the-rating-form');
}

Returning to the Yii aspect: we instantiate and load the posted data into the form utilizing the hydrator. We then proceed to validate the data. If the validation passes successfully, we can proceed with the intended actions using the validated data. However, if validation fails, we re-render the form, populating it with the submitted data and any error messages generated during validation.

Conclusion

This was my first attempt at mixing Yii3 packages with a WordPress site. While I’m satisfied with the result, I think it can be improved, especially regarding the use of global variables. Since I’m not very experienced with WordPress, I’d appreciate any suggestions for improvement.
The Yii3 packages I used are ready for real-world use and offer the same quality and features as their older versions.
Now you can use these Yii packages independently. This means you can apply your Yii skills to any PHP project.
This project shows how we can enhance a WordPress site by tapping into the powerful features of Yii, while still keeping the simplicity of the CMS.

Step-by-Step Guide: Enabling WWAN on ThinkPad P50 Ubuntu

Gabriel Alejandro López López — Mon, 22 Jan 2024 00:00:00 +0000

If you’ve encountered issues with the default deactivation of WWAN on your Lenovo ThinkPad P50 after a fresh Ubuntu install, this guide will walk you through the steps to activate it. This is a personal reminder on the commands required to activate this feature based on discussions in this Ask Ubuntu post where it’s explained that WWAN is deactivated by default.

Activate the Modem

To enable the Lenovo shipped EM7455, use the following command:

sudo ln -sft /etc/ModemManager/fcc-unlock.d /usr/share/ModemManager/fcc-unlock.available.d/1199:9079

Setup the Mobile Broadband Connection

The next step is to create the Mobile Broadband connection using Network Manager GUI or nmcli. In order to do it with nmcli, first we need to identify the available modems:

$ mmcli -L
    /org/freedesktop/ModemManager1/Modem/0 [Sierra Wireless, Incorporated] Sierra Wireless EM7455 Qualcomm Snapdragon X7 LTE-A

In this case, there is only one modem (indexed as 0). Now, identify the device:

$ mmcli -m 0 | grep "primary port"
           | primary port: cdc-wdm1

Creating the Connection with nmcli

And now we are ready to create the connection. For my actual service provider the required command is:

$ nmcli connection add type gsm ifname cdc-wdm1 con-name Cubacel apn nauta
Connection 'Cubacel2' (906f5b4f-b37b-4eff-b8eb-5c13dc9c532b) successfully added.

Values of the command:

type gsm : the connection type (gsm for mobile broadband)
ifname cdc-wdm1 : the device ID
apn nauta : the APN value defined by the provider

The name is just a friendly identifier.

Activate/deactivate the connection

To activate this connection the command is:

$ nmcli connection up Cubacel
    Connection successfully activated (D-Bus active path: /org/freedesktop/NetworkManager/ActiveConnection/21)

And to deactivate the command is:

$ nmcli connection down Cubacel
    Connection 'Cubacel' successfully deactivated (D-Bus active path: /org/freedesktop/NetworkManager/ActiveConnection/21)

Remove the connection

If you want to remove the connection:

$ nmcli connection delete Cubacel
    Connection 'Cubacel' (7478c2fb-6d85-443d-ab67-2b812b761460) successfully deleted.

Conclusion

We have addressed the issue of deactivated WWAN on Lenovo ThinkPad P50 running Ubuntu, providing clear steps to activate the modem, set up the mobile broadband connection, and achieve seamless connectivity. Following these steps ensures a successful configuration for utilizing mobile broadband on your ThinkPad P50.
Consider also the usage of modem-manager-gui to work with the modem, but my notes on that are for another post.

Using image from https://commons.wikimedia.org/wiki/File:Lenovo\_thinkpad\_p50\_%2829237281256%29.jpg licensed with CC BY-SA 2.0.

Updating my website with htmx

Gabriel Alejandro López López — Fri, 29 Sep 2023 00:00:00 +0000

I have been reading a lot about htmx.org on Twitter lately and also seen an increase of the videos related to it on Youtube.

What is htmx?

Basically it is a JavaScript library to extend HTML by adding functionality including certain attributes in the HTML markup.

There is a lot to say about it but it will refer you to the 2 more important sources

htmx.org the official documentation
https://hypermedia.systems/ a book on the hypermedia concept (the basics of htmx) and a very good resource of simple (not basic) web development.

Why to use htmx?

You want to enhance the user experience of your website.
You don’t want to setup a project with React/Angular/Vue or any other framework.
You want to do it fast.

How to (quickly) use htmx?

I’ll use this website as an example.

By today (September 2023) it is an static website created using Jekyll.
When you click a link the whole page is reloaded
There are common elements that could be kept (the head tag, the footer)
All the pages are using _layouts/home.html as the layout

hx-boost

From the official https://htmx.org/attributes/hx-boost/:

The hx-boost attribute allows you to “boost” normal anchors and form tags to use AJAX instead. This has the nice fallback that, if the user does not have javascript enabled, the site will continue to work.

Now the links, instead of triggering a regular GET request to the server, trigger an AJAX request and the content of the body tag is the only thing refreshed when the response is received. All the common assets (css, js, fonts, images) are already loaded so

the loading time is reduced
the user experience is improved
there is not flicker when the content changes
the viewport automatically scrolls up when the new content is loaded

But there is a catch: the tags in the head are not updated. Title, description, OpenGraph nor Schema.org. How to solve?

The head-support Extension

Again from the official https://htmx.org/extensions/head-support/#usage:

If the htmx request is from a boosted element, then the following merge algorithm is used:

Elements that exist in the current head as exact textual matches will be left in place

Elements that do not exist in the current head will be added at the end of the head tag

Elements that exist in the current head, but not in the new head will be removed from the head

As a result just the desired tags in head are updated (title, description, OpenGraph, Schema.org) and the rest stay the same.

The actual changes

Just two things where required:

add the htmx and extension to the layout (_layouts/home.html) of all the pages:

<script src="https://unpkg.com/htmx.org@1.9.5" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/head-support.js"></script>

add the hx attributes to the body tag. Note that I used the data- prefix for the hx attributes in order to prevent issues with HTML validators

<body class="markdown-body" data-hx-boost="true" data-hx-ext="head-support">

Conclusion

With this very simple change, the navigation and reading experience is way better.

Also, as stated before, if the user don’t have JavaScript enabled, the site will continue to work with regular requests.

We are loading new content using AJAX without writing a single JavaScript line.

There is a lot more to say about htmx but this is enough to get started.

New tool: Social Tags Generator

Gabriel Alejandro López López — Mon, 12 Apr 2021 00:00:00 +0000

Check it out at https://glpzzz.dev/social-tags-generator

Special links for our websites

Gabriel Alejandro López López — Sun, 21 Feb 2021 00:00:00 +0000

Sometimes we need our links to do something else besides going to another http location. Perhaps we want to allow visitor to use other ways to interact with us using email, sms, a call, or others. Let’s se how to.

Email

Very easy! <a href="mailto:me@domain.com">Send me an email</a> will generate an anchor that, when clicked, will tell the browser to open the application in charge of handling email on your system.

More “complex” examples:

Specify the subject: <a href="mailto:me@domain.com?subject=Hello">Send email</a>
Specify the subject and body: <a href="mailto:me@domain.com?subject=Hello&body=This%20is%20a%20message">Send email</a>

More details on RFC 6068 - The mailto URI Scheme.

SMS

A little different:

Just open the SMS app: <a href="sms:">Send SMS</a>
Open the SMS app for a certain number: <a href="sms:+1-555-111-1111">Send SMS</a>
Open the SMS app with custom message: <a href="sms:+1-555-111-1111?body=I%20want%this%20product">Request Product</a>

More details on RFC 5724 - URI Scheme for Global System for Mobile Communications Short Message Service (SMS).

Phone Calls

Same idea here:

Open the dial app on the device: <a href="tel:+1-555-111-1111">Call me</a>

More details on RFC 3966 - The tel URI for Telephone Numbers and in Section 8 is adviced to always enclose the phone number inside the <a> tag, so the correct way for previous example should be something like:

Call me at <a href="tel:+1-555-111-1111">1-555-111-1111<a>.

Locations

If you want the link to open a map in a certain location:

<a href="geo:22.146147,-80.4426516">Our Office</a>

More details on RFC 5870 - A Uniform Resource Identifier for Geographic Locations.

Conclusion

In all cases is required that your device have a correct user agent to handle this URI schemes. In PC the tel, sms, and geo will normally not work. But in smartphone the potencial of this feature is amazing. Use it!

Modern JavaScript that Internet Explorer 11 dislikes

Gabriel Alejandro López López — Fri, 29 Jan 2021 00:00:00 +0000

Yesterday I was call to fix some issues on a website I “fixed” some weeks ago. Main thing was to update the theme (Wordpress). They had a lot of old stuff, 3rd party libraries and the sort of stuff that you can expect of something written on 2017.

The biggest change was migrating forms validation to checking values on change, and before submit to the native HTML5 validation techniques.

And as part of the job I started to write the JavaScript code using the native features instead of jQuery or other “tricks”.

Now, I have to fix some stuff again because on 2021 there is some people still using Internet Explorer 11 (IE11).

Things that does not work:

Arrow functions
- changed to old function() functions
{variable} interpolation
- changed to old Array.prototype.replace()
native Array.prototype.forEach()
- changed to $.each() from jQuery (good in the context)
native String.prototype.replaceAll()
- changed to String.prototype.replace(RegExp, string)

The list is in construction…

PS: Thanks to my colleagues epgeroy and geekmidget for the remote debugging as I don’t have IE11 on my Ubuntu machine.

The 75% keyboard layout

Gabriel Alejandro López López — Wed, 02 Dec 2020 00:00:00 +0000

This is a 75% keyboard, exactly the Vortex Race 3.

And why do I post about it? Because it’s the layout for my brand new Ajazz AK33 keyboard which I’m testing while writing this post.

What’s special with this layout? Well, I’m very used to it because is the one on my Dell Inspiron 5523. As you can see in the picture It have all the keys except for the number keypad but arranged in a more compact way.

So, when deciding which mechanical keyboard to buy, the safe choice was this one. Until now, the typing experience is very good: I’m getting use to the sound and to the tactile feedback. But yeah, it feels nice! Very different from the keyboard on my laptop or the external Logitech I bought and never used (impossible for me).

Really I was scared. I wanted a more compact layout (there is 60% and even 45%) but the absence of arrow keys was the thing that stopped me.

Let’s see if I’m more brave next time.

With you, the Ajazz AK33:

How to identify my public IP from Linux CLI

Gabriel Alejandro López López — Mon, 30 Nov 2020 00:00:00 +0000

So easy!

dig +short myip.opendns.com @resolver1.opendns.com

How to toggle attribute values using jQuery

Gabriel Alejandro López López — Sat, 10 Oct 2020 00:00:00 +0000

I just came across a very simple question on StackOverflow. In the end is how to toggle the value of an attribute using jQuery.

The long version

This is the explanatory version I created when the author of the question requested for an explanation of my original code. Most of the comments are obvious.

$('thebutton').click(function(){
   var currentRows = $('thetextarea').attr('rows'); //obtain the current number of rows in the textarea
   var newRows; //declare a variable to hold the new number of rows
   if(rows == 1){ //if just one...
       newRows = 5; // it should become 5
   }else{ 
       newRows = 1; //else, (not 1), become 1
   }   
   $('thetextarea').attr('rows', newRows); //assign the new value to the rows attribute of the textarea
});

Short version version

My original answer was...

//short version, the one in the answer
$('thebutton').click(function(){
   $('thetextarea').attr('rows',  $('thetextarea').attr('rows')==1?5:1);
});

I've created a gist for this two versions.

The fancy version (new for me)

I still had the doubt if this could be done easier, and find the next way thanks to this answer:

$('thebutton').click(function(){
   $('thetextarea').attr('rows',  function(index, attr){
       return attr = 1 ? 5 : 1;
   });
});

Just learnt a new thing today. I can sleep easy.

How to redirect all emails to one inbox on Yii2 applications

Gabriel Alejandro López López — Fri, 02 Oct 2020 00:00:00 +0000

\yii\mail\BaseMailer::useFileTransport is a great tool. If you activate it, all emails sent trough this mailer will be saved (by default) on @runtime/mailinstead of being sent, allowing the devs to inspect thre result.

But what happens if we want to actually receive the emails on our inboxes. When all emails are suppose to go to one account, there is no problem: setup it as a param and the modify it in the params-local.php (assuming advaced application template).

The big issue arises when the app is supposed to send emails to different accounts and make use of replyTo, cc and bcc fields. It’s almost impossible try to solve it with previous approach and without using a lot of if(YII_DEBUG).

Well, next there is a solution:

'useFileTransport' => true,
'fileTransportCallback' => function (\yii\mail\MailerInterface $mailer, \yii\mail\MessageInterface $message) {
    $message->attachContent(json_encode([
            'to' => $message->getTo(),
            'cc' => $message->getCc(),
            'bcc' => $message->getBcc(),
            'replyTo' => $message->getReplyTo(),
        ]), ['fileName' => 'metadata.json', 'contentType' => 'application/json'])
        ->setTo('debug@mydomain.com') // account to receive all the emails
        ->setCc(null)
        ->setBcc(null)
        ->setReplyTo(null);

    $mailer->useFileTransport = false;
    $mailer->send($message);
    $mailer->useFileTransport = true;

    return $mailer->generateMessageFileName();
}

How it works? fileTransportCallback is the callback to specify the filename that should be used to create the saved email on @runtime/mail. It “intercepts” the send email process, so we can use it for our porpuses.

Attach a json file with the real recipients information so we can review it
Set the recipient (TO) as the email address where we want to receive all the emails.
Set the others recipients fields as null
Deactivate useFileTransport
Send the email
Activate useFileTransport
Return the defaut file name (datetime of the operation)

This way we both receive all the emails on the specified account and get them stored on @runtime/mail.

Pretty simple helper to review emails on Yii2 applications.

Answer: CURL call is working fine directly in CURL but not in PHP 7.3

Gabriel Alejandro López López — Sat, 26 Sep 2020 00:29:50 +0000

How to know why CURL is not working? Very easy:

Sep 25 '20

You can use

$info = curl_getinfo($ch);
$error = curl_error($ch);

to see what happened.

Open Full Answer

Answer: How to toggle value in database on click of a button (YII2)

Gabriel Alejandro López López — Fri, 25 Sep 2020 05:16:45 +0000

Sep 14 '20

This is just a soft delete then: no actual row is deleted but "marked". Two parts for this code:

Controller


public function behaviors()
{
    return [
        //
        'verbs' => [
            'class' => \yii\filters\VerbFilter::className(),
            'actions' => [
                'delete' => ['POST'],
            ],
        ],
        // ....
    ];
}


public function actionDelete($id){
    $model

…

Open Full Answer