The return values are from the ini file converted to JSON after creating a page
The input values are from the URL used to create the page
The examples are made to create a page with the API
Only show page and delete page are GET requests, all other actions are POST requests
Header is added first, then text and then images to the page
A page is only editable if it is created using POST data or json data
Info about editing:
If you click edit page and do not submit the changes or if you refresh
the site, the changes and the page will be lost
Create a new page and a name for that page:
Example:
pageHeader=page+1
Return:
{
"header": "page 1",
"input": "pageHeader=page+1",
"useStandardMeasurement": "true",
"standardUnitWidth": "px",
"standardUnitHeight": "px",
"standardMeasureUnitMargin": "px",
"standardMeasureUnitBorder": "px",
"standardMeasureUnitFont": "px",
"mainPageLang": "sv",
"secondaryPageLang": "en"
}
The header for a page is unique, no two pages can have the same header
Add a header to the page:
Example:
pageHeader=page+1&addTextInformationHeader[]=hej
Return:
{
"header": "page 1",
"input": "pageHeader=page+1&addTextInformationHeader[]=hej",
"useStandardMeasurement": "true",
"standardUnitWidth": "px",
"standardUnitHeight": "px",
"standardMeasureUnitMargin": "px",
"standardMeasureUnitBorder": "px",
"standardMeasureUnitFont": "px",
"mainPageLang": "sv",
"secondaryPageLang": "en",
"textInfoRubrik1_sv": "hej",
"textInfoRubrik1_en": "Hello"
}
Add text to the page:
Example:
pageHeader=page+1&addTextInformation[]=hej
Return:
{
"header": "page 1",
"input": "pageHeader=page+1&addTextInformation[]=hej",
"useStandardMeasurement": "true",
"standardUnitWidth": "px",
"standardUnitHeight": "px",
"standardMeasureUnitMargin": "px",
"standardMeasureUnitBorder": "px",
"standardMeasureUnitFont": "px",
"mainPageLang": "sv",
"secondaryPageLang": "en",
"textInfo1_sv": "hej",
"textInfo1_en": "Hello"
}
Add styling to the text:
Example:
pageHeader=page+1&addTextInformation[]=hej&addTextInformationSize[]=20&addTextInformationColor[]=%23ffffff
%23 is needed before hexadeciaml values
Return:
{
"header": "page 1",
"input": "pageHeader=page+1&addTextInformation[]=hej&addTextInformationSize[]=20&addTextInformationColor[]=%23ffffff",
"useStandardMeasurement": "true",
"standardUnitWidth": "px",
"standardUnitHeight": "px",
"standardMeasureUnitMargin": "px",
"standardMeasureUnitBorder": "px",
"standardMeasureUnitFont": "px",
"mainPageLang": "sv",
"secondaryPageLang": "en",
"StyletextInfo1": "font-size:20px;color:#ffffff;",
"textInfo1_sv": "hej",
"textInfo1_en": "Hello"
}
Example:
pageHeader=page+1&addTextInformation[]=hej&addTextInformationSize[]=20&addTextInformationColor[]=green
%23 is NOT needed before text color eg "green"
Return:
{
"header": "page 1",
"input": "pageHeader=page+1&addTextInformation[]=hej&addTextInformationSize[]=20&addTextInformationColor[]=green",
"useStandardMeasurement": "true",
"standardUnitWidth": "px",
"standardUnitHeight": "px",
"standardMeasureUnitMargin": "px",
"standardMeasureUnitBorder": "px",
"standardMeasureUnitFont": "px",
"mainPageLang": "sv",
"secondaryPageLang": "en",
"StyletextInfo1": "font-size:20px;color:green;",
"textInfo1_sv": "hej",
"textInfo1_en": "Hello"
}
All styling options:
Headers:
'addTextInformationHeaderSize[]' => 'font-size',
'addTextInformationHeaderColor[]' => 'color',
'addTextInformationHeaderDisplay[]' => 'display',
'addTextInformationHeaderFamily[]' => 'font-family',
'addTextInformationHeaderWeight[]' => 'font-weight',
'addTextInformationHeaderStyle[]' => 'font-style',
'addTextInformationHeaderDecoration[]' => 'text-decoration',
'addTextInformationHeaderTransform[]' => 'text-transform',
Text:
'addTextInformationSize[]' => 'font-size',
'addTextInformationColor[]' => 'color',
'addTextInformationDisplay[]' => 'display',
'addTextInformationFamily[]' => 'font-family',
'addTextInformationWeight[]' => 'font-weight',
'addTextInformationStyle[]' => 'font-style',
'addTextInformationDecoration[]' => 'text-decoration',
'addTextInformationTransform[]' => 'text-transform',
Add standard measurement, defaults to px:
Example:
pageHeader=page+1&standardMeasureUnitFont=rem&addTextInformation[]=hej&addTextInformationSize[]=20
Return:
{
"header": "page 1",
"input": "pageHeader=page+1&standardMeasureUnitFont=rem&addTextInformation[]=hej&addTextInformationSize[]=20",
"useStandardMeasurement": "true",
"standardUnitWidth": "px",
"standardUnitHeight": "px",
"standardMeasureUnitMargin": "px",
"standardMeasureUnitBorder": "px",
"standardMeasureUnitFont": "rem",
"mainPageLang": "sv",
"secondaryPageLang": "en",
"StyletextInfo1": "font-size:20rem;",
"textInfo1_sv": "hej",
"textInfo1_en": "Hello"
}
All standard measurements:
'standardMeasureUnitFont' => 'px, rem, em', (font size)
'standardMeasureUnitMargin' => 'px, rem, em', (margin and padding)
'standardMeasureUnitBorder' => 'px, rem, em', (border radius)
'standardUnitHeight' => 'px, rem, em, %, vh', (height)
'standardUnitWidth' => 'px, rem, em, %, vw' (width)
Select a language the page is written in, default to sv:
Example:
pageHeader=page+1&addTextInformationHeader[]=hello&pageLang=en
Return:
{
"header": "page 1",
"input": "pageHeader=page+1&addTextInformationHeader[]=hello&pageLang=en",
"useStandardMeasurement": "true",
"standardUnitWidth": "px",
"standardUnitHeight": "px",
"standardMeasureUnitMargin": "px",
"standardMeasureUnitBorder": "px",
"standardMeasureUnitFont": "px",
"mainPageLang": "en",
"secondaryPageLang": "sv",
"textInfoRubrik1_en": "hello",
"textInfoRubrik1_sv": "Hej"
}
pageLang sets what language the page currently is written in
In this example pageLang is "en" because the input is in english
If no pageLang is declared it defaults to sv
Add a div :
Example:
pageHeader=page+1&newDivWidth[]=100&newDivHeight[]=100&newDivColor[]=%23000000
Return:
{
"header": "page 1",
"input": "pageHeader=page+1&newDivWidth[]=100&newDivHeight[]=100&newDivColor[]=%23000000",
"useStandardMeasurement": "true",
"standardUnitWidth": "px",
"standardUnitHeight": "px",
"standardMeasureUnitMargin": "px",
"standardMeasureUnitBorder": "px",
"standardMeasureUnitFont": "px",
"mainPageLang": "sv",
"secondaryPageLang": "en",
"Stylediv1": "width:100px;height:100px;background-color:#000000;"
}
Add text to a div :
Example:
pageHeader=page+1&addTextInformation[]=hej&addTextInformationDiv[]=div1&addDivToDiv[]=div1&newDivWidth[]=100&newDivHeight[]=100&newDivColor[]=%23000000
Return:
{
"header": "page 1",
"input": "pageHeader=page+1&addTextInformation[]=hej&addTextInformationDiv[]=div1&addDivToDiv[]=div1&newDivWidth[]=100&newDivHeight[]=100&newDivColor[]=%23000000",
"useStandardMeasurement": "true",
"standardUnitWidth": "px",
"standardUnitHeight": "px",
"standardMeasureUnitMargin": "px",
"standardMeasureUnitBorder": "px",
"standardMeasureUnitFont": "px",
"mainPageLang": "sv",
"secondaryPageLang": "en",
"Stylediv1": "width:100px;height:100px;background-color:#000000;",
"div1textInfo1_sv": "hej",
"div1textInfo1_en": "Hello"
}
The first instance of addTextInformationDiv[] says which
div the first textInformation belongs to
All added texts or headers need to belong to a div to be visible
addTextInformationDiv[] - text information
addTextInformationDivHeader[] - header
Add an image to a div :
Example:
pageHeader=page+1&addImage[]=https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSyP52epiirgdwAygVEtt_OPQSO6JFq0crjyiNiRdOHjaT_GUBEHkQkvube-C4VJ4onfVTxoF401RkpzIMxQ7vtGYQ-05rQoSU279ummeC3dw&addImageDiv[]=div1&addDivToDiv[]=div1&newDivWidth[]=100&newDivHeight[]=100&newDivColor[]=%23000000
Return:
{
"header": "page 1",
"input": "pageHeader=page+1&addImage[]=https:\/\/encrypted-tbn1.gstatic.com\/images?q=tbn:ANd9GcSyP52epiirgdwAygVEtt_OPQSO6JFq0crjyiNiRdOHjaT_GUBEHkQkvube-C4VJ4onfVTxoF401RkpzIMxQ7vtGYQ-05rQoSU279ummeC3dw&addImageDiv[]=div1&addDivToDiv[]=div1&newDivWidth[]=100&newDivHeight[]=100&newDivColor[]=%23000000",
"standardUnitWidth": "px",
"standardUnitHeight": "px",
"standardMeasureUnitMargin": "px",
"standardMeasureUnitBorder": "px",
"standardMeasureUnitFont": "px",
"mainPageLang": "sv",
"secondaryPageLang": "en",
"Stylediv1": "width:100px;height:100px;background-color:#000000;",
"div1image1": "https:\/\/encrypted-tbn1.gstatic.com\/images?q=tbn:ANd9GcSyP52epiirgdwAygVEtt_OPQSO6JF
q0crjyiNiRdOHjaT_GUBEHkQkvube-C4VJ4onfVTxoF401RkpzIMxQ7vtGYQ-05rQoSU279ummeC3dw"
}
An image can only be added through a url
Add div to a div :
Example:
pageHeader=page+1&addDivToDiv[]=div1&newDivWidth[]=100&newDivHeight[]=100&newDivWidth[]=100&newDivHeight[]=100
Return:
{
"header": "page 1",
"input": "pageHeader=page+1&addDivToDiv[]=div1&newDivWidth[]=100&newDivHeight[]=100&newDivWidth[]=100&newDivHeight[]=100",
"useStandardMeasurement": "true",
"standardUnitWidth": "px",
"standardUnitHeight": "px",
"standardMeasureUnitMargin": "px",
"standardMeasureUnitBorder": "px",
"standardMeasureUnitFont": "px",
"mainPageLang": "sv",
"secondaryPageLang": "en",
"Stylediv1": "width:100px;height:100px;",
"Stylediv1div1": "width:100px;height:100px;"
}
Add styling to a div :
Example:
pageHeader=page+1&newDivWidth[]=100&
newDivHeight[]=800&
newDivDisplay[]=flex&
newDivColor[]=%23023473&
newDivFlow[]=column&
newDivAlign[]=center&
newDivJustify[]=space-around&
newDivBorder[]=2px+solid+%23ffffff&
newDivBorderRadius[]=10&
newDivMargin[]=1&
newDivMarginTop[]=1&
newDivMarginBot[]=1&
newDivMarginLeft[]=1&
newDivMarginRight[]=1&
newDivPadding[]=10&
newDivPaddingTop[]=10&
newDivPaddingBot[]=10&
newDivPaddingLeft[]=10&
newDivPaddingRight[]=10&
newDivGradient[]=linear-gradient(45deg,%23ff0000,%2300ff00)
Return:
{
"header": "page 1",
"input": "pageHeader=page+1&newDivWidth[]=100&newDivHeight[]=800&newDivDisplay[]=flex&newDivColor[]=%23023473&newDivFlow[]=column&newDivAlign[]=center&newDivJustify[]=space-around&newDivBorder[]=2px+solid+%23ffffff&newDivBorderRadius[]=10&newDivMargin[]=1&newDivMarginTop[]=1&newDivMarginBot[]=1&newDivMarginLeft[]=1&newDivMarginRight[]=1&newDivPadding[]=10&newDivPaddingTop[]=10&newDivPaddingBot[]=10&newDivPaddingLeft[]=10&newDivPaddingRight[]=10&newDivGradient[]=linear-gradient(45deg,%23ff0000,%2300ff00)",
"useStandardMeasurement": "true",
"standardUnitWidth": "px",
"standardUnitHeight": "px",
"standardMeasureUnitMargin": "px",
"standardMeasureUnitBorder": "px",
"standardMeasureUnitFont": "px",
"mainPageLang": "sv",
"secondaryPageLang": "en",
"Stylediv1": "width:100px;
height:800px;
display:flex;
background-color:#023473;
flex-flow:column;
align-items:center;
justify-content:space-around;
border:2px solid #ffffff;
border-radius:10px;
margin:1px;
margin-top:1px;
margin-bottom:1px;
margin-left:1px;
margin-right:1px;
padding:10px;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
background-image:linear-gradient(45deg,#ff0000,#00ff00);"
}
CSS properties for a div:
'newDivWidth[]' => 'width',
'newDivHeight[]' => 'height',
'newDivDisplay[]' => 'display',
'newDivColor[]' => 'background-color',
'newDivFlow[]' => 'flex-flow',
'newDivAlign[]' => 'align-items',
'newDivJustify[]' => 'justify-content',
'newDivBorder[]' => 'border',
'newDivBorderRadius[]' => 'border-radius',
'newDivMargin[]' => 'margin',
'newDivMarginTop[]' => 'margin-top',
'newDivMarginBot[]' => 'margin-bottom',
'newDivMarginLeft[]' => 'margin-left',
'newDivMarginRight[]' => 'margin-right',
'newDivPadding[]' => 'padding',
'newDivPaddingTop[]' => 'padding-top',
'newDivPaddingBot[]' => 'padding-bottom',
'newDivPaddingLeft[]' => 'padding-left',
'newDivPaddingRight[]' => 'padding-right',
'newDivGradient[]' => 'background-image'
CSS Info:
All CSS properties are an array and should end with []
The first newDivWidth[] is applied on the first div etc
Example URL to create a simple page :
Example:
http://localhost:8080/cmsapi/index.php?pageHeader=My+Advanced+Page&pageLang=sv
&addDivToDiv[]=div1
&newDivWidth[]=400
&newDivHeight[]=200
&newDivDisplay[]=flex
&newDivColor[]=%23f0f0f0
&newDivFlow[]=column
&newDivAlign[]=center
&newDivJustify[]=space-around
&addDivToDiv[]=div1
&newDivWidth[]=300
&newDivHeight[]=150
&newDivDisplay[]=flex
&newDivColor[]=%23ffcc00
&newDivFlow[]=column
&newDivAlign[]=center
&newDivJustify[]=center
&addTextInformationHeader[]=Welcome
&addTextInformationHeader[]=Second+Section
&addTextInformationDivHeader[]=div1
&addTextInformationDivHeader[]=div2
&addTextInformation[]=This+is+the+first+paragraph
&addTextInformation[]=Another+text+inside+second+div
&addTextInformationDiv[]=div1
&addTextInformationDiv[]=div2
&addTextInformationHeaderSize[]=32
&addTextInformationHeaderSize[]=24
&addTextInformationSize[]=18
&addTextInformationSize[]=16
&addTextInformationHeaderColor[]=%230000ff
&addTextInformationHeaderColor[]=green
&addTextInformationColor[]=%23003300
&addTextInformationColor[]=%23ff0000
return:
{
"header": "My Advanced Page",
"input": "pageHeader=My+Advanced+Page&pageLang=sv&addDivToDiv[]=div1&newDivWidth[]=400&newDivHeight[]=200&newDivDisplay[]=flex&newDivColor[]=%23f0f0f0&newDivFlow[]=column&newDivAlign[]=center&newDivJustify[]=space-around&addDivToDiv[]=div1&newDivWidth[]=300&newDivHeight[]=150&newDivDisplay[]=flex&newDivColor[]=%23ffcc00&newDivFlow[]=column&newDivAlign[]=center&newDivJustify[]=center&addTextInformationHeader[]=Welcome&addTextInformationHeader[]=Second+Section&addTextInformationDivHeader[]=div1&addTextInformationDivHeader[]=div2&addTextInformation[]=This+is+the+first+paragraph&addTextInformation[]=Another+text+inside+second+div&addTextInformationDiv[]=div1&addTextInformationDiv[]=div2&addTextInformationHeaderSize[]=32&addTextInformationHeaderSize[]=24&addTextInformationSize[]=18&addTextInformationSize[]=16&addTextInformationHeaderColor[]=%230000ff&addTextInformationHeaderColor[]=green&addTextInformationColor[]=%23003300&addTextInformationColor[]=%23ff0000\r\n",
"useStandardMeasurement": "true",
"standardUnitWidth": "px",
"standardUnitHeight": "px",
"standardMeasureUnitMargin": "px",
"standardMeasureUnitBorder": "px",
"standardMeasureUnitFont": "px",
"mainPageLang": "sv",
"secondaryPageLang": "en",
"StyletextInfoRubrik1": "font-size:32px;color:#0000ff;",
"StyletextInfoRubrik2": "font-size:24px;color:green;",
"StyletextInfo1": "font-size:18px;color:#003300;",
"StyletextInfo2": "font-size:16px;color:#ff0000;",
"Stylediv1": "width:400px;height:200px;display:flex;background-color:#f0f0f0;flex-flow:column;align-items:center;justify-content:space-around;",
"Stylediv1div1": "width:300px;height:150px;display:flex;background-color:#ffcc00;flex-flow:column;align-items:center;justify-content:center;",
"div1textInfoRubrik1_sv": "Welcome",
"div1textInfoRubrik1_en": "Welcome",
"div1div1textInfoRubrik2_sv": "Second Section",
"div1div1textInfoRubrik2_en": "Second Section",
"div1textInfo1_sv": "This is the first paragraph",
"div1textInfo1_en": "This is the first paragraph",
"div1div1textInfo2_sv": "Another text inside second div",
"div1div1textInfo2_en": "Another text inside second div"
}
Example URL to set if standard unit measruements will be used:
Example:
pageHeader=page+1&useStandardMeasurement=false
Return:
{
"header": "page 1",
"input": "pageHeader=page+1&useStandardMeasurement=false",
"useStandardMeasurement": "false",
"mainPageLang": "sv",
"secondaryPageLang": "en"
}
Rules for creating a page:
- Width, height, margin, padding, font size and border radius
must be numeric, no a-z chars allowed
- Page language must be 'en' or 'sv'
- A page must have a header
- The standard measure units must be allowed (check documentation for
allowed measure units)
- If use standard measurement is set to true, you don't need to add
a measure unit to, margin, padding, font size, height and width.
Elsewise you need to manually enter unit measurements to every number
but it gets more free in how to style a page
Logic for adding divs:
- The first styling is for the body div (which is created automatically when adding styling).
The body div is called div1 when adding divs to a div
- Adding styling without adding another div will only add to the styling for the body div
- Each new div created by addDivToDiv[] is named div2, div3, div4 etc
- Example:
addDivToDiv[]=div1 - places a div in the body div (called div1div1)
addDivToDiv[]=div2 - places a div in the second div created and is added to div1div1 in this case
- Adding a div to div1div1 will not work
- Example:
addDivToDiv[]=div1div - will not work
Must be added to en existing div1, div2, div3 etc
Example URL to delete a page:
Example:
elias.ntigskovde.se/php/deletepage.php?action=deletePage&pageKey=page1
Return:
{
"deleted": "true"
}
Example URL to view a page:
Example:
elias.ntigskovde.se?page=page2
Return:
{
"deleted": "true"
}