Writing a Flarum Extension: Building a Custom Field

This tutorial demonstrates creating a Flarum extension to add a custom Web3 address field to user profiles. It's accessible to users and editable by administrators.

Key Concepts:

• Friends of Flarum Boilerplate: Leverage this tool to quickly generate the extension's structure.
• Extending Flarum: The tutorial emphasizes extending existing Flarum components rather than overwriting them, maintaining core functionality.
• Database Migration: A migration is used to add the web3address column to the users table, ensuring data persistence.
• Event Listeners: Event listeners (Serializing and Saving) handle data flow between the frontend and backend.
• Frontend Development (JavaScript): JavaScript is used to create the UI element for the Web3 address field and handle user input.
• Backend Development (PHP): PHP handles data saving, validation, and administrator access control.

Adding the Web3 Address Field:

The extension allows users to input their Web3 address on their profile page. This address serves as their cryptographic identity within the Web3 ecosystem. Even without Web3 knowledge, this tutorial provides valuable insights into creating custom user fields.

Prerequisites:

NodeJS (12.16 ), Composer, Yarn (recommended), PHP, MySQL, and a running Flarum instance are required. Ensure your Flarum instance is in debug mode.

Extension Creation:

1. Use the Friends of Flarum boilerplate to create the extension: npx @friendsofflarum/create-flarum-extension web3address (or a similar name).
2. Configure the boilerplate (Admin CSS & JS: no; Forum CSS & JS: yes; Locale: yes; Javascript: yes; CSS: yes).
3. Compile JavaScript: cd packages/web3address/js; yarn && yarn dev.
4. Install the extension: composer config repositories.0 path "packages/*"; composer require swader/blockchain @dev.
5. Activate the extension in the Flarum admin panel.

Extension Development:

The tutorial details modifying extend.php, js/src/forum/index.js, creating src/forum/components/Web3Field.js, implementing a database migration, and creating listeners (AddUserWeb3AddressAttribute.php and SaveUserWeb3Address.php). The process involves extending existing Flarum components and adding event listeners to manage data persistence and display. The final steps involve extending the admin UI to allow administrators to edit user Web3 addresses.

Conclusion and FAQs:

The tutorial concludes by explaining how to test and distribute the extension. A comprehensive FAQ section covers various aspects of Flarum extension development, including creating custom fields, using Composer and migration files, handling data input/output, testing, and distribution. The author encourages feedback and further discussion.

The above is the detailed content of Writing a Flarum Extension: Building a Custom Field. For more information, please follow other related articles on the PHP Chinese website!