Start Developing Your Website

When you download RND Framework, it comes with default settings that you can easily change by following some easy steps. Only thing you need to do is get familiar with files and structure.

Before starting, if you have not installed RND Framework in your computer or server, just click here and learn how to install it.

Step 01: Change Website Settings

It seems you have installed your website correctly. Now we can start changing this website. First of all, open the “rnd-content” folder and take a look at files and folders. Open the “settings.json” file using your code editor to change site structure.This Json file keeps core data related to your website. Please note, this json structure is unique for the RND framework. However, a developer can add his own data to this Json to improve the productivity.

Json Key Name	Usage	Extra Details
`site_name`	This is your website name. This name will be appeared on the Logo, trademark, and other special areas, depending on the template design.	In php codes, you can use "SITE_NAME" constant to read this value.
`site_tag`	This is the tagline or motto that explains more about your website.	In php codes, you can use "SITE_TAG" constant to read this value.
`site_url`	Here you have to add your website’s public url. If you host in a subfolder, it should show the complete path.	For PHP, use "SITE_URL" constant
`site_phone`	A phone number to show publicly. Some templates will show this on the contact page, footer or header area.	For PHP, use "SITE_PHONE" constant
`site_email`	This email address will be publicly shown on the contact page, footer or header area.	For PHP, use "SITE_EMAIL" constant
`site_engine_version`	RND Framework can have different kinds of engines that come with different version numbers. It is recommended to change the version number when you update your site.	For PHP, use "SITE_ENGINE_VERSION" constant
`site_template_name`	Templates can be stored in “rnd-content/templates” directory. Here you have to add the folder name of the template. If the engine cannot find the template in “rnd-content/templates” directory, it will use a simple text output.	For PHP, use "SITE_TEMPLATE_NAME" constant
`seo_title`	This is a universal title for all pages in the site. You can manipulate these values page by page by changing a json file located in the page folders.	For PHP, use "SEO_TITLE" constant
`seo_description`	This is the universal description to bind with search engines meta data. This also can be manipulated by page level json file.	For PHP, use "SEO_DESCRIPTION" constant
`seo_keywords`	Add your site related main keywords here. Our recommendation is to keep 3-5 keywords separated by commas. Page related keywords can be changed by a json file later.	For PHP, use "SEO_KEYWORDS" constant
`site_menu`	This is a complex json array that includes menu related data. If you understand PHP programming, you can add more menus to this array and output them via a plugin. Check Step 02 down below to learn more about menus.	For PHP, use "SITE_MENU" constant
`external`	Not important for a beginner, if you do some complex developments, put all external data here. Sample data can be found in the default “settings.json” file.	For PHP, use "EXTERNAL" constant

Step 02: Understand Menus & Structure

Menus can be a little bit advanced for a beginner. Therefore we recommend you to keep the default menu structure you have in “settings.json” file. There are 3 main menus in this RND Framework. Some templates can use a complex menu structure when it comes to multi-level menus.

Menu	Usage	Extra Details
`_top`	This array keeps data related to the Top menu. Some templates will show this menu in the header area, very top of the page.	PHP programmers should access “SITE_MENU” constant and load it to a PHP array to manipulate values.
`_side`	Some templates can show a side menu on the website. This array will store those data and you can update them programmatically also using the RND Hook system. Beginners should keep it as it is.	PHP programmers should access “SITE_MENU” constant and load it to a PHP array to manipulate values.
`_footer`	This array keeps data related to the footer menu where you can find on the bottom of the page. Some templates will keep this menu simple and short.	PHP programmers should access “SITE_MENU” constant and load it to a PHP array to manipulate values.

The following structure will show you how Footer Menu and its items stay inside the site_menu array. Simply change the Menu Label to show what you want as the caption of the menu item. You can easily add/edit/remove menu items by editing this easy code. Only thing you have to have is a little bit of JSON knowledge.

        "_footer": {
            "Menu Label 01": {
                "href": "#",
                "icon": "",
                "new": "0",
                "items": {}
            },        
            "Menu Label 02": {
                "href": "#",
                "icon": "",
                "new": "0",
                "items": {}
            }, 
            "Menu Label 03": {
                "href": "#",
                "icon": "",
                "new": "0",
                "items": {}
            }
        }

Let’s learn more about array keys inside a menu item. You can easily add more keys, if you develop advanced applications upon this framework.

Key	Usage	Sample
`href`	Target page address to be opened. Here you can only add pages located in your pages directory in your rnd-content main directory. You cannot add external URLs to your menu as we believe it is a critical damage for your website’s SEO/SMO.	We recommend you to learn how to make pages in the RND Framework before changing this value. By assuming that you know how to make pages, let’s say you add a page into pages directory as shop. You can easily link this page by adding shop as href value here. If you plan to link product1 page inside shop, Just add shop/product1 as href value here.
`icon`	Some templates use icons on the label. Here you can add the icon code, depending on the template/plugin you use. Leave it empty for basic use.	If you have a FontAwesome plugin, you can add “fa fa-home” here to show the home icon on the menu. However, your template must support iconic menus to see results.
`new`	If you want to open targeted page in a new tab, change this value.	Add 1 to open in a new tab, or 0 to open in the current tab. ( 0 = _self, 1=_blank )
`items`	You can add secondary level menu items here as a json array. The array will follow the same structure we have in primary level menus. Somehow, your template should support multi level menus to see this result.	You can add secondary items as below. "Secondary Item 01": { "href": "#", "icon": "", "new": "0", "items": {} }, "Secondary Item 02": { "href": "#", "icon": "", "new": "0", "items": {} }

Step 03: Create New Pages

Every website needs pages. RND Framework supports you to add unlimited pages in a flexible way. Before everything, go to pages folder in your rnd-content main folder. All top level pages of your website will be stored here.

The following page folders are found in this website's rnd-content/pages directory.

404
cloud
home
hooks
layouts
legal
plugins
start
templates

NOTE: home folder is dedicated for the home page!

Let's say you want to have a top level page as about. First you have to create a folder named about in pages folder. And this folder must include about.json file with the following structure.

            {
                "head": {
                    "title": "This is meta title of about page",
                    "text": "This is meta description of the about page. Keep it unique to boost SEO.",
                    "keys": "about website",
                    "short": "About",
                    "layout": "page-layout"
                },
                "body": {},
                "style": {},
                "script": {}
            }

Let’s learn more about this Json file structure. Basically, head array keeps data related to the page HEAD area. And body array keeps data related to the page BODY area. Also, style is for styles and script for JavaScripts of the page.

As body, style, script will be used for advanced page layouts, they will be explained under Page Layouts. We will only discuss head related data here.

Key	Usage	Sample
`title`	This is the meta title of the page.	Eg. “Welcome to my new website”
`text`	This is the meta description of the page. Keep it unique to boost SEO.	Eg. “My website is awesome and beautiful. I use the RND Framework to develop it rapidly.”
`keys`	This is used to add meta keywords related to the page.	Eg. "my website, new website, rnd website"
`short`	Short name of your page. Keep it short to avoid breadcrumbs getting long.	Eg. "My Website"
`layout`	If you are a skilled developer, you can create special page layouts in rnd-content/layouts folder and use them on multiple pages easily. Here you can just add the layout name to achieve it easily.	It can be like "page-shop-front" or "page-shop-item" or "page-two-columns", depending on the name of the page layout.

Step 04: Writing Page Contents

In the above step, we learnt how to create new pages. There are 3 different methods to write your page contents, spending on your skill level.

Method 01: Simple HTML for Beginners

If you know how to write HTML codes, You can easily write contents with RND Framework. Let's say you have a top level page named about. It means, you can find about folder inside rnd-content/pages directory. Simply create an html file named about.html in about folder to start writing contents. Whatever you store in this html file will be rendered by RND Engine on the about page.

Hint: We have added a sample page using pure HTML here (Click to open).

Method 02: PHP Contents for Programmers

PHP programmers will love to do more developments with RND Framework. They can use RND Hooks to append more complex contents to the page. You can learn more about RND Hooks Here. We are proud to say that some of the very big projects are developed by using PHP contents inside the RND Framework.

Let's say you have a top level page named shop. It means, you can find shop folder inside rnd-content/pages directory. Simply create an php file named shop.php in shop folder to start writing contents. Using your PHP skills and RND Hooks, you can generate an amazing output on each page when you follow this method. Creating a contact form, login, register is easy with this method. However, your template can affect your result.

Info: We have added more PHP examples in this section (Click Here).

Method 03: More Complex Contents via Page Layouts

Skilled developers are looking to create their own templates, plugins and page layouts to impress their buyers with 100% unique designs. Unlike other CMS, RND Framework helps you to develop your own, unique, secured, web designs through this method. You will have to learn how page layouts work before starting this method. Click Here to learn more about Page Layouts.

Try: We have created a sample page with Page Layouts Here.

IMPORTANT MESSAGE:

In default, RND Engine will look for the HTML file (Method 01) in the folder and render it. If there is no HTML file, then it will look for the PHP file (Method 02) to be rendered. Finally, if there are no HTML or PHP files, it will try to render the page using layouts (Method 03).

If you want to render pages via layouts, do not keep HTML or PHP files, just only need the Json file in the page folder.

Step 05: Managing uploaded media

All uploaded contents must be stored in "rnd-content/uploads" path. It will help RND Engine to access/manage/backup your media easily.

Let’s say you have uploaded an image to your uploads folder and its relative path is rnd-content/uploads/media/logo.png. If you write contents using simple HTML (.html file in page folder), you will have to add the long address as src of your image.


        < img src="http://www.mysite.com/rnd-content/uploads/media/logo.png" >

The problem is, if you change your website’s address, then you will have to find and change all images’ src values manually.

But if you write content on a PHP file (.html file in a page folder), you do not have to worry about this issue. Just look at the example below.


        echo '< img src="' . MEDIA_URL . '/media/logo.png" >';

MEDIA_URL is logically defined by RND Engine. When you change your main site address, you only have to change its address on config.php in the root folder. Then all media will follow your new address without having any update on your codes.

This is really a perfect solution to avoid broken images when you transfer your website to a new domain. Also, you can easily change images in the upload folder and generate almost a unique website for a new customer. It saves a hell of time!

Finally, let’s say you only use page layouts with the Json file. The following example shows how to access your MEDIA_URL via the Json file in the page folder.

        {
            "head": {},
            "body": {
                "my-image-src": "[[MEDIA_URL]]/media/logo.png"
            },
            "style": {},
            "script": {}
        }

Feeling strong about what you learnt?

If you understand everything in this page, it means you have done your studies very well. Now it’s time to learn something advanced with PHP programming. Please visit the “Constants, Hooks & Functions” page to start learning them.

Click here to visit