|

Adding A Form To Submit Thread Replies

Adding A Form To Submit Thread Replies

In this tutorial of our forum series, we will create a new form so that users can submit a reply to any given thread. We are going to want to make sure that the form only displays to authenticated users, so we’ll introduce a little bit about how to do auth checking. If the user is a guest, we can provide an option to login if they like. We’ll also test out our new form in the browser, in addition to cleaning up some basic layout issues. Let’s get started.


Create A New Form

We have done most of the work already in getting our ability to submit replies to threads using tests so far. A quick run of our tests will show us we are in good shape so far. Let’s see are we missing anything? Oh that’s right – we need an actual form to submit those replies. Let’s set that up now. What we will do is to simply add a form to the page where we view a specific thread. That would be in resources/views/threads/show.blade.php and we may add something like this markup.

Ok looks pretty goood. Now notice that we put the markup inside of an auth check if statement. We only want to show this form to actual logged in users of the site.


Register A New User

Since we had already set up authentication in a prior lesson, we can visit http://forum.io/register to create a new account and then navigate back to a post to see if the form is active.
register for a new account

If we go back to a thread such as http://forum.io/threads/1 we can see the form now! Great. It does look like it is smashed all the way down to the bottom of the page. Let’s add a little padding real quick to give it a little room

Before Padding:
before padding

In app.blade.php we going to just manually add a little padding to the body tag like so: <body style=”padding-bottom: 100px”>.
After Padding:
after padding

This now looks a little bit better and we have a little more room on the page for the form. We should be good to go at this point.


Verify Tests Still Pass

One last time, lets run phpunit to make sure everything passes and then try out the reply function for ourselves!

vagrant@homestead:~/Code/forumio$ phpunit
PHPUnit 6.5.4 by Sebastian Bergmann and contributors.

..........                                                        10 / 10 (100%)

Time: 1.72 seconds, Memory: 10.00MB

OK (10 tests, 13 assertions)

Try In The Browser
the reply form in action

Cool! We can see that is working just great for our logged in user. If we visit thread however as a non logged in user, we will not see the form. Typically you might see something to allow a non authenticated user to sign up or login in a case like this. Let’s add this option to our form now. We can add a quick @else clause and add the markup like so:

You may notice for the href of the link, we provide a named route. In Laravel, this just means a specific name corresponds to a specific endpoint or route. Conveniently enough, the named route of “login” directs a user to /login. Let’s see this in action.
named route login


Updating Navigation Links

When we ran the command to create our auth scaffolding, the default view files include some navigation links. On the upper left of the navigation bar, we have a link which targets / with the anchor text of Laravel. In our case, the base of our application so far is actually /threads and the anchor text might be better as something like forum.io. Let’s make a quick edit to app.blade.php and change this:

To this:

Note: In order to update the anchor text, we will need to visit our .env file and set APP_NAME variable. In our case we updated it to APP_NAME=Forum.io. If we once again visit our application in the browser we can see the navigation anchor text and destination link is updated nicely.
update navigation link and anchor text


Adding A Form To Submit Thread Replies Summary

In this tutorial, we were successful in getting our new form set up and ready for users to add replies to threads. Since we had already done the back end code and tests in the earlier tutorials, all we had to do was add the html form, and it was functional right away. We also took care of some minor styling and navigation. Fantastic.