LIBRARIES & FRAMEWORKS
The default Core Boxx HTML template is built using Bootstrap and Material Icons. It is also PWA-ready.
CORE PAGES
pages/TEMPLATE-top.php
Top half of the HTML template.pages/TEMPLATE-bottom.php
Bottom half of the HTML template.pages/PAGE-home.php
The default home page.pages/PAGE-404.php
Default “not found” page.pages/PAGE-demo.php
Pretty much a compilation of examples below.assets/PAGE-cb.php
Standard Core Boxx HTML-Javascript interface.
COMMON HTML/JAVASCRIPT INTERFACE
PAGE LOAD SPINNER
// TO SHOW SPINNER IN JS
cb.loading(1);
// TO HIDE SPINNER IN JS
cb.loading(0);
TOAST MESSAGE
// "SUCCESS" TOAST MESSAGE
cb.toast(true, "TITLE", "MESSAGE");
// "FAILURE" TOAST MESSAGE
cb.toast(false, "TITLE", "MESSAGE");
MODAL DIALOG BOX
// TO SHOW A TOAST MESSAGE
cb.modal("TITLE", "MESSAGE", "OPTIONAL FOOT");
// ALTERNATIVELY, A YES/NO BUTTON
cb.modal("TITLE", "MESSAGE", () => {
alert("This will run if user click on yes.");
});
API CALLS
cb.api({
mod : "MODULE",
req : "REQUEST",
data : { "KEY" : "VALUE" },
loading : true/false, // show loading spinner? default true.
debug : true/false, // debug mode? default false.
passmsg : "Add user successful", // toast message to show on success, false for none.
nofail : true/false, // supress "fetch failed" message? default false.
onpass : FUNCTION, // function to call on success, optional
onfail : FUNCTION, // function to call on failure, optional
onerr : FUNCTION // function to call on error, optional
});
AJAX FETCH CONTENT
cb.load({
page : "PAGE", // http://site.com/PAGE/
target : "cb-page-2", // target html element to load content into
data : { "KEY" : "VALUE" },
loading : true/false, // show loading screen? default false.
debug : true/false, // debug mode? default false.
onload : FUNCTION, // do this on content load, optional.
onerr : FUNCTION // do this on ajax error, optional.
});
SINGLE PAGE APP
- There are 5
<div id="cb-page-N">
in the main content area. - By default, we use
cb-page-1
to display the content;cb-page-2
tocb-page-5
are hidden. - We can use
cb.lad()
to AJAX load more content intocb-page-N
, then usecb.page(N)
to switch pages.
cb.load({
page : "MYPAGE",
target : "cb-page-2",
data : { "KEY" : "VALUE" },
onload : () => { cb.page(2); }
});
DEFINE PAGE TITLE & DESC
$_PMETA = [
"title" => "FOO BAR TITLE",
"desc" => "Test page title"
];
require PATH_PAGES . "TEMPLATE-top.php"; ?>
<p>Contents Here.</p>
<?php require PATH_PAGES . "TEMPLATE-bottom.php"; ?>
Just define $_PMETA["title"]
and $_PMETA["desc"]
before including TEMPLATE-top.php
.
LOADING MORE JS & CSS
$_PMETA = [
"load" => [
["s", "https://site.com/some.js", "defer"],
["s", "https://cdnjs.com/some.js", "async"],
["l", "https://site.com/some.css"]
]
];
require PATH_PAGES . "TEMPLATE-top.php"; ?>
<p>Contents Here.</p>
<?php require PATH_PAGES . "TEMPLATE-bottom.php"; ?>
You can edit the template and hard code them in. Or if it is just for a specific page – Define the list of scripts to load in $_PMETA["load"]
before including TEMPLATE-top.php
.
thank you for all
i am permission to use code
the best practice of your materials
from
gede juliarsa, bali
No need to ask for permission – It’s already released under the MIT license 🙂
https://code-boxx.com/faq/#use