• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Replacing server side includes?

Community Beginner ,
Aug 03, 2024 Aug 03, 2024

Copy link to clipboard

Copied

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

Views

296

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 03, 2024 Aug 03, 2024

Copy link to clipboard

Copied

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

BenPleysier_0-1722731672319.png

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 04, 2024 Aug 04, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 04, 2024 Aug 04, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 06, 2024 Aug 06, 2024

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 06, 2024 Aug 06, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 06, 2024 Aug 06, 2024

Copy link to clipboard

Copied

LATEST

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines