Downloaded 101 times
Uploaded byTessa Mero
Developing Custom Applications with Joomla! and Fabrik
The document provides an overview of a presentation about building custom applications using Joomla! and Fabrik. The presentation covers why to use Joomla!, what Fabrik is and how it can be used to build custom applications, steps for systems development like planning and creating data models, and an example of building a rudimentary movie rental application in Fabrik including creating forms, lists, elements and groups. It also discusses further extending applications through features like filters, joins, access levels, template overrides and custom coding.
More Related Content
Similar to Developing Custom Applications with Joomla! and Fabrik
![[2015/2016] Local data storage for web-based mobile apps](https://cdn.slidesharecdn.com/ss_thumbnails/06localstorage-160413121847-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Developing Custom Applications with Joomla! and Fabrik
- 1. Building Custom Applications usingJoomla! & Fabrik Presentation by Tessa Mero – Oct 20, 2015
- 2. 2 College Instructor Open SourceContributor Previous Systems Applications Dev Who Am I?
- 3. 3 • Why UseJoomla! • What is Fabrik • Creating Data Models • Steps in Systems Development • Create a Rudimentary Movie Rental Application • Creating Fabrik Forms/Lists/Elements/Groups for Your Application • Extending Your Application • View Your Finished Product! OVERVIEW
- 4.
- 5. 5 • Easy toinstall and set up (assuming you don’t use a crappy host) Set up a free subdomain and hosting account at cloudaccess.net Set up a free subdomain/hosting at Joomla.com (with restrictions) • Lots of documentation especially for building your own extensions And several great options for using custom application building tools, such as Fabrik, Seblod, and SobiPro. (I’m a fan of Fabrik obviously) • The community is amazing and very welcoming • It’s Open Source and Downloaded over 50 MILLION times! • Over 7,455 extensions on the Joomla Extensions Directory (JED) • Core Devs Working Hard on New Architecture of Joomla 4 Why Use Joomla?
- 6. 6 • Installable Extensionfor Joomla called a Component • A Custom Application Builder • Over 126 plugins and counting available to extend • Check out their website at http://fabrikar.com • You can build anywhere from a very advanced user application to a real estate application. Simply, you can build anything! • A lot of Joomla businesses use Fabrik for custom apps for a living! • Integrate other Joomla Extensions easily to Fabrik Lots of existing integrations, and easily create your own (connect tables) What is Fabrik?
- 7. 7 • Work withclients (or users) to determine their workflow to understand how to build the application • Create diagrams, flowcharts, and any tools to have visual diagrams of the workflow of the business • Run through it with every team or department until every group agrees. • Avoid Scope Creep!!!! • Build the Application! Planning Ahead – Systems Development Process
- 8. 8 • Needs tohave database that stores information for 3 things: DVDs, Customers, and Rentals • Each DVD needs to have a QR code for scanning • You can search customers by Email or Last Name • Needs to have main page to be Customer list and what each has rented out Keeping it Simple! Rudimentary System – Video Rental Application 1.0
- 9. 9 Create Your DatabaseDesign – Part 1 – Data Diagram
- 10. 10 • Define eachcolumn type (metadata): Plan Ahead. Date? Integer Only? Any characters allowed? Character limit? • Plan Out Your Views How do you want your data displayed? Create Your Database Design – Part 2 - MetaData
- 11. 11 Overview of Fabrikin the Backend
- 12.
- 13.
- 14. 14 View Your FabrikLists
- 15.
- 16. 16 What if Ihave Existing Tables?
- 17. 17 View Your FabrikElements (Fields) – Part 1
- 18. 18 View Your FabrikElements (Fields) – Part 2
- 19. 19 Create Your FabrikElements
- 20.
- 21. 21 Create Elements forMovies table
- 22. 22 Create Elements forRented Table
- 23. 23 • We willbe working with the “LEFT JOIN” keyword Returns all rows from left table (the table you are joining to) with any matching rows from the right table (the other table). If there are no matching data, it will show as NULL/Blank. • Other Join Types Inner – Joins only matching records Right – Opposite of Left Join! (return all rows from right table with matching from left table. Null in the left side when there is no match) What is a Database Join?
- 24. 24 Create Menus –View Your 3 Tables
- 25. 25 Create a DatabaseJoin in Your List
- 26. 26 What did theDatabaseJoin do?
- 27. Looking Further -Extending Your Application
- 28. 28 Adding Filters -Edit Element (Name and Email)
- 29. 29 List View –Filters Enabled
- 30. 30 List View –Edit movie_id field
- 31. 31 Elements - AddingJavaScript Field Validations
- 32. 32 • Groups area collection of elements • Can be used to create tabbed form data • Considered similar to <fieldset> html element • Every Element needs to be assigned to a group • You can Set Groups to be Repeated Data if it’s a one to many relationship Setting a group of elements on a table to “repeated data” will create a new database table by default Setting a database join to “repeated data” will remain the same, but allow you to add many items for each parent data Working with Groups (optional)
- 33. 33 Repeated Data –Rented Movies
- 34. 34 Working With AccessLevels
- 35. 35 Template Overrides andCustom Coding
- 36. 36 Menu Overrides -Custom Views
- 37. 37 • Twitter: @TessaMeroFollow me!!! :-D • Website: http://tessamero.com • Email: tessa.mero@joomla.org Thank You!!! Questions?
Editor's Notes
- #5 FINISHED PRODUCT Customers Data with the Movies Rented information joined. The Rented movie information has a database join from the Movies table.
- #6 20 new extensions per day added to the directory
- #9 To keep things very simple, this application will need to have a database that stores information for 3 things. DVD’s, Customers, and Rentals. There has to be a main page to manage with a customer list and what they have rented out. The application needs to send automated emails out everyday to customers with overdue rentals. Total development time: 1 hour. Note, this is only a basic edition of a video rental application. It would take a little bit more than an hour to make it very professional and ready to be used. It would also need scanning technology. Your homework would be to make a version 2.0 of this application.
- #12 Go over every tabbed section. Lists – Shows the list of forms that you can manage the way it lists the data Forms – Shows the list of forms you have and you can manage your form options Groups – Manage groups of fields in each form, and manage the joined data to each form Elements – Manage the fields in each form Visualizations – Create graphical representation of your data Packages – Create all your fabrik/lists as one installable package to import into other fabrik sites Connections – Manage all your database connections. You can use as many databases as you want Schedule – Create Cron jobs to automate scripts
- #14 This is the screen you will be on. At this point, you will have a fresh Joomla 3.4 installed. You’ll have Fabrik installed, which you can find on the Joomla Extensions Directory, and you will have a template installed and configured. If these are steps that you do not understand, come find me later on and I’ll help you get Joomla set up on your computer. You can also find me at the Joomla sponsor booth and I can get you set up!
- #15 Your next step would be to click on the “Lists” tab on the Fabrik tools list. Your list automatically generates when you create a form. You can add elements (fields), edit the forms, and view the data from this view as well, but I will be showing the longer method to make things less confusing.
- #16 As you can see, when you create a new form, it adds a new table in your Database.
- #17 If you have existing database tables that you want to input into fabrik, you can go to “List” and create a new List. Then select a database table.
- #18 So what happens after you create a form? Your next step would be to create elements, which are the fields of your form. The first thing you’ll need to do is click on “Elements” on the Fabrik tools. And filter by the Form you want to add elements to.
- #19 You will notice that each form has 2 elements. The “id” and the “date_time” field. Every form you create will come with this by default. You can remove or unpublish the date_time field, but every form will have to have the “id” field, which is the primary key, or the unique identifier of the database table.
- #20 I will demonstrate how to create elements on your form. Remember, elements are also known as fields in your database table. And another note: I have cropped the top part of the page, so it does say which element, form, or list you are working on, but I had no room to display it. There are a lot of options you can add to each element. In a production scenario, you’d have the city/state as dropdowns.
- #22 So now we are creating fields to the movies tables. As for elements, you can have as many elements as you want, but if it becomes a long list and unmanagemeable, you should create the list as a separate database table and connect it as a databasejoin dropdown instead, which I will show you later. You can set your field to show up as a QR code for scanning, which will be great for the Movie rental database.\ Then we will click all and show in list for now, so we can see what it looks like.
- #23 So now we are creating rented table with dropdown fields from the customer table and movie table. So start by filtering the form to the Rented table, you can create a new field of the databasejoin type, and click on data to connect to the database. The ID will be the value stored in the database, and the value is what you’ll see in the frontend dropdown list. As for the customers, you’ll want to concat the label of the first and last name so they are combined. Do the same for the movie table. Date Rented field. Date due field – it will require a plugin called the “Calc Element” where you can create custom php code, which is only good for a few lines of code. Anything more than that will require custom coding, which I’ll show you later how that works. In this example, I downloaded the calc plugin from the fabrikar website and installed it like a regular extension in Joomla. Then I go into the plugin manager and enable it. It will immediately show up in the dropdown list of element types. (or field types). In this PHP code, I’m making the due date automatically be set to 3 days after it was rented. Then using the “Ajax Calculation” to automatically update without saving first.
- #24 The next step we’ll want to do is create a database join from the Rented table to the customer table so we can see full information about what each customer rented. But what is a database join? There are 3 types of joins,.
- #25 Just a note: I have pre imported data to save time. You can import data by the fabrik import function or doing it straight from PHPMyAdmin
- #26 We are going to want to make a View where you can add multiple rented movies for each customers. So you’ll want to make a copy of your Customers List before you join data from the Rented table. The JOIN options is basically saying “SELECT * FROM tbl_customers LEFT JOIN tbl_rented ON tbl_customers.id = tbl_rented.customer_id You can unshow columns by clicking on “Remove from List” to get rid of stuff that doesn’t need to be displayed.
- #27 So to make it make more sense, what Fabrik is doing is running a MySQL statement for that List View to JOIN the 2 tables together and display the data on your custom List view called Customers Rented.
- #29 When you go to your Elements section and filter by the “Customers Rented” page, you will see this screen here. You can set your list view settings and filters to search by auto-complete, which is an ajax search method. Set this for the email field as well.
- #31 At this point, you will want to show the movie_id field, change the label to “Movie” and set it to display in the list. You will now be able to see what movies are rented out.
- #32 You can select from a range of actions for basic JavaScript validations by clicking on your element and click on “Validations” tab on the left. Then select the action, and an error message. You can select the “JavaScript” tab on the left and write your own custom code for validation errors.
- #35 You can set Access Level Controls for the following: Form/List – View, edit, Use Field, Add Records Element – Access per user group or Read Only Access for user group Menu – Joomla Access Level, which will override the fabrik ACL
- #36 Three major ways of custom Coding: Custom Template PHP Code: Edit the layout and make your page look completely different. For custom PHP and JavaScript plugins, you can add the files in these particular directories, and go into the List or Form options and click on the PHP or JavaScript tab and your files will display on the Plugin list. Custom PHP Plugins – Create your own PHP plugin Custom JavaScript Plugins – Create your own JavaScript files – You can also set it in the list options to fire off your javascript plugin for specific event handlers.
- #37 You can control the way each list is represented in each menu with using the same exact List data. You can edit the “ADD URL”. You can change the template it’s using with your custom code. You can set what columns to “Show in List” which will override the List data, and you can set pre-filters. This was very useful when I had an application built for multiple user groups in different brands in the company to view the same data set but for their brand, so when someone from Brand A would log in, they would see the data for only their brand and wouldn’t have to filter it out each time. It is also useful when I had multiple company vendors being able to view/edit data without seeing the list of other vendor data as well.