Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Building a conference registration app step-by-step using Bolt CMS
Martin Betz
Martin Betz

Posted on

     

Building a conference registration app step-by-step using Bolt CMS

This is a step-by-step tutorial on how to create a conference registration app usingBolt CMS and theMembers ) extension. I will work with iterations and go from easy to more advanced. I will break down the tutorial in several parts.

Part 1: What is the goal of our application? What are the features that users will expect from a conference registration app? And how can you set up Bolt CMS which is the framework that helps us to build the app faster?

User Stories

Imagine that you are responsible for organising a big conference onThe future. You rent the place, secured sponsors and booked some keynote speakers. Also, you sent invitations to thousands of readers in yourFuture mailing list. You expect that a few hundred of them want to come to your conference. But how will you manage the registrations? Should your attendants (or members as I will call them here) just reply via email and you save the submissions in a big Excel file. Well, this is a good starting point. But what if someone who signed up wants to change details or if the caterer needs all food preferences in real-time? Of course, placing the Excel sheet in a shared Dropbox folder could be enough. But: If you ever worked with several people on one shared Excel sheet you know that it can become messy pretty quickly.

So, a app for managing conference registrations might be helpful. And these are the requirements:

  1. Members can register on site withemail andpassword
  2. Members can fill-in their personal details (firstname,lastname,foodPreference,roomSize) when registering or after registration in a different form
  3. Members can change their personal details after submission
  4. Members who are logged in can access a page with tickets (for demonstration purposes a static site with a general ticket image)
  5. Members should get informed about registration and changes of details via e-mail
  6. * Admins can export the user data to Excel
  7. * Members who register for a second conference can reuse their old data

The last two items (*) are nice-to-haves but not necessary for the app to work. I might just describe easy and quick workarounds if it turns out to be beyond what Bolt and its extensions can do.

Setup

You need a local development environment using a command-line and runningPHP 5.6/7,Composer.

I am using a Mac for my development and I use the very handy development toolLaravel Valet. Please use whatever you and your machine works best with, be itMAMP,DesktopServer or evenDocker. If you are not on a Mac and have no preferences, I can highly recommendLaravel Homestead to you.

You are ready to go ifphp -v in terminal spits outPHP 7.1.0 or any other version number above 5.6,composer shows you a list of commands.

Shall we begin?

(Note: I always add line numbers for my edits. Those derive from vanilla settings, so if you added extra lines in your files, the numbers would not be correct. But even in these situations, they will guide you to the approximate location.)

Installing Bolt

We will useComposer to install the CMS itself.composer create-project bolt/composer-install:^3.2 conference --prefer-dist

conference is the name of the app – you can name it however you want, just note this name, you might need it later. Be patient, the installer downloads quite a few libraries (~ 100 MB). The installer will ask you a few questions about locations that I will just confirm withenter. Of course, you can change the details to your liking here.

Bolt is ready for setup now. You just need to tell your local web server to serve thepublic folder. The easiest way is to fire up PHP's internal dev server withphp -S localhost:8888 while within thepublic folder. I prefer usingValet which usesNginx under the hood. The command isvalet link conference while within thepublic folder. You can now openconference.dev in your browser and enter an admin user.

There is a note below the form which informs you that you're usingSQLite. SQLite is a „database in a file“, which makes it a lot more mobile than a MySQL database. It is production-ready for sites where you have few editors (= people editing the database) and as many visitors (= requesting data from the database and cache) as you like. Our conference app may become a case where many users access and alter the database via their entries, so probably for a production site, I would go for a full-blown MySQL database. For development SQLite is fine, and you canmigrate from SQLite to MySQL or MariaDB rather simply later if you want.

Setting up Bolt and the Members extension

Did you create your admin user already? I gave him the usernameticketmaster-262s (the name is not so easy to get, which is good to prevent brute-force login attempts). Click save, and you'll be redirected toconference.dev/bolt and see the backend.

Let's install theMembers extension right away. We need the extension for advanced user management. With a vanilla instance of Bolt we could add users, but these users would be backend users who could access all data of all visitors. Not good. That is why we need the extension. But how to install?

FindExtend in the left sidebar. In the search form, type inMembers. As you type, a dropdown appears where you can selectMembers (Gawain Lynch - bolt/members). HitBrowse Versions. Oops, no stable versions. From the Github repo I know thatdev-master is the most recent one. So let's install it withInstall This Version. And the next oops: AComposer Error along the lines of „No package for your minimum-stability (stable)“. Let's fix this.

Open a text editor in Conference's root folder and editapp/config/config.yml . Starting in line399 change the lines like this:

extensions:#    site: 'https://extensions.bolt.cm/'#    enabled: true    composer:        minimum-stability: stable
Enter fullscreen modeExit fullscreen mode

Note that this is a YAML file where indentation matters. It should be four characters, no tabs. YAML fails if you have an inconsistent indentation, so if you have problems with this step, check your spaces.

Save the config file and head back toconference.dev/bolt/extend. There is a big warning sign. Follow the instructions, check the database and update it with a single click.

Open a new tab in your browser and go toconference.dev/membership/profile/register. There is now a form where your website visitors can sign up for your conference and become members.

The details an aspiring member has to fill in in this vanilla version of our app arePublic Name,Email address andPassword. We need email and password (= User Story #1), do not need a public name (although aCaptainFuture name badge for a renowned scientist would be fantastic) and miss fields forfirstname,lastname,foodPreferences androomSize. For a first iteration, however,public name ,email andpassword is fine.

Let's create a first member:Captain Future (captain@martinbetz.eu,thefuture). I will talk about email settings in a future part, but for now all we need is a valid URL (conference.dev will not work). ClickSave and you should see a debug message that looks like this one:

Registered account captain@martinbetz.eu ()Editing profile for account captain@martinbetz.eu (a6d3c4ce-c9ed-436a-9faa-0e4e4e57d1c2)
Enter fullscreen modeExit fullscreen mode

Not only did you create your first member, but you also are locked in asCaptain Future and can change your details from the frontend. Try this by opening a new tab and openyour profile page. Change your public name toDoctor Future, hit save and open the profile page on another tab. You're stillDoctor Future.

You cannot log in and out; custom fields are missing and we haven't seen how you the admin can see all members who signed up.

But: We have a first working version of our app. That was easy, wasn't it?

Stay tuned for part 2: creating custom fields and customising the template, setting up email and managing your members from Bolt's backend.

(Cover Image:https://farm9.staticflickr.com/8631/16087236662_567a61b9ae_o.jpg)

Top comments(8)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
bennash profile image
Ben Nash
  • Joined

This is very applicable to a current project. Looking forward to Part 2 and more about customer fields for the Members

CollapseExpand
 
martin_betz profile image
Martin Betz
Laravel developer, agile organisation developer; Berlin, Germany, I coach Laravel newcomers via https://mentors.codingcoach.io/?name=Martin+Betz
  • Joined

Hi, I'm working on part 2 already. May I ask what your project is about? Maybe I can answer some questions that you have.

CollapseExpand
 
bennash profile image
Ben Nash
  • Joined

Hi Martin,

The site belongs to a local farm that delivers produce to restaurants. The BOLT CMS site lets Members create an account, and then order produce for delivery. The food order form is a custom Bolt Form. Payments are handled in person not online. It's a simple site and it works with the Members extension as is.

I'd like to add additional fields to the Member profile, both editable fields by the member like Address, City, etc, and also some possible fields only editable by an administrator.

Any help there would be appreciated.

thanks

Thread Thread
 
martin_betz profile image
Martin Betz
Laravel developer, agile organisation developer; Berlin, Germany, I coach Laravel newcomers via https://mentors.codingcoach.io/?name=Martin+Betz
  • Joined

Hi,

I think that your business case is an excellent fit for Bolt CMS + Members. I have been struggling with extending the member fields (for Part 2 of the tutorial actually) as the documentation is directed at people with a very thorough understanding of Bolt's internal architecture – which I do not possess yet. There is some information in the docs:github.com/bolt/Members/blob/maste... and there is an example add-on (aka extension) here:github.com/bolt/Members-Addon-Example. It has more or less the fields that you need and is structured as an extension. I could not get it running however, so I asked for help:github.com/bolt/Members-Addon-Exam...

Maybe some of this helps you and I will surely continue my research. I will share whatever I find out…

CollapseExpand
 
gawainlynch profile image
Gawain Lynch
  • Joined

Great work, Martin!

CollapseExpand
 
zomars profile image
Omar López
Front-End Web Developer, lots and lots of CSS
  • Joined

Part 2! Part 2! Part 2!

CollapseExpand
 
martin_betz profile image
Martin Betz
Laravel developer, agile organisation developer; Berlin, Germany, I coach Laravel newcomers via https://mentors.codingcoach.io/?name=Martin+Betz
  • Joined

I have been working on part 2 for the past hours and need to do some more research to solve some issues that I came across. Are there any specific topics in this use case that you are interested in?

CollapseExpand
 
leggewie profile image
leggewie
  • Joined

Fails for me at the step when registering the first user.

github.com/bolt/Members/issues/69

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Laravel developer, agile organisation developer; Berlin, Germany, I coach Laravel newcomers via https://mentors.codingcoach.io/?name=Martin+Betz
  • Joined

More fromMartin Betz

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp