Skip to main content
M
madelinekoch
Participating Frequently
August 3, 2024
Question

Replacing server side includes?

  • August 3, 2024
  • 1 reply
  • 799 views

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.

 

Is there an alternative to SSIs that puts info on each page that can be changed? For example, the footer says "copyright 2024" and on Jan 1 each year I update that.

 

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

    This topic has been closed for replies.

    1 reply

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    August 4, 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    M
    madelinekochAuthor
    Participating Frequently
    August 4, 2024

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

      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      August 4, 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices