Include files vs old information

atomdel · April 29, 2022, 1:30pm

Hi there,
I´m a graphical designer that worked with DW. Now I´m trying “Wappler” and like software but I feel lost with all the information that is available but is outdated. I believe no one uses old version of Wappler. Why not differentiate this old information.

In this tutorial from 13/09/2020 on the minute 7:55 de “Include file” is presented like a good solution to create a template for a static website in HTML

https://www.youtube.com/watch?v=pYUqTm72xLE

Example: When I try to use the “Include file” it doesn´t work… like in the video. Any update solutions for this question?

P.S. Why not create a badge or a colour for old information that doesn’t apply to the last available version of “Wappler”?

Teodor · April 29, 2022, 2:21pm

What is not working exactly?
What project are you working on? What server model are you using?

include files are not "old information" and the video from 2020 is relevant.

atomdel · April 30, 2022, 12:09pm

Hi Teodor,
Thank for your support.

The project (like in the video) is a static website in HTML
Windows 10 Enterprise
Wappler local server
NodeJS

Concerning what is not working: According to the youtube video minute 7:55 the “Include file” is presented like a good solution to create a template for a static website in HTML

https://www.youtube.com/watch?v=pYUqTm72xLE

What happens to me when I try to do it:

The “navbar” disappears when I try to repeat this exercise adding a “Include”. This is different from the youtube video.

Thank you for your support Teodor.

Teodor · April 30, 2022, 10:15pm

You are using a nodejs server model for your project, not a static site with no server model applied. For nodejs it’s different. Please check:

atomdel · May 1, 2022, 7:53am

Thank you Teodor for all the support you give to this community.

atomdel · May 1, 2022, 9:32am

After trying with “own server” without “Nodejs” in a static site the “include” content (the navbar) disappears. Maybe I´m doing something wrong.

Teodor · May 1, 2022, 10:52am

What kind of include are you using? An HTML include? A PHP include? What is the code generated for the include?

atomdel · May 1, 2022, 11:52am

Teodor, this is the code:

<!doctype html>

<html>

<head>

    <script src="/dmxAppConnect/dmxAppConnect.js"></script>

    <meta charset="UTF-8">

    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />

    <link rel="stylesheet" href="/css/style.css" />

    <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer=""></script>

    <script src="/dmxAppConnect/dmxVideo/dmxVideo.js" defer=""></script>

</head>

<body is="dmx-app" id="index">

    <!--#include file="barra_nav.html" -->

    <main>

        <div class="container wappler-block pt-4 pb-4">

            <div class="row mb-3">

                <div class="col">

                    <h4 class="text-center">Fancy display heading<br><small class="text-muted">With faded secondary text</small></h4>

                </div>

            </div>

            <div class="row">

                <div class="text-center col-12 col-sm-6 col-xl-3 col-lg-4 mb-4">

                    <video is="dmx-video" id="video1" width="100%"></video>

                    <h5>Fancy display heading<br><small class="text-muted">With faded secondary text</small></h5>

                </div>

                <div class="text-center col-12 col-sm-6 col-xl-3 col-lg-4 mb-4">

                    <video is="dmx-video" id="video2" width="100%"></video>

                    <h5>Fancy display heading<br><small class="text-muted">With faded secondary text</small></h5>

                </div>

                <div class="text-center col-12 col-sm-6 col-xl-3 col-lg-4 mb-4">

                    <video is="dmx-video" id="video3" width="100%"></video>

                    <h5>Fancy display heading<br><small class="text-muted">With faded secondary text</small></h5>

                </div>

                <div class="text-center col-12 col-sm-6 col-xl-3 col-lg-4 mb-4">

                    <video is="dmx-video" id="video4" width="100%"></video>

                    <h5>Fancy display heading<br><small class="text-muted">With faded secondary text</small></h5>

                </div>

                <div class="text-center col-12 col-sm-6 col-xl-3 col-lg-4 mb-4">

                    <video is="dmx-video" id="video5" width="100%"></video>

                    <h5>Fancy display heading<br><small class="text-muted">With faded secondary text</small></h5>

                </div>

                <div class="text-center col-12 col-sm-6 col-xl-3 col-lg-4 mb-4">

                    <video is="dmx-video" id="video6" width="100%"></video>

                    <h5>Fancy display heading<br><small class="text-muted">With faded secondary text</small></h5>

                </div>

                <div class="text-center col-12 col-sm-6 col-xl-3 col-lg-4 mb-4">

                    <video is="dmx-video" id="video7" width="100%"></video>

                    <h5>Fancy display heading<br><small class="text-muted">With faded secondary text</small></h5>

                </div>

                <div class="text-center col-12 col-sm-6 col-xl-3 col-lg-4 mb-4">

                    <video is="dmx-video" id="video8" width="100%"></video>

                    <h5>Fancy display heading<br><small class="text-muted">With faded secondary text</small></h5>

                </div>

            </div>

        </div>

    </main>

    <footer class="bg-light wappler-block">

        <div class="container">

            <div class="row">

                <div class="col">

                    <nav class="navbar navbar-expand-lg navbar-light bg-light p-0">

                        <div class="container-fluid">

                            <span class="navbar-text p-2 d-none d-sm-block d-md-block small"><i class="fa fa-map-marker"></i> 1234 Street Name, City Name</span>

                            <span class="navbar-text p-2 small"><i class="fa fa-phone"></i> (800) 123-4567</span>

                            <span class="navbar-text p-2 d-none d-sm-block d-md-block small"><i class="fa fa-envelope"></i> mail@example.com</span>

                            <span class="navbar-text p-2 d-none d-sm-block d-md-block small ms-auto">© Copyright 2019. All Rights Reserved.</span>

                        </div>

                    </nav>

                </div>

            </div>

        </div>

    </footer>

    <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>

</body>

</html>

Teodor · May 1, 2022, 11:59am

I was actually referring to the include code:

    <!--#include file="barra_nav.html" -->

I hope you understand that in order to use SSI includes your server needs to support them? Maybe take a look at this topic: SSI File vs PHP Includes it explains the different type of includes. Also you need to make sure your server has SSI includes enabled.

atomdel · May 2, 2022, 9:46am

Teodor, thank you for your information.
I created a new project without a server and I started to work. I was able to upload content to the server. I was able to view the content on the site for a few minutes. And then I tried to change the CSS… on the “Include file”. It stoped to updating the content on the index.html .
Please check the video.

wappler

Now only appears the “main” on the uploaded version.
http://www.atomdel.pt/su_x/index.html

I feel lost Teodor.

Teodor · May 2, 2022, 9:54am

Sorry i don’t really understand what to look at exactly at this 5 minutes video of you clicking in Wappler.
What i see that you never save any of your files - main and include. Your files must be saved in order for the changes you made to be visible …

atomdel · May 2, 2022, 10:13am

Thank your for your advice I will do the "Save".
I´m a new user (client) trying to migrate from dreamweaver to wappler. For the last two weeks I started to study wappler hopping to use this program has my main tool for webdesign with no good results.

The video helped you to understand my mistake (not saving the files). Sorry for my basic solution.

Thank you.
Rodrigo Cerqueira

atomdel · May 2, 2022, 10:34am

The content appears correctly on wappler following your advice (save). Thank you.

Uploaded the content to the server… cleared the cache but I can´t see the changes online.
http://www.atomdel.pt/su_x/

Teodor · May 2, 2022, 10:35am

As explained above:

If SSI is not enabled on your server you cannot see them. Instead you can just use PHP pages and regular PHP includes ... they require no configuration on your server.

atomdel · May 2, 2022, 10:48am

Thank you Teodor.