MVC in Play

diagrams_mvcToday’s blog is an update on my learning progress of the Play framework from last week. We last left off with building several simple websites in Play. While last week focused primarily on porting an existing website to the Play framework, this week will focus on creating a website from scratch to support web applications.

To create a website using Play, one has to understand the MVC (model-view-controller) design paradigm. Models are data objects that web applications use to store information while views are what the users will see when accessing a specific webpage. The controller is what ties the models and views together by modifying both the models and views depending on the user’s action. By combining these three concepts together, the MVC design paradigm allows developers to partition their web applications into distinct parts and allow for easy changes to the application.

WOD 1 Digits Mockup

The first WOD (link) is similar to last week’s WODs where we had to create a simple website with multiple pages. This website will be used to store contact information of people. The website will contain two pages, a contact page that lists all the contacts and a new contact page that allows the user to add a contact. Note that there is no functionality for any of the pages yet. My first try at the WOD took me 25 minutes to finish and did not encounter much difficulty.

WOD 2 Digits Form

The second WOD (link) involves taking the new contact page we created and adding functionality to the forms. By adding functionality to the form, the web application will actually be able to read user input and print them out to the command prompt. To do this, we had to edit the form fields in the views with some Scala code to tell the controller that there will be user input. My difficulty with this WOD was trying to remember the Scala syntax to do what was needed. The first attempt at this WOD took 22 minutes and my second attempt took me 20 minutes. I think I was unable to achieve significant improvement was because I still had difficulty remembering all the Scala code. Knowing this, I started making a small list of Scala code so I can remind myself what the syntax should look like.

WOD 3 Digits Form Validation

The third WOD (link) makes changes to the forms so they can validate user input. This means that the web application will check the fields for empty strings or incorrect formatting when the user adds a contact. Doing this WOD was relatively easy as the only thing that was needed was to write “if” statements to check for errors on specific fields and update the controller. If an error was found, the web application will notify the user what was wrong with their input. Bootstrap provides a good example on how to embed the error notifications into the field so doing this was a relatively simple task. I was able to finish this WOD at around 18 minutes.

WOD 4 Digits Model

The fourth WOD (link) requires model to be created so the contacts the user inputs can actually be displayed back to the user. To enable this functionality, we had to create a model for the contacts and a mockup contacts database. After creating the models, all the corresponding controllers needed to be updated to allow model creation. While creating the needed functionality is not difficult, most of my troubles were still in writing Scala code since I am still unfamiliar with the syntax. The time required for me to finish this WOD was about 25 minutes.

WOD 5 Digits CRUD (Create Read Update Delete)

The last WOD (link) for this week is to complete the functionality of the models and allow the user to edit and update contacts after the contacts have been inserted into the database. Since updating a contact reuses the “new contact” page, we had to utilize ID fields to be able to pre-fill data on the page. The way this works is that each contact within the database has a unique ID. If a user wanted to insert a new contact to the database, a new ID will be created for this contact. This means that the “new contact” page will check an ID parameter every time the page is loaded to see if data needs to be pre-filled.  My attempt at this WOD took me around 24 minutes to finish.

Conclusion

I think the only major difficulty with this week’s WODs was trying to remember Scala syntax. For example, Scala uses brackets “[ ]” for parameter fields (Who does this?! Brackets are for arrays!). Another minor issue might be that I still don’t know all of Play’s built-in methods for the controllers and I have to look them up. Since I had experience with the MVC design paradigm, I knew what was required to perform the needed functionality. The problem was that I simply struggled with a new language. Hopefully this problem will slowly resolve itself as I work more within the Play framework and redo some more of these WODs.

Advertisements