Using the Framework: Basics: Unterschied zwischen den Versionen

Aus CodeCoupler Wiki
Zur Navigation springen Zur Suche springen
← Zum vorherigen Versionsunterschied
Tm (Diskussion | Beiträge)
447 Bearbeitungen
Tm (Diskussion | Beiträge)
447 Bearbeitungen
 
(33 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
{{Hint|'''Do you know CodeIgniter?'''<br/>CodeCoupler use CodeIgniter as base. All those people who knows CodeIgniter should read this page carefully. It explains the most important differences.}}
== MVC Approach ==
== MVC Approach ==


First of all you should learn to create a webpage. CodeCoupler use CodeIgniter as base. CodeIgniter is a web application framework using the Model-View-Controller approach, which allows separation between logic and presentation. To "write" a page you need at least a controller and a view. Here a little "Hello World" example:
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:


First of all create a file named '''test.php''' in the folder '''application/controllers/''' with the following code:
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>
<syntaxhighlight lang="php">
<?php
<?php
class Test extends CI_Controller {
class Test extends CI_Controller {
Zeile 19: Zeile 17:
Then create a file named '''test.php''' in the folder '''application/views/''' with the following code:
Then create a file named '''test.php''' in the folder '''application/views/''' with the following code:


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


You do not have to write a complete html-structure. CodeCoupler will do it for you. Now open the url <nowiki>"http://<yourdomain>/test"</nowiki>. You will see your first webpage created with this framework.
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.


To understand the whole CodeIgniter framework you should read the very clear and thorough documentation here: http://codeigniter.com/user_guide/index.html
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 ==
== Master Template with Components Concept ==


In contrast to the basic CodeIgniter framework, every output of a controller will be surrounded by a master-template. The basic layout of the master template looks like this:
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="html4strict">
<syntaxhighlight lang="html">
<!DOCTYPE ... />
<!DOCTYPE ... />
<html ... >
<html ... >
Zeile 43: Zeile 41:
</html>
</html>
</syntaxhighlight>
</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]]
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'''<br>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'''<br>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'''<br>Put here your javascript files. For now no special processing be done.
* '''etc'''<br>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')?>:<br /><?=form_field('name')?> <br /><br />
<?=form_label('amount')?>:<br /><?=form_field('amount')?> <br /><br />
<br />
<?=form_submit()?>
<?=form_end()?>
<br />
<?=form_errors()?>
<?=form_confirmation()?>
</syntaxhighlight>
Read the full documentation of the form-handling library here: [[Libraries: Form]]


== Multilanguage Routing ==
== Multilanguage Routing ==

Aktuelle Version vom 4. November 2017, 21:10 Uhr

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: 

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

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

<h1>Hello World!</h1>

Now open the url http://<yourdomain>/test. 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: 

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

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: 

<a href="controller/method/parameter">...</a>

Example for JSON-Objects: 

{
   url: "controller/method/parameter"
}

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:

  • 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: 

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

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

Multilanguage Routing

- tbd -

Default Enabled Components

- tbd -

Abgerufen von „https://archive.codecoupler.org/index.php?title=Using_the_Framework:_Basics&oldid=429“