Replacing server side includes?

Report · Aug 03, 2024

I manage a static website that uses straightforward html coding on thousands of pages that have use server side includes for the header and footer. The site was recently moved from a rickety old server to the cloud and I am told that I cannot use SSIs anymore so when the site goes public it will be missing the headers and footers.

I am assuming that I will need to edit each page to insert whatever replaces the SSI, but that would be a one-time thing. I hope.

I'm using Dreamweaver 21.4 on a Mac, in case that's useful. The cloud storage network is the Ontario Library Research Cloud, and I have to use a web interface (Openstack Horizon) to upload files, and it uses an object-based storage system instead of the hierarchical system I'm used to (but luckily it mimics it!).

Thanks,

Madeline

Report · Aug 03, 2024

PHP is out; JavaScript is in!

You can create your own Custom Elements to replace those pesky SSI's. To get the same navigation bar on each page, merely add your Custom Element. In my case I have called it <my-header>.

The HTML

<!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>

The JavaScript (file: web-components.js - ill named components instead of elements) 😒

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)

For more info see Using Custom Elements

Wappler, the only real Dreamweaver alternative.

Report · Aug 04, 2024

Thanks! I will see if I can teach myself how to do this. 🙂

Report · Aug 04, 2024

It is fairly simple, just place your HTML code in the constructor, name the Element and define a hyphentated name for the element.

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

THE HTML CODE GOES HERE

    `
  }
}

window.customElements.define('my-element', Element)

For the footer its would look like

class Footer extends HTMLElement {
  constructor() {
    super()
    this.innerHTML = `
      <p>copyright 2024</p>
    `
  }
}

window.customElements.define('my-footer', Footer)

Then use the custom element's name in your HTML documents.

PS:

Don't forget to also refer the components JavaScript file in your documents
There can be multiple custom elements in a single JavaScript file

Wappler, the only real Dreamweaver alternative.

Report · Aug 06, 2024

Thanks again, Ben. I've never done anything with javascript before so I'm learning from scratch! Can you recommend a basic how-to guide?

Report · Aug 06, 2024

I understand your anxiety in uusing a new language. But do not worry, most of us using JavaScript do not have a full grasp of the language. What helps us, are the abundance of examples on the internet. A simple search for a basic course has placed me here

https://www.youtube.com/playlist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc

Be mindful that the information contained in the playlist can be mind boggling. So please do not get drowned in information that you do not require for your problem.

To help you with replacing SSI in your documents, please tell me what you do not understand. Maybe supply a URL to your site so that I can give you more specific assistance.

Wappler, the only real Dreamweaver alternative.

Report · Aug 06, 2024

Very kind of you! I am not particularly anxious about it -- I assume it's not too complicated.
I'm waiting for the redirects to come off the site, and when that happens, I'll let you know!

Adobe Community

Replacing server side includes?