Installation

Edit on Gitlab

Table of Contents

Use components

AdminLTE

If you have an AdminLTE page already

  • copy missing elements from public_html/vendor/ into your webroot - it contains
    • AdminLTE framework
    • AdminLTE plugins: Bootstrap, jQuery, Fontawesome icons

Needed class files:

  • public_html/classes/htmlelements.class.php
  • public_html/classes/render-adminlte4.class.php

In html header add

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.13.1/font/bootstrap-icons.min.css" />
    <link rel="stylesheet" href="{{DIR_ADMINLTE}}/css/adminlte.min.css">

    <link rel="stylesheet" href="{{DIR_ADMINLTEPLUGINS}}/summernote/summernote-bs4.min.css">

Before closing the body tag:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{DIR_ADMINLTE}}/js/adminlte.min.js"></script>
    <script src="{{DIR_ADMINLTEPLUGINS}}/bootstrap/js/bootstrap.bundle.js"></script>
    <script src="{{DIR_ADMINLTEPLUGINS}}/summernote/summernote-bs4.min.js"></script>
    <script>
        $(document).ready(function () {

            // var oQuery = getQueryParams();
            // $(".dataTable").DataTable();
            $('.summernote').summernote();
        });
    </script>

Include the class file and initialize it

require_once('classes/render-adminlte4.class.php');
$renderAdminLTE=new renderadminlte();

Continue here:

Bootstrap

For Bootstrap component rendering you need

  • public_html/classes/htmlelements.class.php
  • public_html/classes/bs5-data.php
  • public_html/classes/render-bootstrap5.class.php
  • public_html/classes/render-bootstrap5component.class.php

In html header add

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.13.1/font/bootstrap-icons.min.css" />

Before closing the body tag:

    <!-- 
        This bootstrap.bundle.js is ANOTHER than Adminlte bootstrap.bundle.js above
    -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

Include the class file and initialize it

require_once('classes/render-bootstrap5component.class.php');
$Bootstrap = new renderabootstrap5component();

Continue here:

Bring up demo page (Docker)

This project contains files for docker, the docs and webroot with a demo of implemented components. To bring up and running

Docker as root

  • go into the docker directory
  • run docker compose up

In your browser open http://localhost:8008/.

Docker rootless on Linux

You need

  • a rootless docker instance
  • docker compose
  • facl

Steps:

  • start ./docker/init.sh
  • press i to apply write permissions with setfacl command
  • press u to startup the container
  • press o to open the starting page in the webbrowser