CMSMS Webapp Sjabloon 4.0

CMSMS Webapp Sjabloon 4.0

CMS Made Simple 1.11.x / 1.12 | 9-07-2014 | Pascal Merks | Reacties


Een nieuwe versie van het CMSMS Webapp Sjabloon versie 4.0. In deze versie heb ik het uiterlijk aangepast. Zo is de layout moderner en zit er een swipe menu in verwerkt. Dit menu kan je van af de randen open en dicht swippen. Verder heb ik twee versies gemaakt. Een zonder comments zo als altijd en nu ook een met Facebook comments zodat mensen kunnen reageren met hun Facebook account. De reacties worden gegeven op de originele link van het nieuws bericht. Dus als je op de website ook Facebook comments hebt bij je nieuws berichten met {$canonical} dan zie je op de website en op de webapp de zelfde reacties bij het zelfde bericht. Verder zit er nu de nieuwe addtohomescreen http://cubiq.org/add-to-home-screen plugin in die nu ook zichtbaar is voor android en het Youtube video gedeelte is er in verwerkt zodat je ook videos kunt plaatsen. Voor deze functies en de nieuwe layout moesten er dingen gewijzigd worden in de sjablonenen/stylesheet en de pagina structuur. Vandaar een nieuwe tutorial!

 

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

Zip bestand met alle bestanden: http://webapp.pmkmedia.nl/webapp-cmsms-v4.0.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 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 webapp-pages.html bestand er in en sla hem op).

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

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

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



Maak een nieuwe stylesheet aan met de volgend namen:

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

Koppel de stylesheet aan de webapp sjablonen.

 

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

Code:

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

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

<h1>{$searchresultsfor} &quot;{$phrase}&quot;</h1>
{if $itemcount > 0}
<ul>
{foreach from=$results item=entry}
{if $entry->module == 'News'}
<li><span class="displaynone">{$entry->title} - </span><a href="{$entry->url}"><p>{$entry->urltxt}</p></a><span class="displaynone"> ({$entry->weight}%)</span></li>
{else}
<li><span class="displaynone">{$entry->title} - </span><a href="{$entry->url}"><p>{$entry->urltxt}</p></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:

{foreach from=$items item=entry}

    <a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">
    <div class="summary">
    
    {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}</h1>
    
    <p>{eval var=$entry->summary|truncate:90}</p>
    
    </div>
    </a>

{/foreach}

 

Maak een Nieuws Samenvattingssjabloon aan met de naam webappcategory:

Code:

{foreach from=$items item=entry}

    {if $entry->fields.Video->value}
    <div class="video-top">{youtube file={$entry->Video}}</div>
    {else 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>
    
    <p><b>{$entry->category} | {$entry->postdate|cms_date_format}</b></p>

    {eval var=$entry->content}

    <p class="melding" onclick="location.href='{$entry->moreurl}';">Klik hier om reacties te plaatsen en te delen.</p>

{/foreach}

 

Maak een Nieuws Artikelsjabloon aan met de naam webapp:

Code:

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

    {if $entry->fields.Video->value}
    <div class="video-top">{youtube file={$entry->Video}}</div>
    {else 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>

    <p><b>{$entry->category} | {$entry->postdate|cms_date_format} | {$entry->Auteur}</b></p>

    {eval var=$entry->content}
    
    <br/>
    <h1>Reacties:</h1>
    
    <div id="comments">
    <div class="fb-comments" data-href="{$canonical}" data-width="100%" data-numposts="5" data-colorscheme="light"></div>
    </div>
    
{assign var='alt_title' value=$entry->title}

 

Maak een Gebruikergefedinieerde tag aan met de naam youtube:

Code:

echo '<iframe width="640" height="360" src="//www.youtube.com/embed/' . ($params[file]) . '" frameborder="0" allowfullscreen></iframe>';

 

Maak nu 3 Nieuws Velddefenities aan:

Velddefenitie: Auteur - Type:Tekstinvoer - Publiek
Velddefenitie: Video - 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: app (verbergen)
Interne link naar app \ Home

Onderliggende paginas:

Pagina 2: Home
Sjabloon: webapp - Content: {news action="detail" articleid="-1" detailtemplate="webapp"}

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

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

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

Categorie paginas:

Je kan nu ook paginas maken per categorie. Dit kan je los doen of onder en submenu. Zet wel even de wysiwyg editor uit je hoeft alleen de categorie naam als Titel en Content te plaatsen en het webapp-category sjabloon voor de pagina gebruiken.

Pagina: Categorie naam
Sjabloon: webapp-category - Content: "Categorie naam"  - Titel: "Categorie naam"

 

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:

Code:

<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/iPad naar de webapp gelijd en op een android telefoon/tablet 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 makelijk 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 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 of als je hem hebt doorgelink naar de webapp zie je de webapp.

 

Voorbeeld in gebruik:

Surf op je Mobiel naar deze website 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