Jump to content

Welcome to the first tutorial on creating custom apps for the IPS (Invision Community) engine. This series will focus on create apps and plugins.

What is it the Invision Community?

It is a CMS for advanced forums but it offers applications such as commerce, pages, files, gallery, events, calendar. To create a modification for this engine, a license is required, which can be purchased on the official website. You can test it for free 30-day trial.

How install IPS?

Installation is very easy, like the WordPress CMS :D You have to download packages form Client Area and follow this guide. If you want install IPS engine on your local machine use test install key and use XAMPP app (I recommended for Mac OS) or Laragon app (I recommended for Windows).

Enable Developer Mode

Before we start creating an application, we need to turn on the developer mode.

Remember not to run developer mode in production! Your community can be run much slower than usual and may introduce security vulnerabilities!

First download Developer Tools for your IPS version.
You can check IPS version by move in AdminCP => System => Support => Get Support.

Extract the developer tools and move them to where IPS Community Suite is installed, merging with the existing files.

Create or modify constants.php file and paste:

<?php
define( 'IN_DEV', TRUE );

Your AdminCP should change. In the lower left corner, we should receive information that we are in developer mode.

1_mf8qSQ0gy2Yc7jzrfJBVDA.webp.ec744be0b2eb003ed7c8d0a57c0c6e56.webp

Create first app

Go to AdminCP => System => Applications and click “Create New”.

1_lDflCCsQB9j4uOasiKoinA.webp.d1b65343817db6cb0b6b3d578a8d2b71.webp

Type name of app, application directory (name folder).
Remember: Application Directory must be unique to each installation! You can add come prefix for you app for example (for me) `aXenHelloWorld`.

1_-aGmHgO4SbpMuIdA8-z3hw.webp.6493c4f1da0a14be623854074a560301.webp

Congratulations! You are created first application in IPS!

1_23qiGnTZTah7QYdAdu4SlA.webp.bb3d1eb36d33787ab279f16eac6e5a0a.webp

At the moment, your application does absolutely nothing. Let’s create a new website for your community.

In your files you have folder `applications` and inside this folder you have your application. For me this is `helloworld` folder. Open your folder with the application via PHPStorm (paid) or VSCode (free). I using VSCode.

Now take to look for directory structure. You can explore folders, but remember, `data` folder is generate automatically, so you can’t modify files here (with the exception of furl.json).

1_nV9IMQ4Kx-0F3N4k74nKVg.webp.6adc263d5717c4cb0887903efe28ed59.webp

Create page

Okey, let’s create first page in your application.
Go to AdminCP => System => Side Features => Applications. Find your application and open ”Developer center”.

1_J0wjqNM_eggSGbJaufk0Dg.webp.55380a525405d59260195ac29fc0ed91.webp
 

Create module

Go to “Modules — Front” tab. Modules are our main classes, which can be said to serve as folders. Defines modules and controllers used on the front end of your application. Files and folders will be generated in your modules/front directory.

Now let’s create new module, click “Add Module” button and provide “Module Key”. I’ll type `helloworld`.

1_k2sgSB78wwl5HW8n7Mg2pA.webp.09e73283e38c9ffb8a687fccffd0c3a6.webp

Create controller

In next steep we’re create controller for our first page. Find “Plus” button, click it and provide filename. I’ll type `pagetest`.

1_WrCwhhOLVjT4x3B-y1Trjw.webp.c129f1d4781c7fbe00dc7bf0b38e0c9a.webp

Now check files in your applications. We created a module called `helloworld` and a controller called `pagetest.php`.

 

1_pgb1fhO58sdx8Uq9-GpkNw.webp.366597d82b499a3ed7fcd797d83b54f5.webp

Open “pagetest.php” file. IPS automatically generated us the basic structure of the file. Don’t change it, except for the methods that are inside the class.

Methods build-in:

  • Execute — code running only once when render other functions,
  • Manage — main function for your controller

Congratulations! You are create first page!

Now you can go to your page with the appropriate query:

Цитата

 

1_ngcLtshjgnDD7fT0ZQHNXA.webp.76589e9ebd9a96bce5ebf307d7e1d5df.webp

 

Create HTML template

Our page is empty. We must create HTML page to display something here. Go to files your application and open `dev/html` folder.
We have 3 primary folders here:

  • front — Display in front,
  • admin — Display in AdminCP,
  • global — Display in front and in AdminCP

For our app create new folder “front”.
Inside “front” folder create new folder (for group) for example “pagetest” and inside folder create “index.phtml”. The file and folder names are optional.

1_otcp3O-b-99dR6U2kkFjbQ.thumb.webp.e1168053ab6249aa760a8b3a3400d2af.webp

Inside “index.phtml” on top file you must write header. Add in file (on the top):

<ips:template parameters="" />

Below you can write your HTML. Example:

<ips:template parameters="" />
<h1>Wow! My first page in IPS! Hi :)</h1>

In the next step, we will render this HTML code in our controller. Inside controller (for me pagetest.php) modify manage method.

\IPS\Output::i()->output = \IPS\Theme::i()->getTemplate(group, appName, module)->filename();
  • module — front/admin/global folder,
  • group — Name folder in module folder,
  • appName — your appName (app name you can find in each php file by namespace for example `namespace IPS\helloworld`. “helloworld” this is my app name),
  • filename — your `phtml` file

Full code here for me:

protected function manage()
{
  \IPS\Output::i()->output = \IPS\Theme::i()->getTemplate('pagetest', 'helloworld', 'front')->index();
}

Now we have text inside page!

1_nTByTvu9daYc7v8vJ6XLNQ.webp.85a6713ec7bfd9c8ced92fbc0eda510d.webp
 

Language string

IPS has language module for strings. Let’s add few strings. Go to your files app and open file in “dev/ lang.php”. Next add some strings.

<?php

$lang = [
 '__app_helloworld' => "Hello World",
 'module__helloworld_helloworld' => "My helloworld Module",
 'hello_world_test_page' => "Wow! My first page in IPS! Hi :) for English"
];

module__helloworld_helloworld” is for your module in breadcrumb.

Now go back to our `index.phtml` file. Replace content to and save file:

<ips:template parameters=”” />
<h1>{lang="hello_world_test_page"}</h1>

Now your application use “hello_world_test_page” key to display string “Wow! My first page in IPS! Hi :) for English”.

1_CUM5RTM0bSiyS9X0f0DWZQ.webp.f7e1ce6ec995863f10a7bcd2d0a9c89a.webp

Breadcrumbs

You can create your own breadcrumb for page. Go to your controller and modify manage method.

\IPS\Output::i()->breadcrumb[] = [null, \IPS\Member::loggedIn()->language()->addToStack('hello_world_test_page')];

This line accept array with 2 parameters:

  1. URL — current null if is current page,
  2. String — to display text

This is method language module build-in IPS. “‘hello_world_test_page” is your language key.

\IPS\Member::loggedIn()->language()->addToStack('hello_world_test_page');php

Check the results:

1_w_3_pD6JHn74FGvme6aOTg.webp.90c30cd629a60d50a38412d7a9b7b85d.webp
 

Title Page

We don’t have current title page. Check browser tab for current page in your IPS.

1_5jlbw75v-NbJFUT7c5VXHw.webp.4b8eeff4df769d19b0963f8c848baccf.webp

If we want to add some text here, we can do that by modify manage method in your controller.

\IPS\Output::i()->title = \IPS\Member::loggedIn()->language()->addToStack('hello_world_test_page');

Check the results:

1_g4427DuGFrmI-K2tV9HJ0g.webp.77bc4cd1c4ebf9144bdae62a207ebef6.webp

 

Export Application

Now you can build application for your production community. Go to AdminCP => System => Side Features => Applications. Find your application and click “Download” button.

1_DT3bdySUTRIDgWNQi_afgw.webp.c19bc6325dc79782339eac298ed25328.webp
 

Choose new version and click “Save”.

1_ut7fumrkKtSYldjihEqmCw.webp.e88ab5042ec0565a76b86767f8867f89.webp
 

Done! Now you have `.tar` version of your application.

Ending

Congratulations! You’re created first application in IPS engine. If you are lost, look at the source code on my GitHub.

Credit to Maciej Piotr Balcerzak

User Feedback

Recommended Comments

bunster123123

Пользователи

Thank you for sharing this invaluable guide on creating applications for Invision Community. As someone who was actively working on developing an e-commerce application for my Invision-powered platform, I found this resource extremely helpful and comprehensive. Your contribution to the community is greatly appreciated, and I'd like to elaborate on why this guide is so valuable.

I'm at my wit's end trying to find decent guides for developing applications for Invision Community. I've been working on an e-commerce app for my site, but the official forums are basically useless when it comes to actual tutorials or walkthroughs.

Has anyone else noticed how terrible the official resources are? It seems like IPS expects us to just magically know how to build complex apps without any real guidance.

That's why I've turned to IPBMafia instead. Their forums actually have useful info and files that the official site refuses to provide. It's crazy that we have to rely on third-party sites just to get basic development resources.

Am I missing something? Is there some secret stash of dev guides hidden somewhere on the official site? Or are we all just winging it?

Thanks for listening to my rant. Any tips on finding better resources would be appreciated.

Also thanks to @Silence for helping me find this forum post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Добавить комментарий...