Wednesday, November 29, 2023
HomeVideo EditingTips on how to Create a MySQL Powered Discussion board From Scratch...

Tips on how to Create a MySQL Powered Discussion board From Scratch in Laravel


On this tutorial, we’ll construct a PHP/MySQL powered discussion board from scratch in Laravel.

What’s Laravel?

From the official documentation:

Laravel is an online utility framework with expressive, elegant syntax. We’ve already laid the muse—liberating you to create with out sweating the small issues.

It is an open-source PHP internet utility framework designed for the event of internet purposes following the model-view-controller (MVC) architectural sample. It goals to make improvement course of simpler by offering a set of ready-made instruments that make it easier to pace up improvement and write reusable, and maintainable code.

By default, It gives options corresponding to routing, middleware, authentication, templating, database migration, and plenty of extra. So you do not have to reinvent the wheel to implement widespread options and concentrate on enterprise logic of your utility. It additionally comes with highly effective ORM system referred to as Eloquent, which simplifies database operations and makes it straightforward to work with databases.

Certainly, Laravel is a strong and versatile framework which can be utilized to construct a variety of internet purposes from easy blogs to complicated e-commerce methods.

Right now, we’ll use it to construct a easy discussion board with Laravel. Earlier than we go forward, you may want to put in Laravel in your system. It is pretty straightforward to put in Laravel—simply comply with the official documentation.

Tips on how to Set Up Database Configuration in Laravel

In Laravel, you might want to comply with these steps to arrange a MySQL database configuration.

Open the .env file within the root listing of your Laravel utility. Discover the next traces in that file.

1
DB_CONNECTION=
2
DB_HOST=
3
DB_PORT=
4
DB_DATABASE=
5
DB_USERNAME=
6
DB_PASSWORD=

Set the worth for every of the configuration setting and also you’re good to go. Your .env file would possibly appear to be this:

1
DB_CONNECTION=mysql
2
DB_HOST=localhost
3
DB_PORT=3306
4
DB_DATABASE=discussion board
5
DB_USERNAME=your_mysql_yourname
6
DB_PASSWORD=your_mysql_password

After you have arrange your MySQL database configuration, Laravel will robotically use it to hook up with your MySQL database if you run your utility.

Creating Database Tables

To create a MySQL desk in Laravel, you need to use Laravel’s built-in database migration characteristic. Laravel migrations present a handy option to handle database schema modifications and model management.

Firstly, we’ll see how one can create the classes desk with the assistance of the migration characteristic. You may repeat the identical course of to create different tables as properly.

Open your terminal and navigate to the foundation listing of your Laravel utility, and run the next command.

1
$php artisan make:migration classes

It ought to create a brand new migration file within the database/migrations listing. The filename must be named one thing like 2023_02_25_000000_create_categories_table.php. Open it and substitute the contents with the next contents.

1
<?php
2
use IlluminateDatabaseMigrationsMigration;
3
use IlluminateDatabaseSchemaBlueprint;
4
use IlluminateSupportFacadesSchema;
5

6
class CreateCategoriesTable extends Migration
7
{
8
    public perform up()
9
    {
10
        Schema::create('classes', perform (Blueprint $desk) {
11
            $desk->increments('cat_id');
12
            $desk->string('cat_name', 255);
13
            $desk->string('cat_description', 255);
14
            $desk->timestamps();
15
        });
16
    }
17

18
    public perform down()
19
    {
20
        Schema::dropIfExists('classes');
21
    }
22
}

Go forward and run the next command to really create the classes desk in your MySQL database.

In the identical method, let’s create the remainder of the tables.

1
$php artisan make:migration matters
2
$php artisan make:migration posts

Add the next contents within the matters migration file.

1
<?php
2
use IlluminateDatabaseMigrationsMigration;
3
use IlluminateDatabaseSchemaBlueprint;
4
use IlluminateSupportFacadesSchema;
5

6
class CreateTopicsTable extends Migration
7
{
8
    public perform up()
9
    {
10
        Schema::create('matters', perform (Blueprint $desk) {
11
            $desk->increments('topic_id');
12
            $desk->string('topic_subject', 255);
13
            $desk->dateTime('topic_date');
14
            $desk->integer('topic_cat')->unsigned();
15
            $desk->integer('topic_by')->unsigned();
16
            $desk->timestamps();
17
        });
18
    }
19

20
    public perform down()
21
    {
22
        Schema::dropIfExists('matters');
23
    }
24
}

Lastly, add the next contents within the posts migration file.

1
<?php
2
use IlluminateDatabaseMigrationsMigration;
3
use IlluminateDatabaseSchemaBlueprint;
4
use IlluminateSupportFacadesSchema;
5

6
class CreatePostsTable extends Migration
7
{
8
    public perform up()
9
    {
10
        Schema::create('posts', perform (Blueprint $desk) {
11
            $desk->increments('post_id');
12
            $desk->textual content('post_content');
13
            $desk->dateTime('post_date');
14
            $desk->integer('post_topic')->unsigned();
15
            $desk->integer('post_by')->unsigned();
16
            $desk->timestamps();
17
        });
18
    }
19

20
    public perform down()
21
    {
22
        Schema::dropIfExists('posts');
23
    }
24
}

Go forward and run the next command to create tables within the database.

It is vital to notice that after we run the above command, Laravel additionally creates the customers desk as properly, because it helps a built-in authentication characteristic. So, we’ll use it for login and authentication functions.

With that in place, we have created crucial database tables for our utility.

Set Up Person Registration and Login

On this part, we’ll see how one can arrange consumer registration and login in Laravel.

Create Routes

To begin with, let’s arrange the mandatory routes for the consumer registration and login options.

Go forward and add the next within the routes/internet.php file.

1
<?php
2

3
use IlluminateSupportFacadesRoute;
4

5
Route::get('/register/index', 'RegistrationController@index');
6
Route::put up('register/save', 'RegistrationController@save');
7

8
Route::get('/login/index', 'LoginController@index');
9
Route::put up('/login/checkErrors', 'LoginController@checkErrors');
10
Route::get('/logout', 'LoginController@logout');

The Route::get('/register/index', 'RegistrationController@index') route is used to map a GET request to the URL path /register/index to the index technique of the RegistrationController class. The index technique is chargeable for displaying the registration kind to the consumer. The Route::put up('register/save', 'RegistrationController@save') route is a POST request chargeable for validating and processing the consumer’s registration knowledge and saving it to the database. 

The Route::get('/login/index', 'LoginController@index') route is chargeable for displaying the login kind to the consumer. The Route::put up('/login/checkErrors', 'LoginController@checkErrors') is chargeable for validating the consumer’s login credentials and authenticating the consumer.

Lastly, the Route::get('/logout', 'LoginController@logout') route is chargeable for logging customers out of the applying by destroying their session. 

Construct Controller Courses

On this part, we’ll construct crucial controller courses.

Let’s first create the app/Http/Controllers/RegistrationController.php file with the next contents.

1
<?php
2

3
namespace AppHttpControllers;
4

5
use IlluminateHttpRequest;
6
use AppUser;
7

8
class RegistrationController extends Controller
9
{
10
    public perform index()
11
    {
12
        return view('registration.index');
13
    }
14
    
15
    public perform save()
16
    email',
20
            'password' => 'required'
21
        ]);
22
        
23
        $consumer = Person::create(request(['name', 'email', 'password']));
24
        
25
        return redirect()->to('/login/index');
26
    
27
}

Subsequent, let’s create the app/Http/Controllers/LoginController.php controller.

1
<?php
2

3
namespace AppHttpControllers;
4

5
use IlluminateHttpRequest;
6

7
class LoginController extends Controller
8
{
9
    public perform index()
10
    {
11
        return view('login.index');
12
    }
13
    
14
    public perform checkErrors()
15
    {
16
        if (auth()->try(request(['email', 'password'])) == false) {
17
            return again()->withErrors([
18
                'message' => 'The email or password is incorrect, please try again'
19
            ]);
20
        }
21
        
22
        return redirect()->to('/matter/index');
23
    }
24
    
25
    public perform logout()
26
    {
27
        auth()->logout();
28
        
29
        return redirect()->to('/matter/index');
30
    }
31
}

Construct Views

On this part, we’ll create crucial view recordsdata.

Firstly, let’s create the sources/views/registration/index.blade.php file with the next contents. It is used to construct the registration kind.

1
@embody('widespread.header')
2

3
<h2>Person Registration</h2>
4
<kind technique="POST" motion="/register/save">
5
    {{ csrf_field() }}
6
    <div class="form-group">
7
        <label for="title">Identify:</label>
8
        <enter sort="textual content" class="form-control" id="title" title="title">
9
    </div>
10

11
    <div class="form-group">
12
        <label for="electronic mail">E-mail:</label>
13
        <enter sort="electronic mail" class="form-control" id="electronic mail" title="electronic mail">
14
    </div>
15

16
    <div class="form-group">
17
        <label for="password">Password:</label>
18
        <enter sort="password" class="form-control" id="password" title="password">
19
    </div>
20

21
    <div class="form-group">
22
        <button type="cursor:pointer" sort="submit" class="btn btn-primary">Submit</button>
23
    </div>
24

25
    @if ($errors->any())
26
        <div class="alert alert-danger">
27
            <ul>
28
                @foreach ($errors->all() as $error)
29
                    <li>{{ $error }}</li>
30
                @endforeach
31
            </ul>
32
        </div>
33
    @endif
34
</kind>
35

36
@embody('widespread.footer')

Lastly, let’s create the sources/views/login/index.blade.php file.  It is used to construct the login kind.

1
@embody('widespread.header')
2

3
<h2>Log In</h2>
4

5
<kind technique="POST" motion="/login/checkErrors">
6
    {{ csrf_field() }}
7
    <div class="form-group">
8
        <label for="electronic mail">E-mail:</label>
9
        <enter sort="electronic mail" class="form-control" id="electronic mail" title="electronic mail">
10
    </div>
11

12
    <div class="form-group">
13
        <label for="password">Password:</label>
14
        <enter sort="password" class="form-control" id="password" title="password">
15
    </div>
16

17
    <div class="form-group">
18
        <button type="cursor:pointer" sort="submit" class="btn btn-primary">Login</button>
19
    </div>
20

21
    @if ($errors->any())
22
        <div class="alert alert-danger">
23
            <ul>
24
                @foreach ($errors->all() as $error)
25
                    <li>{{ $error }}</li>
26
                @endforeach
27
            </ul>
28
        </div>
29
    @endif
30
</kind>
31

32
@embody('widespread.footer')

Set Up Password Encryption

When you would have observed that, we’re storing the consumer password as plain textual content within the save technique of the Registration controller. It is by no means a good suggestion to avoid wasting plain-text passwords, so let’s change the Person mannequin in order that it could possibly encrypt the password earlier than it is saved within the database.

Go forward and add the setPasswordAttribute technique within the app/Person.php mannequin file as proven within the following snippet. The Person mannequin must be already accessible in Laravel.

1
<?php
2

3
namespace App;
4

5
use IlluminateNotificationsNotifiable;
6
use IlluminateFoundationAuthUser as Authenticatable;
7

8
class Person extends Authenticatable
9
{
10
    use Notifiable;
11
    
12
    /**
13
     * The attributes which might be mass assignable.
14
     *
15
     * @var array
16
     */
17
    protected $fillable = [
18
        'name', 'email', 'password',
19
    ];
20
    
21
    /**
22
     * The attributes that must be hidden for arrays.
23
     *
24
     * @var array
25
     */
26
    protected $hidden = [
27
        'password', 'remember_token',
28
    ];
29
    
30
    /**
31
     * Add a mutator to make sure hashed passwords
32
     */
33
    public perform setPasswordAttribute($password)
34
    {
35
        $this->attributes['password'] = bcrypt($password);
36
    }
37
}

With that in place, we have created the login and registration options in our utility.

Import a Pattern Classes

To maintain issues easy, we’ll use a predefined set of classes. Nonetheless, if you want, you may construct CRUD interface for the class entity as properly by following the subject CRUD implementation which we’ll talk about within the very subsequent part.

For now, go forward and run the next question which inserts a dummy set of classes that we will use whereas creating a subject.

1
INSERT INTO classes (`cat_name`, `cat_description`)
2
VALUES ('Sports activities', 'Sports activities class associated dialogue'),
3
('Tech', 'Sports activities class associated dialogue'),
4
('Tradition', 'Sports activities class associated dialogue'),
5
('Historical past', 'Sports activities class associated dialogue'),
6
('Misc', 'Sports activities class associated dialogue');

It ought to populate the classes desk with just a few dummy classes.

Tips on how to Create Subjects and Publish Replies

On this part, we’ll construct the subject creation UI, which permits customers to create category-wise matters. As soon as a subject is created, customers can begin topic-wise dialogue by replying to it.

Create Routes

To begin with, let’s arrange the mandatory routes.

Go forward and add the next within the routes/internet.php file.

1
<?php
2

3
....
4
....
5

6
Route::get('/matter/create', 'TopicController@create');
7
Route::put up('/matter/save', 'TopicController@save');
8
Route::get('/', 'TopicController@index');
9
Route::get('/matter/index', 'TopicController@index');
10
Route::get('/matter/element/{id}', 'TopicController@element');
11

12
Route::put up('/reply/save', 'TopicController@replySave');

The Route::get('/matter/create', 'TopicController@create') route is used to map a GET request to the URL path /matter/create to the create technique of the TopicController class. The create technique is chargeable for displaying the subject kind to the consumer. The Route::put up('matter/save', 'TopicController@save') route is a POST request chargeable for accumulating matter knowledge and saving it to the database. 

Subsequent, the index technique is used to construct the subject itemizing interface. Lastly, the element technique is used to construct the subject element interface.

Construct a Controller Class

On this part, we’ll construct crucial controller courses.

Let’s create the app/Http/Controllers/TopicController.php file with the next contents.

1
<?php
2

3
namespace AppHttpControllers;
4

5
use IlluminateHttpRequest;
6
use AppUser;
7
use AppTopic;
8
use AppCategory;
9
use AppPost;
10

11
class TopicController extends Controller
12
{
13
    public perform create()
14
    {
15
        $classes = Class::all();
16

17
        return view('matter.create', ['categories' => $categories]);
18
    }
19

20
    public perform save()
21
    {
22
        $consumer = auth()->consumer();
23

24
        $this->validate(request(), [
25
            'topic_cat' => 'required',
26
            'topic_subject' => 'required',
27
            'topic_message' => 'required'
28
        ]);
29

30
        $matter = Matter::create([
31
            'topic_cat' => request()->input('topic_cat'),
32
            'topic_subject' => request()->input('topic_subject'),
33
            'topic_by' => $user->id,
34
        ]);
35

36
        $put up = Publish::create([
37
            'post_content' => request()->input('topic_message'),
38
            'post_topic' => $topic->id,
39
            'post_by' => $user->id,
40
        ]);
41

42
        return redirect()->to('matter/index')
43
            ->with('success','Matter is created efficiently.');
44
    }
45

46
    public perform index()
47
    {
48
        $matters = Matter::all();
49

50
        $arrTopics = array();
51
        foreach ($matters as $matter) {
52
            $class = Class::the place('cat_id', $matter->topic_cat)->first();
53

54
            $arrTopics[] = array(
55
                'topic_id' => $matter->topic_id,
56
                'topic_subject' => $matter->topic_subject,
57
                'topic_category_name' => $class->cat_name
58
            );
59
        }
60

61
        return view('matter.index', ['topics' => $arrTopics]);
62
    }
63

64
    public perform element($id)
65
    {
66
        $matter = Matter::the place('topic_id', $id)->first();
67
        $posts = Publish::the place('post_topic', $id)->get();
68

69
        $arrPosts = array();
70
        foreach ($posts as $put up) {
71
            $consumer = Person::the place('id', $put up->post_by)->first();
72

73
            $arrPosts[] = array(
74
                'post_by' => $consumer->title,
75
                'post_content' => $put up->post_content
76
            );
77
        }
78

79
        return view('matter.element', ['topic' => $topic, 'posts' => $arrPosts]);
80
    }
81

82
    public perform replySave()
83
    {
84
        $consumer = auth()->consumer();
85

86
        $this->validate(request(), [
87
            'post_message' => 'required'
88
        ]);
89

90
        $put up = Publish::create([
91
            'post_content' => request()->input('post_message'),
92
            'post_topic' => request()->input('topic_id'),
93
            'post_by' => $user->id
94
        ]);
95

96
        return redirect()->to('matter/element/'.request()->enter('topic_id'))
97
            ->with('success','Reply is added efficiently.');
98
    }
99
}

The create technique is used to show the subject kind. It is vital to notice that, we have handed the $classes array to the matter.create view. It will be used to construct the classes drop-down field, which permits the consumer to pick out the class the subject might be related to.

Subsequent, the save technique is used to avoid wasting matter particulars within the database. We have used the validate technique to validate the main points earlier than it is getting saved to database with the assistance of the create technique of the Matter mannequin. We have additionally created an related put up as properly with the assistance of the Publish mannequin.

Subsequent, the index technique is used to construct the subject itemizing interface. Shifting additional, the element technique is used to construct the the subject element web page. Lastly, the replySave technique is used to avoid wasting replies to the subject.

Create Fashions

As you may see, we have already used the Matter and Class fashions within the TopicController class, however we have not created it. Let’s take a second to create it with the assistance of the next artisan instructions.

1
$php artisan make:mannequin Class
2
$php artisan make:mannequin Matter
3
$php artisan make:mannequin Publish

It ought to generate the Matter, Class and Publish mannequin courses, which might be positioned within the app listing. Go forward and edit the app/Matter.php file in order that it appears to be like like following:

1
<?php
2
 
3
namespace App;
4
 
5
use IlluminateDatabaseEloquentModel;
6
 
7
class Matter extends Mannequin
8
{
9
    /**
10
     * The desk related to the mannequin.
11
     *
12
     * @var string
13
     */
14
    protected $desk = 'matters';
15

16
    /**
17
     * The attributes which might be mass assignable.
18
     *
19
     * @var array
20
     */
21
    protected $fillable = [
22
        'topic_cat', 'topic_subject', 'topic_message', 'topic_by'
23
    ];
24
}

And, the app/Class.php file ought to appear to be this.

1
<?php
2
 
3
namespace App;
4
 
5
use IlluminateDatabaseEloquentModel;
6
 
7
class Class extends Mannequin
8
{
9
    /**
10
     * The desk related to the mannequin.
11
     *
12
     * @var string
13
     */
14
    protected $desk = 'classes';
15
}

Lastly, the app/Publish.php file ought to appear to be this.

1
<?php
2
namespace App;
3

4
use IlluminateDatabaseEloquentModel;
5
use IlluminateDatabaseEloquentCastsAttribute;
6

7
class Publish extends Mannequin
8
{
9
    /**
10
     * The desk related to the mannequin.
11
     *
12
     * @var string
13
     */
14
    protected $desk = 'posts';
15

16
    /**
17
     * The attributes which might be mass assignable.
18
     *
19
     * @var array
20
     */
21
    protected $fillable = [
22
        'post_content', 'post_topic', 'post_by'
23
    ];
24
}

In order that’s about organising our mannequin courses.

Construct Views

On this part, we’ll create view recordsdata for the subject UI.

Firstly, let’s create the sources/views/matter/create.blade.php file with the next contents. It is used to construct the subject creation kind.

1
@embody('widespread.header')
2

3
<h2>Create a New Matter</h2>
4
<kind technique="POST" motion="/matter/save">
5
    {{ csrf_field() }}
6
    <div class="form-group">
7
        <label for="topic_cat">Matter Class:</label>
8
        <choose title="topic_cat">            
9
            <choice worth="">--Choose Class--</choice>
10
            @foreach($classes as $class)
11
                <choice worth="{{ $class->cat_id }}">{{ $class->cat_name }}</choice>
12
            @endforeach
13
        </choose>
14
    </div>
15

16
    <div class="form-group">
17
        <label for="topic_subject">Matter Topic:</label>
18
        <enter sort="textual content" class="form-control" id="topic_subject" title="topic_subject">
19
    </div>
20
    
21
    <div class="form-group">
22
        <label for="topic_message">Matter Message:</label>
23
        <enter sort="textual content" class="form-control" id="topic_message" title="topic_message">
24
    </div>
25

26
    <div class="form-group">
27
        <button type="cursor:pointer" sort="submit" class="btn btn-primary">Submit</button>
28
    </div>
29

30
    @if ($errors->any())
31
        <div class="alert alert-danger">
32
            <ul>
33
                @foreach ($errors->all() as $error)
34
                    <li>{{ $error }}</li>
35
                @endforeach
36
            </ul>
37
        </div>
38
    @endif
39
</kind>
40

41
@embody('widespread.footer')

Subsequent, let’s create the sources/views/matter/index.blade.php file. It will be used to show matter itemizing.

1
@embody('widespread.header')
2

3
<h2>Matter Itemizing</h2>
4

5
<desk border="1">
6
    <tr>
7
        <th>Matter Title</th>
8
        <th>Matter Class</th>
9
    </tr>
10

11
    @foreach($matters as $matter)
12
        <tr>
13
            <td>
14
                <a href="{!! url('/matter/element', [$topic['topic_id']]) !!}">
15
                    {{ $matter['topic_subject'] }}
16
                </a>    
17
            </td>
18
            <td>
19
                {{ $matter['topic_category_name'] }}
20
            </td>
21
        </tr>
22
    @endforeach
23
</desk>
24

25
@embody('widespread.footer')

Lastly, let’s create the sources/views/matter/element.blade.php file. It will be used to show the subject element web page.

1
@embody('widespread.header')
2

3
<h2>{{ $matter->topic_subject }}</h2>
4

5
<desk border="1">
6
    <tr>
7
        <th width="20%">Publish Writer</th>
8
        <th width="80%">Publish Message</th>
9
    </tr>
10

11
    @foreach($posts as $put up)
12
        <tr>
13
            <td width="20%"  top="100" valign="prime">{{ $put up['post_by'] }}</td>
14
            <td width="80%"  top="100" valign="prime">{{ $put up['post_content'] }}</td>
15
        </tr>
16
    @endforeach
17
</desk>
18

19
@if (auth()->test())
20
    <kind technique="POST" motion="/reply/save">
21
        {{ csrf_field() }}
22
        <enter sort="hidden" class="form-control" id="topic_id" title="topic_id" worth="{{ $topic->topic_id }}">
23
        <label for="post_message">Publish Message:</label>
24
        <div class="form-group">
25
            <textarea rows="5" cols="60" class="form-control" id="post_message" title="post_message"></textarea>
26
        </div>
27

28
        <div class="form-group">
29
            <button type="cursor:pointer" sort="submit" class="btn btn-primary">Submit Reply</button>
30
        </div>
31
    </kind>
32
@endif
33

34
@embody('widespread.footer')

Construct Widespread View Recordsdata

Let’s shortly see the way to create header and footer recordsdata for our utility.

Let’s create the sources/views/widespread/header.blade.php file.

1
<type>
2
nav ul {
3
  checklist-type: none;
4
  margin: 0;
5
  padding: 0;
6
}
7

8
nav li {
9
  show: inline-block;
10
  margin-proper: 20px;
11
}
12

13
nav li:final-little one {
14
  margin-proper: 0;
15
}
16

17
nav a {
18
  show: block;
19
  padding: 5px 10px;
20
  textual content-ornament: none;
21
  colour: #333;
22
  font-weight: daring;
23
}
24

25
nav a:hover {
26
  background-colour: #333;
27
  colour: #fff;
28
}
29

30
</type>
31
<nav>
32
  <ul>
33
    @if (!auth()->test())
34
        <li>
35
            <a href="{!! url('/register/index') !!}">
36
              REGISTER
37
            </a>
38
        </li>
39
        <li>
40
            <a href="{!! url('/login/index') !!}">
41
              LOGIN
42
            </a>
43
        </li>
44
    @endif
45
    <li>
46
        <a href="{!! url('/matter/index') !!}">
47
          HOME
48
        </a>
49
    </li>
50
    <li>
51
        <a href="{!! url('/matter/index') !!}">
52
          TOPIC LISTING
53
        </a>
54
    </li>
55
    @if (auth()->test())
56
        <li>
57
            <a href="{!! url('/matter/create') !!}">
58
              CREATE TOPIC
59
            </a>
60
        </li>
61
    @endif
62
  </ul>
63
</nav>
64
@if (auth()->test())
65
    <div type="text-align: proper;">
66
        Welcome, {{ auth()->consumer()->title }} (<a href="{!! url('/logout') !!}">Logout</a>)
67
    </div>
68
@endif
69


Subsequent, let’s create the sources/views/widespread/footer.blade.php file.

1
Copyright and different contents.

In order that’s about organising widespread header and footer recordsdata.

The way it Works Altogether

On this part, we’ll undergo how one can check our utility.

I assume that our Laravel utility is obtainable at https://localhost/ URL. As we have already outlined the house web page to be the subject itemizing web page, it’s best to see the next web page must you entry the http://localhost/ URL.

Home Page ViewHome Page ViewHome Page View

Subsequent, let’s click on on the REGISTER hyperlink to open the registration kind as proven within the following picture. Go forward and create a brand new account.

User RegistrationUser RegistrationUser Registration

After you create a brand new consumer, you may login by clicking on the LOGIN hyperlink as proven beneath.

User LoginUser LoginUser Login

After you are logged in, you may see the logged in username as proven following. You may as well see a brand new hyperlink within the header navigation to create a brand new matter.

Logged In ViewLogged In ViewLogged In View

To create a brand new matter, click on on the CREATE TOPIC hyperlink, which ought to open the next kind. Fill it and create a brand new matter.

Create a TopicCreate a TopicCreate a Topic

While you go to the subject element web page by clicking on any matter from the subject itemizing web page, it ought to open the next interface.

Topic Detail PageTopic Detail PageTopic Detail Page

As you may see, you may reply to any matter by posting a brand new message, and it ought to begin a dialog which permits customers to debate on a selected matter.

Total, the dialog UI ought to appear to be this.

User ConversationUser ConversationUser Conversation

So on this method, we have created a mini discussion board utility, which permits customers to create new matters and talk about it. It is  simply a place to begin, and I’d encourage you so as to add extra options to it and magnificence it in accordance with your necessities.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments