Server Side Includes (SSI)

It is very common in web development that you reuse a component on different pages, so that when you change something it is being updated everywhere. In Wappler you can create and re-use server side includes (ssi) on different pages across your site.

This could be any element from your page - for example your header with the navbar:

The first thing you need to do is to select the component:

Then click the move to include file button:

A confirmation dialog appears. Select Yes:

Enter the include file name(1), which in our case is ‘header.php’ and then click the save button(2):

The include file has been successfully saved, and then it has been included on your page:

You can see its settings in the properties panel:

You can open the include file for editing, by clicking the open file button:

When the include file is loaded in wappler, you can make changes as on any other page and also it renders nicely in design view:

In order to add your SSI files on other pages, first open the page you want to include it on and click the add component button, where you need to put the include:

Select Server Side Include:

Then click the browse button:

Select your include file and open it:

Then you can select what type of SSI it should be:

And you are done, your header SSI has been included on the page:


WapplerPrevious   WapplerNext


2 Likes

This is very useful, thank you. Can you please explain what the four different types of SSI are and when you would use them?

@UKRiggers Please check the discussion about SSI here: SSI File vs PHP Includes :slight_smile:
I hope it answers your question.

To try extend to this tutorial, there are certain things to be aware of when using Server Side Includes.

Because most components you add to a page are not merely self contained blocks of code, and generally have supporting references to .js, .css files, that give the block of code it’s intended functionality and/or styling, your new page where you are importing your, includes file needs to have the same references in place in order to function as expected.

The confusion with this is that we often are not aware of what supporting files are required for each and every component we are about to use and therefore it becomes difficult to manually add these files.

Take an example of adding a Navigation component which will often be used as an includes file.
This adds a block of code in the body of your document inside the nav tag like below.

<nav>
   ...
</nav>

At the same time a .js file is also added of dmxBootstrap4Navigation.js, not only is it added but it also has an “intended order” to where in the document head section this would need to be added, i.e. always after the dmxAppConnect.js supporting file.

My suggestion would be that if you are not a code savvy person, or just are unaware of what supporting files are needed for the component you used, to do the following.

Create your new page where you are about to use your includes file and first use the Wappler UI to add a dummy navigation, once added, select it from the App Structure and delete it. Then add your includes file. This ensures that Wappler will add the required supporting document in the head, and position it where intended, which can therefore be used when your `includes`` file requires it.

Obviously this example is a navigation element in it’s most simple form and sometimes this can get slightly more tricky depending on what your Navigation component uses, if you have used a formatter to change text case or perform a math operation / condition then the formatter requires it’s supporting file of dmxFormatter.js and if you have a LogOut button in the navigation that uses a goto event then you will need to ensure the dmxBrowser.js file is included in your head as well as the respective body code for that component as well as original ID replicated.

In these cases to be honest I find it is often easier to just go through this procedure once and save your document as a template you can just duplicate and reuse when needed.

2 Likes

Maybe we should think of a better way of moving such components in includes, so it moves all the required files there as well @George

3 Likes

If that would be possible, it would certainly be a big deal for me personally, I just did not think it would really be possible, but if it is, then YES please.

I totally agree. Thank you for publishing your discussion in such a concise way, psweb.

I’m with @psweb on this one. A feature like building components into includes would make Wappler a truly “Plug-and-Play” solution. BTW: Love the psweb videos, they helped alot, Thank You!

1 Like