Php includes

Wappler General Need Help
1

Hello :slight_smile:

I am on php and use includes for the navbar and sidebar.

Problem with that is that the design view UI is not available, and coding dynamic menu items requires a workaraound (via a temporary page and then copy/ past)

Is there a better solution?

2

You could use custom elements instead.

As an example, here I have created a custom element called <my-header>

web-components.js

class Header extends HTMLElement {
  constructor() {
    super()
    this.innerHTML = `
      <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    `
  }
}

window.customElements.define('my-header', Header)

This component is used in index.html as follows

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <!-- Custom Header-Navigation Element -->
    <my-header></my-header>

    <main>
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1>Hello, world!</h1>
                </div>
            </div>
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="js/web-components.js"></script>
</body>

</html>

image
image1002×115 5 KB

For the creation of a custom element, all that is required is to place the html code as a template inside the following construction. Notice the backticks.

class ELEMENT extends HTMLElement {
  constructor() {
    super()
    this.innerHTML = `

      HTML CODE GOES HERE

    `
  }
}

window.customElements.define('CUSTOM-ELEMENT', ELEMENT)

Change the capitalized words to suit, making sure that the used element is hyphenated.

In the same JavaScript document, you can place as many custom elements as you wish, requiring just the one JS link for each page.

The great part: there is no need for a PHP extension if no other PHP code is used in the document.

Edit: I have created a short tutorial (if needed).

2 Likes
3

@elphin how did you create the include?
Did you use the Wappler’s move to include functionality or did you create the include manually by hand (in code view)?

4

Thanks Ben for your detailed reply.
Looks like this can work but also a little complicated. And I'm not sure if I can edit the code easily with sources from the page the include is used in (sever connects for example), as normal includes allow me to as I just learned.

Where would Custom elements be superior/better suited over SSI includes?

5

Ah, I see, that was the problem. I now did it the Wappler way and I can use all the resources from the original/parent page!

The fact that this include will be used on many other pages does not really matter I gues? It's just so that the sources from the original page are available when I want to edit the include file right?

1 Like
6

You are right, custom elements do not currently fit in with Wappler in the same way that Wappler handles an include. This makes it harder for a non-coder.

As @George states in another post, Wappler is considering the ability to create custom elements and custom App Connect components (two related objects) in a more natural editor. Fingers crossed.

  1. For plain HTML websites with no server-side code, this is the only solution.
  2. Executes in the browser instead of a journey to the server and back.
  3. More flexibility. What I have shown is a very simple example.

Imagine this custom element <live-timer id="elem"> that keeps the current time as in

image

Admittedly, this would make an excellent App Connect component rather than just a custom element. But as said, the two are related; one is a general version, the other has been Wapplerised.

Great that you found a solution to the problem.

1 Like
7

Thanks Ben! Appreciate your sharings.