CMS Made Simple Forums

I've made a new version of the News webapp for CMSMS.

Link: http://pmkmedia.nl/tips-trucs/cmsms-webapp-sjabloon-2

Example: http://webapp.pmkmedia.nl/webapp2

Zip archive (containing all files): http://webapp.pmkmedia.nl/webapp-cmsms-v2.1.zip

What's to do?

Download the zip archive and unpack it. Now you will see two folders:

folder 1: sjablonen
folder 2: root

To the first we goint into folder 1:

Create 4 new templates with the following names:

webapp
(copy the HTML content from webapp.html file in and save)

webapppages
(copy the HTML content from webapppages.html file in and save)

webappsearch
(copy the HTML content from webappsearch.html file in and save)

webappresults
(copy the HTML content from webappresults.html file in and save)

Create a new stylesheet with the following name (attach the stylesheet to all five templates):

webapp
(copy the css content from webapp.css file in and save)

Create a new menu template in Menu Manager called "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}

Adjust the search template (Search module) to this:

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}

Customize the search result template (Search module) to this:

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}

Create a summary template (News module) named 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}

Create a detail template (News module) named 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}">Share with Facebook</a>
        <img src="{root_url}/webapp/images/twitter.png" alt="twitter"><a href="http://twitter.com/home?status={$canonical}">Share with Twitter</a>
</div>
    
{assign var='alt_title' value=$entry->title}

Define now 2 extra fields in News module:

Field 1
Name: author
Type: text input / public

Field 2
Name: photo
Type: file / public

Now all templates are created and we can start creating pages.

Create 5 new pages with the following names and properties:

Page 1: webapp / (not shown in menu)
Type: internal link to page "Home"

Children:

Page 2: Home
Type: content
Template: webapp
Content:

Code: Select all

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

Page 3: Info
Type: content
Template: webapppages
Content: "Information about the web app"

Page 4: webappresults / (not shown in menu)
Type: content
Template: webappresults
Content: "empty"

Page 5: webappsearch / (not shown in menu)
Type: content
Template: webappsearch
Content: "empty"

Next step is to modify the files in the uploaded root directory:

Inside folder root/webapp/images is an image called touch-icon.png you can replace your own "web app" icon (144x144 pixels). They'll shown on your iOS or Android device like a real app.

Inside folder root/webapp/js is a file named webbanner.js. This file allows to show an app banner on the main website at the bottom of this file. You have to modify the data to your site (look for "An Android app making: the url the android app"). If done you have to add the following line between the <head> </ head> tags of your main website:

Code: Select all

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

You will see a nice banner for your web app on your website.

Upload the entire content of the root folder to the root of your website.

Now your web app should work properly on iOS and Android devices.

When you have finished modifying webbanner.js you get on an iPhone web app the join and on a android phone the link to your app or if you want to use the web app itself (the webapp url you can use in Chrome for Android to make an associate link on your home screen).

How to create an Android app:

Visit http://www.appsgeyser.com/ and create an account.

After you are logged in into http://www.appsgeyser.com/ click in the upper right corner on "CREATE APP".

Choose the option "ENTER WEBSITE URL" and enter the fields as follows:

Website URL: http://www.website.nl/webapp (change it to YOUR correct url)

App name: the name for your web app

Description: Description (do not if you do not want)

Icon: Custom icon (upload your "touch-icon.png" here you've made it)

Screen Orientation: Auto

Category: News (if you use it for your blog then you can choose)

Then press "CREATE APP" and download it to your computer.

You can handle the link to the app in webbanner.js (the Android url).

iOS: Get linked directly to the Web App with whether you want to put it on your home screen.
Android: now asks whether you want to download you just created, or if you've a link to the webapp the app you can see the webapp.

Example of use:

Surf on your mobile to http://peeponline.nl and see a working version.