div

Overview

This is an approach to making web apps with vanilla PHP, JavaScript and SQLite.

Steps

• Create a script element in the HTML document that is to host the app. It should look like this: <script type="module" src="./javascript/myapp/main.js"></script>

• Create a div element in the HTML document that is to host the app. The id attribute of the div should be the name of the app with a hyphen and then the word div. For example: <div id="myapp-div"></div>.

• Now create a file, main.js in the directory ./javascript/myapp/. Start with this code which imports ./modules/make-html.js which creates the basic HTML required for the app and for appending this to the div created above in the host HTML document.

  import { makeHTML } from './modules/make-html.js';
  
  const bgrgolfDiv = document.querySelector('#bgrgolf-div');
  
  makeHTML(bgrgolfDiv);
  

• Now create ./modules/make-html.js. This creates the basic HTML for the app. This would typically consist of anything which will be rendered on every view the app has such as an h1 element. Also, it should include any mutually exclusive divs. That is divs which would only ever be viewed without any other divs. These are loosely analagous to the various pages a website might have. A very simple example of a make-html.js file is:

  function makeHTML(parentDiv){
    const h2 = document.createElement('h2');
    h2.innerHTML = 'BGR Golf';
    parentDiv.appendChild(h2);
  }
  
  export { makeHTML };