A discussion forum can be quite a useful resource to have on internal company projects or to allow clients to interact on projects, for example.
Discussion forums are a great way to create a community around a particular subject or topic, acting as a type of wiki. They are a store of knowledge of something or a record of a discussion, containing a history of changes of ideas and concepts and recording the evolution of thinking around a topic or subject. They can also be used to talk about cats.
To create this app, we’ll create three controllers: one to handle discussions, one to handle comments, and one to handle any admin functionality that we might need, such as moderating comments and discussions.
We’ll create a language file to store text, allowing you to have multiple language support, should that be required.
We will make amendments to the
config.php file to allow for encryption support, which is necessary for sessions and password support.
We’ll create all the necessary view files and even a
.css file to help Bootstrap with some of the views.
It is worth mentioning the limits of the application. This application contains the most basic discussion forum functionality. We create users on our way; however, there is no user management—to include that would be a large extension of the application code and slightly out of scope of a discussion forum.
Users are created when someone creates a comment or discussion using an e-mail address that is not currently stored in the
users table. A password is generated for them and a hash is created based on that password.
As this application creates a password for them automatically, you might wish to tell them what that password is—perhaps by sending them an e-mail. However, you might not wish them to be able to log in at all. It’s up to you—the functionality is there should you wish to expand upon it.
In this tutorial, we will cover:
- Design and wireframes
- Creating the database
- Creating the models
- Creating the views
- Creating the controllers
- Putting it all together
So, without further ado, let’s get on with it.
Design and wireframes
As always, before we start building, we should take a look at what we plan to build.
Firstly, we need to give a brief description of our intent; we plan to build an app that will let a user view any pre-existing discussion pages and then allow that user to comment on a page if they wish. The user can also create new discussions and other users can comment on them.
Let’s take a look at a site map:
Now, let’s go over each item and get a brief idea of what it does:
- Home: Imagine this as the index—the routing start point. The user will visit the Home page and will be redirected to point 2 (the View All Discussions page).
- View All Discussions: This will display all discussions in a list format. We’ll have some filtering going on as well (the most recent first, most popular next, and so on). The user will be able to click on a discussion title and be redirected to the View Discussion page.
- View Discussion/Add Comment: This page displays the initial comment (written by the person who created the discussion) and all subsequent comments and contributions added by other users. A user is able to join in a discussion by filling in a form at the bottom of the View Discussion page.
- New Discussion: A user can create a new discussion. This discussion will then appear on the View All Discussions page as a new discussion.
We now begin to look at the admin-only functions (largely, discussion and comment moderation), which are as follows:
- Admin Login: This is just a simple login script.
- Moderator Dashboard: This displays all discussions and comments awaiting moderation and options in a list format, in order to allow or reject them.
Now that we have a fairly good idea of the structure and form of the site, let’s take a look at some wireframes of each page.
The View All Discussions page
The following screenshot shows a wireframe of point 2 (the View All Discussions page) in the preceding diagram. The user is able to see all current discussions, the initial text written by the discussion creator (this acts as a brief introduction to the discussion subject), the total number of comments so far, the methods to sort the discussions into newest/oldest, and so on.
The View Discussion/Add Comment page
The following screenshot shows a wireframe from point 3 (the View Discussion/Add Comment page). You can see that this page displays the initial discussion text and all the replies. At the bottom of the list of replies, there is a form that allows the user to join the discussion. There is also a New Discussion link at the top; this will take the user to point 4 (the New Discussion page).
Notice the flag link next to each comment title. If a user clicks this, then the comment is immediately flagged for review by the admin. For example, let’s say someone wrote something about a famous Hollywood actor or, something loony such as spaceships that might be considered potentially libelous; this comment can be flagged for review. If it is considered safe, it can be set as such; however, if it is not considered safe, it can be removed to prevent the writer of the comment from being followed everywhere by people in vans, turning up at their work, talking to their neighbors, and so on—a purely hypothetical, non-real-world, and completely made up example of something that has never happened ever, not even once.
The New Discussion page
The following screenshot shows a wireframe from point 4 (the New Discussion page). You can see the form where the user can create a new discussion. The user is invited to enter the discussion title, their name, and the initial discussion text. Once the user has entered all relevant information into the form, they press the Go button, and the form is validated by the
create() discussion controller function.
The admin Dashboard page
The following screenshot shows you the admin dashboard from point 6 (the Moderator Dashboard page). From this area, the admin can view any discussions and comments that have been flagged and moderate them, approving them or agreeing with the flag and deleting them.
We’re going to create 15 files for this application; these files are as follows:
/path/to/codeigniter/application/models/discussions_model.php: This file provides read/write access to the database table
/path/to/codeigniter/application/models/comments_model.php: This file provides read/write access to the database table
/path/to/codeigniter/application/models/admin_model.php: This file provides read/write access to the database, enabling an admin to moderate discussions and comments.
/path/to/codeigniter/application/views/discussions/new.php: This file provides an interface to display a form, allowing the user to create a new discussion; it also displays any error or success messages to the user.
/path/to/codeigniter/application/views/discussions/view.php: This file provides us with an interface, allowing the user to view all active discussions. It also provides filtering interface options (for example, sorting).
/path/to/codeigniter/application/views/comments/view.php: This file provides us with an interface to display an individual discussion with all the comments other users have written to the user. There is also a form at the bottom of this view file that allows the user to join the discussion by creating a comment. Any validation or success messages related to adding a comment will be displayed in this view file as well.
/path/to/codeigniter/application/views/admin/dashboard.php: This file displays a list of comments and/or discussions that require moderating.
/path/to/codeigniter/application/views/admin/login.php: This file provides a login form for admins.
/path/to/codeigniter/application/views/nav/top_nav.php: This file provides a navigation bar at the top of the page.
discussionscontroller manages the creation of new discussions and displays a list of discussions to normal users.
commentscontroller manages the creation of new comments and links them to discussions. It also displays a list of comments to normal users.
admincontroller handles the logging in of admins, the display of discussions and comments awaiting moderation, and the moderation of those discussions and comments.
/path/to/codeigniter/application/language/english/en_admin_lang.php: This file provides language support for the application.
/path/to/codeigniter/application/views/common/login_header.php: This file contains specific HTML markup to display the login form correctly.
/path/to/codeigniter/bootstrap/css/signin.css: This is a css script containing specific css code to display the login form correctly.
The file structure of the preceding 15 files is as follows:
application/ ├── controllers/ │ ├── discussions.php │ ├── comments.php │ ├── admin.php ├── models/ │ ├── comments_model.php │ ├── discussions_model.php │ ├── admin_model.php ├── views/discussions/ │ ├── view.php │ ├── new.php ├── views/comments/ │ ├── view.php ├── views/admin/ │ ├── login.php │ ├── dashboard.php ├── views/nav/ │ ├── top_nav.php ├── views/common/ │ ├── login_header.php ├── language/english/ │ ├── en_admin_lang.php bootstrap/ ├── css/ ├── signin.css