[ANDIS KENOTE ZENDCON 2010]

Building Custom Applications using Joomla! & Fabrik

Presentation by Tessa Mero Oct 20, 2015

#

1

College Instructor Open Source Contributor

Previous Systems Applications DevWho Am I?

#

#Why Use Joomla!What is FabrikCreating Data ModelsSteps in Systems DevelopmentCreate a Rudimentary Movie Rental ApplicationCreating Fabrik Forms/Lists/Elements/Groups for Your ApplicationExtending Your ApplicationView Your Finished Product!OVERVIEW

#

#

3

Finished Product

#

#FINISHED PRODUCT

Customers Data with the Movies Rented information joined. The Rented movie information has a database join from the Movies table.4

Easy to install and set up (assuming you dont use a crappy host)Set up a free subdomain and hosting account at cloudaccess.netSet up a free subdomain/hosting at Joomla.com (with restrictions)Lots of documentation especially for building your own extensionsAnd several great options for using custom application building tools, such as Fabrik, Seblod, and SobiPro. (Im a fan of Fabrik obviously) The community is amazing and very welcomingIts 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?

#

#20 new extensions per day added to the directory5

Installable Extension for Joomla called a ComponentA Custom Application BuilderOver 126 plugins and counting available to extendCheck out their website at http://fabrikar.comYou 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 FabrikLots of existing integrations, and easily create your own (connect tables)What is Fabrik?

#

#Work with clients (or users) to determine their workflow to understand how to build the applicationCreate diagrams, flowcharts, and any tools to have visual diagrams of the workflow of the businessRun through it with every team or department until every group agrees.Avoid Scope Creep!!!!Build the Application!Planning Ahead Systems Development Process

#

#Needs to have database that stores information for 3 things: DVDs, Customers, and RentalsEach DVD needs to have a QR code for scanningYou can search customers by Email or Last NameNeeds to have main page to be Customer list and what each has rented out

Keeping it Simple!Rudimentary System Video Rental Application 1.0

#

#To keep things very simple, this application will need to have a database that stores information for 3 things. DVDs, 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.8

Create Your Database Design Part 1 Data Diagram

#

#Define each column type (metadata): Plan Ahead.Date? Integer Only? Any characters allowed? Character limit?Plan Out Your ViewsHow do you want your data displayed?

Create Your Database Design Part 2 - MetaData

#

#Overview of Fabrik in the Backend

#

#Go over every tabbed section.

Lists Shows the list of forms that you can manage the way it lists the dataForms Shows the list of forms you have and you can manage your form optionsGroups Manage groups of fields in each form, and manage the joined data to each formElements Manage the fields in each formVisualizations Create graphical representation of your dataPackages Create all your fabrik/lists as one installable package to import into other fabrik sitesConnections Manage all your database connections. You can use as many databases as you wantSchedule Create Cron jobs to automate scripts11

Time to Implement!

#

12

Create Your Fabrik Forms

#

#This is the screen you will be on. At this point, you will have a fresh Joomla 3.4 installed. Youll 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 Ill 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!13

View Your Fabrik Lists

#

#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.14

View PHPMyAdmin

#

#As you can see, when you create a new form, it adds a new table in your Database.15

What if I have Existing Tables?

#

#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.16

View Your Fabrik Elements (Fields) Part 1

#

#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 youll need to do is click on Elements on the Fabrik tools. And filter by the Form you want to add elements to.17

View Your Fabrik Elements (Fields) Part 2

#

#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.18

Create Your Fabrik Elements

#

#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, youd have the city/state as dropdowns.19

PHPMyAdmin View

#

#Create Elements for Movies table

#

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

21

Create Elements for Rented Table

#

#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 youll see in the frontend dropdown list. As for the customers, youll 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 Ill 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, Im 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.22

We will be working with the LEFT JOIN keywordReturns 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 TypesInner Joins only matching recordsRight 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?

#

#The next step well 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,.23

Create Menus View Your 3 Tables

#

#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 PHPMyAdmin24

Create a Database Join in Your List

#

#We are going to want to make a View where you can add multiple rented movies for each customers.So youll 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_idYou can unshow columns by clicking on Remove from List to get rid of stuff that doesnt need to be displayed.

25

What did the DatabaseJoin do?

#

#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.26

Looking Further - Extending Your Application

#

27

Adding Filters - Edit Element (Name and Email)

#

#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.28

List View Filters Enabled

#

#List View Edit movie_id field

#

#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.30

Elements - Adding JavaScript Field Validations

#

#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.31

Groups are a collection of elementsCan be used to create tabbed form dataConsidered similar to html elementEvery Element needs to be assigned to a groupYou can Set Groups to be Repeated Data if its a one to many relationshipSetting a group of elements on a table to repeated data will create a new database table by defaultSetting a database join to repeated data will remain the same, but allow you to add many items for each parent dataWorking with Groups (optional)

#

#Repeated Data Rented Movies

#

#

Working With Access Levels

#

#You can set Access Level Controls for the following:Form/List View, edit, Use Field, Add RecordsElement Access per user group or Read Only Access for user groupMenu Joomla Access Level, which will override the fabrik ACL34

Template Overrides and Custom Coding

#

#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.35

Menu Overrides - Custom Views

#

#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 its 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 wouldnt 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.36

Twitter: @TessaMero Follow me!!! :-DWebsite: http://tessamero.comEmail: tessa.mero@joomla.orgThank You!!! Questions?

#

#