Joomla! Documentation - User contributions [en]

J3.x:Developing a component frontend update function

2016-04-26T07:55:52Z

Skyhigh: Developing a component frontend update function

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

This is a multiple-article series of tutorials on how to develop a [[S:MyLanguage/Component|Component]] for frontend editing of private data by users. The tutorial also describes how to upload and download data.

Begin with the Introduction, and navigate the articles in this series by using the navigation button at the bottom or the box to the right (the ''Articles in this series'').

== 1 Introduction ==

Joomla in the first place is a Content Management System for a website with articles, blogs, forums etc. This serves well for providing or sharing public information.

When the site is targeting at a rather distinct group of users like clients or members, it is often useful to enable users to login to the system to store and retrieve personal data from the database. A typical example might be an address book.

The backend of Joomla features quite some functionality to search and edit database records for administrative purposes. There are also many extensions with such functionality, so Joomla is clearly capable of doing a decent job in this respect.

This tutorial aims to provide a guideline for creating a frontend component yourself for users to access and enter private data on the server of your website, in case the available extensions do not satisfy your needs. The tutorial starts more or less where the HelloWorld introductory tutorial of the Joomla Documentation site ends.

=== 1.1 Documentation and source files for this tutorial ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/wiki Joomla-Hello-Frontend wiki]

=== 1.2 Starting point ===

This guide continues from the tutorial 'Developing an MVC Component' (aka the 'Hello World' tutorial) from this site: [https://docs.joomla.org/J3.x:Developing_an_MVC_Component J3.x:Developing an MVC Component] .

The starting point for the source files is: [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip github.com/scionescire/Joomla-3.2-HelloWorld-Component-step-15] .

=== 1.3 Prerequisites ===

For this tutorial it is assumed that you have a recent Joomla 3.x version properly setup at a server, including a suitable version of PHP and a database. Further it is assumed that you have access to the server, both to the files and the database.

For my exercises I use Joomla 3.5 on a local Fedora 23 system with PHP 5.6.19, MariaDB v 10.0.0.23 and phpAdmin v4.5.5. So this tutorial will refer to 'localhost' as URL for the website, and /var/www/html as root folder for the Joomla website.

This tutorial assumes that you have a good understanding of the HelloWorld tutorial. As the starting point for that source is step 15, the present tutorial also starts with sequence number 15 to align with the preceding one.

=== 1.4 Disclaimer ===

I am quite new to Joomla and found it hard to find the proper development information. In this guideline I wrote down my findings as help for others looking for the same information. I am not an expert in Joomla, so can certainly not state that the guideline is free from errors.

<noinclude><div class="row">
<div class="large-4 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Initial_version|Let's start with the Initial version|class=expand success}}
</div></div></noinclude>

{{Version/tutor|3.4,3.5}}
[[Category:Joomla! 3.x]]
[[Category:Beginner Development]]
[[Category:Tutorials in a Series]]
[[Category:Development]]
[[Category:Tutorials]]
[[Category:Component Development]]

J3.x:Developing a component frontend update function/Import with summary screen

2016-04-25T17:50:03Z

Skyhigh: Import with summary screen

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 24 Import with summary screen ==

=== 24.1 Description ===

The previous step of this tutorial describes an import process that updates the database without feedback to the user about which records have been updated. In some cases you might want to have more control on this process, ranging from just displaying a summary of the updated records to an explicit acknowledgment for each intended change.

This step describes the simple case of displaying a page listing the changed records after the update. It is just an example for adding user validation to import functions.

=== 24.2 The changes ===

==== 24.2.1 Files: ====
* README.md
* helloworld.xml

Again, these files have been updated to reflect version info.

==== 24.2.2 admin/views/helloworlds/view.html.php ====

A button is added for selecting checked import.

==== 24.2.3 admin/views/helloimport ====

The button displays a separate view page for handling the import. The page contains a button to select the import file to upload. Execute the import by clicking the'' 'Upload' ''button, or cancel by clicking'' 'Go Back'.''

==== 24.2.4 admin/views/helloimport/tmpl/default.php ====

This layout contains the form with those buttons. The'' 'Upload' ''button submits the form and posts the import data to the server.

==== 24.2.5 admin/views/helloimport/view.html.php ====

The view starts the layout template of the previous section, and also catches the posted data after clicking the'' 'Upload' ''button.

When posted data is received, it is imported into the database using the ''import_csv()'' and ''import_xls()'' methods, just like the controller did in the previous step 23.2.4 of this tutorial. In this step, however, these functions also create a table with the imported data which is then displayed in the current view.

=== 24.3 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-24.zip Download Joomla-Hello-Front-End v1-24]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/5a38bc67c0ee7f0c14fdd159699f8bd7965bf43d View Joomla-Hello-Front-End v1-24]

=== 24.4 Testing the features of this step ===
* Perform the same test as in the previous section 23.4 of this tutorial.
* Verify that the table lists the changes from the uploaded import file.

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/csv_and_xlsx_import|Prev: csv and xlsx import|class=expand success}}</div>
</div></noinclude>

J3.x:Developing a component frontend update function

2016-04-23T20:37:07Z

Skyhigh:

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

This is a multiple-article series of tutorials on how to develop a [[S:MyLanguage/Component|Component]] for frontend editing of private data by users. The tutorial also describes how to upload and download data.

Begin with the Introduction, and navigate the articles in this series by using the navigation button at the bottom or the box to the right (the ''Articles in this series'').

== 1 Introduction ==

Joomla in the first place is a Content Management System for a website with articles, blogs, forums etc. This serves well for providing or sharing public information.

When the site is targeting at a rather distinct group of users like clients or members, it is often useful to enable users to login to the system to store and retrieve personal data from the database. A typical example might be an address book.

The backend of Joomla features quite some functionality to search and edit database records for administrative purposes. There are also many extensions with such functionality, so Joomla is clearly capable of doing a decent job in this respect.

This tutorial aims to provide a guideline for creating a frontend component yourself for users to access and enter private data on the server of your website, in case the available extensions do not satisfy your needs. The tutorial starts more or less where the HelloWorld introductory tutorial of the Joomla Documentation site ends.

=== 1.1 Documentation and source files for this tutorial ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/wiki Joomla-Hello-Frontend wiki]

=== 1.2 Starting point ===

This guide continues from the tutorial 'Developing an MVC Component' (aka the 'Hello World' tutorial) from this site: [https://docs.joomla.org/J3.x:Developing_an_MVC_Component J3.x:Developing an MVC Component] .

The starting point for the source files is: [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip github.com/scionescire/Joomla-3.2-HelloWorld-Component-step-15] .

=== 1.3 Prerequisites ===

For this tutorial it is assumed that you have a recent Joomla 3.x version properly setup at a server, including a suitable version of PHP and a database. Further it is assumed that you have access to the server, both to the files and the database.

For my exercises I use Joomla 3.5 on a local Fedora 23 system with PHP 5.6.19, MariaDB v 10.0.0.23 and phpAdmin v4.5.5. So this tutorial will refer to 'localhost' as URL for the website, and /var/www/html as root folder for the Joomla website.

This tutorial assumes that you have a good understanding of the HelloWorld tutorial. As the starting point for that source is step 15, the present tutorial also starts with sequence number 15 to align with the preceding one.

=== 1.4 Disclaimer ===

I am quite new to Joomla and found it hard to find the proper development information. In this guideline I wrote down my findings as help for others looking for the same information. I am not an expert in Joomla, so can certainly not state that the guideline is free from errors.

<noinclude><div class="row">
<div class="large-4 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Initial_version|Let's start with the Initial version|class=expand success}}
</div></div></noinclude>

[[Category:Joomla! 3.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]

{{Version/tutor|3.4,3.5}}

Chunk:Developing a component frontend update function - Contents

2016-04-22T18:11:43Z

Skyhigh: Articles in this Series - Contents

{{Joomla version|version=3.x|comment=Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing a component frontend update function}}
{{-}}
<div class="large-4 columns" style="float:right; background:#fff;margin:0 0 1.0em 1.0em;">
<div class="large-12 columns panel radius mw-collapsible" style="width:100%;background:#fff;font-size:.8em">
<big>'''Articles in this Series'''</big>
<div class="large-12 columns panel mw-collapsible-content" style="border:none; background:#fff; min-width:100%;">

# [[J3.x:Developing_a_component_frontend_update_function|Introduction]]
# [[J3.x:Developing_a_component_frontend_update_function/Initial_version|Initial version]]
# [[J3.x:Developing_a_component_frontend_update_function/Simple_frontend_data_entry|Simple frontend data entry]]
# [[J3.x:Developing_a_component_frontend_update_function/Record_item_editing_page|Record item editing page]]
# [[J3.x:Developing_a_component_frontend_update_function/Record_list_view_page|Record list view page]]
# [[J3.x:Developing_a_component_frontend_update_function/Rethink_frontend_permissions|Rethink frontend permissions]]
# [[J3.x:Developing_a_component_frontend_update_function/First_try_at_csv_export|First try at csv export]]
# [[J3.x:Developing_a_component_frontend_update_function/Improved_export_function|Improved export function]]
# [[J3.x:Developing_a_component_frontend_update_function/Excel_xlsx_export|Excel xlsx export]]
# [[J3.x:Developing_a_component_frontend_update_function/csv_and_xlsx_import|csv and xlsx import]]
# [[J3.x:Developing_a_component_frontend_update_function/Import_with_summary_screen|Import with summary screen]]

</div></div></div>
<noinclude>{{-}}</noinclude>

J3.x:Developing a component frontend update function

2016-04-22T18:08:33Z

Skyhigh: Developing a component frontend update function

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

This is a multiple-article series of tutorials on how to develop a [[S:MyLanguage/Component|Component]] for frontend editing of private data by users. The tutorial also describes how to upload and download data.

Begin with the Introduction, and navigate the articles in this series by using the navigation button at the bottom or the box to the right (the ''Articles in this series'').

== 1 Introduction ==

Joomla in the first place is a Content Management System for a website with articles, blogs, forums etc. This serves well for providing or sharing public information.

When the site is targeting at a rather distinct group of users like clients or members, it is often useful to enable users to login to the system to store and retrieve personal data from the database. A typical example might be an address book.

The backend of Joomla features quite some functionality to search and edit database records for administrative purposes. There are also many extensions with such functionality, so Joomla is clearly capable of doing a decent job in this respect.

This tutorial aims to provide a guideline for creating a frontend component yourself for users to access and enter private data on the server of your website, in case the available extensions do not satisfy your needs. The tutorial starts more or less where the HelloWorld introductory tutorial of the Joomla Documentation site ends.

=== 1.1 Documentation and source files for this tutorial ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/wiki Joomla-Hello-Frontend wiki]

=== 1.2 Starting point ===

This guide continues from the tutorial 'Developing an MVC Component' (aka the 'Hello World' tutorial) from this site: [https://docs.joomla.org/J3.x:Developing_an_MVC_Component J3.x:Developing an MVC Component] .

The starting point for the source files is: [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip github.com/scionescire/Joomla-3.2-HelloWorld-Component-step-15] .

=== 1.3 Prerequisites ===

For this tutorial it is assumed that you have a recent Joomla 3.x version properly setup at a server, including a suitable version of PHP and a database. Further it is assumed that you have access to the server, both to the files and the database.

For my exercises I use Joomla 3.5 on a local Fedora 23 system with PHP 5.6.19, MariaDB v 10.0.0.23 and phpAdmin v4.5.5. So this tutorial will refer to 'localhost' as URL for the website, and /var/www/html as root folder for the Joomla website.

This tutorial assumes that you have a good understanding of the HelloWorld tutorial. As the starting point for that source is step 15, the present tutorial also starts with sequence number 15 to align with the preceding one.

=== 1.4 Disclaimer ===

I am quite new to Joomla and found it hard to find the proper development information. In this guideline I wrote down my findings as help for others looking for the same information. I am not an expert in Joomla, so can certainly not state that the guideline is free from errors.

<noinclude><div class="row">
<div class="large-4 columns">{{Basic button|/J3.x:Developing_a_component_frontend_update_function/Initial_version|Let's start with the Initial version|class=expand success}}
</div></div></noinclude>

[[Category:Joomla! 3.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]

{{Version/tutor|3.4,3.5}}

J3.x:Developing a component frontend update function/Improved export function

2016-04-22T17:37:23Z

Skyhigh: Improved export function

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 21 Improved csv export ==

=== 21.1 Description ===

As explained in the previous chapters, Joomla usually displays data in html format. However, it does support other formats as well, including the 'raw' format meaning that in that case Joomla does not perform any layout operations at all for the data.

That is exactly the way to go for downloading an export file as generally we have to assume that such file just contains 'binary' data.

=== 21.2 The changes ===

==== 21.2.1 Files: ====
* README.md
* helloworld.xml
* admin/button/index.html

Again, have been updated to reflect version info. A new directory admin/button is created in this chapter, and therefore an additional'' admin/button/index.html ''placeholder file as well. ''helloworld.xml'' is updated accordingly.

==== 21.2.2 admin/button/rawformat.php ====

In Joomla processing of a page begins with starting the concerning controller. To indicate that processing should yield raw data rather than an html page, the controller must receive the'' 'format=raw' ''input parameter. These parameter is typically provided by adding an hidden input tag to the form that starts the controller. Like:
<form action="index.php?option=com_helloworld" method="post" name="adminForm">
...
<input type="hidden" name="format" value="raw"/>
</form>
The HelloWorld database items are handled from the HelloWorld admin page with form:
admin/components/com_helloworld/views/helloworlds/tmpl/default.php
or its frontend counterpart. The available functions like create new item, delete an item or update an item are offered to the user as buttons above this form. Our export button is here as well.

Pushing a button typically navigates to another web form, like the edit form to update a particular item. These forms are in html format, so including the 'format=raw' input tag permanently to the above form definition file tmpl/default.php would cause a conflict for these functions.

So only pushing our export button should submit the 'format=raw' tag. As this tag is not a standard part of the form, the button function will add the tag on the fly as post variable. Joomla has no standard button function that allows this, so we define an additional button called'' 'RawFormat'.'' It is defined in ''admin/button/rawformat.php'' and basically just clones the Joomla 'Standard' button replacing the reference to the 'Joomla.submitbutton' javascript by a reference to the 'RawFormatSubmitbutton' javascript. This javascript submits (posts) the form data to the server, and this will schedule the controller.

==== 21.2.3 admin/views/helloworlds/submitbutton.js ====

This javascript injects the tag <tt>'<input type="hidden" name="format" value="raw"/>'</tt> in the form. Thereafter it submits the form using the'' 'Joomla.submitform(task)' ''call, just like the Joomla 'Standard' button would do. The input tag is reset to html format after this call for future form submissions.

==== 21.2.4 admin/views/helloworlds/view.html.php ====

This php file prepares the display of the HelloWorld management page. It is adapted to include the above javascript 21.2.3 and display our new 'RawFormat' export button in stead of the previous one.

==== 21.2.5 admin/controllers/helloexport.raw.php ====

This is almost the same file as the previous 'admin/controllers/helloexport.php' except that its name has been changed in view of Joomla rules. Joomla expects a controller for raw format to have a filename <controller>.raw.php, although the class name is still <component>Controller<controller>, so 'HelloWorldControllerHelloExport' in this case.

The big difference with the previous controller version is that the application does not need to be forcibly closed as Joomla now understands from the 'format=raw' tag that the controller yields a raw format layout and embedding in html is not required anymore.

The final statements
$app->sendHeaders();
$app->close();
therefore have been removed as calling these functions will now be performed by Joomla in the standard way when the controller finishes the 'exportcsv' function.

=== 21.3 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-21.zip Download Joomla-Hello-Front-End v1-21]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/ef3fa05c04b68320f90658f264fba16bdf386777 View Joomla-Hello-Front-End v1-21]

=== 21.4 Testing the features of this step ===
* Perform the same test as in the previous section 20.4 , and verify that the export works as it did before.

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/First_try_at_csv_export|Prev: First try at csv export|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Excel_xlsx_export|Next: Excel xlsx export|class=expand}}</div>
</div></noinclude>

J3.x:Developing a component frontend update function/First try at csv export

2016-04-22T17:34:18Z

Skyhigh: First try at csv export

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 20 First try at csv file export ==

=== 20.1 Description ===

A browser in general is used for interactively retrieving and updating specific data. In many cases it is useful to import or export bulk data for offline processing. This chapter of the tutorial present a first example of exporting data in csv format.

Joomla is tuned for user interaction by means of a browser, so primarily uses html format. An exported data file, however, can be in any format, and typically can not be assumed to be html. This step in the tutorial therefore takes a rather blunt approach in inhibiting Joomla to embed the exported data in html. This is just a shortcut for this chapter, and a more sound approach is presented in the next one.

Just like in the previous steps of this tutorial, the functionality has been implemented both in the backend and the frontend, with (almost) equal code. The next chapter therefore only describes the backend files, but the description is equally valid for the frontend files.

=== 20.2 The changes ===

==== 20.2.1 Files: ====
* README.md
* helloworld.xml

Again, these files have been updated to reflect version info only.

==== 20.2.2 admin/views/helloworlds/view.html.php ====

This step extends the item list page with a button to start the export of the selected records (items) as a csv file for download. The 'view' method is therefore extended with the code to create that button.

The 'view' method only enables functions for which the user has permission. This is checked with the 'canDo→get()' methods. The export button is enabled if the user has edit permission ('core-edit').

==== 20.2.3 admin/models/helloworld.php ====

The model has been extended with a method to retrieve a selected set of record items in one go in stead of fetching one at a time. Each records is stored in an array where each element contains one field. The record arrays in turn are collected in another array, so we have in fact a two dimensional array:'' $content.''

The first row of'' $content ''contains the names of the fields. For simplicity of this example, only the fields id, uid, greeting and category are exported.

For large amounts of data a two dimensional array can become inefficient, both in memory usage and performance, and a more elaborate implementation may be needed. That however is not a Joomla specific issue, and for this tutorial we just keep it at this.

==== 20.2.4 admin/controllers/helloexport.php ====

This is the tricky part. The normal data processing of Joomla consist of retrieving data, preparing it for display and then rendering the data in the proper format. These steps are typically implemented in files like'' controllers/helloworld.php,'' a 'view method' in'' helloworld/view.html.php ''and a layout template in'' helloworld/tmpl/default.php.'' In case of an export there is no display, so the last two steps are omitted.

So all the work of compiling data into an export file can be performed in the controller. To be fair, also preparing data for a specific export file layout constitutes an amount of formatting, so arguably that part of the processing could be deferred to a separate 'view' method. This might even be architecturally sounder and easier to implement. For this tutorial however we take the brute force approach of doing all the work in a controller.

As data collection for an export is a different task than collection for display, a separate controller'' 'helloexport.php' ''is defined in the'' 'controllers' ''directory. It performs a couple of steps: first it retrieves the data for the export from the view parameters (''$pks'') and database (''$content'' array of records). Then with the'' 'foreach' ''loop it converts ''$content'' to lines for the csv file, and exports those lines with the 'print' statement.

Next, the controller transforms the'' 'print' ''data into a downloadable file by specifying a content type header. The concerning code starts with the comment'' '// write the header ...' .''

For more background information see for example [http://stackoverflow.com/questions/19781389/joomla-force-file-download-csv-export stackoverflow: joomla force file download csv export] .

Although the data export is now complete, there is still one issue to tackle. Joomla by default expects all output to refer to a section of a web page, so embeds output with html for the other web page sections, like title, standard menus etc. Without further action this extra html code will be written to the downloaded export file when the'' 'exportcsv' ''function finishes and returns to Joomla. For this tutorial we prevent this by bluntly forcing the application to close, thereby inhibiting further processing of the output data by Joomla. This is the code after comment'' '// Close the application ...' .''

This approach works well but is rather clumsy from an architectural point of view. Then next step in this tutorial will offer a cleaner approach.

=== 20.3 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-20.zip Download Joomla-Hello-Front-End v1-20]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/4011ff3dc73ab756cd83f9b6176f682af6978d04 View Joomla-Hello-Front-End v1-20]

=== 20.4 Testing the features of this step ===
* Open the overview list page of all message items. You can do so either using the backend by login in as administrator, or using the frontend by logging in as user with sufficient permissions to perform the export.
* Select the message items that you want to export.
* Perform the export and download the selected items by clicking '''Export csv'''.
* Inspect the downloaded file. It will contain the fields id, uid, greeting and category of the selected items.

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Rethink_frontend_permissions|Prev: Rethink frontend permissions|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Improved_export_function|Next: Improved export function|class=expand}}</div>
</div></noinclude>

J3.x:Developing a component frontend update function/Excel xlsx export

2016-04-22T17:32:12Z

Skyhigh: Excel xlsx export

J3.x:Developing a component frontend update function/Import with summary screen

2016-04-22T17:23:43Z

Skyhigh: Import with summary screen

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 24 Import with summary screen ==

=== 24.1 Description ===

The previous step of this tutorial describes an import process that updates the database without feedback to the user about which records have been updated. In some cases you might want to have more control on this process, ranging from just displaying a summary of the updated records to an explicit acknowledgment for each intended change.

This step describes the simple case of displaying a page listing the changed records after the update. It is just an example for adding user validation to import functions.

=== 24.2 The changes ===

==== 24.2.1 Files: ====
* README.md
* helloworld.xml

Again, these files have been updated to reflect version info.

==== 24.2.2 admin/views/helloworlds/view.html.php ====

A button is added for selecting checked import.

==== 24.2.3 admin/views/helloimport ====

The button displays a separate view page for handling the import. The page contains a button to select the import file to upload. Execute the import by clicking the'' 'Upload' ''button, or cancel by clicking'' 'Go Back'.''

==== 24.2.4 admin/views/helloimport/tmpl/default.php ====

This layout contains the form with those buttons. The'' 'Upload' ''button submits the form and posts the import data to the server.

==== 24.2.5 admin/views/helloimport/view.html.php ====

The view starts the layout template of the previous section, and also catches the posted data after clicking the'' 'Upload' ''button.

When posted data is received, it is imported into the database using the ''import_csv()'' and ''import_xls()'' methods, just like the controller did in the previous step 23.2.4 of this tutorial. In this step, however, these functions also create a table with the imported data which is then displayed in the current view.

=== 24.3 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-24.zip Download Joomla-Hello-Front-End v1-24]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/053e1de5a7567b889ee8a2f0d2327e6f21c70e89 View Joomla-Hello-Front-End v1-24]

=== 24.4 Testing the features of this step ===
* Perform the same test as in the previous section 23.4 of this tutorial.
* Verify that the table lists the changes from the uploaded import file.

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/csv_and_xlsx_import|Prev: csv and xlsx import|class=expand success}}</div>
</div></noinclude>

J3.x:Developing a component frontend update function/csv and xlsx import

2016-04-22T17:20:12Z

Skyhigh: csv and xlsx import

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 23 csv and xlsx import ==

=== 23.1 Description ===

If your Joomla application requires updates with a substantial amount of data, it may be more convenient to have the user collect the data offline and upload it in a file than to require the data to be entered interactively. Fortunately, it is quite easy to upload files using html and php facilities, but it does require carefully designed code to avoid upload problems or security issues. See for instance [http://www.w3schools.com/php/php_file_upload.asp w3schools.com] or [http://php.net/manual/en/features.file-upload.post-method.php php.net] .

File upload is based on an html form that includes an ''<input type=”file”>'' tag. This ''<input>'' tag is displayed as a button, which pops up a file selection dialog when clicked. The data from the file will be posted to the server when the form is submitted, much like data that a user has entered by filling in an ''<input type="text">'' text field.

The upload functionality is implemented by means of the following classes:
* first, an upload button is defined that is attached to a form with the ''<input type=”file”>'' tag. When this button is clicked, a file selection dialog is displayed and the user can submit the file for upload.The button is defined in'' 'admin/button/importfile.php' .''
* The uploaded file is received as post data by controller'' 'admin/controllers/helloimport.php' .''
* The data is stored in the database by model class'' 'admin/models/helloimport.php' .''

=== 23.2 The changes ===

==== 23.2.1 Files: ====
* README.md
* helloworld.xml

Again, these files have been updated to reflect version info.

==== 23.2.2 admin/button/importfile.php ====

This file defines a button class of type'' 'importFile' ''which inserts a form with the ''<input type=”file”>'' button in the view presented to the user.

==== 23.2.3 admin/views/helloworlds/view.html.php ====

This view is updated to include the above button.

==== 23.2.4 admin/controllers/helloimport.php ====

This controller receives the uploaded data. It has two main entrypoints: ''importcsv()'' for processing an uploaded csv file, and ''importxls()'' for an uploaded Excel file. The Excel data is read using the ''PHPexcel'' package, as described in the export chapters 22 of this tutorial.

==== 23.2.5 admin/models/helloimport.php ====

The database is updated with this model class. For simplicity of this tutorial, only the fields'' 'id', 'uid' ''and'' 'greeting' ''are imported.

=== 23.3 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-23.zip Download Joomla-Hello-Front-End v1-23]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/c84f0dc262a3fec2cc3455972ba510f61a4fc2a9 View Joomla-Hello-Front-End v1-23]

=== 23.4 Testing the features of this step ===
* Create a csv or Excel file to import. You can use a previously exported file and adapt that, or you can create a new file from scratch.
* Log in either the backend or the frontend as a user with upload permission.
* Upload the file by clicking'' 'Import csv' ''for a csv import file, or'' 'Import xls' ''for an Excel file.
* Check the import by inspecting the item list overview page, and/or the item edit page.

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Excel_xlsx_export|Prev: Excel xlsx export|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Import_with_summary_screen|Next: Import with summary screen|class=expand}}</div>
</div></noinclude>

J3.x:Developing a component frontend update function/Excel xlsx export

2016-04-21T20:15:54Z

Skyhigh: Excel xlsx export

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 22 Excel export using PHPExcel ==

=== 22.1 Description ===

As an example of a more elaborate export feature the HelloWorld version of the previous step has been enhanced with an option to download the data from the database as an xlsx Excel file. For the conversion the PHPExcel packages is used. The current [https://github.com/PHPOffice/PHPExcel PHPExcel] version can be [https://github.com/PHPOffice/PHPExcel/archive/1.8.zip downloaded here] .

=== 22.2 Install PHPExcel ===

The installation of PHPExcel is quite straightforward as explained in the [https://github.com/PHPOffice/PHPExcel/wiki PHPExcel wiki] .The download for the current version 1.8.1 consists of a zip archive, which contains a directory tree 'PHPExcel-1-8-1' that looks like:
Classes/
PHPExcel/
...
PHPExcel.php
Documentation/
Examples/
...
We only need the Classes directory. Copy that directory to a suitable location in the web branch on your web server, for instance to the 'lib' directory in that branch. So if the root of your server web branch $_SERVER['DOCUMENT_ROOT'] is /var/www/html, then the Classes directory should be copied to /var/www/html/lib/Classes, making it look like:
/var/www/html/
administrator/
...
components/
...
lib/
Classes/
PHPExcel/
...
PHPExcel.php
libraries/
...
Obviously this list just shows a few directories that should be familiar to you after studying the Joomla tutorials.

=== 22.3 The changes ===

==== 22.3.1 Files: ====
* README.md
* helloworld.xml

Again, these files have been updated to reflect version info.

==== 22.3.2 admin/views/helloworlds/view.html.php ====

This view has been extended to show an additional button on the 'HelloWorld' administrator page. This button is to start the Excel export for the selected records (items). It works in the same way as the button for the csv export like explained in the previous section of this tutorial.

==== 22.3.3 admin/controllers/helloexport.raw.php ====

Pushing the button results in a call to the 'exportxls()' function of this controller. It operates similarly to the exportcsv() function. The first steps are the same, up to and including retrieving the records from the database into the $content array.

The remainder of the function embeds the data in an Excel layout, just like the data in the previous example was embedded in a csv layout. This is described in the PHPExcel documentation, and this tutorial is loosely based on the example 01simple-download-xlsx.php in the PHPExpress 'Examples' directory.

Finally note that an include statement is added to the start of this controller:
require_once $_SERVER['DOCUMENT_ROOT'].'/lib/Classes/PHPExcel.php';
This statement loads the PHPExcel base class from PHPExcel.php , and assumes that you indeed installed PHPExcel in the lib/Classes directory on your webserver.

=== 22.4 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-22.zip Download Joomla-Hello-Front-End v1-22]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/08aab1a17111e4529f142b086ebc6265f68af680 View Joomla-Hello-Front-End v1-22]

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Improved_export_function|Prev: Improved export function|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/csv_and_xlsx_import|Next: csv and xlsx import|class=expand}}</div>
</div></noinclude>

J3.x:Developing a component frontend update function/Excel xlsx export

2016-04-20T22:14:49Z

Skyhigh: Excel xlsx export

J3.x:Developing a component frontend update function/Improved export function

2016-04-20T22:13:28Z

Skyhigh: Improved export function

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 21 Improved csv export ==

=== 21.1 Description ===

As explained in the previous chapters, Joomla usually displays data in html format. However, it does support other formats as well, including the 'raw' format meaning that in that case Joomla does not perform any layout operations at all for the data.

That is exactly the way to go for downloading an export file as generally we have to assume that such file just contains 'binary' data.

=== 21.2 The changes ===

==== 21.2.1 Files: ====
* README.md
* helloworld.xml
* admin/button/index.html

Again, have been updated to reflect version info. A new directory admin/button is created in this chapter, and therefore an additional'' admin/button/index.html ''placeholder file as well. ''helloworld.xml'' is updated accordingly.

==== 21.2.2 admin/button/rawformat.php ====

In Joomla processing of a page begins with starting the concerning controller. To indicate that processing should yield raw data rather than an html page, the controller must receive the'' 'format=raw' ''input parameter. These parameter is typically provided by adding an hidden input tag to the form that starts the controller. Like:
<form action="index.php?option=com_helloworld" method="post" name="adminForm">
...
<input type="hidden" name="format" value="raw"/>
</form>
The HelloWorld database items are handled from the HelloWorld admin page with form:
admin/components/com_helloworld/views/helloworlds/tmpl/default.php
or its frontend counterpart. The available functions like create new item, delete an item or update an item are offered to the user as buttons above this form. Our export button is here as well.

Pushing a button typically navigates to another web form, like the edit form to update a particular item. These forms are in html format, so including the 'format=raw' input tag permanently to the above form definition file tmpl/default.php would cause a conflict for these functions.

So only pushing our export button should submit the 'format=raw' tag. As this tag is not a standard part of the form, the button function will add the tag on the fly as post variable. Joomla has no standard button function that allows this, so we define an additional button called'' 'RawFormat'''. It is defined in ''admin/button/rawformat.php'', and basically just clones the Joomla 'Standard' button replacing the reference to the 'Joomla.submitbutton' javascript by a reference to the 'RawFormatSubmitbutton' javascript. This javascript submits (posts) the form data to the server, and this will schedule the controller.

==== 21.2.3 admin/views/helloworlds/submitbutton.js ====

This javascript injects the tag <tt>'<input type="hidden" name="format" value="raw"/>'</tt> in the form. Thereafter it submits the form using the'' 'Joomla.submitform(task)' ''call, just like the Joomla 'Standard' button would do. The input tag is reset to html format after this call for future form submissions.

==== 21.2.4 admin/views/helloworlds/view.html.php ====

This php file prepares the display of the HelloWorld management page. It is adapted to include the above javascript 21.2.3 and display our new 'RawFormat' export button in stead of the previous one.

==== 21.2.5 admin/controllers/helloexport.raw.php ====

This is almost the same file as the previous 'admin/controllers/helloexport.php' except that its name has been changed in view of Joomla rules. Joomla expects a controller for raw format to have a filename <controller>.raw.php, although the class name is still <component>Controller<controller>, so 'HelloWorldControllerHelloExport' in this case.

The big difference with the previous controller version is that the application does not need to be forcibly closed as Joomla now understands from the 'format=raw' tag that the controller yields a raw format layout and embedding in html is not required anymore.

The final statements
$app->sendHeaders();
$app->close();
therefore have been removed as calling these functions will now be performed by Joomla in the standard way when the controller finishes the 'exportcsv' function.

=== 21.3 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-21.zip Download Joomla-Hello-Front-End v1-21]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/ef3fa05c04b68320f90658f264fba16bdf386777 View Joomla-Hello-Front-End v1-21]

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/First_try_at_csv_export|Prev: First try at csv export|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Excel_xlsx_export|Next: Excel xlsx export|class=expand}}</div>
</div></noinclude>

J3.x:Developing a component frontend update function/First try at csv export

2016-04-20T22:11:47Z

Skyhigh: First try at csv export

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 20 First try at csv file export ==

=== 20.1 Description ===

A browser in general is used for interactively retrieving and updating specific data. In many cases it is useful to import or export bulk data for offline processing. This chapter of the tutorial present a first example of exporting data in csv format.

Joomla is tuned for user interaction by means of a browser, so primarily uses html format. An exported data file, however, can be in any format, and typically can not be assumed to be html. This step in the tutorial therefore takes a rather blunt approach in inhibiting Joomla to embed the exported data in html. This is just a shortcut for this chapter, and a more sound approach is presented in the next one.

Just like in the previous steps of this tutorial, the functionality has been implemented both in the backend and the frontend, with (almost) equal code. The next chapter therefore only describes the backend files, but the description is equally valid for the frontend files.

=== 20.2 The changes ===

==== 20.2.1 Files: ====
* README.md
* helloworld.xml

Again, these files have been updated to reflect version info only.

==== 20.2.2 admin/views/helloworlds/view.html.php ====

This step extends the item list page with a button to start the export of the selected records (items) as a csv file for download. The 'view' method is therefore extended with the code to create that button.

The 'view' method only enables functions for which the user has permission. This is checked with the 'canDo→get()' methods. The export button is enabled if the user has edit permission ('core-edit').

==== 20.2.3 admin/models/helloworld.php ====

The model has been extended with a method to retrieve a selected set of record items in one go in stead of fetching one at a time. Each records is stored in an array where each element contains one field. The record arrays in turn are collected in another array, so we have in fact a two dimensional array:'' $content.'' The first row of'' $content ''contains the names of the fields.

For large amounts of data a two dimensional array can become inefficient, both in memory usage and performance, and a more elaborate implementation may be needed. That however is not a Joomla specific issue, and for this tutorial we just keep it at this.

==== 20.2.4 admin/controllers/helloexport.php ====

This is the tricky part. The normal data processing of Joomla consist of retrieving data, preparing it for display and then rendering the data in the proper format. These steps are typically implemented in files like'' controllers/helloworld.php,'' a 'view method' in'' helloworld/view.html.php ''and a layout template in'' helloworld/tmpl/default.php.'' In case of an export there is no display, so the last two steps are omitted.

So all the work of compiling data into an export file can be performed in the controller. To be fair, also preparing data for a specific export file layout constitutes an amount of formatting, so arguably that part of the processing could be deferred to a separate 'view' method. This might even be architecturally sounder and easier to implement. For this tutorial however we take the brute force approach of doing all the work in a controller.

As data collection for an export is a different task than collection for display, a separate controller'' 'helloexport.php' ''is defined in the'' 'controllers' ''directory. It performs a couple of steps: first it retrieves the data for the export from the view parameters (''$pks'') and database (''$content'' array of records). Then with the'' 'foreach' ''loop it converts ''$content'' to lines for the csv file, and exports those lines with the 'print' statement.

Next, the controller transforms the'' 'print' ''data into a downloadable file by specifying a content type header. The concerning code starts with the comment'' '// write the header ...' .''

For more background information see for example [http://stackoverflow.com/questions/19781389/joomla-force-file-download-csv-export stackoverflow: joomla force file download csv export] .

Although the data export is now complete, there is still one issue to tackle. Joomla by default expects all output to refer to a section of a web page, so embeds output with html for the other web page sections, like title, standard menus etc. Without further action this extra html code will be written to the downloaded export file when the'' 'exportcsv' ''function finishes and returns to Joomla. For this tutorial we prevent this by bluntly forcing the application to close, thereby inhibiting further processing of the output data by Joomla. This is the code after comment'' '// Close the application ...' .''

This approach works well but is rather clumsy from an architectural point of view. Then next step in this tutorial will offer a cleaner approach.

=== 20.3 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-20.zip Download Joomla-Hello-Front-End v1-20]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/4011ff3dc73ab756cd83f9b6176f682af6978d04 View Joomla-Hello-Front-End v1-20]

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Rethink_frontend_permissions|Prev: Rethink frontend permissions|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Improved_export_function|Next: Improved export function|class=expand}}</div>
</div></noinclude>

J3.x:Developing a component frontend update function/Rethink frontend permissions

2016-04-20T19:30:17Z

Skyhigh: Rethink frontend permissions

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 19 Access rights and permissions ==

=== 19.1 Description ===

The purpose of the back-end pages is typically to perform administrative actions. Permitted users therefore should be administrators of some kind, and the required access rights and permissions are more or less clear.

The purpose of 'cloning' and reusing the 'administration' pages of a component in the front-end can be very different for the various implementations. So presumably each implementation requires rethinking about a suitable strategy for access rights and permissions. This step suggests two particular use cases, and might not be suitable at all in other situations. The implementation part of support for permissions might well be less difficult than developing a proper strategy for it.

The subject of this tutorial is user access to private data items. This implies that the data often is not intended to be publicly visible to the outside world. This is different from for instance data like articles or blogs, where access rights do need to be granted for modification, but there is no permission required to view that data. So the 'standard' Joomla permissions like for ''edit'', ''delete'', ''create'' etc are not sufficient, and an additional permission for ''view'' is needed.

==== 19.1.1 Use case: prohibit access to the complete component ====

The most solid restriction is to prohibit any any access to the component at all for users without permissions. As a consequence unpermitted users can not open the private pages in the first place, regardless of whether there was actually data on those pages or not. This is the strategy that for example is also implemented for the back-end admin pages: the outside world can not even see the admin pages ''without'' data, let alone ''with'' data.

The protection for this is implemented in the base controller for the component. This is the place where all execution of component code start and very easy to implement. The unpermitted user is then stopped right at the beginning.

So if your implementation requires functions comparable to administrative actions by users, while you do not want the concerning users to actually access the administrative back-end, then this implementation might be a good approach for you. It is a kind of admin framework for only this component and running in the front-end, so to speak.

==== 19.1.2 Use case: limit view to none but specifically assigned record item ====

A more relaxed way of restrictions on visibility of private data is the scenario where existence of data is visible, but its actual content is hidden. So for our case of user greeting data, the outside world might be allowed to see a list of sequence numbers for the existing greetmessages, without being able to actually 'open' the greet item and view its content. For greeting messages this is not really a good example of course, but when the record items contain for instance address info, then the public might be able to view a list of nicknames, but not the actual names, addresses, phone numbers etc.

Another flavor of this scenario is that by default no record items are visible, also not in the overview list, except for the ones that are specifically tagged by the user or admin to be publicly visible. This only concerns the visiblity, not the'' 'edit' ''permissions etc. You could think of the case that all greeting messages are invisible, except for the ones from the webmaster and the support desk. (Maybe this is not a very good example ...).

These kind of permission checks are not performed in the base controller, but about at the same place in the code where also the checks for the classic permissions like'' 'edit', 'delete' ''etc are implemented.

Both use cases are shown in this step of the tutorial. And that is probably not a real-world scenario because one would presumably make a choice for one of the cases and skip the other.

=== 19.2 The changes ===

==== 19.2.1 Files: ====
* README.md
* helloworld.xml
* admin/sql/updates/mysql/*

have been updated to reflect new version info.

New messages have been added to the language files.
* admin/language/en-GB/en-GB.com_helloworld.ini
* site/language/en-GB/en-GB.com_helloworld.ini

==== 19.2.2 site/helloworld.php ====

As already explained in the introduction, the first use case only requires one change in the base controller. The user is checked for permission to access the component at all. Without access the buck stops here.

==== 19.2.3 site/views/helloworld/view.html.php, site/views/helloworld/view.html.php ====

The second use case is implemented by allowing the public user to view the usual overview list of greeting items, but deny ''view'' access to the message content. The'' 'helloworld' ''view therefore is extended accordingly while the'' 'helloworlds' ''view has not changed.

Note that the admin can still assign public view permission to individual greeting item records as usual.

==== 19.2.4 admin/access.xml ====

The existence of new access rights'' 'helloworld.access' ''and'' 'helloworld.view' ''is defined in this xml file. The corresponding permission can now be set in the component admin pages, either at component level or at record item level.

==== 19.2.5 script.php ====

The most complicated change actually is the install script. Because of the non-standard scenarios the use case may require, or at least prefer, certain permissions already being setup by default at installation time. The ''postflight'' function of the installation script ''script.php'' is the place to do so.

As an example, the implementation in this tutorial first searches for identification of the unregistered, outside world,'' 'Public' ''user. In then searches for the permission setting for the current component, and adds'' 'helloworld.access' ''rights to the unregistered user by default, so that the outside world at least can access the component and display the overview list of all greeting messages. Note that the admin can of course revoke this setting again in the global permissions page of the component.

The functionality is implemented by directly accessing the database. This is not very complicated so as such not an issue, but it might be against the (official or intended) Joomla architecture not to use standard Joomla functions for this. As of yet, however, I have not been able to find out what the 'official' approach is supposed to be, and if such functions indeed do exist.

=== 19.3 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-19.zip Download Joomla-Hello-Front-End v1-19]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/3c25fa17790cfbea57516341a27deba5233db73d View Joomla-Hello-Front-End v1-19]

=== 19.4 Testing the features of this step ===
* Prepare users and permissions, and test like previous step. And ...
* This step is primarily about permissions, so test different permission setting both for 'Public', the outside world. And for 'Registered' users with a login account.
* Test the differences between ''helloworld.access'' and ''helloworld.view'' permissions.

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Record_list_view_page|Prev: Record list view page|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/First_try_at_csv_export|Next: First try at csv export|class=expand}}</div>
</div></noinclude>

J3.x:Developing a component frontend update function/Record list view page

2016-04-20T19:28:09Z

Skyhigh: Record list view page

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 18 Frontend item list view like in the backend ==

=== 18.1 Description ===

Where the previous step of this tutorial 'cloned' the edit page from the back-end to the front-end, in this step also the list view page will be 'cloned' so that both component administration pages now run in the front-end with (almost) equal functionality, including toolbars, searching and ordering etc.

=== 18.2 The changes ===

==== 18.2.1 Files: ====
* README.md
* helloworld.xml
* admin/sql/updates/mysql/*

Again, these files have been updated to reflect version info only.

==== 18.2.2 site/views/helloworlds/view.html.php ====

Also for the list view the differences are limited.
* Like in the previous step the ''display()'' function starts and ends by a call to respectively ''includeAdminEnv()'' and ''setDocument()'' that have been adapted to make required back-end functions available to the front-end as well.
* The back-end list overview page featured a sidebar to switch between item management and category management. For this tutorial it is assumed to be of little relevance to the front-end, so has been left out.
* For similar reason the ''preferences/options'' button in the right upper corner of the toolbar of the back-end pages has been left out as well.

==== 18.2.3 site/views/helloworlds/tmpl/default.php ====

The layout template is adapted for the lacking side bar. Because of that the ''<div ... span10>'' is also superfluous.

==== 18.2.4 site/views/helloworld/view.html.php ====

The changes in the ''edit'' view page in this step are even smaller than in the previous step as we can now remove the changes of the previous step for working around the lack of the list view page, that is now reintroduced again.

==== 18.2.5 site/views/helloworld/tmpl/edit.php, site/views/helloworld/tmpl/edit.xml ====

These template layout files are equal to the versions of the previous step.

==== 18.2.6 site/models/helloworld.php and .../helloworlds.php ====

The front-end model files for the list view and the edit page are equal to the back-end ones, except for a reference to a javascript file that is now in a front-end directory.

==== 18.2.7 site/models/forms/*, site/models/rules/*, site/models/forms/helloworld.xml ====

The front-end files in these model directories are also equal to the back-end versions, with the exception of ''site/models/forms/helloworld.xml'' . As noted already in the previous step of the tutorial, the back-end ''edit'' page contains three section, the latter two for global configuration settings and permission settings. As these presumably are less relevant to the front-end ''edit'' page, they are left out.

==== 18.2.8 site/table/* ====

Table access is the same in front-end and back-end, so the files in this directory are just a 'clone'.

==== 18.2.9 site/controllers/helloworld.php and .../helloworlds.php ====

The front-end controller file ''helloworlds.php'' is equal to the back-end one. ''helloworld.php'' differs slightly as explained in the previous tutorial step, but the change is even less then previously as we do not have to work-around the missing list view page.

==== 18.2.10 site/controller.php, site/helloworld.php ====

The base controller are equal to the previous step.

=== 18.3 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-18.zip Download Joomla-Hello-Front-End v1-18]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/956e17d2c3a8a5a487093a2155305b8ba1a4cc65 View Joomla-Hello-Front-End v1-18]

=== 18.4 Testing the features of this step ===
* Prepare users and permissions, and test like previous step. And ...
* Like in the previous step, check that also the front-end overview list looks like, and functions like the back-end counterpart.

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Record_item_editing_page|Prev: Record item editing page|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Rethink_frontend_permissions|Next: Rethink frontend permissions|class=expand}}</div>
</div></noinclude>

J3.x:Developing a component frontend update function/Simple frontend data entry

2016-04-20T19:25:13Z

Skyhigh: Simple frontend data entry

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 16 Add data entry ==

=== 16.1 Description ===

Up to this step the HelloWorld component only enables the administrator to add or change items in the database. This step adds functionality to also allow a user to change data.

Typically this is relevant when the data is related or owned by the user. Therefore an owner field is added to the table storing the greeting messages. The use case for this scenario is enabling users to update their own greetings.

=== 16.2 The changes ===

==== 16.2.1 Files: ====
* README.md
* helloworld.xml
* admin/sql/updates/mysql/*

have been updated to reflect new version info.

New messages have been added to the language files mainly because of the addition of the new'' 'uid' ''field to the database table.
* admin/models/fields/helloworld.php
* site/language/en-GB/en-GB.com_helloworld.ini

==== 16.2.2 site/views/helloworld/tmpl/default.php ====

The user must have a way to enter data. The html way of doing so is to develop a form, so this view is extended with such. Also, an new field'' 'uid' ''is added to the view to reflect the user/owner identification.

The variable data in the form is largely derived from the object ''$this->item'' which holds the current database record. The primary key for that record is ''$this->item->id'' and usually is indicated by the variable ''$id''.

After data entry the user hits the enter key or the submit button which results in posting the form data (including the entered user data) to the server. The form'' 'action' ''tag is set up to redisplay the present page after a submit, and therefore the view ''site/views/helloworld/view.html.php'' is called again and acts on the posted data.

The form data could also be submitted to the server with the 'get' in stead of the 'post' method, but that will result in displaying the transferred data in the URL bar of the browser. That can be handy in some cases, for instance when the user wishes to copy the URL for later use. The 'post' method sends the data invisible to the user which is often a more appropriate approach for private data.

And finally, the form contains an additional tag JHtml::_('form.token'). This tag is generated by Joomla as a kind of checksum with enables the application to detect possible hacking of the form. That is a risk related to sending data to the server. Previous steps of HelloWorld only displayed data without receiving anything so use of this token was not needed. See for instance [https://docs.joomla.org/How_to_add_CSRF_anti-spoofing_to_forms Joomla Doc: How to add CSRF anti-spoofing to forms] for more information.

==== 16.2.3 site/views/helloworld/view.html.php ====

The code in this file transfers data from the server for display in the defined view of section 16.2.2 . The difference with the previous version of HelloWorld is that the display can now result from two cases.

In the first place the'' 'view' ''will be displayed when the user browses to this page for the first time. In that case the'' 'view' ''method has to retrieve the data from the database.

The second case for displaying the'' 'view' ''is when the user has posted and submitted the form data after entering some values. This is detected by the'' 'view' ''method by inspecting the'' 'post' ''property of the form which now contains the user data at hand. The database will be updated with the posted data.

Joomla keeps'' 'post' ''data in the ''JFactory::getApplication()->input->post'' object. The variable ''$postmsg'' will retrieve the value of the greeting entered by the user, or will be null when no data has been posted like on the initial display of this page. Similarly, ''$getid'' will get the value of the item record ''id'' after a 'get' data command when the user specified'' 'id' ''in the URL, for instance with url ''localhost/index.php?option=com_helloworld&id=3'' to select item record 3.

When'' 'postmsg' ''holds a value after a post, the view first checks if the current record item was owned by the current user. If this is not the case then the record will not be updated. This can also occur if the user is not logged in.

If the record is owned by the user, then the view calls the 'model' object to update the record in the database with ''$model->updateThisItem($postmsg)'' . Finally, the view will show a message indicating whether the update succeeded.

The model object caches some relevant data, including the current record, in a central'' 'state' ''object so that not every class involved in accessing and displaying the database record item needs to keep track of that data. The view retrieves and stores that data from and to the cache with ''$state->get()'' and ''$state→set().'' Also the view's own'' 'get()' ''method is a shortcut for retrieving data from the model's cache.

As the model might process information for several other classes than this view, data specifically for this view will have a name prefixed by a unique identifier ''$context'' . We need to take care that we use the same prefix in all relevant class files.

==== 16.2.4 site/models/helloworld.php ====

The model class is extended with the method'' 'updateThisItem' ''to write the submitted user data to the database. Note that also the model class internally uses the'' 'State' ''cache object to store and retrieve common data.

As an example some 'intelligence' has been designed to select the record item to be presented. The model takes the following steps:
* If the item is specified by the in the url like with ''localhost/index.php?option=com_helloworld&id=3'', then this'' 'id' ''is used as primary key.
* If the id is not specified in the url, and the user is logged in, then the model searches for the first record item owned by this user, if that exists
* In other cases, record item with'' 'id=1' ''is retrieved.
* The item will be'' 'null' ''if nothing is found.

==== 16.2.5 site/views/helloworld/tmpl/default.xml ====

This file contains a definition for the administrator menu management. When creating a new menu entry, a list of options is shown for selecting a menu type. The list now will show an 'HelloWorld' option to create a menu item which opens the data entry form.

==== 16.2.6 admin/models/fields/helloworld.php, admin/models/forms/filter_helloworlds.xml, admin/models/forms/helloworld.xml ====

These files have been updated to support the additional'' 'uid' ''field. Note that in ''admin/models/forms/helloworld.xml'' this field is defined as type'' 'user' ''so that in the'' 'HelloWorld' ''admin edit page it is shown as an item with a pop-up that presents all defined users.

In the'' 'HelloWorld' ''admin list page the'' 'uid' ''field in the filter menu is just shown as a number, as specified in ''admin/models/forms/filter_helloworlds.xml'' .

See [https://docs.joomla.org/Standard_form_field_types Joomla Doc: Standard form field types] for more information.

=== 16.3 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-16.zip Download Joomla-Hello-Front-End v1-16]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/37ba5d8b61008b05b58770ddecc2a7c196525541 View Joomla-Hello-Front-End v1-16]

=== 16.4 Testing the features of this step ===
* Prepare users and permissions, and test like previous step. And ...
* Create one or more (test) users with permissions to edit HelloWorld greet messages.
* Check that these users can change items in the front-end when logged in. Check that Public users and not logged-in users can not change items.

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Initial_version|Prev: Let's start with the Initial version|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Record_item_editing_page|Next: Record item editing page|class=expand}}</div>
</div></noinclude>

J3.x:Developing a component frontend update function/Record item editing page

2016-04-20T19:21:55Z

Skyhigh: Record item editing page

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 17 Frontend data entry like in the backend ==

=== 17.1 Description ===

As noted earlier, the administrative backend of Joomla shows that it features by default already quite some functionality for access to data in the database. This includes standard list and edit views for selecting, publishing, adding, deleting and updating records, including toolbars and options for searching, filtering, ordering and pagination.

The previous step in this tutorial showed how to build a view for the user to update database items more or less from scratch. It would be nice of course if we could just use all the standard Joomla backend features in the frontend as well for our own components for end users. Reusing existing functionality generally is better than reinventing the wheel.

This step shows how to 'clone' a backend item editing page for use in the frontend by end users.

==== 17.1.1 Standard architecture ====

For the backend Joomla uses a standard architecture for list views and editing pages. As a result admin pages for all components look similar. Pages to a large extend are defined by means of xml files and this reduces the need for coding to a minimum. The architecture however still offers a lot of options and interfaces to adapt the pages to specific needs.

This is a powerful proposition, but of course requires a solid understanding of all those options. That will take some time but easily pays back because of better development results. As this architecture is used for the backend, a good level of understanding is required anyway.

==== 17.1.2 Clone the backend to the frontend ====

Joomla adheres to the MVC (model-view-controller) architecture, so the functionality of a feature like the edit page is implemented in the ''models'', ''views'' and ''controllers'' directories of the admin and site trees, respectively. As we intend to clone the backend functions to the frontend we start by copying the admin/models, admin/views and admin/controllers directory tree to their site/* counterparts.

As this step of the tutorial is concerned only with the edit page and not yet with the list view, we only copy the 'helloworld' (singular) files and not the 'helloworlds' (plural) ones. Adding the latter will be addressed in a next tutorial step.

Some modifications are still needed, and the differences between the backend files and their frontend counterparts are covered in the next sections.

=== 17.2 The changes ===

==== 17.2.1 Files: ====
* README.md
* helloworld.xml
* admin/sql/updates/mysql/*

have been updated to reflect new version info.

New messages have been added to the language files.
* admin/language/en-GB/en-GB.com_helloworld.ini
* site/language/en-GB/en-GB.com_helloworld.ini

The administrative backend has not been changed for this step.

==== 17.2.2 site/views/helloworld/tmpl/edit.php ====

The Joomla architecture expects edit tasks by default to be performed by a layout template called ''edit'', so our layout file is ''site/views/helloworld/tmpl/edit.php'' in stead of ''.../tmpl/default.php'' . This php file is generic in that it does not contain references to particular texts, labels or fields, but it calls the MVC model to provide the definitions for these. The layout code then generates a page for display according to these definitions.

This ''edit.php'' file therefore can be used without modification for both back- and front-end, and even in other components as well.

Note that the architecture for these pages originates from usage in the backend, and in some places this is explicitly visible in the code. For instance, the architecture expects the form name and id to be'' 'adminForm' ''even when we use the layout template in the frontend.

==== 17.2.3 site/views/helloworld/tmpl/edit.xml ====

This file contains a definition for the administrator menu management, just like the ''.../tmpl/default.xml'' in the previous step 16.2.5 . This feature has no counterpart for the backend HelloWorld pages, so there is no ''admin/views/helloworld/tmpl/edit.xml'' .

==== 17.2.4 site/views/helloworld/view.html.php, views/helloworld/submitbutton.js ====

For the larger part the admin backend code can be reused. Changes are:
* Usually the edit page is accessed by first selecting a record item from the overview list page. This step of the tutorial only implements the edit page and lacks the list page. The ''display'' function therefore starts with retrieving the item ''id'' from the url like in ''localhost/index.php?option=com_helloworld&id=3'' . The id parameter is stored in the State cache so that the model functions can access it.
* ''setLayout('edit')'' specifies that the ''tmpl/edit.php'' layout template should be called to display the page, in stead of the ''tmpl/default.php'' template.
* Next, the function ''includeAdminEnv()'' is called. This function takes care that the required backend functions are also available to the present view class that runs in the frontend. By default, the admin language files and helper functions like ''JtoolBarHelper'' etc. are only available from the backend code.
* Joomla support Access Permissions to make sure that data is only available for users with the proper access rights. Permissions can be set at global Joomla level, at component level but also at record level. The latter is arranged by the ''asset_id'' field of the data records.For demonstration purposes the record level access is relaxed a little: normally a user can not access a record if its permission has not been setup properly and ''asset_id'' has been filled accordingly. We allow users to retrieve an uninitialized record item, and the ''asset_id'' field will be properly set on the fly if the record is modified and rewritten to the database. This procedure makes it easier to import new records.
* For demonstration purposes the edit page now also displays the current user id, and the record item id, although these parameters in general are only used internally.The code for this actually belongs in the ''tmpl/edit.php'' but as it is only for demonstration the code is compiled in the view in order to keep the standard ''edit.php'' unchanged.
* The setDocument() function is updated to refer to the frontend settings in stead of the backend.
* Some css styles for the toolbar are by default available in the backend but lack in the frontend. These styles have been cloned to ''media/css/helloworld.css'' to support the frontend toolbar.
* The backend javascript code ''views/helloworld/submitbutton.js'' that is called by the submit buttons can be reused without modifications.

Although the above seems quite a story, the changes are all quite small and to a great extent the backend ''edit'' page works in the frontend as well, including the toolbar. The page display format now follows the frontend style, so may use different fonts, sizes and colors etc, but the functionality and general layout is equal for back- and front-end.

==== 17.2.5 site/models/forms/helloworld.xml ====

The ''edit'' page definition file ''site/models/forms/helloworld.xml'' is just a clone of the backend file. Note that the ''edit'' page displays both the record item fields, but also includes a section to edit global HelloWorld component parameters and a section with permission specifications. This shows that a straightforward clone of backend features is possible, although in a real life application the latter two sections are presumably removed from the frontend ''edit'' page.

This is a matter of adapting this ''helloworld.xml'' file, and will be discussed in a next step of this tutorial.

Although not strictly required, ''helloworld.xml'' is changed in one place: the user id field'' 'uid'.'' In the admin backend this field shows a popup window with an extensive overview of all user accounts; probably too extensive for normal use in the frontend. So the field is replaced by a dropdown list showing only the user names without additional options. The dropdown is based on a straightforward sql query on the ''<nowiki>#__users</nowiki>'' table to generate the list. You can try out the difference by just using a copy of ''admin/models/forms/helloworld.xml'' in stead of this modified version.

See [https://docs.joomla.org/Standard_form_field_types Joomla Doc: Standard form field types] for more information.

==== 17.2.6 site/models/helloworld.php, site/models/forms/helloworld.js ====

As both data and views are (almost) the same in both front- and backend, also the model is (almost) equal. Only the reference to the javascript file ''site/models/forms/helloworld.js'' is adapted to the frontend. The javascript file itself is an unchanged copy. Its purpose is validation of the syntax of the greeting entered by the user.

==== 17.2.7 site/controllers/helloworld.php ====

That leaves us with the controller. This class is based on ''JControllerForm'', and the ''HelloWorld'' super class needs almost no additional functionality, neither for the backend or the frontend. The view changes follow:
* ''JControllerForm'' expects a combination of a list view page for selecting a record item, and an edit page for changing the item. For this tutorial step we have no list view page, so we indicate in the constructor to immediately open the edit page view'' 'helloworld' ''in stead of the list page (which would have been'' 'helloworlds' ''as exptected by ''JcontrollerForm'' by default).
* In ''allowEdit()'' we add a relaxed permission check for when ''asset_id'' is still uninitialized. See 17.2.4.
* an override of the function ''allowAdd()'' is not required for this tutorial. Not in the backend either, for that matter.

==== 17.2.8 site/controller.php, site/helloworld.php ====

The back-end base controller include some additional calls in view of the layout of the admin pages which are not required in the front-end.

The back-end controller also checks whether the user has sufficient administrative access rights. Permissions are a topic of its own, and is addressed in the separate next step 19.

=== 17.3 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-17.zip Download Joomla-Hello-Front-End v1-17]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/a7c470d93789a914da0285cd220222f7e420fe11 View Joomla-Hello-Front-End v1-17]

=== 17.4 Testing the features of this step ===
* Prepare users and permissions, and test like previous step. And ...
* Test that everybody can open the edit page with e.g. ''localhost/index.php?option=com_helloworld&id=3'' .
* Check that only logged-in users have'' 'edit' ''etc buttons on their toolbar.
* Check that only logged-in users (with proper permissions) can update the page.
* View some other message items with other id's. Create and delete some items.
* Verify that this 'front-end' page has the same functionality as the back-end page. Apart from some minor differences.

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Simple_frontend_data_entry|Prev: Simple frontend data entry|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Record_list_view_page|Next: Record list view page|class=expand}}</div>
</div></noinclude>

Chunk:Developing a component frontend update function - Contents

2016-04-20T19:11:43Z

Skyhigh: Developing a component frontend update function - Contents

{{Joomla version|version=3.x|comment=Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing a component frontend update function}}
{{-}}
<div class="large-4 columns" style="float:right; background:#fff;margin:0 0 1.0em 1.0em;">
<div class="large-12 columns panel radius mw-collapsible" style="width:100%;background:#fff;font-size:.8em">
<big>'''Articles in this Series'''</big>
<div class="large-12 columns panel mw-collapsible-content" style="border:none; background:#fff; min-width:100%;">

# [[J3.x:Developing_a_component_frontend_update_function|Introduction]]
# [[J3.x:Developing_a_component_frontend_update_function/Initial_version|Initial version]]
# [[J3.x:Developing_a_component_frontend_update_function/Simple_frontend_data_entry|Simple frontend data entry]]
# [[J3.x:Developing_a_component_frontend_update_function/Record_item_editing_page|Record item editing page]]
# [[J3.x:Developing_a_component_frontend_update_function/Record_list_view_page|Record list view page]]
# [[J3.x:Developing_a_component_frontend_update_function/Rethink_frontend_permissions|Rethink frontend permissions]]
# [[J3.x:Developing_a_component_frontend_update_function/First_try_at_csv_export|First try at csv export]]
# [[J3.x:Developing_a_component_frontend_update_function/Improved_export_function|Improved export function]]
# [[J3.x:Developing_a_component_frontend_update_function/Excel_xlsx_export|Excel xlsx export]]
# [[J3.x:Developing_a_component_frontend_update_function/csv_and_xlsx_import|csv and xlsx import]]
# [[J3.x:Developing_a_component_frontend_update_function/Import_with_summary_screen|Import with summary screen]]

</div></div></div>
<noinclude>{{-}}</noinclude>
<noinclude>[[Category:Tutorials in a Series]]</noinclude>

Chunk:Developing a component frontend update function - Contents

2016-04-20T16:53:14Z

Skyhigh:

{{Joomla version|version=3.x|comment=Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing a component frontend update function}}
{{-}}
<div class="large-4 columns" style="float:right; background:#fff;margin:0 0 1.0em 1.0em;">
<div class="large-12 columns panel radius mw-collapsible" style="width:100%;background:#fff;font-size:.8em">
<big>'''Articles in this Series'''</big>
<div class="large-12 columns panel mw-collapsible-content" style="border:none; background:#fff; min-width:100%;">

# [[J3.x:Developing_a_component_frontend_update_function|Introduction]]
# [[J3.x:Developing_a_component_frontend_update_function/Initial_version|Initial version]]
# [[J3.x:Developing_a_component_frontend_update_function/Simple_frontend_data_entry|Simple frontend data entry]]

</div></div></div>
<noinclude>{{-}}</noinclude>
<noinclude>[[Category:Tutorials in a Series]]</noinclude>

J3.x:Developing a component frontend update function/Initial version

2016-04-20T16:51:15Z

Skyhigh:

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 15 Preparation ==
# This package from [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip scionescire] has been adapted slightly. This adapted version can be downloaded from the link [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-15.zip here] . The modifications were mainly corrections for some minor layout issues with the sidebar, ordering and pagination with the HelloWorld component admin page.
# Install the component in Joomla:
#* Login to Joomla as administrator.
#* Select Extensions → Manage, and then the Upload Package File tab.
#* Click the 'Browse' button and select the downloaded zip file from step 1.
#* Click Upload & Install.
#* Check that the component installed properly.

Step 15 of the original Hello World tutorial is now up and running as first step in this tutorial.

=== 15.1 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-15.zip Download Joomla-Hello-Front-End v1-15]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/f06c1637382162e9c73600e6882847688526c70b View Joomla-Hello-Front-End v1-15]

=== 15.2 Testing the features of this step ===
* Enhance the database data by adding categories and publishing the database items:
** Open the HelloWorld administration page by selecting menu Components → Hello World!
** Select the Category sub menu, and enter a few categories.
** Select the 'Options' button and go to the 'Hello World!' global configuration menu. Click the radio button for 'Show' categories.
** Click the 'Save & Close' and return to the HelloWorld manager page
** You can add additional items if you like, assign categories and publish all items.
* Check that the items can now be displayed by using URL 'localhost/index.php?option=com_helloworld&id=1' , '...&id=2', etc.

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function|Prev: Introduction|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Simple_frontend_data_entry|Next: Simple frontend data entry|class=expand}}</div>
</div></noinclude>

J3.x:Developing a component frontend update function/Simple frontend data entry

2016-04-20T16:46:09Z

Skyhigh: Simple frontend data entry

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 16 Add data entry ==

=== 16.1 Description ===

Up to this step the HelloWorld component only enables the administrator to add or change items in the database. This step adds functionality to also allow a user to change data.

Typically this is relevant when the data is related or owned by the user. Therefore an owner field is added to the table storing the greeting messages. The use case for this scenario is enabling users to update their own greetings.

=== 16.2 The changes ===

==== 16.2.1 Files: ====
* README.md
* helloworld.xml
* admin/sql/updates/mysql/*

have been updated to reflect new version info.

New messages have been added to the language files mainly because of the addition of the new'' 'uid' ''field to the database table.
* admin/models/fields/helloworld.php
* site/language/en-GB/en-GB.com_helloworld.ini

==== 16.2.2 site/views/helloworld/tmpl/default.php ====

The user must have a way to enter data. The html way of doing so is to develop a form, so this view is extended with such. Also, an new field'' 'uid' ''is added to the view to reflect the user/owner identification.

The variable data in the form is largely derived from the object ''$this->item'' which holds the current database record. The primary key for that record is ''$this->item->id'' and usually is indicated by the variable ''$id''.

After data entry the user hits the enter key or the submit button which results in posting the form data (including the entered user data) to the server. The form'' 'action' ''tag is set up to redisplay the present page after a submit, and therefore the view ''site/views/helloworld/view.html.php'' is called again and acts on the posted data.

The form data could also be submitted to the server with the 'get' in stead of the 'post' method, but that will result in displaying the transferred data in the URL bar of the browser. That can be handy in some cases, for instance when the user wishes to copy the URL for later use. The 'post' method sends the data invisible to the user which is often a more appropriate approach for private data.

And finally, the form contains an additional tag JHtml::_('form.token'). This tag is generated by Joomla as a kind of checksum with enables the application to detect possible hacking of the form. That is a risk related to sending data to the server. Previous steps of HelloWorld only displayed data without receiving anything so use of this token was not needed. See for instance [https://docs.joomla.org/How_to_add_CSRF_anti-spoofing_to_forms Joomla Doc: How to add CSRF anti-spoofing to forms] for more information.

==== 16.2.3 site/views/helloworld/view.html.php ====

The code in this file transfers data from the server for display in the defined view of section 16.2.2 . The difference with the previous version of HelloWorld is that the display can now result from two cases.

In the first place the'' 'view' ''will be displayed when the user browses to this page for the first time. In that case the'' 'view' ''method has to retrieve the data from the database.

The second case for displaying the'' 'view' ''is when the user has posted and submitted the form data after entering some values. This is detected by the'' 'view' ''method by inspecting the'' 'post' ''property of the form which now contains the user data at hand. The database will be updated with the posted data.

Joomla keeps'' 'post' ''data in the ''JFactory::getApplication()->input->post'' object. The variable ''$postmsg'' will retrieve the value of the greeting entered by the user, or will be null when no data has been posted like on the initial display of this page. Similarly, ''$getid'' will get the value of the item record ''id'' after a 'get' data command when the user specified'' 'id' ''in the URL, for instance with url ''localhost/index.php?option=com_helloworld&id=3'' to select item record 3.

When'' 'postmsg' ''holds a value after a post, the view first checks if the current record item was owned by the current user. If this is not the case then the record will not be updated. This can also occur if the user is not logged in.

If the record is owned by the user, then the view calls the 'model' object to update the record in the database with ''$model->updateThisItem($postmsg)'' . Finally, the view will show a message indicating whether the update succeeded.

The model object caches some relevant data, including the current record, in a central'' 'state' ''object so that not every class involved in accessing and displaying the database record item needs to keep track of that data. The view retrieves and stores that data from and to the cache with ''$state->get()'' and ''$state→set().'' Also the view's own'' 'get()' ''method is a shortcut for retrieving data from the model's cache.

As the model might process information for several other classes than this view, data specifically for this view will have a name prefixed by a unique identifier ''$context'' . We need to take care that we use the same prefix in all relevant class files.

==== 16.2.4 site/models/helloworld.php ====

The model class is extended with the method'' 'updateThisItem' ''to write the submitted user data to the database. Note that also the model class internally uses the'' 'State' ''cache object to store and retrieve common data.

As an example some 'intelligence' has been designed to select the record item to be presented. The model takes the following steps:
* If the item is specified by the in the url like with ''localhost/index.php?option=com_helloworld&id=3'', then this'' 'id' ''is used as primary key.
* If the id is not specified in the url, and the user is logged in, then the model searches for the first record item owned by this user, if that exists
* In other cases, record item with'' 'id=1' ''is retrieved.
* The item will be'' 'null' ''if nothing is found.

==== 16.2.5 site/views/helloworld/tmpl/default.xml ====

This file contains a definition for the administrator menu management. When creating a new menu entry, a list of options is shown for selecting a menu type. The list now will show an 'HelloWorld' option to create a menu item which opens the data entry form.

==== 16.2.6 admin/models/fields/helloworld.php, admin/models/forms/filter_helloworlds.xml, admin/models/forms/helloworld.xml ====

These files have been updated to support the additional'' 'uid' ''field. Note that in ''admin/models/forms/helloworld.xml'' this field is defined as type'' 'user' ''so that in the'' 'HelloWorld' ''admin edit page it is shown as an item with a pop-up that presents all defined users.

In the'' 'HelloWorld' ''admin list page the'' 'uid' ''field in the filter menu is just shown as a number, as specified in ''admin/models/forms/filter_helloworlds.xml'' .

See [https://docs.joomla.org/Standard_form_field_types Joomla Doc: Standard form field types] for more information.

=== 16.3 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-16.zip Download Joomla-Hello-Front-End v1-16]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/37ba5d8b61008b05b58770ddecc2a7c196525541 View Joomla-Hello-Front-End v1-16]

=== 16.4 Testing the features of this step ===
* Prepare users and permissions, and test like previous step. And ...
* Create one or more (test) users with permissions to edit HelloWorld greet messages.
* Check that these users can change items in the front-end when logged in. Check that Public users and not logged-in users can not change items.

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Initial_version|Prev: Let's start with the Initial version|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Initial_version|Next: Let's start with the Initial version|class=expand}}</div>
</div></noinclude>

J3.x:Developing a component frontend update function/Simple frontend data entry

2016-04-20T16:39:50Z

Skyhigh: Simple frontend data entry

{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

== 16 Add data entry ==

=== 16.1 Description ===

Up to this step the HelloWorld component only enables the administrator to add or change items in the database. This step adds functionality to also allow a user to change data.

Typically this is relevant when the data is related or owned by the user. Therefore an owner field is added to the table storing the greeting messages. The use case for this scenario is enabling users to update their own greetings.

=== 16.2 The changes ===

==== 16.2.1 Files: ====
* README.md
* helloworld.xml
* admin/sql/updates/mysql/*

have been updated to reflect new version info.

New messages have been added to the language files mainly because of the addition of the new'' 'uid' ''field to the database table.
* admin/models/fields/helloworld.php
* site/language/en-GB/en-GB.com_helloworld.ini

==== 16.2.2 site/views/helloworld/tmpl/default.php ====

The user must have a way to enter data. The html way of doing so is to develop a form, so this view is extended with such. Also, an new field'' 'uid' ''is added to the view to reflect the user/owner identification.

The variable data in the form is largely derived from the object ''$this->item'' which holds the current database record. The primary key for that record is ''$this->item->id'' and usually is indicated by the variable ''$id''.

After data entry the user hits the enter key or the submit button which results in posting the form data (including the entered user data) to the server. The form'' 'action' ''tag is set up to redisplay the present page after a submit, and therefore the view ''site/views/helloworld/view.html.php'' is called again and acts on the posted data.

The form data could also be submitted to the server with the 'get' in stead of the 'post' method, but that will result in displaying the transferred data in the URL bar of the browser. That can be handy in some cases, for instance when the user wishes to copy the URL for later use. The 'post' method sends the data invisible to the user which is often a more appropriate approach for private data.

And finally, the form contains an additional tag JHtml::_('form.token'). This tag is generated by Joomla as a kind of checksum with enables the application to detect possible hacking of the form. That is a risk related to sending data to the server. Previous steps of HelloWorld only displayed data without receiving anything so use of this token was not needed. See for instance [https://docs.joomla.org/How_to_add_CSRF_anti-spoofing_to_forms Joomla Doc: How to add CSRF anti-spoofing to forms] for more information.

==== 16.2.3 site/views/helloworld/view.html.php ====

The code in this file transfers data from the server for display in the defined view of section 16.2.2 . The difference with the previous version of HelloWorld is that the display can now result from two cases.

In the first place the'' 'view' ''will be displayed when the user browses to this page for the first time. In that case the'' 'view' ''method has to retrieve the data from the database.

The second case for displaying the'' 'view' ''is when the user has posted and submitted the form data after entering some values. This is detected by the'' 'view' ''method by inspecting the'' 'post' ''property of the form which now contains the user data at hand. The database will be updated with the posted data.

Joomla keeps'' 'post' ''data in the ''JFactory::getApplication()->input->post'' object. The variable ''$postmsg'' will retrieve the value of the greeting entered by the user, or will be null when no data has been posted like on the initial display of this page. Similarly, ''$getid'' will get the value of the item record ''id'' after a 'get' data command when the user specified'' 'id' ''in the URL, for instance with url ''localhost/index.php?option=com_helloworld&id=3'' to select item record 3.

When'' 'postmsg' ''holds a value after a post, the view first checks if the current record item was owned by the current user. If this is not the case then the record will not be updated. This can also occur if the user is not logged in.

If the record is owned by the user, then the view calls the 'model' object to update the record in the database with ''$model->updateThisItem($postmsg)'' . Finally, the view will show a message indicating whether the update succeeded.

The model object caches some relevant data, including the current record, in a central'' 'state' ''object so that not every class involved in accessing and displaying the database record item needs to keep track of that data. The view retrieves and stores that data from and to the cache with ''$state->get()'' and ''$state→set().'' Also the view's own'' 'get()' ''method is a shortcut for retrieving data from the model's cache.

As the model might process information for several other classes than this view, data specifically for this view will have a name prefixed by a unique identifier ''$context'' . We need to take care that we use the same prefix in all relevant class files.

==== 16.2.4 site/models/helloworld.php ====

The model class is extended with the method'' 'updateThisItem' ''to write the submitted user data to the database. Note that also the model class internally uses the'' 'State' ''cache object to store and retrieve common data.

As an example some 'intelligence' has been designed to select the record item to be presented. The model takes the following steps:
* If the item is specified by the in the url like with ''localhost/index.php?option=com_helloworld&id=3'', then this'' 'id' ''is used as primary key.
* If the id is not specified in the url, and the user is logged in, then the model searches for the first record item owned by this user, if that exists
* In other cases, record item with'' 'id=1' ''is retrieved.
* The item will be'' 'null' ''if nothing is found.

==== 16.2.5 site/views/helloworld/tmpl/default.xml ====

This file contains a definition for the administrator menu management. When creating a new menu entry, a list of options is shown for selecting a menu type. The list now will show an 'HelloWorld' option to create a menu item which opens the data entry form.

==== 16.2.6 admin/models/fields/helloworld.php, admin/models/forms/filter_helloworlds.xml, admin/models/forms/helloworld.xml ====

These files have been updated to support the additional'' 'uid' ''field. Note that in ''admin/models/forms/helloworld.xml'' this field is defined as type'' 'user' ''so that in the'' 'HelloWorld' ''admin edit page it is shown as an item with a pop-up that presents all defined users.

In the'' 'HelloWorld' ''admin list page the'' 'uid' ''field in the filter menu is just shown as a number, as specified in ''admin/models/forms/filter_helloworlds.xml'' .

See [https://docs.joomla.org/Standard_form_field_types Joomla Doc: Standard form field types] for more information.

=== 16.3 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-16.zip Download Joomla-Hello-Front-End v1-16]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/37ba5d8b61008b05b58770ddecc2a7c196525541 View Joomla-Hello-Front-End v1-16]

=== 16.4 Testing the features of this step ===
* Prepare users and permissions, and test like previous step. And ...
* Create one or more (test) users with permissions to edit HelloWorld greet messages.
* Check that these users can change items in the front-end when logged in. Check that Public users and not logged-in users can not change items.

<noinclude><div class="row">
<div class="large-6 columns">{{Basic button|/J3.x:Developing_a_component_frontend_update_function/Initial_version|Prev: Let's start with the Initial version|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|/J3.x:Developing_a_component_frontend_update_function/Initial_version|Next: Let's start with the Initial version|class=expand}}</div>
</div></noinclude>

J3.x:Developing a component frontend update function/Initial version

2016-04-20T16:14:41Z

Skyhigh:

J3.x:Developing a component frontend update function

2016-04-20T16:13:19Z

Skyhigh:

Chunk:Developing a component frontend update function - Contents

2016-04-20T16:12:24Z

Skyhigh: Articles in this Series

{{Joomla version|version=3.x|comment=Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing a component frontend update function}}
{{-}}
<div class="large-4 columns" style="float:right; background:#fff;margin:0 0 1.0em 1.0em;">
<div class="large-12 columns panel radius mw-collapsible" style="width:100%;background:#fff;font-size:.8em">
<big>'''Articles in this Series'''</big>
<div class="large-12 columns panel mw-collapsible-content" style="border:none; background:#fff; min-width:100%;">

# [[J3.x:Developing_a_component_frontend_update_function|Introduction]]
# [[J3.x:Developing_a_component_frontend_update_function/Initial_version|Initial version]]

</div></div></div>
<noinclude>{{-}}</noinclude>
<noinclude>[[Category:Tutorials in a Series]]</noinclude>

J3.x:Developing a component frontend update function/Initial version

2016-04-20T10:42:58Z

Skyhigh:

{{Joomla version|version=3.x|comment=Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing a component frontend update function}}
{{-}}
{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

This is a multiple-article series of tutorials on how to develop a [[S:MyLanguage/Component|Component]] for frontend editing of private data by users. The tutorial also describes how to upload and download data.

Begin with the Introduction, and navigate the articles in this series by using the navigation button at the bottom or the box to the right (the ''Articles in this series'').

== 15 Preparation ==
# This package from [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip scionescire] has been adapted slightly. This adapted version can be downloaded from the link [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-15.zip here] . The modifications were mainly corrections for some minor layout issues with the sidebar, ordering and pagination with the HelloWorld component admin page.
# Install the component in Joomla:
#* Login to Joomla as administrator.
#* Select Extensions → Manage, and then the Upload Package File tab.
#* Click the 'Browse' button and select the downloaded zip file from step 1.
#* Click Upload & Install.
#* Check that the component installed properly.

Step 15 of the original Hello World tutorial is now up and running as first step in this tutorial.

=== 15.1 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-15.zip Download Joomla-Hello-Front-End v1-15]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/f06c1637382162e9c73600e6882847688526c70b View Joomla-Hello-Front-End v1-15]

=== 15.2 Testing the features of this step ===
* Enhance the database data by adding categories and publishing the database items:
** Open the HelloWorld administration page by selecting menu Components → Hello World!
** Select the Category sub menu, and enter a few categories.
** Select the 'Options' button and go to the 'Hello World!' global configuration menu. Click the radio button for 'Show' categories.
** Click the 'Save & Close' and return to the HelloWorld manager page
** You can add additional items if you like, assign categories and publish all items.
* Check that the items can now be displayed by using URL 'localhost/index.php?option=com_helloworld&id=1' , '...&id=2', etc.

J3.x:Developing a component frontend update function

2016-04-20T10:31:44Z

Skyhigh: Developing a component frontend update function

{{Joomla version|version=3.x|comment=Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing a component frontend update function}}
{{-}}
{{Chunk:Developing a component frontend update function - Contents}}
__NOTOC__

This is a multiple-article series of tutorials on how to develop a [[S:MyLanguage/Component|Component]] for frontend editing of private data by users. The tutorial also describes how to upload and download data.

Begin with the Introduction, and navigate the articles in this series by using the navigation button at the bottom or the box to the right (the ''Articles in this series'').

== 1 Introduction ==

Joomla in the first place is a Content Management System for a website with articles, blogs, forums etc. This serves well for providing or sharing public information.

When the site is targeting at a rather distinct group of users like clients or members, it is often useful to enable users to login to the system to store and retrieve personal data from the database. A typical example might be an address book.

The backend of Joomla features quite some functionality to search and edit database records for administrative purposes. There are also many extensions with such functionality, so Joomla is clearly capable of doing a decent job in this respect.

This tutorial aims to provide a guideline for creating a frontend component yourself for users to access and enter private data on the server of your website, in case the available extensions do not satisfy your needs. The tutorial starts more or less where the HelloWorld introductory tutorial of the Joomla Documentation site ends.

=== 1.1 Documentation and source files for this tutorial ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/wiki Joomla-Hello-Frontend wiki]

=== 1.2 Starting point ===

This guide continues from the tutorial 'Developing an MVC Component' (aka the 'Hello World' tutorial) from this site: [https://docs.joomla.org/J3.x:Developing_an_MVC_Component J3.x:Developing an MVC Component] .

The starting point for the source files is: [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip github.com/scionescire/Joomla-3.2-HelloWorld-Component-step-15] .

=== 1.3 Prerequisites ===

For this tutorial it is assumed that you have a recent Joomla 3.x version properly setup at a server, including a suitable version of PHP and a database. Further it is assumed that you have access to the server, both to the files and the database.

For my exercises I use Joomla 3.5 on a local Fedora 23 system with PHP 5.6.19, MariaDB v 10.0.0.23 and phpAdmin v4.5.5. So this tutorial will refer to 'localhost' as URL for the website, and /var/www/html as root folder for the Joomla website.

This tutorial assumes that you have a good understanding of the HelloWorld tutorial. As the starting point for that source is step 15, the present tutorial also starts with sequence number 15 to align with the preceding one.

=== 1.4 Disclaimer ===

I am quite new to Joomla and found it hard to find the proper development information. In this guideline I wrote down my findings as help for others looking for the same information. I am not an expert in Joomla, so can certainly not state that the guideline is free from errors.

<noinclude><div class="row">
<div class="large-4 columns">{{Basic button|J3.x:Developing_a_component_frontend_update_function/Initial_version|Let's start with the Initial version|class=expand success}}
</div></div></noinclude>

{{Version/tutor|3.4,3.5}}

Chunk:Developing a component frontend update function - Contents

2016-04-20T10:15:50Z

Skyhigh: Articles in this Series - Contents

<div class="large-4 columns" style="float:right; background:#fff;margin:0 0 1.0em 1.0em;">
<div class="large-12 columns panel radius mw-collapsible" style="width:100%;background:#fff;font-size:.8em">
<big>'''Articles in this Series'''</big>
<div class="large-12 columns panel mw-collapsible-content" style="border:none; background:#fff; min-width:100%;">

# [[J3.x:Developing_a_component_frontend_update_function/Initial_version|Initial version]]

</div></div></div>
<noinclude>{{-}}</noinclude>
<noinclude>[[Category:Tutorials in a Series]]</noinclude>

J3.x:Developing a component frontend update function/Initial version

2016-04-20T09:39:44Z

Skyhigh: Initial version

__NOTOC__

This page is part of a multiple-article series of tutorials on how to develop a [[S:MyLanguage/Component|Component]] for frontend editing of private data by users. The tutorial also describes how to upload and download data.

== 15 Preparation ==
# This package from [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip scionescire] has been adapted slightly. This adapted version can be downloaded from the link [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-15.zip here] . The modifications were mainly corrections for some minor layout issues with the sidebar, ordering and pagination with the HelloWorld component admin page.
# Install the component in Joomla:
#* Login to Joomla as administrator.
#* Select Extensions → Manage, and then the Upload Package File tab.
#* Click the 'Browse' button and select the downloaded zip file from step 1.
#* Click Upload & Install.
#* Check that the component installed properly.

Step 15 of the original Hello World tutorial is now up and running as first step in this tutorial.

=== 15.1 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-15.zip Download Joomla-Hello-Front-End v1-15]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/f06c1637382162e9c73600e6882847688526c70b View Joomla-Hello-Front-End v1-15]

=== 15.2 Testing the features of this step ===
* Enhance the database data by adding categories and publishing the database items:
** Open the HelloWorld administration page by selecting menu Components → Hello World!
** Select the Category sub menu, and enter a few categories.
** Select the 'Options' button and go to the 'Hello World!' global configuration menu. Click the radio button for 'Show' categories.
** Click the 'Save & Close' and return to the HelloWorld manager page
** You can add additional items if you like, assign categories and publish all items.
* Check that the items can now be displayed by using URL 'localhost/index.php?option=com_helloworld&id=1' , '...&id=2', etc.

J3.x:Developing an component frontend update function

2016-04-17T12:31:17Z

Skyhigh: Skyhigh moved page J3.x:Developing an component frontend update function to J3.x:Developing a component frontend update function: typo

#REDIRECT [[J3.x:Developing a component frontend update function]]

J3.x:Developing a component frontend update function

2016-04-17T12:31:17Z

Skyhigh: Skyhigh moved page J3.x:Developing an component frontend update function to J3.x:Developing a component frontend update function: typo

__NOTOC__

== 1 Introduction ==

Joomla in the first place is a Content Management System for a website with articles, blogs, forums etc. This serves well for providing or sharing public information.

When the site is targeting at a rather distinct group of users like clients or members, it is often useful to enable users to login to the system to store and retrieve personal data from the database. A typical example might be an address book.

The backend of Joomla features quite some functionality to search and edit database records for administrative purposes. There are also many extensions with such functionality, so Joomla is clearly capable of doing a decent job in this respect.

This tutorial aims to provide a guideline for creating a frontend component yourself for users to access and enter private data on the server of your website, in case the available extensions do not satisfy your needs. The tutorial starts more or less where the HelloWorld introductory tutorial of the Joomla Documentation site ends.

=== 1.1 Documentation and source files for this tutorial ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/wiki Joomla-Hello-Frontend wiki]

=== 1.2 Starting point ===

This guide continues from the tutorial 'Developing an MVC Component' (aka the 'Hello World' tutorial) from this site: [https://docs.joomla.org/J3.x:Developing_an_MVC_Component J3.x:Developing an MVC Component] .

The starting point for the source files is: [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip github.com/scionescire/Joomla-3.2-HelloWorld-Component-step-15] .

=== 1.3 Prerequisites ===

For this tutorial it is assumed that you have a recent Joomla 3.x version properly setup at a server, including a suitable version of PHP and a database. Further it is assumed that you have access to the server, both to the files and the database.

For my exercises I use Joomla 3.5 on a local Fedora 23 system with PHP 5.6.19, MariaDB v 10.0.0.23 and phpAdmin v4.5.5. So this tutorial will refer to 'localhost' as URL for the website, and /var/www/html as root folder for the Joomla website.

This tutorial assumes that you have a good understanding of the HelloWorld tutorial. As the starting point for that source is step 15, the present tutorial also starts with sequence number 15 to align with the preceding one.

=== 1.4 Disclaimer ===

I am quite new to Joomla and found it hard to find the proper development information. In this guideline I wrote down my findings as help for others looking for the same information. I am not an expert in Joomla, so can certainly not state that the guideline is free from errors.

{{Version/tutor|3.4,3.5}}

User:Skyhigh

2016-04-17T12:27:35Z

Skyhigh: Replaced content with "I recently started using Joomla for my club website. If you want to get in touch with me, post on my '''talk page'''."

I recently started using Joomla for my club website.
If you want to get in touch with me, post on my '''[[User_talk:{{PAGENAME}}|talk page]]'''.

J3.x:Developing a component frontend update function

2016-04-17T12:24:59Z

Skyhigh: Developing an component frontend update function

User:Skyhigh

2016-04-16T15:00:38Z

Skyhigh: Frontend record update function

{{JVer|3.4}} {{JVer|3.5}}

I recently started using Joomla for my club website.
If you want to get in touch with me, post on my '''[[User_talk:{{PAGENAME}}|talk page]]'''.

----

{{Version/tutor|3.4,3.5}}
__NOTOC__
== Frontend record update function ==

== 1 Introduction ==

Joomla is primarily a Content Management System for a website with articles, blogs, forums etc. This serves well for providing or sharing public information.

When the site is targeting at a rather distinct group of users like clients or members, it is often useful to enable users to login to the system to store and retrieve personal data from the database. A typical example might be an address book.

The backend of Joomla features quite some functionality to search and edit database records for administrative purposes. There are also many extensions with such functionality, so Joomla is clearly capable of doing a decent job in this respect.

This tutorial aims to provide a guideline for creating a frontend component yourself for users to access and enter private data on the server of your website, in case the available extensions do not satisfy your needs. The tutorial starts more or less where the HelloWorld introductory tutorial of the Joomla Documentation site ends.

=== 1.1 Starting point ===

This guide continues from the tutorial 'Developing an MVC Component' (aka the 'Hello World' tutorial) from this Joomla site: [https://docs.joomla.org/J3.x:Developing_an_MVC_Component J3.x:Developing an MVC Component] .

The starting point for the source files is: [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip github.com/scionescire/Joomla-3.2-HelloWorld-Component-step-15] .

=== 1.2 Prerequisites ===

For this tutorial it is assumed that you have a recent Joomla 3.x version properly setup at a server, including a suitable version of PHP and a database. Further it is assumed that you have access to the server, both to the files and the database.

For my exercises I use Joomla 3.5 on a local Fedora 23 system with PHP 5.6.19, MariaDB v 10.0.0.23 and phpAdmin v4.5.5. So this tutorial will refer to 'localhost' as URL for the website, and /var/www/html as root folder for the Joomla website.

This tutorial assumes that you have a good understanding of the HelloWorld tutorial. As the starting point for that source is step 15, the present tutorial also starts with sequence number 15 to align with the preceding one.

=== 1.3 Disclaimer ===

I am quite new to Joomla and found it hard to find the proper development information. In this guideline I wrote down my findings as help for others looking for the same information. I am not an expert in Joomla, so can certainly not state that the guideline is free from errors.

== 15 Preparation ==
# This package from [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip scionescire] has been adapted slightly. This adapted version can be downloaded from the link [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-15.zip here] . The modifications were mainly corrections for some minor layout issues with the sidebar, ordering and pagination with the HelloWorld component admin page.
# Install the component in Joomla:
#* Login to Joomla as administrator.
#* Select Extensions → Manage, and then the Upload Package File tab.
#* Click the 'Browse' button and select the downloaded zip file from step 1.
#* Click Upload & Install.
#* Check that the component installed properly.

Step 15 of the original Hello World tutorial is now up and running as first step in this tutorial.

=== 15.1 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-15.zip Download Joomla-Hello-Front-End v1-15]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/f06c1637382162e9c73600e6882847688526c70b View Joomla-Hello-Front-End v1-15]

=== 15.2 Testing the features of this step ===
* Enhance the database data by adding categories and publishing the database items:
** Open the HelloWorld administration page by selecting menu Components → Hello World!
** Select the Category sub menu, and enter a few categories.
** Select the 'Options' button and go to the 'Hello World!' global configuration menu. Click the radio button for 'Show' categories.
** Click the 'Save & Close' and return to the HelloWorld manager page
** You can add additional items if you like, assign categories and publish all items.
* Check that the items can now be displayed by using URL 'localhost/index.php?option=com_helloworld&id=1' , '...&id=2', etc.

User:Skyhigh

2016-04-15T21:50:04Z

Skyhigh:

{{JVer|3.4}} {{JVer|3.5}}

I recently started using Joomla for my club website.
If you want to get in touch with me, post on my '''[[User_talk:{{PAGENAME}}|talk page]]'''.

----

{{Version/tutor|3.4,3.5}}
__NOTOC__
== Page Test ==

== 1 Introduction ==

Joomla is primarily a Content Management System for a website with articles, blogs, forums etc. This serves well for providing or sharing public information.

When the site is targeting at a rather distinct group of users like clients or members, it is often useful to enable users to login to the system to store and retrieve personal data from the database. A typical example might be an address book.

The backend of Joomla features quite some functionality to search and edit database records for administrative purposes. There are also many extensions with such functionality, so Joomla is clearly capable of doing a decent job in this respect.

This tutorial aims to provide a guideline for creating a frontend component yourself for users to access and enter private data on the server of your website, in case the available extensions do not satisfy your needs. The tutorial starts more or less where the HelloWorld introductory tutorial of the Joomla Documentation site ends.

=== 1.1 Starting point ===

This guide continues from the tutorial 'Developing an MVC Component' (aka the 'Hello World' tutorial) from this Joomla site: [https://docs.joomla.org/J3.x:Developing_an_MVC_Component J3.x:Developing an MVC Component] .

The starting point for the source files is: [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip github.com/scionescire/Joomla-3.2-HelloWorld-Component-step-15] .

=== 1.2 Prerequisites ===

For this tutorial it is assumed that you have a recent Joomla 3.x version properly setup at a server, including a suitable version of PHP and a database. Further it is assumed that you have access to the server, both to the files and the database.

For my exercises I use Joomla 3.5 on a local Fedora 23 system with PHP 5.6.19, MariaDB v 10.0.0.23 and phpAdmin v4.5.5. So this tutorial will refer to 'localhost' as URL for the website, and /var/www/html as root folder for the Joomla website.

This tutorial assumes that you have a good understanding of the HelloWorld tutorial. As the starting point for that source is step 15, the present tutorial also starts with sequence number 15 to align with the preceding one.

=== 1.3 Disclaimer ===

I am quite new to Joomla and found it hard to find the proper development information. In this guideline I wrote down my findings as help for others looking for the same information. I am not an expert in Joomla, so can certainly not state that the guideline is free from errors.

== 15 Preparation ==
# This package from [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip scionescire] has been adapted slightly. This adapted version can be downloaded from the link [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-15.zip here] . The modifications were mainly corrections for some minor layout issues with the sidebar, ordering and pagination with the HelloWorld component admin page.
# Install the component in Joomla:
#* Login to Joomla as administrator.
#* Select Extensions → Manage, and then the Upload Package File tab.
#* Click the 'Browse' button and select the downloaded zip file from step 1.
#* Click Upload & Install.
#* Check that the component installed properly.

Step 15 of the original Hello World tutorial is now up and running as first step in this tutorial.

=== 15.1 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-15.zip Download Joomla-Hello-Front-End v1-15]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/f06c1637382162e9c73600e6882847688526c70b View Joomla-Hello-Front-End v1-15]

=== 15.2 Testing the features of this step ===
* Enhance the database data by adding categories and publishing the database items:
** Open the HelloWorld administration page by selecting menu Components → Hello World!
** Select the Category sub menu, and enter a few categories.
** Select the 'Options' button and go to the 'Hello World!' global configuration menu. Click the radio button for 'Show' categories.
** Click the 'Save & Close' and return to the HelloWorld manager page
** You can add additional items if you like, assign categories and publish all items.
* Check that the items can now be displayed by using URL 'localhost/index.php?option=com_helloworld&id=1' , '...&id=2', etc.

User:Skyhigh

2016-04-15T21:32:15Z

Skyhigh:

{{JVer|3.4}} {{JVer|3.5}}

I recently started using Joomla for my club website.
If you want to get in touch with me, post on my '''[[User_talk:{{PAGENAME}}|talk page]]'''.

{{Version/tutor|3.4,3.5}}
__NOTOC__

== 1 Introduction ==

Joomla is primarily a Content Management System for a website with articles, blogs, forums etc. This serves well for providing or sharing public information.

When the site is targeting at a rather distinct group of users like clients or members, it is often useful to enable users to login to the system to store and retrieve personal data from the database. A typical example might be an address book.

The backend of Joomla features quite some functionality to search and edit database records for administrative purposes. There are also many extensions with such functionality, so Joomla is clearly capable of doing a decent job in this respect.

This tutorial aims to provide a guideline for creating a frontend component yourself for users to access and enter private data on the server of your website, in case the available extensions do not satisfy your needs. The tutorial starts more or less where the HelloWorld introductory tutorial of the Joomla Documentation site ends.

=== 1.1 Starting point ===

This guide continues from the tutorial 'Developing an MVC Component' (aka the 'Hello World' tutorial) from this Joomla site: [https://docs.joomla.org/J3.x:Developing_an_MVC_Component J3.x:Developing an MVC Component] .

The starting point for the source files is: [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip github.com/scionescire/Joomla-3.2-HelloWorld-Component-step-15] .

=== 1.2 Prerequisites ===

For this tutorial it is assumed that you have a recent Joomla 3.x version properly setup at a server, including a suitable version of PHP and a database. Further it is assumed that you have access to the server, both to the files and the database.

For my exercises I use Joomla 3.5 on a local Fedora 23 system with PHP 5.6.19, MariaDB v 10.0.0.23 and phpAdmin v4.5.5. So this tutorial will refer to 'localhost' as URL for the website, and /var/www/html as root folder for the Joomla website.

This tutorial assumes that you have a good understanding of the HelloWorld tutorial. As the starting point for that source is step 15, the present tutorial also starts with sequence number 15 to align with the preceding one.

=== 1.3 Disclaimer ===

I am quite new to Joomla and found it hard to find the proper development information. In this guideline I wrote down my findings as help for others looking for the same information. I am not an expert in Joomla, so can certainly not state that the guideline is free from errors.

== 15 Preparation ==
# This package from [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip scionescire] has been adapted slightly. This adapted version can be downloaded from the link [https://github.com/Sky-High/Joomla3-Edit-and-Export/archive/v1-15.zip here] . The modifications were mainly corrections for some minor layout issues with the sidebar, ordering and pagination with the HelloWorld component admin page.
# Install the component in Joomla:
#* Login to Joomla as administrator.
#* Select Extensions → Manage, and then the Upload Package File tab.
#* Click the 'Browse' button and select the downloaded zip file from step 1.
#* Click Upload & Install.
#* Check that the component installed properly.

Step 15 of the original Hello World tutorial is now up and running as first step in this tutorial.

=== 15.1 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-15.zip Download Joomla-Hello-Front-End v1-15]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/f06c1637382162e9c73600e6882847688526c70b View Joomla-Hello-Front-End v1-15]

=== 15.2 Testing the features of this step ===
* Enhance the database data by adding categories and publishing the database items:
** Open the HelloWorld administration page by selecting menu Components → Hello World!
** Select the Category sub menu, and enter a few categories.
** Select the 'Options' button and go to the 'Hello World!' global configuration menu. Click the radio button for 'Show' categories.
** Click the 'Save & Close' and return to the HelloWorld manager page
** You can add additional items if you like, assign categories and publish all items.
* Check that the items can now be displayed by using URL 'localhost/index.php?option=com_helloworld&id=1' , '...&id=2', etc.

User:Skyhigh

2016-04-15T21:30:33Z

Skyhigh:

{{JVer|3.4}} {{JVer|3.5}}

I recently started using Joomla for my club website.
If you want to get in touch with me, post on my '''[[User_talk:{{PAGENAME}}|talk page]]'''.

{{Version/tutor|3.4,3.5}}

== 1 Introduction ==

Joomla is primarily a Content Management System for a website with articles, blogs, forums etc. This serves well for providing or sharing public information.

When the site is targeting at a rather distinct group of users like clients or members, it is often useful to enable users to login to the system to store and retrieve personal data from the database. A typical example might be an address book.

The backend of Joomla features quite some functionality to search and edit database records for administrative purposes. There are also many extensions with such functionality, so Joomla is clearly capable of doing a decent job in this respect.

This tutorial aims to provide a guideline for creating a frontend component yourself for users to access and enter private data on the server of your website, in case the available extensions do not satisfy your needs. The tutorial starts more or less where the HelloWorld introductory tutorial of the Joomla Documentation site ends.

=== 1.1 Starting point ===

This guide continues from the tutorial 'Developing an MVC Component' (aka the 'Hello World' tutorial) from this Joomla site: [https://docs.joomla.org/J3.x:Developing_an_MVC_Component J3.x:Developing an MVC Component] .

The starting point for the source files is: [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip github.com/scionescire/Joomla-3.2-HelloWorld-Component-step-15] .

=== 1.2 Prerequisites ===

For this tutorial it is assumed that you have a recent Joomla 3.x version properly setup at a server, including a suitable version of PHP and a database. Further it is assumed that you have access to the server, both to the files and the database.

For my exercises I use Joomla 3.5 on a local Fedora 23 system with PHP 5.6.19, MariaDB v 10.0.0.23 and phpAdmin v4.5.5. So this tutorial will refer to 'localhost' as URL for the website, and /var/www/html as root folder for the Joomla website.

This tutorial assumes that you have a good understanding of the HelloWorld tutorial. As the starting point for that source is step 15, the present tutorial also starts with sequence number 15 to align with the preceding one.

=== 1.3 Disclaimer ===

I am quite new to Joomla and found it hard to find the proper development information. In this guideline I wrote down my findings as help for others looking for the same information. I am not an expert in Joomla, so can certainly not state that the guideline is free from errors.

== 15 Preparation ==
# This package from [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-15-adding-an-install-uninstall-update-script-file.zip scionescire] has been adapted slightly. This adapted version can be downloaded from the link [https://github.com/Sky-High/Joomla3-Edit-and-Export/archive/v1-15.zip here] . The modifications were mainly corrections for some minor layout issues with the sidebar, ordering and pagination with the HelloWorld component admin page.
# Install the component in Joomla:
#* Login to Joomla as administrator.
#* Select Extensions → Manage, and then the Upload Package File tab.
#* Click the 'Browse' button and select the downloaded zip file from step 1.
#* Click Upload & Install.
#* Check that the component installed properly.

Step 15 of the original Hello World tutorial is now up and running as first step in this tutorial.

=== 15.1 Source files for this step ===
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/archive/v1-15.zip Download Joomla-Hello-Front-End v1-15]
* [https://github.com/Hy-Fly/Joomla-Hello-Front-End/commit/f06c1637382162e9c73600e6882847688526c70b View Joomla-Hello-Front-End v1-15]

=== 15.2 Testing the features of this step ===
* Enhance the database data by adding categories and publishing the database items:
** Open the HelloWorld administration page by selecting menu Components → Hello World!
** Select the Category sub menu, and enter a few categories.
** Select the 'Options' button and go to the 'Hello World!' global configuration menu. Click the radio button for 'Show' categories.
** Click the 'Save & Close' and return to the HelloWorld manager page
** You can add additional items if you like, assign categories and publish all items.
* Check that the items can now be displayed by using URL 'localhost/index.php?option=com_helloworld&id=1' , '...&id=2', etc.

2016-04-15T20:20:51Z

Skyhigh:

User:Skyhigh

2016-04-15T20:19:55Z

Skyhigh:

{{version|3.4,3.5}}

I recently started using Joomla for my club website.
If you want to get in touch with me, post on my '''[[User_talk:{{PAGENAME}}|talk page]]'''.

==My testing subpages==
Test pages
<br />

<splist/>

User:Skyhigh

2016-04-15T20:18:08Z

Skyhigh:

{{JVer|3.4}}

I recently started using Joomla for my club website.
If you want to get in touch with me, post on my '''[[User_talk:{{PAGENAME}}|talk page]]'''.

==My testing subpages==
Test pages
<br />

<splist/>

User:Skyhigh

2016-04-15T20:17:48Z

Skyhigh:

{{JVer|3.5}}

I recently started using Joomla for my club website.
If you want to get in touch with me, post on my '''[[User_talk:{{PAGENAME}}|talk page]]'''.

==My testing subpages==
Test pages
<br />

<splist/>