Saving Data to the Server
This is the second of five phases of the Model View Controller Tutorial series. Last time, we made an extremely simple MVC in JavaScript to help us:
- Cache data from the server to minimize AJAX calls
- Separate our model code, view code, and business logic code
- Maximize reuse of code
This is all well and good, but we only dealt with meaningless “item” data – our application didn’t do anything. This time we’ll begin building a simple web app to actually do something: manage simple text notes. Our app will let the user view, create, edit, and delete notes.
Demo
Check out the live demo to see it working in action. The ajax calls are programmed to fail 10% of the time to show how the UI recovers.
Architecture
Since this application does so much more than the last phase, the Controller will contain much more application logic than last time. We’ll also make extensive use of the Listener Pattern for communication between parts.
The Source Code
I highly recommend downloading the source and following along. I’ll just be including specific parts of the source in each of the next steps of the tutorial, so this is your chance to see the full source in one go.
Next Steps
Each of the next steps will walk through a specific user action, from mouse-click to database. Since Phase 1 covered loading in data from the server, we won’t recover that. This time, we’ll look at how a note is saved, then how it’s edited, and finally how it’s deleted.
- Page 1: Saving Data to the Server
- Page 2: Adding a Note
- Page 3: Editing a Note
- Page 4: When AJAX Fails
- Page 5: Summary and Source Code
this is very interesting. i am wondering how you might go about extending this into more of a framework, where you create more specific classes that extend base model, view and controller classes.
this is a great tutorial. keep it coming.
i just have one question about the sample code. why do i always get these errors?
Fetching Data…
ajax error
adding new note…
adding new note failed
i have already changed the MySQL configuration to my setup. i hope to hear from you.
thanks in advance…
rodel, lines 25 – 30 or so of the PHP Server file purposefully randomly fail to show how the UI can recover from errors. Delete these lines, and the app should work 100% of the time.
Cheers
This tutorial wowed me too. But one thing I doubt is that view seems to be heavier than what I think it should be. As a developer, I hoped view is close to mere html, model a wrapper of json, controller event handler.
The source code is not opening up due to some JavaScript error. Please rectify it.
this is a very good tuts but how i wish you could make a video and post it on YouTube it would be very easy to follow, there is almost no video on you tube describing very well the way you have done, i believe you could do very well.