CMSMS Nieuws Webapp 1.0 iOS en Android

Een board om T&T's te plaatsen m.b.t. CMSMS, PHP of Smarty

Moderator: velden

Post Reply
pasmaskas
Power Poster
Power Poster
Posts: 509
Joined: Tue Nov 29, 2011 10:42 am

CMSMS Nieuws Webapp 1.0 iOS en Android

Post by pasmaskas »

Een klein cadeautje van mij.

Ik was weer eens aan het spellen en dacht laat ik een manier bedenken om een Web App 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: Select all

{$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: Select all

<h3>{$searchresultsfor} "{$phrase}"</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: Select all

{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: Select all

<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: Select all

{news number="20" summarytemplate="webapp" detailtemplate="webapp" detailpage="webappresults"}
Zet nu op de app pagina de volgende regel:

Code: Select all

"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 "Web App" 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 Web App 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 Web App 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 Web App 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 Web App 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 Web App.


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!

Gr Pascal

Edit:

Tutorial herschreven voor nieuwe versie

Special thnx to Rolf voor het goed werkten maken van de zoek optie! Bedankt Rolf!
Last edited by pasmaskas on Tue Oct 07, 2014 11:38 am, edited 22 times in total.
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: CMSMS Nieuws Web App iOS en Android

Post by Rolf »

Briljant, mijn handen jeuken :)
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
Post Reply

Return to “Tips en Trucs”