So you've decided that you can handle building this huge app comprising of 1 page and want to carry on. Well its time to throw in a little more theory first. Sorry.
We've seen the flow and now need to think of the structure. Simple. We need:
- 1 x form - dsp.frm.details.cfm
- 1 x page to let the user know its all ok- dsp.successful.cfm
- 1 x validation CFC - validator.cfc
- 1 x user CFC to insert the data into the DB - users.cfc
Take all ingredients and throw it into a model glue app and let it boil for a couple of hours and vola. Well maybe not that easy. But before we continute, here is some thinking behind my thinking:
- The landing page is the form. Why? Its a one page app :o)
- The "successful" page breaks my rule for the 1 page app, but its nice to let the user know that something has happened to their data instead of just refreshing onto the same form.
- After a bit of decission making I am going to make my CFC's simple. No DAO's, Gateways, Business objects and Managers. Mainly because I'm/you are here to learn MG and its structure rather thant the best CFC coding practices.
- I'm not showing any styling/css in the demo. I might add it, but im sure all of you know how to replicate anything i'll do in HTML and css.
To the right you'll see our directory structure. To create this you have two options:
- Create the files yourself using the image as a guide
- For the lazy ones download the .zip file with the structure contained. mg_form.zip
To end this next part, im going to give you the code for the dsp.frm.details.cfm, layout.main.cfm and dsp.successful.cfm.
The Form > dsp.frm.details.cfm
I'm going to make this simple, name, email and date of birth fields only. I'm covering <input> fields and <select> which i think will be enough scope to get the idea of how submittingforms in MG works.
<input type="text" name="name" id="name" value=""/>
<input type="text" name="email" id="email" value=""/>
<label for="dob">D.O.B dd/mm/yy</label>
<input type="text" name="dob_day" id="dob_day" size="5" value=""/>/
<input type="text" name="dob_month" id="dob_month" size="5" value=""/>/
<input type="text" name="dob_year" id="dob_year" size="5" value=""/>
Successful page > dsp.successful.cfmNot much thinking going behind this page.
Successful page > layout.main.cfmThere's no CFM in here yet so not much to tell you about, but im sure you will get the gist of it.
<InvalidTag http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My MG App</title>
<h1>My MG App</h1>
<!--- Our content will go here --->