After a long time of seeing and dating each other. I have decided to marry this interesting, wonderful and out-of-this-world girl. Her name is .NET. And I have prepared for her a fascinating wedding gift, Comic Corner – a comic store website built using the Model-View-Controller (MVC) model. Would she say Yes?
Passion Project
My teacher named this one the passion project and this, for me, truly does make my passion, my childhood dream comes true. As a child, I was so in love with comics. I used to hide my mom to read comics all the time. When I got caught, I would have to say goodbye to pocket money for a month, which most of them were spent on comics. At that time, I had a small dream of opening a comic store, so I could read comics all day long while making money out of it. Over 20 years passed by, with many hardworking and relentless efforts, I still can not open a comic store, but now, at least I could build a website for my imaginary store.
Wireframes
It starts to get into a habit of mine whenever I have a new project to go straight into my desk not to code but to grab my pencil and draw out the Entity Relationship Diagram and Wireframes. That’s the first checkpoint to get back whenever I get stuck.
My entity-relationship diagram
My list view page
My view page
I hope that you like my wireframes because the actual project looks … nothing like it.
Debugging
You would not expect the bug to appear that soon, neither would I. But it is quite often that the more excited you are with your project, the more likely that the bug will come earlier than expected. If you passed the first hurdle that early, the rest of the project would go smoothly.
My first bug hid well in plain sight with the App_Data folder. I was told that you need to create the App_Data folder because that’s where the local database is stored. However, when I created the project, I have already seen the App_Data folder in the Solution Explorer so I thought this was alright, and of course, as usual, I was wrong. In the actual directory, there is no App_Data folder, so you have to add it manually. This took me an afternoon to figure out after running the Code First migration command again and again without getting any result. Well done, bug.
The second bug is the classic 404 Server Error in “/” Application.
This had me scratched my head for a while until I found out that the solution lies in just 3 simple lines of code:
It turns out in the MVC model whenever you want to display a web page you need to have that simple 3 lines. It will tell the MVC to look for a page name Add in the folder with the same name as the Controller (in this case: Comic) and then display that web page.
And then and then and then the bugs would keep coming in so much that to the point that I was so happy to see a new bug. Because new bug means new progress and one step closer to finishing the project.
Changing the plan
In the wireframes, when adding a new comic, the initial plan was to create a checkbox so that user can choose multiple categories that the comic belongs to.
But that process soon revealed a problem. In my ERD, comics and categories are many to many relationships, a comic belongs to many categories and a category can have many comics so there would be a bridging table between them. Therefore, without knowing how many categories the user choose for a comic, I would no way know how many queries would I write to insert into the bridging table. Moreover, since it is a new comic, it does not have an Id yet so how can I insert that Id into the bridging table?
This situation required me to change the plan, so instead of adding the category for a comic at the beginning, the user can only add the category one by one once the comic is created. By that way, both problems are solved, the comic ID is known and adding category one by one meaning the controller does not have to guess how many queries to write and only write one query at a time.
What else could I do?
Achieving a small goal always make me wonder: “Ok, cool, what the next step?”. So by the time I got my comic and category done, I thought I could introduce customer reviews into the picture.
Ok, so what’s next? How about introducing customer reviews to the game?
The reviews should be on the Show comic page. And when you click on it, it will direct you to the customer page with his detail information and recent activity, which is the reviews he has just made.
In the future, when I have more tables in my database, I could project more information into the customer page such as “Recent purchase”, “Suggested shopping list” etc… It was such a pity that I have to leave this project so soon but I will develop it further both in the back-end and front-end in the future.
So, .NET, what do you say? I know I would have to improve a lot in my front-end and I promise I would do that for you with Bootstrap, SASS and even plain CSS in the future. Will that be enough of a proposal to you?