App structure

Wappler General
#1

Hello Community,

I have created an index.php page and php included:

  1. header.php
  2. footer.php

With my header.php I have created 2 modals for register and login, which will hold the forms to register and login.

With my index.php I have started my “App Structure” with “App”. My first form register I have created on a seperate page, so I can php include it within my header modal. The “App Structure” with my form also starts with “App”. When I refresh my page, I get the browser message “App already running!”.

My question relates to the workflow.

Obviously my form “App Structure” should not start with “App”, but rather with “Container” > “Row” …, because I am including this.

With Elements I found “partial”. Not sure what it is good for, since I am using server side include for header and footer.

Should my header.php and footer.php “App Structure” start with “App” or, since every normal page will start with “App”, don’t I need it? I will, besides linkin to the 2 modals with forms, for example show the logged in user image and user name with my header for every page later on.

#2

With server side includes, you have to think of them as being part of your document.

In other words, if the include is a substitute for

<head>
  <base href="/">
  <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/dmxRouting/dmxRouting.js" defer></script>
</head>

Then that is all the content that should be in header.php No more and no less.

Incidentally, I would name the partial file so that it is readily seen as a partial, such as _header.php

2 Likes
#3

There are several posts on the forum regarding why this happens which explains the issue related to app connect load duplication
Here us one of them

1 Like
#4

Problem solved. With “App Structure”, only my normal pages will hold “App” as first Element. Deleted “App” from my header, footer and forms for now. Took me 30 sec, to change this :wink:

#5

Well, the problem is not really solved. I will need “App” with my forms App Structure, in order to run validations on my form fields. Both forms have their own php page and are within 2 modals inside my header.php page, which itself will be PHP server side included on every site. Therefore I am stuck with the “App already running!” message multiple times inside my browser.

Summary:

I have the following php pages…

  1. index.php
  2. header.php
  3. footer.php
  4. form_login.php
  5. form_register.php

As said, 4 + 5 will be shown inside modals with my header.php using PHP server side include. The header.php will be server side included with every page e.g. index.php

From what I understand, I can’t have the App Connect multiple times on my page. But, as an example, my forms pages will need App Connect for validation. Since both forms are used with my header, I am not sure how to work around this issue at this point.

Should I create 1 layout.php page, server side include my header.php + footer.php and use this page for all other pages? How would this work? The tutorial isn’t really clear about this. I would still be stuck with 2 forms having App Connect 2 times.

#6

Just one question before I help you out.

Are you stuck with a PHP site or are you willing to move across to NodeJS.

I ask this because you will find NodeJS to be a lot more accomodating.

PS: It is OK if you want to stay with PHP.

#7

Are you sure your php includes are not whole pages with and and tags? If thats the case, this is wrong.

#8

Yes, I want to create in PHP.

I am planning to move from Joomla 4 CMS to Wappler and at specific points I need to create my own security logic (user to user) or some custom Modules in PHP (if it can’t be done in Wappler). I have seen, that I can create most common things e.g. forms, tables, cards, charts… with Wappler and have everything e.g. styles, database logic… very organized. But for this transition I would need to know how to create the basic Structure first, so my workflow becomes second nature.

  1. 1 layout page for every “normal or content page” with header + footer (not sure yet how this works. I don’t see the option to choose a layout page, when I create a new page)
  2. translations
  3. inclusion of own PHP logic or simple modules (hits count pages)
  4. login + logout
  5. navigation
  6. routing
  7. forms + crud frontend
  8. eShop for membership (later)

This is my focus for now. I made fast progress thanks to the tutorials and I really love the way how everything turns out. I will try to find more information on how to organize my basic Structure and how to solve the App issue. In the meantime I would like to thank everyone, who is willing to get me a kick-off on how to solve it.

#9

Starting from scratch, I assume I should create a layout page first, using PHP. Here I would have my App Connect and include everything, I will use on every PHP content page.

What’s next?

How do I create my content pages and reuse my layout for every page and how does the routing/linkin work?

Let’s say I create 2 pages, each holding a form and both would start with App Connect (needed for form validation) => When I try to Server Side Include my forms with a single page, I am running into the issue, having App Connect multiple times. My first 2 forms, as said, are login.php and register.php, which I want to show in 2 modals with my header.

bandicam 2023-01-09 10-30-54-038
bandicam 2023-01-09 10-30-54-0381741×1168 172 KB

#10

Please check:

1 Like
#11

Hello Teodor,

thank you for your link. I have already read this tutorial and know how I can include PHP pages with Server Side Include. The problem, as said above, comes with multiple App Connects on a single page due to the includes. Browser Message: App already running!

#12

How do you end up having multiple app connect includes? When you select a section and save it as a SSI it doesn’t have an app connect include …

#13

I am new to Wappler (tested it first some years ago). I have started, creating single pages. Now I am at that point, where I want to use a template for my main content. Attached you will find my first 2 forms (login/register), which both have App Connect. I am using PHP Server Side Include, to show my forms with my header.

bandicam 2023-01-09 10-54-26-895
bandicam 2023-01-09 10-54-26-8951950×1194 232 KB
bandicam 2023-01-09 10-54-35-139
bandicam 2023-01-09 10-54-35-1391950×1194 270 KB

#14

But are these full pages with <html>, <head> and <body> tags you are trying to use as a SSI on your main page?

#15

Well, yes.

How else would I create a form page with validation? When I don’t start my App Structure with App Connect, I can’t validate my form. I am currently confused on how to mimic a basic Joomla 4 page structure and make the routing/linkin work. It can’t be that hard to achieve, but unfortunatly I haven’t found a matching tutorial for PHP yet.

I will need 1 main layout page with header + content + footer and then include content pages or maybe partials such as:

  1. start -> cards table
  2. about us -> text and images
  3. form login (with header modal)
  4. form register (with header modal)

And at last duplicate my layout and content for 2 languages and make language switch work.

bandicam 2023-01-09 11-25-42-728
bandicam 2023-01-09 11-25-42-7282116×1247 612 KB

#16

Well that is wrong.
You should never include FULL pages as SSI includes. You only should use the code that is between the <body> ... </body> tags as a SSI.

#17

Have a look at this video starting at the 8 minute mark

#18

Correct. But how do I organize my Structure and how can I include everything the right way?

As said, I have started to create single PHP pages at first to get a feeling for form creation, styles workflow etc. and I really like the way, Wappler works.

Now I am at that point, where I want to create 1 layout (template) page for each language used and include normal pages or should I say content? I am confused wether to use “Main” or “Layout Body Content” and how the inclusion actually should work for different languages. As said, my 2 forms will need App Connect for validation and both are inlcuded with my header. Let’s say I want to create a page with just a table. This page would have App Connect as well. I would still end up with multiple App Connects across a single page, since my layout page already holds App Connect.

Where can I find a matching tutorial on how to start?

bandicam 2023-01-09 12-06-22-920
bandicam 2023-01-09 12-06-22-9202385×1196 246 KB

#19

Not sure i understand which part are you struggling with exactly?
And are you trying to create a SPA (single page app) or?

Also … your two “pages” which are SSI on the main php page already “see” the app connect includes on your page. That is why it’s wrong to use full pages as SSI and it is already explained in the docs how to create and include SSI on the pages.

#20

Sorry guys. But I am lost.

I have achieved the most basic things with Wappler by creating single pages, but I struggle to setup the Structure of my project and I was not able to find a tutorial. I know I can’t use App Connect multiple times, but how should I work out my page creations and bind everything together?

I have already explained, what kind of project I would like to create.

I want to mimic a Joomla 4 or Wordpress CMS in most basic way.

For this I need:

  1. layout page, which has a footer and a header (2 languages)
  2. content pages (2 languages: start, about us, contact) inside my layout
  3. create forms for frontend (2 languages: login + register in header, others in content)
  4. create tables for frontend
  5. create cards for frontend
  6. create eShop for Membership (later)

There are tutorials (Small Bytes) for different aspects which were really helpful and easy to understand, but no tutorial on how to setup everything globally, so I don’t run into issues like “App already running”. Wappler is an amazing tool, but without such tutorials, it’s a nightmare to get started.