== Summary ==

Sometimes it is difficult to move an application from one subfolder into another or into the root folder. Another problem is moving your applcation to another domain. It would be much simpler if the application use only relative url's and all the other stuff would be done automatically.

In the most cases there are at least two points in your application you must always have to remember to modify if you move your application around. If you are using redirections with '''mod_rewrite''' you have to modify at least the '''RewriteBase''' and the most frameworks need extra configuration and special code to generate a relative URL.

With CodeIgniter for example you have functions like '''base_url()''' or '''site_url()''' which should helps you to built links without to know about your current place. But this not very handy as you have always remember to use these functions in every link and to setup correctly your configuration value in '''$config['base_url']'''. An automatic base url detection is built in, but for security reasons the IP address of the your server will be used to compose the URI instead of your host name ([https://expressionengine.com/blog/http-host-and-server-name-security-issues read more about security concerns of detecting the host name automatically]). This will not work in the most cases of course. Furthermore these functions produce absolute URLs, which is not necessary imo.

Example for HTML:
<syntaxhighlight lang="html">
<a href="<?php echo base_url();?>controller/method/parameter">...</a>
</syntaxhighlight>

Example for JSON-Objects:
<syntaxhighlight lang="js">
{
url: "<?php echo base_url();?>controller/method/parameter"
}
</syntaxhighlight>

So why not using only relative URLs?

CodeCoupler includes a htaccess file that detects and save the current base folder in an environment variable. This variable will be used to set an absolute URL into the configuration variable '''base_url''' in codeigniter. From now on all CodeIgniter functions will produce an URI without a hostname and with the correct subfolder if needed.

In an HTML page you can set your base like this:

<syntaxhighlight lang="html">
<base href="<?= base_url() ?>">
</syntaxhighlight>

By the way: If you are using the template '''html''' it will be already set in every page automatically.

From now you do not have to bother how to point to ressources anymore. Just start everytime with the name of controller:

Example for HTML:
<syntaxhighlight lang="html">
<a href="controller/method/parameter">...</a>
</syntaxhighlight>

Example for JSON-Objects:
<syntaxhighlight lang="js">
{
url: "controller/method/parameter"
}
</syntaxhighlight>

== Some Notes ==

With this modification all the libraries using '''base_url()''', '''site_url()''' or some helpers like '''redirect()''' which call these function will work in the most cases like before. The only limitaion is the usage of the second paramter '''$protocoll''' of the both functions. As we use only absolute paths and not any host name or IP address, we cannot set a protocol. The functions will check if the given protocol is the current protocol (http or https). If not they will show an error.

If you nevertheless should really need this functionality you must set your domain name in the variable '''base_url''' in '''config.php'''. You could of course setup the following code to use your domain name and benefiting from the automatic base detection, The variable {CC_BASE_URL} will be automatically replaced with the detected base:

<syntaxhighlight lang="php">
$config['base_url'] = 'http://YOUR_FIXED_DOMAIN/{CC_BASE_URL}'));
</syntaxhighlight>

As the limitation occur only if you switch the protocol from http to https (or vice versa) you should think about to call all your pages with only one protocol.

== How this works ==

Every line of the htaccess file explained:

<syntaxhighlight lang="apache">
RewriteCond %{ENV:CC_TMP_URI} ^$
RewriteRule ^(.*)$ - [ENV=CC_TMP_URI:$1]
</syntaxhighlight>

The first line looks if the variable CC_TMP_URI is empty. If yes, the second line stores the path from the location of the htaccess file to the requested file into the variable '''CC_TMP_URI'''.

* Example Request: '''<nowiki>http://host/subdir/request-dir/request-file?var=val</nowiki>'''
* If this htaccess is placed in '''subdir''' the stored value will be: '''request-dir/request-file'''

<syntaxhighlight lang="apache">
RewriteCond %{ENV:CC_BASE_URL} ^$
RewriteCond %{ENV:CC_TMP_URI}::%{REQUEST_URI} ^(.*)::(.*?)\1$
RewriteRule ^ - [ENV=CC_BASE_URL:%2]
</syntaxhighlight>

The first line looks if the variable CC_BASE_URL is empty. The condition of the second line is always true. The only point of this line is saving the some values in two groups. It works as follows:

Remember:
* Our example Request: '''<nowiki>http://host/subdir/request-dir/request-file?var=val</nowiki>'''
* The variable CC_TMP_URI have the value because of the rule above: '''request-dir/request-file'''

Now the condition is:
<syntaxhighlight lang="text">
Test-String: request-dir/request-file::/subdir/request-dir/request-file
Condition : ( group 1 )::(group2)request-dir/request-file
^- This is the -^
^- Backreference \1 -^
^- to the value of -^
^- "group 1" -^
</syntaxhighlight>

Now we have in '''group 2''' the base that we need. The third line save this value into the variable CC_BASE_URL. And we are ready for our final rewrite:

<syntaxhighlight lang="apache">
RewriteCond $1 !^index\.php
RewriteRule ^(.*)$ %{ENV:CC_BASE_URL}index.php [L,QSA]
</syntaxhighlight>

If you need to exclude some requests redirecting to '''index.php''' you can add them in the rewrite condition like here:

<syntaxhighlight lang="apache">
RewriteCond $1 !^(index\.php|assets)
</syntaxhighlight>

Mods: Automatic Base Detection

2017-11-22T14:47:09Z

Tm: /* Summary */

Mods: Automatic Base Detection

2017-11-22T14:46:08Z

Tm:

2017-11-15T19:12:19Z

Tm:

Hauptseite

2017-11-13T17:28:48Z

Tm: /* Used Libraries */

Hauptseite

2017-11-11T20:59:06Z

Tm:

{{Quote|If I have seen further it is by standing on the shoulders of giants.|Isaac Newton following Bernard of Chartres http://en.wikipedia.org/wiki/Standing_on_the_shoulders_of_giants}}

CodeCoupler is a compilation of web development libraries, put them together in a small footprint framework. The goal was to enclose the most used code and libraries in a easy-to-use framework, hoping never have to write the basics of a web application again. In contrast to other big frameworks this one is based on numerous small libraries specialized in solving a specific topic. This is the best approach in my view and this is the attempt bundling all these specialists out there under one roof.

== Used Libraries ==

{| class="wikitable"
|-
| Name & Homepage
|| Version & Download
|| Documentation
|| Download
|| Licence
|| Remarks
|-
| [http://codeigniter.com/ CodeIgniter]
|| [https://github.com/bcit-ci/CodeIgniter/archive/3.1.6.tar.gz 3.1.6]
|| [https://www.codeigniter.com/user_guide/ Documentation]
|| [https://codeigniter.com/download Download]
|| [https://www.codeigniter.com/user_guide/license.html MIT]
|| -
|-
| [http://codeigniter.com/ CodeIgniter Translation]
|| [https://github.com/bcit-ci/codeigniter3-translations/archive/3.1.6.tar.gz 3.1.6]
|| [https://www.codeigniter.com/user_guide/ Documentation]
|| [https://codeigniter.com/download Download]
|| [https://www.codeigniter.com/user_guide/license.html MIT]
|| -
|-
| [http://blog.tedivm.com/category/projects/jshrink/ JShrink]
|| [https://github.com/tedious/JShrink/archive/v1.2.0.tar.gz 1.2.0]
|| [https://github.com/tedious/JShrink Documentation]
|| [https://github.com/tedious/JShrink/releases Download]
|| [https://github.com/tedious/JShrink/blob/master/LICENSE BSD 3-clause]
|| -
|-
| [http://adaptive-images.com/ Adaptive Images]
|| [http://adaptive-images.com/content/downloads/adaptive-images.1.5.2.zip 1.5.2]
|| [http://adaptive-images.com/details.htm Documentation]
|| [http://adaptive-images.com/download.htm Download]
|| [https://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0 Unported License]
|| Library used to write an own class that fits into the CodeIgniter schema.
|-
| [http://leafo.github.io/scssphp/ scssphp]
|| [https://github.com/leafo/scssphp/archive/v0.7.1.tar.gz 0.7.1]
|| [http://leafo.github.io/scssphp/docs/ Documentation]
|| [https://github.com/leafo/scssphp/releases Download]
|| [https://raw.githubusercontent.com/leafo/scssphp/master/LICENSE.md MIT]
|| -
|-
| [http://getbootstrap.com/ Bootstrap]
|| [https://github.com/twbs/bootstrap/releases/download/v4.0.0-beta.2/bootstrap-4.0.0-beta.2-dist.zip 4.0.0-beta.2]
|| [http://getbootstrap.com/docs/4.0/getting-started/introduction/ Documentation]
|| [http://getbootstrap.com/docs/4.0/getting-started/download/ Download]
|| [https://github.com/twbs/bootstrap/blob/master/LICENSE MIT]
|| -
|-
| [https://jquery.com jQuery]
|| [https://code.jquery.com/jquery-3.2.1.min.js 3.2.1]
|| [http://api.jquery.com/ Documentation]
|| [https://jquery.com/download/ Download]
|| [https://jquery.org/license/ MIT]
|| -
|-
| [https://www.telerik.com/kendo-ui/open-source-core Kendo UI Core]
|| 3.2.1
|| [https://docs.telerik.com/kendo-ui/introduction Documentation]
|| [https://www.telerik.com/download/kendo-ui-core Download]
|| [https://github.com/telerik/kendo-ui-core/blob/master/LICENSE.md Apache License, version 2.0]
|| -
|}

Thanks to the following Stack Overflow Authors:

{| class="wikitable"
|-
! Used in !! Link to Code !! Author
|-
| [[Mods: Automatic Base Detection]] || [http://stackoverflow.com/a/21027742 Used Code] || [http://stackoverflow.com/users/851273/jon-lin Jon Lin]
|}

== Using the Framework ==

* [[Using the Framework: Basics]]
* [[Using the Framework: Get Started]]
* [[Using the Framework: JavaScript Controlls]] Not Ready

== Tips and Tricks ==

* [[Tips and Tricks: CodeIgniter]]
* [[Tips and Tricks: Bootstrap]]
* [[Tips and Tricks: carouFredSel]]
* [[Tips and Tricks: Elementary CSS Hacks]]
* [[Tips and Tricks: Legacy Browser Support]]

== Details ==

=== Modifications & Enhancements of the CodeIgniter Framework ===
* [[Mods: Summary]]
* [[Mods: Catchable CodeIgniter Errors]]
* [[Mods: Automatic Base Detection]]

=== CodeCoupler Libraries ===

* [[Libraries: Master]]
** [[Libraries: Master: Components Overview]]
** [[Libraries: Master: Adding New Components]]

=== CodeCoupler Controllers ===

* [[Controllers: Asset Management]]

== Advanced ==

* [[Extending the Framework]] Not Ready

Hauptseite

2017-11-11T14:27:29Z

Tm: /* Used Libraries */

Hauptseite

2017-11-05T19:32:47Z

Tm:

Hauptseite

2017-11-05T19:32:22Z

Hauptseite

2017-11-04T23:57:37Z

Tm: /* Details */

Using the Framework: Basics

2017-11-04T21:10:14Z

Tm: /* MVC Approach */

== MVC Approach ==

CodeCoupler use CodeIgniter as base. CodeIgniter is a web application framework using the Model-View-Controller approach, which allows separation between logic and presentation. Here a little "Hello World" example:

To create a webpage you need at least a controller and a view. Create at first a file named '''test.php''' in the folder '''application/controllers''' with the following code:

<syntaxhighlight lang="php">
<?php
class Test extends CI_Controller {
public function index()
{
$this->load->view('test');
}
}
</syntaxhighlight>

Then create a file named '''test.php''' in the folder '''application/views/''' with the following code:

<syntaxhighlight lang="html">
<h1>Hello World!</h1>
</syntaxhighlight>

Now open the url '''<nowiki>http://<yourdomain>/test</nowiki>'''. You will see your first webpage created with this framework. If you look into the sourcecode you will see a complete html-structure.

For further assistance on how the underlying framework CodeIgniter works, read the very clear and thorough documentation here: http://ellislab.com/codeigniter/user_guide

== Master Template with Components Concept ==

One of the relevant differendes between CodeCoupler and CodeIgniter is that every output of a controller will be surrounded by a master template. The basic layout of the master template looks like this:

<syntaxhighlight lang="html">
<!DOCTYPE ... />
<html ... >
<head>
<charset ... />
<title> ... </title>
</head>
<body>
[YOUR CONTROLLER OUTPUT]
</body>
</html>
</syntaxhighlight>

But the master template do much more:

* Enabling JavaScript and CSS libraries using a component concept.
* Autoloading scripts and styles
* Injecting snippets from everywhere in your code into every place in the template.

Read the full documentation of the master-template library here: [[Libraries: Master]]

== Everything is Relative ==

In the most applications that are using redirections and rewrites you have to modify at least the '''RewriteBase''' if you move them from one subfolder into another. Some frameworks make our life unnecessarily difficult changing the domain name and some other need extra code to generate relative Url's.

With CodeCoupler you do not have to alter everytime configurations when migrating your application into another place. And all the links you have to use are clean and readable.

Example for HTML:
<syntaxhighlight lang="html">
<a href="controller/method/parameter">...</a>
</syntaxhighlight>

Example for JSON-Objects:
<syntaxhighlight lang="js">
{
url: "controller/method/parameter"
}
</syntaxhighlight>

For further informations how this was realized: [[Mods: Automatic Base Detection]]

== Asset Management ==

You can place assets like images, stylesheets or javascripts into a subfolder '''assets''' within your application or into the folder '''assets''' at the top of your web folder. If you have multiple application folders, the assets at the top of your web folder will be available to all your applications. Every application can override assets from the top of your web folder by creating an asset with the same name.

You have to store your different asset types in subfolders of the folder '''assets'''. Every asset type will be processed differently:

* '''css''' Put here your css files. You can optionally use SCSS Syntax and they will be automatically compressed in a production environment. More info about SCSS: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#css_extensions

* '''img''' Put here your gif, png or jpg-images. Images will be automaticaly downsized for small devices, like mobile-phones. Retina displays will be detected and the bigger image will be used if there is one, thus they show a sharp image.

* '''js''' Put here your javascript files. For now no special processing be done.

* '''etc''' Put here everything else, like pdf or flash files. For now no special processing be done.

Read more about the built-in Asset Managemenet here: [[Controllers: Asset Management]]

== Extended Form Handling ==

The whole usage of form-elements is packaged in a new form-class which encloses the existing form-validation-class and form-helper of CodeIgniter. The goal was to avoid some always recurring coding. Here some examples of what that means:

* To insert a text-field, it is not enough to write “form_input($data)”. You have to remember the validation of the field, set the value to the previous posted, set the correct class if an error occurred and so on.
* A radio-button group or a group of checkboxes you have to think much more about the whole roundtrip and validation.
* If you want to add more than one form onto one page, you have to think about the separation of the submitted data and assign to the correct form processing code.

Using the form-class you will not need doing all this. Here is a simple example of a view including a form. You do not have to do anything more in the controller than loading this view. A validation of the form will be done for you automatically based on configuration file for this form:

<syntaxhighlight>
<?=form_start('example_form')?>
<?=form_label('name')?>: <?=form_field('name')?> 
<?=form_label('amount')?>: <?=form_field('amount')?> 
 
<?=form_submit()?>
<?=form_end()?>
 
<?=form_errors()?>
<?=form_confirmation()?>
</syntaxhighlight>

Read the full documentation of the form-handling library here: [[Libraries: Form]]

== Multilanguage Routing ==

- tbd -

== Default Enabled Components ==

- tbd -

Using the Framework: Basics

2017-11-04T21:09:38Z

Tm: /* MVC Approach */

== MVC Approach ==

CodeCoupler use CodeIgniter as base. CodeIgniter is a web application framework using the Model-View-Controller approach, which allows separation between logic and presentation. Here a little "Hello World" example:

To "write" a page you need at least a controller and a view. Create at first a file named '''test.php''' in the folder '''application/controllers''' with the following code:

<syntaxhighlight lang="php">
<?php
class Test extends CI_Controller {
public function index()
{
$this->load->view('test');
}
}
</syntaxhighlight>

Then create a file named '''test.php''' in the folder '''application/views/''' with the following code:

<syntaxhighlight lang="html">
<h1>Hello World!</h1>
</syntaxhighlight>

Now open the url '''<nowiki>http://<yourdomain>/test</nowiki>'''. You will see your first webpage created with this framework. If you look into the sourcecode you will see a complete html-structure.

For further assistance on how the underlying framework CodeIgniter works, read the very clear and thorough documentation here: http://ellislab.com/codeigniter/user_guide

== Master Template with Components Concept ==

One of the relevant differendes between CodeCoupler and CodeIgniter is that every output of a controller will be surrounded by a master template. The basic layout of the master template looks like this:

<syntaxhighlight lang="html">
<!DOCTYPE ... />
<html ... >
<head>
<charset ... />
<title> ... </title>
</head>
<body>
[YOUR CONTROLLER OUTPUT]
</body>
</html>
</syntaxhighlight>

But the master template do much more:

* Enabling JavaScript and CSS libraries using a component concept.
* Autoloading scripts and styles
* Injecting snippets from everywhere in your code into every place in the template.

Read the full documentation of the master-template library here: [[Libraries: Master]]

== Everything is Relative ==

In the most applications that are using redirections and rewrites you have to modify at least the '''RewriteBase''' if you move them from one subfolder into another. Some frameworks make our life unnecessarily difficult changing the domain name and some other need extra code to generate relative Url's.

With CodeCoupler you do not have to alter everytime configurations when migrating your application into another place. And all the links you have to use are clean and readable.

Example for HTML:
<syntaxhighlight lang="html">
<a href="controller/method/parameter">...</a>
</syntaxhighlight>

Example for JSON-Objects:
<syntaxhighlight lang="js">
{
url: "controller/method/parameter"
}
</syntaxhighlight>

For further informations how this was realized: [[Mods: Automatic Base Detection]]

== Asset Management ==

You can place assets like images, stylesheets or javascripts into a subfolder '''assets''' within your application or into the folder '''assets''' at the top of your web folder. If you have multiple application folders, the assets at the top of your web folder will be available to all your applications. Every application can override assets from the top of your web folder by creating an asset with the same name.

You have to store your different asset types in subfolders of the folder '''assets'''. Every asset type will be processed differently:

* '''css''' Put here your css files. You can optionally use SCSS Syntax and they will be automatically compressed in a production environment. More info about SCSS: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#css_extensions

* '''img''' Put here your gif, png or jpg-images. Images will be automaticaly downsized for small devices, like mobile-phones. Retina displays will be detected and the bigger image will be used if there is one, thus they show a sharp image.

* '''js''' Put here your javascript files. For now no special processing be done.

* '''etc''' Put here everything else, like pdf or flash files. For now no special processing be done.

Read more about the built-in Asset Managemenet here: [[Controllers: Asset Management]]

== Extended Form Handling ==

The whole usage of form-elements is packaged in a new form-class which encloses the existing form-validation-class and form-helper of CodeIgniter. The goal was to avoid some always recurring coding. Here some examples of what that means:

* To insert a text-field, it is not enough to write “form_input($data)”. You have to remember the validation of the field, set the value to the previous posted, set the correct class if an error occurred and so on.
* A radio-button group or a group of checkboxes you have to think much more about the whole roundtrip and validation.
* If you want to add more than one form onto one page, you have to think about the separation of the submitted data and assign to the correct form processing code.

Using the form-class you will not need doing all this. Here is a simple example of a view including a form. You do not have to do anything more in the controller than loading this view. A validation of the form will be done for you automatically based on configuration file for this form:

<syntaxhighlight>
<?=form_start('example_form')?>
<?=form_label('name')?>: <?=form_field('name')?> 
<?=form_label('amount')?>: <?=form_field('amount')?> 
 
<?=form_submit()?>
<?=form_end()?>
 
<?=form_errors()?>
<?=form_confirmation()?>
</syntaxhighlight>

Read the full documentation of the form-handling library here: [[Libraries: Form]]

== Multilanguage Routing ==

- tbd -

== Default Enabled Components ==

- tbd -

Hauptseite

2017-11-04T21:08:37Z

Tm:

2017-05-09T09:30:53Z

Tm: /* Used Components */

{{Quote|If I have seen further it is by standing on the shoulders of giants.|Isaac Newton following Bernard of Chartres http://en.wikipedia.org/wiki/Standing_on_the_shoulders_of_giants}}

CodeCoupler is a Best-Of-Breed-Compilation and Best-Practice Webdevelopment-Framework. Using this Framework should speed up developing web applications. The goal was to enclose the most used code and libraries in a easy-to-use framework, hoping never have to write the basics of a web application again.

== Used Components ==

{| class="wikitable"
|-
| CodeIgniter 3.1.4
|| [http://codeigniter.com/ Homepage]
|| [https://www.codeigniter.com/user_guide/ Documentation]
|| [https://github.com/bcit-ci/CodeIgniter/archive/3.1.4.zip Download]
|| [https://www.codeigniter.com/user_guide/license.html Licence: MIT]
|}

Thanks to the following Stack Overflow Authors:

{| class="wikitable"
|-
! Used in !! Link to Code !! Author
|-
| [[Mods: Automatic Base Detection]] || [http://stackoverflow.com/a/21027742 Used Code] || [http://stackoverflow.com/users/851273/jon-lin Jon Lin]
|}

== Using the Framework ==

* [[Using the Framework: Basics]]
* [[Using the Framework: Get Started]]
* [[Using the Framework: JavaScript Controlls]] Not Ready

== Tips and Tricks ==

* [[Tips and Tricks: CodeIgniter]]
* [[Tips and Tricks: Bootstrap]]
* [[Tips and Tricks: carouFredSel]]
* [[Tips and Tricks: Elementary CSS Hacks]]
* [[Tips and Tricks: Legacy Browser Support]]

== Details ==

* [[Mods: Summary]]
** [[Mods: Automatic Base Detection]]
* [[Libraries: Master]]
** [[Libraries: Master: Components Overview]]
** [[Libraries: Master: Adding New Components]]
* [[Controllers: Asset Management]]

== Advanced ==

* [[Extending the Framework]] Not Ready