examples:builder:singe_attachment

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
examples:builder:singe_attachment [2020/09/15 09:40]
orville [Step 4: Upload media/files] 		examples:builder:singe_attachment [2021/12/09 10:56] (current)
pdsci-admin
Line 2: Line 2:
  
 ====== Single media/file attachment: attachOne ====== ====== Single media/file attachment: attachOne ======
-With the //attachOne// function files like images, movies or documents can be attached to a record of a database table. Media attachments are using built-in relations of OctoberCMS. So it is very easy to implement them.+With the //attachOne// function files like images, movies or documents can be attached to a record of a database table. Media attachments are using built-in relations of WinterCMS. So it is very easy to implement them.
  
 <WRAP tip> <WRAP tip>
 **Todo Cheat Sheet**\\ **Todo Cheat Sheet**\\
-  * Add relation configuration to the controller +  * Add code to model: public $attachOne = ['yourFieldName' => ['System\Models\File', 'public' => false]]; 
-  * Add code to model: public $attachOne = ['yourField' => ['System\Models\File', 'public' => false]]; +  * Add new //file upload// widget to the backend form with 'yourFieldName' as field name 
-  * Add new //file upload// widget to form with 'yourField' as field +  * Set at least allowed file extensions, width and height of image (if image files) 
-  * Set allowed file extensions, width and height of image (if image files) +
 </WRAP> </WRAP>
  
Line 22: Line 21:
 Prerequisites are\\ Prerequisites are\\
   * an installed [[https://octobercms.com/plugin/rainlab-builder|builder plugin]]   * an installed [[https://octobercms.com/plugin/rainlab-builder|builder plugin]]
-  * any source code editor or e.g. the [[https://octobercms.com/plugin/indikator-devtools|Developer Tools]] plugin with built-in Code editor like in the screenshoots+  * any source code editor or e.g. the [[https://octobercms.com/plugin/indikator-devtools|Developer Tools]] plugin with built-in Code editor like to be seen on the screenshoots
   * a database table for records to attach the media to   * a database table for records to attach the media to
   * a form (at least in backend) to display the media   * a form (at least in backend) to display the media
Line 31: Line 30:
   * how to create a plugin with builder   * how to create a plugin with builder
   * how to create tables and forms with builder   * how to create tables and forms with builder
-===== Step 1: Extend the controller  ===== 
  
-As for any relation OctobrCMS requires a relation behaviour. This simply means to tell October how to deal with relations.\\ 
-The main controller file is located in the respective plugin directory, subdirectory /controllers/ \\ 
-For our //library// example with the //book// table this is\\ 
-    /pds/library/controllers/books.php 
  
-Here there are two changes required:\\ +===== Step 1: Extend the base model =====
- +
-{{:examples:builder:attachone.3.controller-extension.jpg?direct&960 |}}  +
-<WRAP clear /> +
-\\ +
-\\ +
-Here is the source code, required changes are highlighted:\\ +
- +
-<sxh php; highlight: [10,18]> +
-<?php namespace Pds\Library\Controllers; +
- +
-use Backend\Classes\Controller; +
-use BackendMenu; +
- +
-class Books extends Controller +
-{ +
-    public $implement = ['Backend\Behaviors\ListController', +
-                         'Backend\Behaviors\FormController', +
-                         'Backend\Behaviour\RelationController']; // this line adds the relation behaviour +
-     +
-    public $listConfig = 'config_list.yaml'; +
-    public $formConfig = 'config_form.yaml'; +
-     +
-    //add configuration of relation for Books +
-    // this file has to be created then manually inside the +
-    // [namespace]\controllers\[controllername] folder +
-    public $relationConfig = 'config_relation.yaml';  +
- +
-    public function __construct() +
-    { +
-        parent::__construct(); +
-        BackendMenu::setContext('Pds.Library', 'library-main-menu-item'); +
-    } +
-} +
-</sxh> +
-\\ +
- +
-===== Step 2: Extend the base model =====+
  
 The base model requires to know the type of desired relation as well as the name of the relation. This name can be seen like a field name of a database-table.\\ The base model requires to know the type of desired relation as well as the name of the relation. This name can be seen like a field name of a database-table.\\
  
-The base model is located in the plugin directory, subdirectory //models// using the singular of the related db-table name. In our library example this is:\\+The base model is located in the plugin directory, subdirectory //models// using the singular of the related db-table name. In our example in the namspace //pds// the plugin //library// with a //book// model this is:\\
     /pds/library/models/book.php     /pds/library/models/book.php
  
Line 87: Line 44:
 <WRAP clear /> <WRAP clear />
 \\ \\
-These are the lines of code to add (comments are not necessary, of course, but they will help to maintain the code):\\+These are the lines of code to add for the library example to add images of book covers with a new related field called //cover//.\\ Notice, that the chosen name for this new field must not exist already in the parent table where the related image will be attached to!\\
 <sxh php> <sxh php>
     // add a relation for a SINGLE image, field name is 'cover'     // add a relation for a SINGLE image, field name is 'cover'
Line 97: Line 54:
 \\ \\
  
-===== Step 3: Prepare the form ===== +===== Step 2: Prepare the form ===== 
-Next step is to complete the form with an additional field to upload and display media and/or files:\\+Next step is to complete the form with an additional field - the **File upload** widget to upload and display media and/or files:\\
  
 {{:examples:builder:attachone.1.fields.jpg?direct&960 |}} {{:examples:builder:attachone.1.fields.jpg?direct&960 |}}
 <WRAP clear /> <WRAP clear />
 \\ \\
-===== Step 4: Upload media/files =====+===== Step 3: Upload media/files =====
  
 Finally, in the backend form view of the plugin, a file can be uploaded by clicking on the //file upload symbol// - the area below the 'Cover Image' title in the example:\\ Finally, in the backend form view of the plugin, a file can be uploaded by clicking on the //file upload symbol// - the area below the 'Cover Image' title in the example:\\
 {{:examples:builder:attachone.5.final-upload.jpg?direct&960 |}} {{:examples:builder:attachone.5.final-upload.jpg?direct&960 |}}
 +<WRAP clear />
 \\ \\
 +Now the form is ready to attach images and/or files to each record.\\
 +----
 \\ \\
- +Back to [[:start|Start Page]]
----- +