Simple 302 Redirects To Another Page Andrei M. 25.11.2014

Simple 302 (status Found) Redirects provides an easy method of redirecting requests to another page of your website or elsewhere on the web. It's especially useful when you migrate a site or reference to external source.

The predefined default page will be opened by requesting of domain name.

 

When it is start_page_name, then the request like www.zapms.de will be redirected to www.zapms.de/start_page_name.

Every page can be defined as URL in menu manager. 

In this case the requests like www.zapms.de or www.zapms.de/start_page_name will be redirected to http://my_new_domain.

- Up -

Design adaptation for mobile devices Andrei M. 23.11.2014

Design adaptation for mobile devices

Responsive web design is a solution to the problem of optimizing the website for mobile devices. The design of the website is adapted to the screen size with special CSS styles; content and menu structure remain unchanged. On the server side must be recognized when a user uses the desktop or mobile device.

The picture shows how the exchange runs between the client and the server. The server does not have any information about the device within first request and displays a desktop version.

When the website is loaded, the function checkMobile() measures the width of the browser window and check the cookies using the function getCookie(). Cookies contain information from the server about the device: the flag is_mobile (1 for mobile, 2 for desktop and 3 for ignore).

In case the width of the browser is less than the predefined value (for mobile device) and server send 2 for desktop, the function checkMobile() sends a query ?subaction=ui_mob back to the server.

Now the server knows that user uses some mobile device. Server sets the flag is_mobile to 1 in cookies and sends the web page which optimized for mobile devices.

- Up -

Navigation Schema in ZAPms Andrei M. 14.09.2014

The structure of the Website is the basis for the construction of navigation on it. For example take the following tree of structure:

About
Contact
Group A
-     Type AA
-     -     Product ABC
-     -     Product ABD
-     Type AB
Group B
-     Type BA
-     Type BB

Main menu

The main menu of the Website contains links to the first level of the tree:

 

Code of Template for the main menu:

{php}
showMenuFlat('menu-sample');
{/php}

<ul style="list-style-type:none;">
{section name=custom loop=$menu_list}
  {if $menu_list[custom].active>0 and $menu_list[custom].level==0}
  <li style="float:left;">
    <a href="{$menu_list[custom].name}" style="padding-left:20px;">{if $menu_list[custom].active==3} -> {/if}
    {$menu_list[custom].title}</a></li>
  {/if}
{/section}
</ul>
<div style="clear:both;"></div>

Breadcrumb menu

The breadcrumb menu is necessary if the structure contains more than two levels:

Group A   Type AA   Product ABC

Code of Template for the breadcrumb menu:

{php}
showMenuFlat('menu-sample');
{/php}

{section name=custom loop=$path_list step=-1}
  {if $smarty.section.custom.index==0}
    {$path_list[custom].title}
  {else}
    <a href="{$path_list[custom].name}">{$path_list[custom].title}</a> &nbsp;
  {/if}
{/section}

Secondary or submenu

In case the submenu is needed, which references to only one particular level for example for Group A:

Code of Template for the submenu:

{php}
showMenuFlat('sample_group_a');
{/php}

<h1>Fixed Menu Types of Group A</h1>
<ul style="list-style-type:none;">
{section name=custom loop=$menu_list}
  {if $menu_list[custom].active>0 and $menu_list[custom].level==0}
    <li>
    <a href="{$menu_list[custom].name}"{if $menu_list[custom].active==3} style="font-width:bold;"{/if}>{$menu_list[custom].title}</a>
    </li>
  {/if}
{/section}
</ul>

Submenu as tree for the current selected menu item:

Code of Template for the submenu in tree form:

{php}
showMenuTree('menu-sample');
{/php}

<ul style="list-style-type:none;">
{assign var="clevel" value=1}
{section name=custom loop=$menu_list}
{if $menu_list[custom].active>1 and $menu_list[custom].level>0}
  {if $clevel>$menu_list[custom].level}
    {assign var="closes" value=$clevel-$menu_list[custom].level}
    {assign var="clevel" value=$menu_list[custom].level}
    {section name=iopens loop=$closes}
      </ul></li>
    {/section}
  {/if}
  <li>
  {if $clevel<$menu_list[custom].level}
    {assign var="clevel" value=$menu_list[custom].level}
     <ul style="list-style-type:none;"><li>
  {/if}
  <a href="{$menu_list[custom].name}"{if $menu_list[custom].active==3} style="font-width:bold;"{/if}>
  {$menu_list[custom].title}</a>
  </li>
{/if}
{/section}
</ul>

In general case the function which calls the tree will return an menu array as follows:

Name Title Id Parent Level Status
sample_about About 1094 1083 0 2
sample_contact Contact 1093 1083 0 2
sample_group_a Group A 1084 1083 0 2
sample_type_aa Type AA 1086 1084 1 2
sample_product_abc Product ABC 1090 1086 2 3
sample_product_abd Product ABD 1091 1086 2 2
sample_type_ab Type AB 1088 1084 1 2
sample_group_b Group B 1085 1083 0 2
sample_type_ba Type BA 1087 1085 1 1
sample_type_bb Type BB 1089 1085 1 1

where status:
0 - disabled
1 - enabled
2 - displayed
3 - clicked

- Up -

Role of Structure, Interface and Templates Andrei M. 05.09.2014

The structure of product or service is reflected in the structure of the Website. The Website structure can be formalized in the form of a tree or a list.

The elements of structure are displayed through the graphic design. Its role is to facilitate the perception process and provide a GUI to interact with the visitors of the website.

Structure_Prototype.png

When the graphical representation of a website is ready in the form of image, it is helpful to create a prototype as .html file. Layout will show how well the GUI fulfilling its purpose.

Ready layout of prototype is divided into parts to avoid redundancy and simplify further support of website. Such parts are named templates. Templates can contain a title, a container for the content or the menu container.

Prototype_Menu.png

The templates and content are linked to elements of the site structure, which is represented as a menu on the website. Website content is stored in the form of html files on the server or in a database.

The template files of zapms are located in the folder /files/templates/

site_default.tpl the basic template contains the references to the content and menu containers
menu_top.tplmenu_news.tpl contain function calls to display menu
menu_download.tpl contains static text with links to download the files
menu_galery_about.tpl calls the screenshots to display in the menu area
menu_news.tpl calls the news from the database to display in the menu area
content_default.tpl displays static content
content_news.tpl calls the news from the database to display in the main content area

Static content and images are located in the folder /files/content/

sample_content.txt sample file with static content.

- Up -

Install on Raspberry PI Andrei M. 28.08.2014

Requirements

Zapms installation

Copy Zapms and unzip it locally. Then copy or move to pi. Suppose you Raspberry PI has the IP address 192.168.0.1

scp -r /home/USER_NAME/zapms_for_raspberry_pi pi@192.168.0.1:/home/pi/Desktop/

Loggin to the pi.

ssh pi@192.168.0.1

Copy Zapms to the www directory. Suppose an owner group for directory www is the www-data (Property of the Web Server lighttpd).

sudo -g www-data cp -ru /home/pi/Desktop/zapms_for_raspberry_pi/* /var/www/

Add the permissions

sudo chmod 777 /var/www/auth/ /var/www/include/ /var/www/files/ -R
sudo chmod 777 /var/www/zap/include/ /var/www/zap/cache/ /var/www/zap/templates/ /var/www/zap/templates_c/ -R

Create database

mysql -p -u root
mysql> create database zapmsdb character set utf8 collate utf8_general_ci;
mysql> grant all privileges on zapmsdb.* to 'pi'@'localhost';
mysql> flush privileges;
mysql> quit;

Define the rules for web server. Sample file can be found under setup/lighttpd.conf.

sudo nano /etc/lighttpd/lighttpd.conf

Following parameters has to be added:

server.modules = (
...
"mod_rewrite",
...
)
...
index-file.names = ( "index.php", "index.html", "index.lighttpd.html" )
...
fastcgi.server = (".php"=>(("bin-path"=>"/usr/bin/php-cgi","socket"=>"/tmp/php.socket"))) 

# direct access is denied for bibliothek and images
$HTTP["url"] =~ "^/(auth|include|files/content/images/originals|zap/include)/" {

url.access-deny = ( "" )
server.error-handler-404 = "403"
}

# direct access is denied for modules
$HTTP["url"] =~ "^/(modules|zap/modules)" {
url.access-deny = ( "index.php" )
server.error-handler-404 = "403"
}

# rewrite urls
url.rewrite-if-not-file = (
"^/robots.txt" => "/robots.php",
"^/sitemap.xml" => "/sitemap.php",
"^/crossdomain.xml" => "/crossdomain.php",
"^/files/(.*)$" => "$0", # no restrictions for static content
"^/([^.?]*)$" => "index.php?m=$1", # default controller
"^/([^.?]*)?(.*)$" => "index.php?m=$1&$2", # other requests
"^/$" => "/index.php" # default page
)

Verify the syntax and restart the web server

lighttpd -t -f /etc/lighttpd/lighttpd.conf
sudo service lighttpd restart

Run setup in browser

http://192.168.0.1/setup/index.php

Login into Backend.

http://192.168.0.1/zap/index.php

 

Optional setting up of crontab

Setup crontab for daily restart

sudo -u pi crontab -e

# restart once a day
51 23 * * * sudo reboot -h

Start crontab

sudo nano /etc/rc.local
--> add line before exit 0
/etc/init.d/cron start

Monitoring crontab

sudo tail -f /var/log/syslog | grep CRON

- Up -

Modules-Model of ZAPms Andrei M. 27.08.2014

The model contains 7 tables.
Modules-Model of ZAPms

menu - the table describes all web pages. The menu items differ from the type: static, dynamic, module, url.

galery - the table contains references to images and the menu items.

guestbook - the guest book, the messages from the contact form are stored here also.

news - the news.

newsletter - the newsletter.

newsletter_emails - the table contains the e-mails for sending.

newsletter_jobs - the table shows the sending process.

- Up -

Core-Model of ZAPms Andrei M. 27.08.2014

The model contains 8 tables.
Core-Model of ZAPms

dtree - the table contains the elements of the tree structure of the backend system. There are references to the modules that are to be found in the folder /zap/module.

type - the table of types like folder, system or custom module.

config - the configuration for each element of the tree structure. The table is filled by module configuration.

dtree_roles - the table of permissions, the table assigns each elment of tree with each role.

roles - the table of roles.

users_roles - the table assigns the roles with users.

profiles - the user profiles. Contains the search options the user selected during the session.

users - the table of users.

- Up -

News


Downloads

zapms v1.52 basic 2,5 MB

zapms v1.52 raspberrypi 2,5 MB


Live Demo

http://zapms.de/test/zap
Login: demo
Password: demo