1

I'm currently working on a web application which uses HTML, CSS, Javascript, Bootstrap and JQuery. I will like to use Model–view–controller (MVC) as my software design pattern. So far I have 7 HTML pages and each page has a corresponding controller in Javascript. And these HTML pages shared some "global" CSS & Javascript (Bootstrap & JQuery). I'm unsure how to organise my files to demonstrate MVC clearly. Am I right to say:

  • MODEL (some files which manippulate data?)
  • VIEW (all my HTML & CSS files)
  • CONTROLLER (all my Javascript files)

Does this means I have 3 folders (MODEL, VIEW, CONTROLLER) and I simply place all my files accordingly?

Sorry is my 1st time adopting software design pattern, sorry for any confusion caused. I will like to know more about how to implement MVC effectively as I feel is important.

KY Leung
  • 103
  • 1
  • 9

2 Answers2

1

Well it depends on the approach. But to give you a clue of best practice you don't necessarily need to have a controller for each page, in fact it will be more like a view for each page, a model for each data entity and a controller for performing the actions of data binding, in most of the cases you will be having a similar number of controllers and models. The controller usually will be the one choosing which view to show, parsing the data for such a purpose, and invoking data synchronization actions. Keep in mind : "controllers does stuff".

Pedro Emilio Borrego Rached
  • 316
  • 3
  • 10
  • Thank you so much for the clear explanation. I always have this mindset where controller is all the methods/functions for a webpage. So it seems like controller is tightly linked with model. – KY Leung Oct 25 '16 at 11:24
1

You can read about MVP pattern (Model-View-Presenter) which similar with MVC and used in frontend.

Also you can see examples of todolist mvc (vanilla javascript, jquery). Here is cool code organization.

What about folder structure, You can apply different approaches, but for several pages it's good idea to create folders like models, views, controllers, helpers and so on.

p.s. Together with the models usually used collections (list of models). You can see how organized Backbone (library) structure.

saaaaaaaaasha
  • 338
  • 3
  • 10
  • Thank you so much. That's a lot of new information. Am I right to say todolist mvc, folder structure and backbone can be implemented concurrently in a web application? For my case, if I wish to start off with folder structure, how should I organise my files? Thank you once again. – KY Leung Oct 25 '16 at 11:28
  • Yes, you are right and it's about JS code. http://stackoverflow.com/a/24199418/6554441 - here about folder structure for simple frontend project in generally. And I like this approach: _CSS_, _JS_, _IMAGE_ forder is placed to `assets` or `resource` folder. If `data` files (you call it "model") are used in _JS_, I would put it in _JS/data_. If you have a lot of HTML, I would put it in _templates_ folder. – saaaaaaaaasha Oct 25 '16 at 12:27