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
 
(43 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
== 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.
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:


Here is a very quick "Hello World" example: [[Hello World]]
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:


To understand the whole CodeIgniter framework you should read the very clear and thorough documentation here: http://codeigniter.com/user_guide/index.html
<syntaxhighlight lang="php">
<?php
class Test extends CI_Controller {
public function index()
{
$this->load->view('test');
}
}
</syntaxhighlight>


{{Hint|'''Do you know CodeIgniter?'''<br/>There is one big difference you should know. Please read the next chapter '''Master Template'''. In contrast to the pure CodeIgniter framework, CodeCoupler will surround every controller ouput with a master template.}}
Then create a file named '''test.php''' in the folder '''application/views/''' with the following code:


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


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


<syntaxhighlight lang="html4strict">
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 ... />
<!DOCTYPE ... />
<html ... >
<html ... >
Zeile 26: Zeile 42:
</syntaxhighlight>
</syntaxhighlight>


Here is a short overview where you can configure the behaviour of the master-template:
But the master template do much more:


* '''config/master.php:''' Set the DOCTYPE and enable JavaScript-Libraries by default.
* Enabling JavaScript and CSS libraries using a component concept.
* '''language/english/master_lang.php:''' Set charset, page-language, title. You can set for every language of your application different configurations.
* Autoloading scripts and styles
* '''views/master/head.php:''' Static content for the <head>.
* Injecting snippets from everywhere in your code into every place in the template.
* '''views/master/bodystart.php:''' Static content at the beginning of <body>.
* '''views/master/bodyend.php:''' Static content at the end of <body>.


Over and above that you use the functions '''$this->master->add_dyn_head()''', '''$this->master->add_dyn_bodystart()''' and '''$this->master->add_dyn_bodyend()''' to add dynamically content into the <head> and <body> form everywhere in your application.
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.


Read the full documentation of the master-template library here: [[Libraries: Master]]
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 ==
 
- tbd -
 
== Default Enabled Components ==
 
- tbd -

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“