Developing my Vanilla Forum
(Sorry for the long drawn out posting here)
Hi so I am building a website using vanilla forums. My budget is not very much for this project.
About a year ago I had idea to build a chat program with a user ranking feature and I told 2 of my friends. One of whom designed my previous website and another who did AutoCAD designs. I decided not to go ahead with the project because I was moving to our land in the countryside and I didn’t want to take on any projects and lose money. They were both encouraging me to go ahead with the project and together all 3 of us came up with a wireframe design. I didn’t have money to pay into the production of the app so it was forgotten.
A few months later I got a call from my website designer in Bangladesh and he wanted to continue the project. I told him I’m not in a position to put money in but he said don’t worry just pay me $300 a month and I will take a small percentage of the business if it goes well.
Another few months later he called me again and said he is ready to start. I said OK I can send you some money and then I will give you the AutoCAD designers direct contact because I will be out in the village with sporadic internet connectivity. I have an old friend who has some money and at the right time I will try to connect you guys up and he could easily invest like 20k – 50k and not even ask about the project anymore. If he replies me then its good but if not, then nobody can send anymore funds after that. And he said OK I will work up some basic app and send it to him in a short time.
A week later I contacted him and he was traveling. Another week passed and he said sorry he had some problems and he didn’t have money and he has been reading the documentation but hadn’t worked on the project.
About this time, I was resting one day and started thinking. I am going to the village and I could use this program to support my building efforts in the village. But I was also thinking when you make a chat program at first people find you from google ads, google play, but generally people come and the chat room is empty and people just leave. So, it’s kind of like chicken and egg problem. You need active users to bring in users but how to get the first users to stay there.
I was thinking a forum is much slower paced and people don’t expect an immediate reply, so it’s the best way to start. So, I started looking online for forums and I went through them all and vanilla was the closest in functionality and a look that matched my requirements. So, I contact the designer who we had never met but were good friends from past 2-3 years of work and as I understood from the conversation, no work had been done yet on the chat so I told him to look at Vanilla. He was wanting me to do a WordPress site and use WordPress forum but it offered no functionality that I needed. I said I am leaving for the village in less than a month so whatever you need to do if you need to hire and expert or need some other code purchased, or if you need some more money give me a list so I can decide.
After a week I had an automatic install from Installatron in my cPanel. And a Yaga wasn’t working. We did a google meet and he showed me Yaga wasn’t working.
The thing is I have always been the type of person to try to learn something. I remember Neil deGrasse Tyson said; If I do a job interview and ask the applicants a hard question, which applicant will I hire. Will I hire the guy that knows the answer, the guy that doesn’t know the answer or the guy that goes and figures out the answer? I want the guy that figures out the answer, the guy that innovates. So, I did a lot of reading on vanilla and started posting on the forum and I got some basic information. I was starting to realize that my developer/friend was more WordPress, html, CSS and not able to handle the project. So, money has been paid and I didn’t see any code so I’m not too happy but I understand everyone has hard times in their life.
So I posted on Fiverr for a developer. You know like 20 years ago I had auction websites and forums and I would pay to have some scripting changes done and boom it was done immediately. But that was a different time a different price was paid. Now I’m back in a third world country and its one of the poorest countries in the world so my budget is low.
Many Fiverr developers replied and they could do the job but when they saw all the details, they would say no I am front end only. So many developers on Fiverr say they are full stack and actually they are front end. I found a guy and he started the job and when he delivered it looked nothing like my design and it was not functional. So, I told him maybe I have underestimated how hard this is, I am willing to pay 2x or 3x original amount if you can make it look like look exactly as my design or if not, I can hire you to do the html work on the static pages of the site so the we can offset some of the time you spent on the forum but I really can’t do anything with the design you provided.
I can do basic html and CSS so decided I wanted to find someone to teach me php and that way I can learn and be self-sufficient. I also believe hard work will get a good result. So, I found a guy from Pakistan to teach me on an hourly basis. We did a google meet and he couldn’t figure out the right way to log into through delegated access to my hosting and he sounded like he was sleeping so I decided I better find someone clicks well with me and I better have them do a screen recorder with audio so that this can flow.
So, I met Asim on Fiverr he was offering teaching on an hourly basis. I hired him to do the GUI design and do a screen recorder and audio comments while he worked so that I could study this after it is completed. I’m not sure if Asim has skill in this area but at least he has come to the forum to ask a question. I came to the forum the first day to ask questions because I have no shame when it comes to learning. Last developers didn’t come to ask any questions.
Once this GUI is completed, I will post all videos on YouTube as a tutorial to give insight to anyone trying to build on Vanilla.
I noticed that we had installed a hoangsoft theme and from reading we should build the theme from boilerplate or foundation.
If anyone is willing to help out to review the work that we are doing please let me know. That way when done we can post a proper tutorial for vanilla.
Comments
I'm not sure you will find somebody who dedicates too much time into this. If you ask me, I'll try to give useful answers. But I have some free days off right now so I have some more time. That will change again soon.
But what I will also give is my point of view...
When I first saw the draft I thought you were coming from an old script and wanted to have a new forum. And because you want it to be easy for existing users, you want Vanilla to look just like your old forum. Fair enough.
But that's something new and it sounds as if you want to make money from it. You already have mentioned the biggest issue: content. No matter if this is a chat or a forum or whatever, the technical layer is just a tool and you need to know what purpose it can solve. Who should it attract? Why should someone use it? Because it has Karma and you can up- and downvote? Why should someone use it instead of Reddit and Stack Overflow? You don't have to tell me that, but you need to know that for yourself in order to decide how to invest your money.
Marketing will need a lot of money. And no one will be using it in the first place so you will have to pay someone for creating content in the first place. I don't think that paying a dozen Fiverr guys for 20 quality posting will be of any use. Maybe could start with something that technically is not 100 what you expect but only 80% and sparing some dimes for the marketing.
If you plan making money from it, using Vanilla might not be a good idea. As you already found out, it's not easy to find Vanilla developers. What if you have success and you want to get away from that lousy shared hosting installatron foundation, get new features, pimp everything? You will need developers who are capable of doing so. I will not say "use WordPress" because that would be an awful idea, but there are other forum scripts out there which have better documentation and have a more active developer community. I'd say take a look at Flarum and Discourse.
If you spend $300 a month for your designer, you can consider using the paid plan of Vanilla. You would need an invest at the start for building your custom theme, but I assume they would help you with the design.
That said, back to the technical aspects. There are two ways to use CSS. One is what I can do: write CSS. The other thing is to use a toolchain with a CSS preprocessor like SCSS, use partials and assets and variables and whatever have a build process with yarn which builds the final files. That's what a web designer nowadays should be capable of. If he is, he should start with theme-foundation: https://github.com/vanilla/vanilla/tree/master/addons/themes/theme-foundation
And as you can already see from the description: it includes some Twig templates which are a hint that all the stuff above is mixed with "PHP stuff". Your developer should not be a pure CMS guy, but he should be experienced with some frameworks. Only Twig would not be enough.
OK. Thanks for info. My past few houses have always been like community houses. I had all kinds of sports courts and boxing rings pool tables at my house and usually there were people coming daily. I would do free meals on fridays and I hosted cyclists from warmshowers.org so there was a community where we lived.
I definitely don't plan to use fake posts in fiverr. I just plan to start slow and document building my new place. I don't plan to make anything from it unless it comes to that. But for now just me and some friends over the years will use it to communicate and document the development and see how it goes.
I'm not going to spend 300 monthly for now. I just want to get it functional so that I have a means to interact with people in my site which we connect to FB and Youtube channel.
If it is successful I think I should make a native program in flutter that meets my needs exactly but I think less than 1% of projects ever make it successful so I think its better to start with a forum and slowly build up a user base.
I already installed phpbb and vanilla and finally I liked vanilla. Phpbb the community was bigger but in the end it didn't match my needs.
I'm hoping he (the developer) can figure it out and get it working, if not my other option is to learn how to do this. We do a lot of programming just not this type. Do you have any suggestions of videos I can follow that will show me the basics? Not on vanilla platform (because i know the videos are few) but on any other software that can help me get an understanding?
Again I appreciate your time for helping everyone here
I think you should rewrite you requirments simply, one by one list.
No matter You learn and develop by yourself or find a paid developer to help, first step should be simple and readable requirments.
For example,
Yes, cost sheet is important too.
Only one question, open source vanilla really slowly ( or hardly care about ) on encurage more developers to submit plugins or themes.
Sometimes I should simply ask instead of chosing to sound impolite. Sorry.
I think you need to get a basic understanding of MVC. Don't look at frameworks like Symfony or Laravel because they are overkill to get an understanding of what you would need to write themes or plugins. Look for old CodeIgniter tutorials.
PHP development has been very straight forward and result oriented but that has changed and now it's much more code quality and test oriented which is good if you are a developer, but bad if you want to understand code just by reading. That's how I see it, not being a developer myself...
CodeIgniter was very hot for some time and now a "real" developer would shriek away from it. Vanillas code base has changed a lot in the past years but plugin development is still refreshingly simple if you know how to write PHP code.
So you know programming languages? If you want to, I can teach you how Vanilla works by a small and so fine example.
The "problem" with a Vanilla theme is that the information you want to see at one place isn't available there ("there" means in the html div where you would need it). So forget about colors and spaces and concentrate on showing the information where you need it to. Start with small steps before you think of bigger ones.
So you would like to split up some user info: the rank should be shown together with the post info, not with the user. That's bad because the html structure (if you inspect this page) looks like that:
div.Discussion div.Item-Header.DiscussionHeader div.AuthorWrap span.Author span.AuthorInfo span.Rank div.Meta.DiscussionMeta div.Item-BodyWrapI think flexbox allows a lot of styling freedom but showing subchild from one block element inside of another is still no fun. So you would like to have it like that. You need php to get the span.Rank into the DiscussionMeta.
I'll set up an example theme with the code doing exactly that and comment on what and why.
I agree, there's no motivation anywhere.
Get started with this:
1. Edit the /conf/config.php file and search for a line starting with
$Configuration['Garden']['Theme'] = ...and set it to "default":$Configuration['Garden']['Theme'] = 'default';2. Enable the plugin Profile Extender and create a field called "Title"
3. Edit your user profile and set your title to whatever
4. Create a discussion and a comment below it to see how that title looks like
Okay, lets start with the zip file. Unzip the files so that you have the following file structure:
Then go to your forum settings and enable the Demo theme. Go back to the discussion from step 4 above, reload the page and see how the title has changed its position. Fine, your web designer will appreciate that!
Now let's see what we have done to achieve that.
You can find info about the addon.json in the documentation. Whenever you change something in there, delete
/cache/theme-index.phpand/cache/theme/*. Just ignore it for now.The
design/custom.cssis some magic file: if Vanilla finds that file in the current themes folder, it loads it. Easy and handy. Currently it holds code to hide the title that you have seen in the step 4 above. Uncomment the css or add some other css in there to enjoy your first possibility to interact directly.The themehooks holds the code. It needs to follow a lot of naming conventions so if you do not name it right or the class name is wrong, the code it holds will not be executed. So check the
/cache/theme/theme-demo.phpfile for lines similar to this:And now to the php code. As mentioned before, the class name has a special naming convention. Not important now.
There are three methods in there. We take a look at the easiest one in there first, the "getAuthorTitleHtml" method. It expects a string - the title - and returns a html string. The only thing which needs explanation is the function htmlEsc(). There are some handy functions in
/library/core/functions.general.phpand in the other files in that folder. It escapes the title. Never print out user input directly. Search for XSS for more info about that.Vanilla doesn't have posts which make up threads, it has discussions with comments. We've got two more methods in there, one for injecting html to discussion meta and one to comment meta. The naming is important.
discussionController_discussionInfo_handlerconsists of three parts:1. DiscussionController
When you start with MVC, you will find that the controller is something like the "entrance" to the page you are looking at. In most cases, when you want to alter something on a page you need to start your method name with the name of the controller. If you look at the url, most of the time you would be able to tell the controller name from it.
2. DiscussionInfo
Here comes the really interesting part. Vanilla "fires events" throughout the code processing. So every now and then there is a possibility to hook into those events and alter data or inject something.
We want to alter a view but the info we need already exists. So we are looking for an event inside of a view.
In the
/applicationsfolder there is a subfolder for everything user related, "dashboard", and a folder "vanilla" for everything forum related - at least most of the time.A discussion is forum related and yes, there is a
/applications/vanilla/views/discussionfolder with some files that make up what you see in the discussion page. Not the header, footer, panel or the like, only the discussion itself.In web development, index files are most often the first file that are executed. So start by opening that file. Phew - not easy to find something in there. Here's the most important thing: use a text editor with good search capabilities! After inspecting the web page, we have seen that we need to inject something in the DiscussionMeta. Therefore we will search for that in the discussion view subfolder. That will lead us to
/applications/vanilla/views/discussion/discussion.phpand we find the following two lines in there:$this->fireEvent('DiscussionInfo'); $this->fireEvent('AfterDiscussionMeta'); // DEPRECATEDPromising isn't it? I said we Vanilla fires events and we want to add something to the discussion meta. And here is that line! But wait, one of the lines reads "DEPRECATED", so don't use it. We use the otherone instead. And here we are: at the second part of our method name! Long way there, I know. I promise you will get used to it quickly.
3. "handler"
Well, yes, nothing too interesting with it. Simply use it always like that: someController_someEvent_handler($sender, $args)
Look around the lines that we found in that discussion.php file. As you can see, they are surrounded by html. So if you echo html from inside our method, it would be directly inserted into the browser.
But what's that $sender, what's that $args...?
$sender is a reference to the calling controller. So in our example, $sender is the calling instance of the DiscussionController. We do not need it in this example.
The real power comes from the contents of the args array. Take a look at that discussion.php file again and search for "EventArguments". For example this one line:
$this->EventArguments['Author'] = &$Author;The user info has already been fetched from the database and when we run our code we do not need to fetch it again. The info is already available because it has been passed to our theme when we hook into the right event.Okay, that's enough for now. I bet there will be some questions already. Work through it and give feedback if you get stuck.
Problem I am concerned about now is that Asim is using hoangsoft theme for modifying. It's 2016 theme. I am concerned it may be a problem later. But if you think it's ok, then we continue.
Ok here is my requirement that I gave:
1. GUI should match exactly
2. Search at top right must be working
3. Top right lists top-ranking users in the thread (auto-update)(with avatar, name, title, badge, points) (this could be top ranking users in whole forum. If it gets bigger later I may change it to thread)
4. Below right lists all users in the thread (auto-update)(with avatar, name, title, badge, points)
5. Center Top shows name of the Thread in title bar
6. Center shows messages in the thread. (with user avatar, name, posts on left)(up and down vote button on right with number of votes center of arrows)
7. Center bottom shows new posting text box
8. Left Top shows user name, number of posts, settings button, Karma total, crona total, manna total (Crona will not be functional now)
9. Left Center shows listing of threads order by latest posting
10. Left Bottom shows add Room (Thread) button
11- Upgrade the Vanilla Forum version 3.3 2021.021
R_J I am going over all your exampes but its going to take some time. I am doing some html, css only. My son is doing python for motor control and c++, c#. Our experience has mainly been for small electronics / mechanical applications so its basic compared to building an app.
I will be going over/ attempting tutorials for codeigniter before I follow your steps
https://www.youtube.com/watch?v=K71j-rWXejk CodeIgniter Tutorial 2 - Intro to MVC Pattern 2012
https://www.youtube.com/watch?v=jnjjzATOgIM
https://www.youtube.com/watch?v=I752ofYu7ag
Slowly but surely I'm going through old tutorials of codeigniter. Problem is the files have changed in updates since these tutorials were done but I'm posting around to get new file names.
If you are completely new to programming, you need to learn the basics: control structures, objects, functions. If you cannot read and understand the parts by at least 90% in the simple example I gave above, that videos will not be helpful.
<?php class ThemeDemoThemeHooks extends Gdn_Plugin { public function discussionController_discussionInfo_handler($sender, $args) { echo $this->getAuthorTitleHtml($args['Author']->Title); } public function discussionController_commentInfo_handler($sender, $args) { echo $this->getAuthorTitleHtml($args['Author']->Title); } private function getAuthorTitleHtml(string $title = '') { if ($title = '') { return ''; } $title = htmlEsc($title); return '<span class="MItem AuthorTitle" title="' . $author->title . '">' . $author->title . '</span>'; } }I'd say you need to come to the point where your only two questions are "Please elaborate on that extends
Gdn_Plugin" and "Where does thathtmlEscfunction come from?"Until then, don't care about CodeIgniter, MVC or anything else than pure PHP.