https://github.com/kmturley/json-templates

load data from json server-side
https://github.com/kmturley/json-templates

Last synced: 1 day ago
JSON representation

load data from json server-side

• Host: GitHub
• URL: https://github.com/kmturley/json-templates
• Owner: kmturley
• Created: 2014-04-07T21:12:58.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-01-06T22:12:58.000Z (almost 10 years ago)
• Last Synced: 2024-05-02T00:59:45.356Z (7 months ago)
• Language: PHP
• Size: 332 KB
• Stars: 7
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
json-templates

==============

Example project showing how to load json into templates using a filter

    PHP `http://www.php.org/`

    Twig template engine `http://twig.sensiolabs.org/`

## Installation

First off you need to install PHP on your server. Many will come with it automatically installed, if not head over to http://www.php.org to download and install php locally. Once installed you should be able to view a php page on your server without errors e.g.

    

Next we need to create a site folder and install TWIG template library. This will allow us to use a nice format to write templates, and keep a clean separation between controller code in php and views code in TWIG syntax. Download TWIG from http://twig.sensiolabs.org/ and put the folder at:

    /php/Twig/

## Development

You will need to use the custom filter to load JSON files inside the templates. Add the file at /php/Twig_JSON.php which contains the json loading functions:

     new Twig_Function_Method($this, 'json'),

          );

      }

      

      public function json($url) {

          return json_decode(file_get_contents($url), true);

      }

    }

    ?>

Also ensure you have a /php/Main.php file which will load the TWIG template library, the custom TWIG filter, and map browser urls to specific template files:

    twig = new Twig_Environment(new Twig_Loader_Filesystem('../html'));

            $this->twig->addExtension(new Twig_JSON());

        }

    

        public function render() {

            $self = explode('/', $_SERVER['PHP_SELF']);

            $uri = explode('/', $_SERVER['REQUEST_URI']);

            $sections = array_splice($uri, count($self)-2, 1);

            if ($sections[0]) {

                return $this->twig->render($sections[0].'.html');

            } else {

                return 'Try a page url e.g. home';

            }

        }

    }

    

    $main = new Main();

    $main->init();

    echo $main->render();

    ?>

I’ve also added an optional index.php in the root to direct the request to the default template: home. This is because root url doesn’t have a section, so I don’t have a template which will be loaded. By redirecting the root to point to home, i’m telling it to render the home template:

    

As part of my configuration i’ve also decided to add an .htaccess file at the root of the site to ensure all directory and folder requests hit our /php/Main.php file instead of real folders. This is optional depending on your setup but I think works well for mapping urls to templates:

    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} !-d

    RewriteCond %{REQUEST_FILENAME} !-f

    RewriteRule . php/Main.php [L]

Now you can edit the data! Find the file at /json/navigation.json and update the data:

    [

        {

            "title": "Home",

            "url": "./home"

        },

        {

            "title": "Videos",

            "url": "./videos"

        }

    ]

We can now load the json file using a TWIG filter and output it into the template. The example at /templates/home.html shows how this can now work using the custom filter:

    

    

    

        

        Json templates

    

    

        
navigation

        


        {% set items = json('../json/navigation.json') %}

        {% for item in items %}

            
{{ item.title }}

        {% endfor %}

        

    

    


The json() filter allows you to pass through the url to the json file, which loads and returns it back to the template. This can then be counted/looped through and outputted. A very easy way to keep separation between view templates and your data sets.