CMSMS Webapp Sjabloon 1.0

CMSMS Webapp Sjabloon 1.0

CMS Made Simple 1.11.x / 1.12 | 14-04-2014 | Pascal Merks | Reacties


Ik was weer eens aan het spellen en dacht laat ik een manier bedenken om een Webapp te maken voor CMSMS. En dat heb ik dus gedaan!

Klik naar een voorbeeld: http://webapp.pmkmedia.nl/webapp1 of http://jeugd.dordrechtlions.nl/webapp

Zip bestand met alle bestanden: http://webapp.pmkmedia.nl/webapp-cmsms-v1.0.zip

 

Wat te doen

Download het zip bestand en pak hem uit. Je ziet nu 2 mappen:

Map 1: sjablonen
Map 2: upload-root

 

Eerst gaan we alles in CMSMS goed zetten uit Map 1:

Maak 5 nieuwe Sjablonenen aan met de volgende namen:

webapp
(kopieer de html uit het webapp.html bestand er in en sla hem op).

webapppages
(kopieer de html uit het webapppages.html bestand er in en sla hem op).

webappsearch
(kopieer de html uit het webappsearch.html bestand er in en sla hem op).

webappresults
(kopieer de html uit het webappresults.html bestand er in en sla hem op).

app
(kopieer de html uit het app.html bestand er in en sla hem op).


Maak ook een nieuwe stylesheet aan met de volgend naam: (Koppel de stylesheet aan alle 5 de sjablonen.)

webapp (kopieer de css uit het stylesheet.css bestand er in en sla hem op).

 

Pas het Zoeksjabloon aan naar dit:

Code:

{$startform}
<input type="text" class="search-input" id="{$search_actionid}searchinput" name="{$search_actionid}searchinput" size="20" maxlength="50" value="{$searchtext}" {$hogan}/>
<br /><br />
<input class="search-button search-hidden" name="submit" value="{$submittext}" type="submit" />
{if isset($hidden)}{$hidden}{/if}
{$endform}

 

Pas het Zoek Resultaatsjabloon aan naar dit:

Code:

<h3>{$searchresultsfor} &quot;{$phrase}&quot;</h3>
{if $itemcount > 0}
<ul>
{foreach from=$results item=entry}
{if $entry->module == 'News'}
<li><span class="displaynone">{$entry->title} - </span><a href="{$entry->url}">{$entry->urltxt}</a><span class="displaynone"> ({$entry->weight}%)</span></li>
{else}
<li>{$entry->title} - <a href="{$entry->url}">{$entry->urltxt}</a> ({$entry->weight}%)</li>
{/if}
{/foreach}
</ul>
<p>{$timetaken}: {$timetook}</p>
{else}
<p><strong>{$noresultsfound}</strong></p>
{/if}

 

Maak een Nieuws Samenvattingssjabloon aan met de naam webapp:

Code:

{foreach from=$items item=entry}

<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a>

{/foreach}

 

Maak een Nieuws Artikelsjabloon aan met de naam webapp:

Code:

<h2>{$entry->title|cms_escape:htmlall}</h2>

<h6>{$entry->postdate|cms_date_format}</h6>

{eval var=$entry->content}

{assign var='alt_title' value=$entry->title}

 

Nu zijn alle sjablonen aangemaakt en kunnen we de pagina's gaan aanmaken.

Maak 5 nieuwe pagina's aan met de volgende namen en verberg ze in het menu en wijs ze naar de bijbehorende sjablonen toe:

webapp (sjabloon: webapp)
webappabout (sjabloon: webapppages)
webappresults (sjabloon: webappnews)
webappabout (sjabloon: webapppages)
app (sjabloon: app)

Zet nu op de webapp pagina de volgende regel: (wel eerst de WYSIWYG uit zetten)

Code:

{news number="20" summarytemplate="webapp" detailtemplate="webapp" detailpage="webappresults"}



Zet nu op de app pagina de volgende regel:

"Open deze pagina op je mobiele telefoon."

De overige pagina's kan je leeg laten. En op de webappabout pagina kan je informatie kwijt over je webapp.

 

De volgende stap is de benodigde bestanden aanpassen in de map root-upload:

Onder het mapje upload-root/images staat een afbeelding genaamd touch-icon.png deze kan je vervangen door je eigen "Webapp" iconen van 144x144 pixels. Ze word dan getoont op je iOS of Android apparaat alsof het een echt App is.

Nu upload je de hele inhoud van de map upload-root naar de ROOT van je website of in de submap waar je website staat.

 

Als het goed is werkt je Webapp nu naar behoren op zowel een iOS als Android apparaat.

Voor iOS zit er een script in die je netjes vraagt of je de webapp op je beginscherm wilt plaatsen met het touch-icon. Zo lijkt de Webapp net een native iOS app en draait dan in een standalone venster!!

Voor Android is het lasting om er een "Standalone App" van te maken en hiervoor heb ik de volgende oplossing.

Maak in de ROOT van je website een map aan genaamd android (hier gaan we straks de gemaakte Android applicatie heen kopiëren.

 

Een Andoid App maken:

Surf naar http://www.appsgeyser.com/ en maak een account aan.

Na dat je bent aangemeld en ingelogt op http://www.appsgeyser.com/ klik je rechts boven in de hoek op "CREATE APP".

Kies voor de optie "WEBSITE ENTER URL" en vul de velden in als volgt:

Website URL: http://www.website.nl/webapp (uiteraard wijzigen naar de juiste url)

App name: Jouw Webapp Naam

Description: Beschrijving (hoeft niet als je dat niet wilt)

Icon: Custom icon (upload hier je "touch-icon.png" die je gemaakt hebt zodat het een echte app wordt)

Screen Orientation: Auto

Category: News (mocht je hem gebruiken voor je Blog dan kan je dat ook kiezen)

Vervolgens druk je op "CREAT APP" en download hem naar je computer.

Geef de app de naam app.apk en upload hem naar de map android die je net hebt aangemaakt in de ROOT van je website.

Dat was het! Als je nu naar http://www.website.nl/app surft op je iOS of Android apparaat zal het script automatisch naar de juiste optie gaan:

iOS: Word direct doorgelinkt naar de Webapp met de vraag of je hem op je beginscherm wilt plaatsen.
Android: Vraagt nu of je de app wil downloaden die je net gemaakt hebt als je op Ja druk download hij hem en als je op Nee drukt gaat hij gewoon door naar de Webapp

 

Voorbeeld in gebruik:

Surf op je Mobiel naar http://jeugd.dordrechtlions.nl/webapp en je ziet een werkende versie.

Dat was het veel plezier er mee en zijn er vragen of verbeterpunten stel ze! Zo leren we wat van elkaar!

 

Voorbeeld video:

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets