Made withOctober CMSClip

Making Websites With October CMS - Part 20 - Frontend Forms

W

Watch and Learn

Creator on the October CMS channel

Watch on YouTube ↗

22K viewsOct 29, 201613:18 runtime

Learn how to create powerful frontend forms in October CMS to allow users to submit data directly to your database. This tutorial walks you through building a component to add new "actors" to a custom plugin. You'll see how to adapt an existing contact form, create a new AJAX…

Chapters

#octobercms#clip#cmscrm

Overview

This guide explains how to build a frontend form in October CMS that allows users to submit data directly to the database. It uses the example of an "actor" form, building upon a previous contact form component but modifying it to save a model instead of sending an email.

Creating the Actor Form Component

The recommended approach is to reuse existing code. The contact form component was copied from a general-purpose plugin and placed into the movies plugin, as actors are specific to that domain.

Source: plugins/watchlearn/contact/components/contactform/
Destination: plugins/watchlearn/movies/components/actorform/
Files Renamed: contactform.php to actorform.php.

Component PHP Logic (`ActorForm.php`)

The component's PHP class requires several modifications to function correctly.

Namespace: Updated to Watchlearn\Movies\Components.
Class Name: Renamed to ActorForm.
AJAX Handler: The onSend() method was renamed to onSave() to better reflect its purpose.

`onSave()` Method Implementation

This method contains the core logic for creating the database record.

Important
The logic follows the standard Laravel/Eloquent pattern: instantiate, populate, and save.

// 1. Import the necessary classes
use Watchlearn\Movies\Models\Actor;
use Input;
use Flash;

// 2. Instantiate a new model
$actor = new Actor();

// 3. Populate model attributes from form input
$actor->name = Input::get('name');
$actor->last_name = Input::get('last_name');

// 4. Save the model to the database
$actor->save();

// 5. Provide user feedback
Flash::success('Actor added');

Component Markup (`default.htm`)

The form's HTML is updated with relevant fields and, most importantly, the correct AJAX handler reference.

The form tag must include data-request="onSave" to connect the submit button to the onSave() method in the PHP class.
Input fields (name, last_name) are created to capture the actor's data.

Adding User Feedback with Flash Messages

To inform the user of a successful submission, October's built-in Flash facade is used.

In PHP: After a successful save, Flash::success('Actor added'); sets the message.

In Twig (default.htm): A special block is added to render the message on the page.

{% flash success %}
    <div class="alert alert-success">
        {{ message }}
    </div>
{% endflash %}

Next Steps: Security

Currently, the form is public and can be used by anyone. The next step is to secure it so that only authenticated, logged-in users can add actors. This will be addressed by integrating the RainLab.User plugin.

Introduction: Frontend Forms for Database Entry

I mentioned to you in the previous episode or maybe the episode before that, that you can use the same steps that we did for the contact form to create a front-end form. So the difference here would be that whenever user inputs some data into that form, it wouldn't send an email to us, but instead it would fill out some fields in our database.

So that is exactly what we are going to be doing in this week's episode. I'm just going to show you how you can use that form to enter actors into your database via the front-end form, so that your users that are coming to your site can enter some data to your site, for example actors in our case.

Reusing and Refactoring the Contact Form Component

So not to type everything, I'm just going to copy out what we did for the contact form and then we are just going to modify it so that we can use it for our front-end form. So on this side, I'm on October/plugins/watchlearn/movies and on this side I'm on October/plugins/watchlearn/contact/components. So I'm just going to open components right here and copy this out. So I'm just going to copy the contact form to my plugins/watchlearn/movies/components.

I created a separate plugin for the contact form because you can use a contact form wherever you want on your site so it makes sense to create a specific plugin for that. But since the actors are kind of related to the movies, I'm going to create this component in my movies plugin. So first of all I'm just going to rename this directory or folder right here, contact form to be actor form. And the contactform.php I'm going to rename to actorform.php. Okay and now we have set up our folder structure for our new component which is going to be an actor form for inputting actors into our database.

Configuring the ActorForm PHP Class

So let's just modify our ActorForm.php so that we define actually a new component so that we can use it to enter actors into our database. So first of all, I'm just going to change the namespace from watchlearncontactcomponents to watchlearnmoviescomponents. Next thing, we can remove the mail because we are not going to be sending any emails. We can use the input, the validator you can leave it right here. Also the redirect. And the class is not going to be ContactForm but it's actually going to be ActorForm. Okay.

Next thing we want to change the name, so this is going to be Actor Form and the description is going to be "Enter actor". Okay and now we have this function right here which is public function onSend. We are going to rename it to be onSave because we are not sending anything, we are saving the data to our database. onSave. And we can actually remove everything from here. I'm not going to do the validation and so on, you can do that yourselves. I'm just going to show you how when someone clicks send or save in our case, it's going to create a new actor and enter a name for it and last name for it into our database. Okay I'm going to save this for now.

Updating the Form Markup and Registering the Component

And we can go to actors default.htm, actually actor form default.htm. So this is not going to be called "Your name," it's going to be called "Actor name." The input field, the name of the input field can stay name. I'm just going to remove this error. "Your email" is going to be "Actor last name." Okay so we go right here and instead of this is not going to be type email, it's going to be type text and the name is going to be a last_name. You can remove this, we don't need a message for that and send button is not going to be called Send but Save. Save actor. We can remove these errors or you can leave them if you are going to do the validation for them. And I think that's about it. We just save this also.

One thing we need to do of course is go to our plugin.php, so watchlearn/movies plugin, and we have to register that component. So the component is going to be called watchlearn\movies\components\ActorForm and it's going to be called actorForm and I think that's about it.

Creating an 'Add Actors' Page and Initial Testing

I hope I didn't screw anything up. Let's just test it. So I'm going to go to CMS. We can create a new page that we are going to call "Add Actors". It's going to use the default layout and I think that's about it. I'm just going to save this and now we can add our component to it. So Movies, and now we have Actor Form right here, I'm just going to pull it right here and create an h2 tag for the title of our page. Okay, save this.

And now we have our page for adding actors. Now if I go right here and go, actors, sorry. So now we have our form for adding actors: actor name, actor last name. Of course, if I click this nothing would happen. "AJAX handler onSend was not found," of course because we didn't change the name of this to onSave. I knew I would screw something up, of course. Now we refresh the page, let's just save the actor and we get nothing because we didn't tell October what to do when someone clicks send on our form.

Implementing the 'onSave' Database Logic

So we are going to do that right now. So first of all, since we are going to be saving actors, we can go right up here and use that actor model. So watchlearn\movies\models\Actor. And now we can just use it down here by writing Actor, nothing else. Or if you didn't use it, you would then have to use this whole namespace.

Okay, now how do we add actors? So I am going to do it the Laravel way. Maybe there is an October way to do it, but I'm going to do it the Laravel way because I think it's pretty easy and I'm used to it. So first of all we have to create a new instance of Actor model. So to do that, we just define a variable called $actor equals to new Actor. And that's it. Okay, now we instantiated that Actor class and now we can edit the name and the last name. So $actor->name is going to be the value of the input field with the name of name of course. So we did this before when we did the contact form so I'm just going to do input('name'). And also the same thing would go for the last name. So last_name. And now we just have to save that actor. And that's it, four lines of code. So we set out, set up our name, we set up our last name and we just save the actor model.

Testing the Form and Verifying the Database Entry

And that should be it. Let's just test this out. So actor name is going to be Don and last name is going to be Johnson. Actually let me refresh the page first, and we save the actor. Okay. So we didn't get any errors. Let's just see if we really did save our actor. So we go to Movies, Actors, and as you can see, Don Johnson is right here.

Providing User Feedback with Flash Messages

Okay, I just want to do one more thing right here. So it would be great if when we save the actor, October would tell us something like, "The actor is successfully saved" or something like that, "Actor saved," whatever. So we just want to get some input from October that everything went well. October already has a function for this for sending messages when something is successful or whenever you want to alert the user or give some feedback to the user when he or she clicks something.

So we are going to use the Flash method right here. use Flash. And now we just go down here and do Flash::success. So if everything went well then display some message. So actor added. And now we are just going to return to that page. And that's it, like we did for the contact form. Okay save this. Of course this is not going to be shown on our page because we didn't define it right here in default.htm to display that message. So I'm going to do that below the submit button. So just write a Twig tag, so {% flash success %} and you end it with {% endflash %}. And then you can just display that message right here. I'm just going to do it in a p tag. So you just display message, and that's it.

Final Test and Next Steps

Okay, let us refresh the page. When something went wrong at the phone line 27... and of course I forgot the semicolon again. Okay. Save actor. And since this was successful, actor is added. So this is the way you would use flash messages to alert the user or something or give user a feedback on something. Okay.

So this is it for this episode. You may be wondering, well I don't want everyone to be able to add actors to my page, actually to my website or to my application. So how do you deal with that? Well we are going to be dealing with that in the next episode when we'll look at the user plugin and we will use its functions to make this page accessible only to the logged in users. So remember everything we did here will be available for you on Github. Doing we'll be in the description below. If you want to ask me questions please follow me on Facebook or on Twitter and ask them there, or you can use the comment form below this video. Also if you like this video give it a thumbs up. If you like the channel or the content I put out you can maybe subscribe to it. and I think that's about it. Thank you guys for watching and I will see you in the next one.