Micro-project: Shoutbox

Micro-project: Shoutbox

To improve as much as possible, I will try to complete a micro-project if the fulfillment criteria of my learning goals for the cycle I am present in allows it.

This small micro-project was one I came up with whilst going through the material I had prepared, and as I went through the material, I started noting down some of the essentials that I should take extra note of. One of these was especially the database transactions.

Before I began the project, I ensured that the knowledge I had gathered was sufficient to complete the task. This is something that can be done by planning, and so I made up a simple plan.

I wrote my project plan in danish, but I decided to translate for the conveniency of the blog.


Project: 

To empower my new knowledge I intend to develop a micro project, where I create a shoutbox, such that all users on a page can communicate with each other in one setting.

Requirements:

  • The shoutbox is only available to logged-in users
  • Shoutbox should automatically show new messages
  • A user of role “admin” should be able to delete shouts

As a reminder of my fulfillment criteria as I developed the project, I also had this jotted down right beneath the requirements:

Fulfillment Criteria:

  • Be able to create and start a new project in a local environment
  • Be able to apply and use basic code principles with the learned syntax
  • Understand and know of required skills within each subject

Extra benefit(s) gained from project:

  • Knowledge of Laravel Eloquent (SQL Queries)

The first I did was set up bootstrap in a new project, the easy way to use external stylesheet reference and external script reference to source what I need. I also knew by looking at the requirements that I would need Ajax, so I also included jQuery through their official CDN.

The second thing I did was plan the database, and therefore I also setup the necessary Models as I went along, it was quite simple since the only table I needed other than the ones Authentication from Laravel/Fortify was the shouts table. I used MySQL Workbench to get a visual EER diagram of the database once I was done.

Database EER – Shoutbox

As seen above the only relation in the database was the foreign key from uid in the shouts table to id in the users table.

The hard part was definitely not setting up the database, instead it was navigating the files which I found the hardest. I made multiple rookie mistakes, but with a few quick google searches and some quick wit, I managed to overcome them.

Was there someone who said this?

Solving one problem leads to hundreds of new problems.

Unknown Person

After making sure the database was functioning, I used the old login and registration page from the Laravel/UI package, which I did not require in my project, I simply took 2 views, the login and registration view.

I made a shared view, where I put in the shared content such as the doctype, head tags, meta tags, CSS, scripts, and the navigation.

I thought of creating multiple controllers to abstract the project, but with such a small project, I decided to make one controller, the HomeController which would be the main controller.

The only controller I had managed 4 different routes, 2 of type GET and 2 type POST. 3 of the routes used the middleware, which only let logged-in users access them. The only route that did not require authentication was the index page.

I did not spend a lot of time on the front-end of the shoutbox, I simply used a Bootstrap card, put in a table and at the end of the card I placed a form containing the input and submit button. The card body uses overflow-y: scroll; to make sure the shoutbox does not expand forever.

As the intention was to learn Laravel, I will not stress too much of the front-end, even the Ajax was quite simple and as I expected it posed no problems.

Honestly the hardest part of this project was not combining logic, it was simply understanding how Laravel actually functions. Sometimes I made rookie mistakes, forgetting to import a class I was trying to access, I even tried to access a static function that was not static, and sadly I have to come clean, I had coded that non-static function myself.

Throughout my live debugging I found out that Laravel actually gives quite concise feedback on errors. I was able to locate most errors in matter of few minutes, and sometimes less than a minute.

Next time I do a Laravel Project, I might want to look into Jetstream, which can help with scaffolding for applications, it already includes packages such as Fortify and is also based on Blade pages. It came out with Laravel 8 so it is pretty new, but I spent some time looking for simple solutions instead of going with the flow. That is also why I had to pick up two views from the old Laravel/UI package because it is deprecated.

In conclusion I have made a quick video where I showcase the end result.

Related Posts
Leave a Reply

Your email address will not be published.Required fields are marked *