New video series: Building with XenForo 2

A long time ago, in a forum not particularly far, far away (may the fourth be with you), we produced a series of videos showing off how easy it was to build rich pages with XenForo's templates and javascript framework.

While many of the principles demonstrated in these videos remain a key part of XenForo 2, most of the syntax employed by XenForo 1 back then has changed, and there are many more tools at your disposal, like entities and command-line functions.

Building with XenForo 2


Alongside the release of XenForo 2.2.5, it seemed a good time to put together a new series, rounding up all of the key parts of XenForo add-on development, starting with the basic steps of creating a new add-on and moving on to the template system, working with the database using finders and entities, creating and editing content, putting together paginated lists of content items and extending existing classes to add new functionality.

We hope that the videos have something for everyone, from those who are only just starting to think about building with XenForo to those who have been doing so for ages, and may even trigger the realisation that XenForo is not solely a platform upon which add-ons for XenForo can be built, but rather a community framework, capable of acting as the foundational layer for rich community applications in their own right.
Video series logo - Building with XenForo 2
Parts one and two of the series are released today, with parts three and four to follow tomorrow.



On Thursday, as part of XenForo Insights Episode 6 (9am US Central, 3pm UK time via Zoom) we'll have a live recap of the steps so far, and a look ahead to what's in parts five and six, which will be posted immediately following the webinar.

Further parts of the series will be released in the coming days.

Each new part posted will be added to the Building with XenForo 2 playlist.

If you have any comments or suggestions, please post them here in this thread rather than over at YouTube so we can handle them like other content posted here and ensure that they receive the attention they require. As always, requests for technical support should be directed to the appropriate forum.

Here is a list of the videos in the series, which we'll keep updated as new parts are published:
  1. Getting started
  2. Creating and linking test pages
  3. Passing variables to templates
  4. Working with the database - entities and finders
  5. Creating a custom entity
  6. Creating, editing and saving content
  7. Building a form
  8. Listing your content
  9. Paginating your content lists
  10. Class extensions and self-to-many relations
  11. Implementing inline editing with the XF javascript framework
  12. Utilising the Delete controller plugin
  13. Working with permissions
  14. Implementing Reactions
 
Last edited:

Idhae

Active member
That’s a custom live template I’ve built for PhpStorm - I’m going to look into packaging them up and putting them on the resource manager next week
That is awesome and what else to say, you have done a really good job kier.
Thanks
 

Kier

XenForo developer
Staff member
Live templates now available here: https://xenforo.com/community/resources/phpstorm-live-templates-for-xenforo-2.8382/

screen-recording-2021-05-10-at-12-22-28-animated-screencap-5fps-gif.251620
 
Last edited:

XenForo

Company info
Staff member
We hope you had a good weekend, and are all set for today's updates to Building with XenForo 2. Today, we have part nine - pagination and part ten - class extensions and self-to-many relations available.

Part nine takes the list of content we build in part eight and adds the PHP and template code required to turn it into a paginated list. Beginning with a quick overhaul of the actual note display to make a little more visually appealing, we then move into the route manager to check how to pass a page parameter, before updating our finder calls to slice the results into pages. Next, we use the <xf:pagenav> tag in the template to build the pagination links before finishing with a quick look at the difference between passing the page as a route parameter or through the standard query string.


The tenth part gets a bit techie. We created a new entity in part five, which related to the existing XF:User entity, so strictly speaking there should be reciprocal relation from the XF:User entity back to the Demo/Pad:Note entity. To do that, we need to add functionality to XF:User using the XenForo Class Extension System. This allows us to define 'Notes' as a self::TO_MANY relation, and we look at how to make use of these properties on existing entities, fetching related entities directly from the template with no additional PHP required.

 

ShikiSuen

Well-known member
May I repost these videos to Bilibili to make them easier to be accessed by viewers in Mainland China?
Through these videos, they will know why XenForo is 10 years ahead of Comsenz Discuz.

// P.S.: BTW, Kier, are you a desktop musician? I saw MIDI gears in your video.
 

XenForo

Company info
Staff member
Although YouTube seems to be taking what feels like a geological age to process the 4K version and subtitles, part eleven - building inline edit is now published.

This bumper video takes the existing edit-and-redirect functionality and improves it with an editor loaded in place of the note content rather than in an overlay, then it intercepts the success response from PHP to update the content within the note item without ever having to reload the page.


This will be the last video from this series for a few days, so if there are any requests for systems to cover in future parts, now is the time to say so.
 

sbj

Well-known member
Thanks for these videos. I find "hands-on" kind of tutorials the best to learn from. I also like that you are engaging with the community in this way, much appreciated.

I was saving these videos for "later" and wanted to give proper feedback then but seeing that it might be the end of these series, I have to chime in now. So, I have only seen the first two and you might have covered the stuff I will suggest in later videos, I apologize if that is the case.

I am not a developer and want to make suggestions based on what I would struggle with.

1.
A)
First of all, it would be nice to have some beginner level tutorials in general. Not sure if it is possible to be more basic then what was already shown though. I would say that experienced developers will find a way to develop on any platform anyway and these videos will help them definitely. But maybe there are also some enthuasiasts who are new in development and tutorials geared towards them would be nice. For example a simple button, a simple table, a simple read from the database, stuff like that.

B)
Also an explainer video about the concept of XF would be nice. It follows mostly MVC but like "hands-on" explanation about the concept would be nice. In the old XF1 there was the datawriter, the models, controllers etc. Now we have entities and finders. There are these "public" and "admin" side of things in the structure. So like how is XF designed in general, so we can understand the "architecture".

2.
Secondly, these are the popular things to be found in the XF eco-system: alerts, widgets, search, attachments
So it would be nice if there were tutorials which show how to add an alert to an addon, or how to add a widget, or how to enable searching, or how to interact with attachments etc.

3.
Thirdly, my personal suggestions.

A)
These may be related to "IDE using" rather than "XF development", but what I would like to see is how you guys use your IDEs to find things, to debug things, how you quickly see which parameters are passed/available. For example in many development discussions common answers are like this: "Go and look in .../.../...php files and see how XF did it." Okay, good, but how did XF do it is not explained. It is left to the person to find it out. Of course I am not expecting every function explained here, but like the gist of how one can debug "what XF did" in that particular case. So I want to understand how one can track down what that one function does, we are supposed to look at, which will help us in our problem. Okay, I opened that one file, now what? How can I see what it does so I can understand it, copy it over and apply it to my case?

B)
Stuff like using var:dump, how, where and when might be very useful. Like these kind of intagible helper things are very important and are skipped over. Most expect you to know these "tricks" and often it is not the case.

C)
Also how to read error code and how to resolve them is an important aspect. Say my addon spits out an error in ACP. What are the steps to do here? How to fix an error? How can I be sure my error was fixed?

D)
Talking about resource standards would be nice. I guess not everyone is a professional and not everyone follows modern standards. So displaying the "wrongs" and "rights" of how to do things would be nice.

E)
My personal confussion: events, hints, listeners. Can you explain the differences, where to use them and how to use them? They all sound like they are the same thing to me. And sometimes they are there, sometimes not. I don't get those.

4.
Fourth, these are not for beginners like me but many people ask for 3rd party integrations. Many people ask how they can add a payment provider to the system, or how to integrate system x with XF or how to sync both platforms, or how to use the API. These kind of tutorials could be useful for experienced devs.


Sorry for "suggesting" this much. I just wanted to write them all down since this may be my only chance to do so.

Thank you.

PS: You have a very soothing voice, watching your videos are very relaxing. The production of the videos are great, nothing to criticize on.
 
Last edited:

Kier

XenForo developer
Staff member
@sbj thank you for such detailed feedback, it's most appreciated. Let me see if I can address some of your points.

First up, while there will be a break before the next batch of videos, part 11 is not the end of the series, it just seemed like a good place to pause while I get on with other stuff that needs to be done.

1A. I'll look into getting some short format videos done for things like options for buttons in XenForo. With regard to reading from the database, I think you'll find that part 4 of the series goes into some detail about how to do that with Finders and Entities.

1B. A high-level overview of the XenForo architecture would probably be useful, I'd just need to think through how best to present it. I'll give it some thought...

2. Those topics (alerts, widgets, search and attachments) seem like good candidates for future videos.

3A. Again, I'll put some consideration into how to present something on this topic.

3B. I think there's something in part 3 that goes some way to addressing this

3C. That's a very wide ranging subject, perhaps there's some explanation that could be made, but it's slightly beyond the scope of this tutorial series to describe the intricacies of reading a PHP stack trace. I'm sure there are resources elsewhere that would do it better than I could. Perhaps there are some XF-specific steps I could go into.

3D. Again, this is a very broad subject and probably not best codified in a video.

3E. These also sound like reasonable topics for future videos.

4. An example use of the API could be covered in a video, but we'd need to get really specific with third-party integration tutorials... I'm not sure how that might go.

@Lee Alert handlers seem to be a popular suggestion so I'll cover that. With regard to complex routing and building a category tree, could you be a bit more specific as to what you'd like to achieve and what you'd want to see in a corresponding video?
 

sbj

Well-known member
Thank you for making these videos and considering my suggestions. Also nice to hear that in future we'll see more videos.

About 3C/D, sorry for suggesting such broad things. Of course you are not here to teach PHP. I just thought like a quick overview of things you often see XF developers do wrong and should do it the standard way good be nice to have. Or like how you guys approach errors. Obviously in the PHP world there are so many things standardized and so many stuff to consider in errors, you can't cover everything. But perhaps some quick "general" tips and tricks could have been nice but I am just suggesting, not sure how feasible this can be, because it is such a broad thing. This is not that important anyways, there are more important topics to cover first.

About the 4th point; like after the "beginner" stuff is out of the way and after the "general" things are also done (like widgets, alerts, etc.) then if you have had time, you might cover more advanced stuff which seem to be popular requests. Obviously there are so many 3rd-party things and you can't ever cover them all, but maybe like the common asked shared features.

Now so many countries have their own payment providers. Sadly, in the RM there are maybe 1 or 2 addons which offer different payment providers, even though I am sure many admins would like to see some national providers integrated. But since you can't integrate all of them into XF, maybe picking 1 payment provider as an example and demonstrating how to integrate it would be nice. So people could follow that tutorial and perhaps add different providers by themselves or point their developers to that video for the gist of it. So we are not in the mercy of Paypal all the time.

And about 3rd-party thing, maybe like pick a popular software and demonstrate how you can use XF's API or their API on XF. Or other popular requests are like "I have software x as my portal/marketplace and XF as forum, how can I sync the registrations/users?" or "how can I sync my database x with XF's database". But again, these all are like more advanced and perhaps should be done at the end of all these videos series as a finisher. My own personal wishes are the more beginner and general stuff, but I also wanted to voice these popular requests I see often here in the forum.

Thanks again.

PS: Say, when we have watched a video and want to ask something very specific said in the video, should we open a new thread about it in the developer forums? What is the best way to ask questions about the specifics talked about in the videos? This thread might not be the best fit I would assume?
 

Kier

XenForo developer
Staff member
@sbj i’d ask here first, and if the discussion warrants a new thread, I’ll split it from here into a new thread in the appropriate forum
 

Myke623

Active member
Thank you so much for this, and while I have yet to watch the entire series, I would like to go on record, FWIW, as to saying that I both love and hate video tutorials. Love them because of the self-guided pace and intimacy it provides in being to look at how someone else works; but hate them because it's near impossible to use them as a future reference to "search" for that thing you kind-of-but-not-quite remembered how to do. So in the interests of making these a bit more "future reference friendly":
  • It would be nice if the OP included links to, not necessarily embed, all the videos. Or at least change the playlist link to display the actual playlist (i.e. index of videos), rather than automatically play the first video within the playlist.
  • Each video's description seems to contain a table of contents of the topics covered (which is great!), but what would make these even better if they were timestamped. If you start the timestamps from 00:00 then YouTube will automatically add chapter markers to the progress bar.
Finally, may I request a tutorial on Content Types? That is, creating a particular CT that then leverages functionalities like comments, likes, follows, etc. If this video series does in fact cover CTs then I apologise in advance!
 
Last edited:

Kier

XenForo developer
Staff member
@Myke623 thanks for that - I've gone ahead and fixed the playlist links in the OP and added a list of the videos in the series to the end of the article, which I'll keep updated.

I did actually add timestamps already for part 11, but I've yet to go back and do all the other videos, but the tip about the 00:00 timestamp and chapter markers is very useful, thank you!

Content types is on the slate for treatment in a future video, you'll be pleased to hear :)
 
Top