Incorporating AjaXplorer into WordPress

[caption id="attachment_107" align="aligncenter"]

AjaXplorer[/caption]

What we had to think about in order to showcase "DEVLAß" was the UI for uploading and deleting files in various formats. This site is built with WordPress, but if you rely on the WordPress media library, even if you add a plugin for file management, you have to manage each uploaded file, and it is far from the same file operation as a local PC, such as bulk deletion and grouping in a directory. Furthermore, since "DEVLAβ" does not open FTP for security reasons, it was necessary to be an FTP-independent file uploader. Therefore, we decided to introduce "AjaXplorer", which allows file management and operation like an explorer on a local PC and does not use FTP.
This "AjaXplorer" is a free tool, but it is a surprisingly advanced tool that allows you to upload, rename, delete, create directories, copy, move files online, and perform various file operations such as uploading, renaming, deleting, directorating, copying, and moving files in Windows Explorer through a browser. It also supports SmartPhone like iOS, and even plugins that connect to major CMSs like WordPress and Drupal. With CMS integration plugins, for example, if you log in to WordPress, you can automatically log in to AjaXplorer and set up repositories (access directories and access permissions) for each user. In addition, "AjaXplorer" itself is available in Japanese, making the tools easier to use.
However, it is a bit troublesome to integrate into WordPress, and there are few sites that explain it in detail, and there is no Japanese help that even describes CMS integration. Therefore, I will try to convert the procedure I incorporated into TIPS this time. In addition, I also tried to translate AjaXplorer's WordPress plugin into Japanese, so I will also distribute the instructions and Japanese translation files.
(*Please note that this TIPS assumes that WordPress is already installed in the environment in which AjaXplore is installed.)

1. Installing AjaXplorer

First, download "AjaXplorer".
Download the latest version from the official AjaXplorer website (the version I downloaded was 4.2.0 as of July 2012) and upload it to the server. Alternatively, you can download and install it directly from the server side using RPM or yum commands (please refer to the official website for command-line-based download and installation information). This time I did the installation not based on the command line, but as a file upload. This is because I thought it would be easier to configure the configuration by expanding the configuration file as it is in the installation path of AjaXplorer.

[caption id="attachment_115" align="alignleft"]

[Figure 1] AjaXplorer Installation Health Check Screen[/caption]

Now, when I unfold the downloaded file, I get a long directory name like "ajaxplorer-core-4.2.0". If you upload it to the server as it is, the access URL will be long and difficult to use, so rename it to "ajaxplorer" and upload it to the server.
Next, change the permissions of the "data" directory directly below the directory where AjaXplorer was deployed and the subdirectories below it to be writable by the user (permissions 777 or 775). Now, access the directory (root path) where you have deployed AjaXplorer from your web browser. For example, if you upload AjaXplorer directly below the document root of your site, it will be a "http://mydomain.com/ajaxplorer/". This will launch the installer's health check. If you get an error, most of the problems are with directory permissions, so try to make the permissions of the root directory (such as "ajaxplorer") where you deployed AjaXplorer written.
If the health check is successfully performed, a screen like [Figure 1] will be displayed, so if there are no problems with the content, please click the link "click here to continue to AjaXplorer."

[caption id="attachment_116" align="alignleft"]

[Fig. 2] AjaXplorer login screen[/caption]

You can skip the warning dialog that the initial admin user's username and password are the same. When the login screen like the one shown in [Figure 2] starts, the installation is complete. The username and password of the initial management user are both "admin", so please log in first.

2. Initial Setup of AjaXplorer

[caption id="attachment_127" align="alignleft"]

[Fig. 3] Translating AjaXplorer into Japanese[/caption]

First, change the language settings to Japanese. As shown in Figure 3, select "Language" from the "Logged as admin" drop-down in the upper right corner of the console, and select "Japanese" from the select box. This completes the Japanese translation of AjaXplorer.

[caption id="attachment_126" align="alignright"]

[Figure 4] AjaXplorer User Password Change[/caption]

Next, change the password of the initial administrative user. You can do it from "Change Password" in the same way as the language setting (see [Figure 4]). This completes the initial setup on the AjaXplorer side.

3. Concatenating WordPress and AjaXplorer (WordPress Preparation)

Next, we will create an application bridge so that when you log in to WordPress, you will be logged in to AjaXplorer at the same time, and if a user logs in on the WordPress side, it will be automatically added if the user does not exist on the AjaXplorer side. The official website distributes a plug-in for the bridge, so download it (Bridge plug-ins for various CMS are included in the "ajaxplorer-cms-bridges-4.0.zip" that can be downloaded from the link).
When you expand the download file, you will find a folder called "ajaxplorer" in the "WordPress" folder, so upload this folder to the WordPress plugin directory.
You can now use the bridge feature by activating the AjaXplorer plugin from the WordPress admin menu. However, the settings screen is difficult to understand in English, so I will translate this bridge plugin into Japanese. First, download the Japanese language file of the bridge plugin distributed in this article. When you unzip the downloaded file, the lang folder will be unzipped, so upload this folder directly under the directory of the AjaXplorer bridge plugin.
Next, embed the language file in the bridge plugin itself. The main body of the bridge plug-in "class. WpAjxp.php" and add the following code under [php firstline="11"]define("AJXP_EXEC", true);[/php].
[php firstline="12"]load_plugin_textdomain("ajxp", false, "ajaxplorer/lang/");[/php] This completes the plugin Japanese. "AjaXplorer" will be added to the "Settings" section of the WordPress admin menu, so if the settings screen is translated into Japanese as shown in [Figure 5] below, the Japanese translation is successful.

[caption id="attachment_130" align="aligncenter"]

[Figure 5] Japanese translation of the AjaXplorer bridge plug-in settings screen[/caption]

The bridge plugin settings are as follows.

• In the AjaXplorer Path field, enter the full path on the server where AjaXplorer is installed.
  • Enter any password in the "Private Key~" field (remember this password as it will be used in the next step).
  • You can choose the toggle for "Auto Create~" arbitrarily. If you have a large number of users logging in to WordPress and you don't need all users to use AjaXplorer, you can say "No".

Then, register the initial admin user "admin" of AjaXplorer as a user on the WordPress side. In this case, the password for the "admin" user you create in WordPress must be the same as the password you changed in AjaXplorer earlier (if there is already an "admin" user on the WordPress side, you can change the user's password to the password of the "admin" user in AjaXplorer, or Log in to AjaXplorer again and change your password there.)

4. Connect WordPress and AjaXplorer (Preparing the AjaXplorer Side)

Now we're going to incorporate a bridge plugin on the AjaXplorer side.
I have a config file called "bootstrap_plugins.php" in "conf" in the AjaXplorer installation directory, so I edit it. Replace the entire associative array called AUTH_DRIVER on lines 65~73 of "bootstrap_plugins.php" as shown below (it is useful to comment out and add the original array when switching back).
[php firstline="65"] "AUTH_DRIVER" => array( "NAME" => "remote", "OPTIONS" => array( "SLAVE_MODE" => true, "USERS_FILEPATH" => "AJXP_INSTALL_PATH/server/users/users.ser", " LOGIN_URL" => "/wordpress/wp-login.php", "LOGOUT_URL" => "/wordpress/", "SECRET" => "myprivatesecret", "TRANSMIT_CLEAR_PASS" => false) ), [/php] The parts that need to be edited individually are as follows.

• [php firstline="69"]"USERS_FILEPATH" => "AJXP_INSTALL_PATH/server/users/users.ser"[/php] … In the latest version of AjaXplorer, the user file storage location has been changed, so it has been changed to [php light="true" classname="inline-code"]"AJXP_INSTALL_PATH/data/plugins/auth.serial/users.ser"[/php]
  • [php firstline="70"]"LOGIN_URL" => "/wordpress/wp-login.php"[/php] … WordPress login URL (you will be redirected to this URL when you log in to AjaXplorer)
  • [php firstline="71"]"LOGOUT_URL" => "/wordpress/"[/php] … WordPress logout URL (you will be redirected to this URL when you log out with AjaXplorer)
  • [php firstline="72"]"SECRET" => "myprivatesecret"[/php] … The Private Key You Entered When Setting Up Your WordPress Bridge Plugin

Overwrite and save when you are done editing the settings. Now you are logged in to the WordPress side and at the same time log in to AjaXplorer. Try logging in to WordPress as an admin user and check the operation.
Once you have successfully bridged login, it's time to set up your repository so that the file management on the WordPress and AjaXplorer sides is synchronized.

[caption id="attachment_138" align="alignleft"]

[Figure 6] AjaXplorer Settings[/caption]

Log in to AjaXplorer, select "Settings" from the pull-down in the upper left corner (see [Figure 6]),

[caption id="attachment_139" align="alignright"]

[Figure 7] Create a new AjaXplorer repository[/caption]

Select "New Repository" → "Repository" from the top toolbox (see Figure 7).

[caption id="attachment_140" align="alignleft"][

)](https://blog.colorkrew.com/uploads/scrsht-00010.png) [Figure 8] AjaXplorer creates a new repository[/caption]

As shown in Figure 8, the "Create a new repository" dialog will open, so enter the following required fields.

• Repository Label: The name of the repository displayed in AjaXplorer
  • Repository Driver: This is the driver for the repository. Basically, "File System (Standard)" is fine.
  • Path: Enter the full path on the server for the directory you want to reference (see the example repository path shown in the WordPress settings screen)
  • Create: This is a toggle for whether to create a new path if the above specified path does not exist

You can also set access to repositories in the Accordion list in Filesystem Commons. You can make each repository referential only. If you want to manage basic files, you should set it to "Read and Write".

[caption id="attachment_141" align="aligncenter"]

[Figure 9] Check the AjaXplorer repository[/caption]

If you select the name of the newly created repository from the drop-down in the upper left corner and the file manager screen is updated to the content according to the repository path, the repository has been successfully created. This makes it extremely convenient to manage your files, such as re-uploading media files.

5. Create a Shortcut to AjaXplorer in the WordPress Admin Menu

By the way, the connection between WordPress and AjaXplorer has been completed, but there is no link to shortcut from the WordPress admin menu to the AjaXplorer side, so you have to type the URL when you want to go to AjaXplorer each time, which is troublesome. So, we want to add a shortcut link to AjaXplorer on the WordPress admin menu side to make it even more user-friendly.
The main body of the WordPress bridge plugin "class. Add the following code to the WpAjaxp.php.
In the function of "function setting_menu()" on lines 103~106,
[php firstline="106"] add_submenu_page('tools.php', __("AjaXplorer", "ajxp"), __("AjaXplorer","ajxp"), '1', 'wp_ajax_link', array(&$this, 'goto_ajaxplorer')); [/php]. In addition, in the "Ajxp" class (after the function "plugin_options_validate()", you can use the
[php htmlscript="true" firstline="202"] function goto_ajaxplorer() { echo '

'; } Add a link to the root directory of AjaXplorer, such as [/php] (if you undo the JavaScript comment-out above, it will link immediately).
This will add an item called 'AjaXplorer' within the 'Tools' section of the WordPress admin menu, from where you can take a shortcut to the AjaXplorer side. When returning from the AjaXplorer side, you can go back to WordPress with "Back" in the toolbox.

AjaXplorer CMS Bridge WordPress Plugin Japanese File

• ZIP format: wpajxp-ja.zip (4.09KB)
• TAR. GZ format: wpajxp-ja.tar.gz (2.47KB)

Action Confirmation: WordPress 3.4.0 / AjaXplorer 4.2.0