CMSMS Nieuws Webapp 2.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 2.0 iOS en Android

Post by pasmaskas »

Ik heb een nieuwe versie gemaakt van de nieuws webapp voor CMSMS.

Link: http://pmkmedia.nl/news/5/88/CMSMS-Webapp-Sjabloon-2-0

Klik naar een voorbeeld: http://webapp.pmkmedia.nl/webapp2

Zip bestand met alle bestanden: http://webapp.pmkmedia.nl/webapp-cmsms-v2.1.zip


Wat te doen

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

Map 1: sjablonen
Map 2: root


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

Maak 4 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).



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

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

Maak in Menubeheer een nieuw menusjabloon aan met de naam "webapp":

Code: Select all

{if $count > 0}

<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul>' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li><a class="sub">{$node->menutext}</a>

{elseif $node->type == 'separator'}
<li>

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Pas het Zoeksjabloon aan naar dit:

Code: Select all

{$startform}
<input type="text" class="search-input" id="{$search_actionid}searchinput" name="{$search_actionid}searchinput" value="{$searchtext}" {$hogan}/>
<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}"><div class="searchblock"><p>{$entry->urltxt}</p></div></a><span class="displaynone"> ({$entry->weight}%)</span></li>
{else}
<li><span class="displaynone">{$entry->title} - </span><a href="{$entry->url}"><div class="searchblock"><p>{$entry->urltxt}</p></div></a><span class="displaynone"> ({$entry->weight}%)</span></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}">
<div class="listblock">

<div class="imgbox">
{if $entry->fields.Foto->value}
<img src="{$entry->file_location}/{$entry->fields.Foto->value}" />
{else}
<img src="{root_url}/webapp/images/news-blank.jpg" />
{/if}
</div>

<div class="listtxt"><p>{$entry->title|cms_escape|truncate:65}</p></div>
</div>
</a>

{/foreach}

Maak een Nieuws Artikelsjabloon aan met de naam webapp:

Code: Select all

{if isset($entry->canonical)}
  {assign var='canonical' value=$entry->canonical}
{/if}

<div id="content">

    {if $entry->fields.Foto->value}
    <img src="{$entry->file_location}/{$entry->fields.Foto->value}" />
    {else}
    <img src="{root_url}/webapp/images/news-blank.jpg" />
    {/if}

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

	<h5>{$category_label} {$entry->category}  |  Datum: {$entry->postdate|cms_date_format}  | Auteur: {$entry->Auteur}</h5>

	{eval var=$entry->content}

</div>
    
<div id="share" class="hidden">
        <img src="{root_url}/webapp/images/facebook.png" alt="facebook"><a href="http://www.facebook.com/sharer.php?u={$canonical}">Delen op Facebook</a>
        <img src="{root_url}/webapp/images/twitter.png" alt="twitter"><a href="http://twitter.com/home?status={$canonical}">Delen op Twitter</a>
</div>
    
{assign var='alt_title' value=$entry->title}

Maak nu 2 Nieuws Velddefenities aan:

Velddefenitie: Auteur - Type:Tekstinvoer - Publiek
Velddefenitie: Foto - Type:Bestand - Publiek


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

Maak 5 nieuwe pagina's aan met de volgende namen en eigenschappen:

Pagina 1: webapp (verbergen)
Interne link naar Webapp Home

Onderliggende paginas:

Pagina 2: Home
Sjabloon: webapp - Content: {news number="20" summarytemplate="webapp" detailtemplate="webapp" detailpage="webappresults"}

Pagina 3: Info
Sjabloon: webapppages - Content: "Informatie over de webapp"

Pagina 4: webappresults (verbergen)
Sjabloon: webappresults - Content: "leeg"

Pagina 5: webappsearch (verbergen)
Sjabloon: webappsearch - Content: "leeg"


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

Onder het mapje root/webapp/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.

In de map root/webapp/js staat een bestand genaamt webbanner.js dit bestand laat een app banner zien op de hoofd website in dit bestand moet je onderaan de gegevens wijzigen naar die van jou website (zie Een Android App maken: voor de url naar de android app). Als je dat gedaan hebt kan je de volgende regel tussen de <head> </head> van je hoofd website plaatsen:

<__script__ src="{root_url}/webapp/js/webbanner.js" type="text/javascript"></__script>

Nu zie je op je website een mooie banner naar je webapp/app

Nu upload je de hele inhoud van de map 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.

Als je alles goed hebt ingevult in webbanner.js word je op een iPhone naar de webapp gelijd en op een android telefoon naar de link van je app of als je de webapp url gebruikt hebt naar de webapp zelf (deze kan je in Chrome for android makkelijk koppelen aan je homescreen).


Een Android 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.

De link naar de app kan je in webbanner.js verwerken bij de Android url.

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 of als je hem hebt doorgelink naar de webapp zie je de webapp.


Voorbeeld in gebruik:

Surf op je Mobiel naar http://pmkmedia.nl of http://peeponline.nl 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
Last edited by pasmaskas on Wed May 14, 2014 8:45 am, edited 9 times in total.
Kumquats
Forum Members
Forum Members
Posts: 11
Joined: Tue Feb 04, 2014 10:34 am

Re: CMSMS Nieuws Webapp 2.0 iOS en Android

Post by Kumquats »

Hey Pascal, I am very curious for your tutorial...but unfortunately only understand half of it...hope someone will translate it soon..
pasmaskas
Power Poster
Power Poster
Posts: 509
Joined: Tue Nov 29, 2011 10:42 am

Re: CMSMS Nieuws Webapp 2.0 iOS en Android

Post by pasmaskas »

Hello Kumquats my english is not so good so I really hope someone can translate it for you. if it still does not quite work out what I'm trying to help as best I can.
rodeto
Power Poster
Power Poster
Posts: 410
Joined: Thu May 04, 2006 9:12 am

Re: CMSMS Nieuws Webapp 2.0 iOS en Android

Post by rodeto »

Mooi gedaan hoor en helder uitgelegd. Dank!
chandra

Re: CMSMS Nieuws Webapp 2.0 iOS en Android

Post by chandra »

Kumquats wrote:Hey Pascal, I am very curious for your tutorial...but unfortunately only understand half of it...hope someone will translate it soon..
It's done

http://forum.cmsmadesimple.org/viewtopi ... 09#p311909

@paskasmas

Maybe you can make a look over it ...
pasmaskas
Power Poster
Power Poster
Posts: 509
Joined: Tue Nov 29, 2011 10:42 am

Re: CMSMS Nieuws Webapp 2.0 iOS en Android

Post by pasmaskas »

Thanks chandra I appreciate you doing this for me!

I've been in your post on the English forum and have shown the changes

Ik heb ook benieuwd of mensen de webapp al hebben gebruikt en hoe die er uit ziet! Dus als je hem al hebt gebruikt show hem hier!
Post Reply

Return to “Tips en Trucs”