CodeIgniter calendar/planning application, structuring and execution
This project is literally making me lose sleep. I think about it all day long, I dream about it at night, and when I lie awake I think about it some more. It's seriously getting me to the point of crying, haha. I don't know how to structure my application and I don't know how to execute my ideas.
First of all, a short introduction. I study Interactive Multimedia Design, and I have a course called 'Project'. As the name suggests, we have to think up and create a project, more specifically a web application, using PHP, HTML/CSS, MySQL, AJAX, .. whatever technology we want to use. Since we also have to challenge ourselves to a certain extent, I decided to learn and use the CodeIgniter framework for this project. We have to show our professors what we are able to achieve. (This application won't be deployed or used, though. It's just a showcase.)
I will be creating a web application, a calendar/planner for students. They can keep track of their classes and homework, free time, etc. Here's a screenshot of what I'm trying to achieve:
I already threw out the slider and fixed this by using AJAX requests for the next/previous buttons. You can see the latest version of the website here.
However, I'm not happy with my code. I'm not happy with what I'm doing. To be brutally honest, I'm confused. I'm hopelessly confused.
I have read blogs, books, websites about CodeIgniter, about the MVC model; I have a fairly decent knowledge of PHP and I picked up the framework rather quickly. But still, so confused.
I started by coding my login form. All good. I have a login controller, with an index() function, a go() function which focuses on form validation (using the form_validation library) and setting the session. It handles error messages through AJAX and communicates with the database through my login model. I suppose this follows the MVC pattern fairly well.
The actual 'planner' page is a whole different story though. One of the first things I was wondering about is whether or not I can use/call functions from a view. If I follow the MVC guidelines, I would say I cannot. So what I'm doing now is stacking all the data in $data arrays in my controller and then echo'ing those out through jQuery AJAX calls, straight into my webpage.
This brings forward my first, ridiculously simple, question. Is this okay? One of my main concerns is of course users who don't have javascript enabled; the application simply doesn't work. I have read about graceful degradation and progressive enhancement, but I'm just not sure if this application is do-able without JS.
Another thing I'm not sure about (AJAX-wise) is the fact that I have two different AJAX-calls on $(document).ready, and then like four more when the user clicks on different elements. It also bothers me that jQuery .html() doesn't actually put the contents inside my html tags (when I view source).
The list of days at the top gets generated by a function called init_days(). I populate the list using one of the $(document).ready() AJAX calls. It works fine, but the function is a huge mess. In the controller, I create an array $data and echo the whole list (complete with html tags) into $data['calendar']; I then output this straight into the <ul> tags:
// populate initial calendar
$.ajax(
{
type: "POST",
url: "/planner/init_days",
success: function(data){
$("#days_loader").hide();
$(".month").prepend(data['month_name'] + " " + current_year);
$("#day_list").html(data['calendar']).fadeIn();
}
});
However, when using the next and previous buttons, I kind of call the same function, just with a data: option to submit the new month (and, if necessary, year). This seems a bit redundant to me; putting (almost) the same code three times. Not sure how to fix this.
My main problem, where I'm stuck now, is the part beneath the days. I have those 'Woe, 20 april' table headers, but then underneath that I need to get my actual events. I'm not sure what would be the best approach to creating this feature. Should I put it in a table? But then how would I put certain events on the right place? For now, all I have achieved is a function which outputs all events for a certain day into an array, like so:
Array ( [0] => Array ( [id] => 1 [title] => Test Event [description] => Dit is een test event. [day_start] => 2011-04-20 [day_end] => 2011-04-20 [user_id] => 1 [time_start] => 11 [time_end] => 12 ) [1] => Array ( [id] => 2 [title] => Test Event 2 [description] => Dit is een tweede event. [day_start] => 2011-04-20 [day_end] => 2011-04-20 [user_id] => 1 [time_start] => 12 [time_end] => 13 ) )
I'm not sure if a table is the best way to go. The main thing that bothers me is that I'm working with hours and all of these different hours have their own place on the page, if that makes sense. (like 9 am would go on top of the column, 11 pm would be at the bottom, duh).
I'm willing to provide a link to my source code (github) if anyone would like to take a look at my mess and perhaps try to put me on the right track again. Perhaps I AM on the right track, still; I just don't feel that way. I got stuck at the displaying-events part, and I just feel horrible because I'm not happy with what I wrote (even though most of it works, at this point).
As I'm on Easter break at the moment, I can't contact my teacher for another week, so I'm willing to provide a 100-150 rep bounty for a good, helpful answer to this huge rant/question.
If there are any books, websites, blogs I should read on design patterns, MVC, CodeIgniter, and PHP best practices in general, please 开发者_C百科also provide them. Thanks a lot.
If you got to this point, thanks for reading all the way. I appreciate it.
EDIT: My source code is here: https://github.com/cabaret/Studieplanner
PS: This question is a follow-up to my previous question. I have taken a lot of steps forward since then, but I'm still not happy and incredibly confused, mostly. I appreciate any help.
Alright, let me see if I can break this down into pieces and help you out.
Firstly It isn't clear the consistancy of your terminology, so I'm going to build a small glossary here so I am certain you understand what I mean:
- Request Lifecycle The entirety of a HTTP Request through your application. Ajax calls are lifecycles, page loads are lifecycles, once the document is sent and the connection closed, the lifecycle ends.
- Controller Code reponsible for controlling a request lifecylce's execution through your website.
- View The actual output code for any page/request. This is the code in
application/views, and is used practically every time there is a request lifecycle (except perhaps redirects & ajax). - Client Code The Javascript logic happening once the page is loaded. Ajax calls are made by the client code.
I am going to answer your questions a little out of order, so bear with me:
This brings forward my first, ridiculously simple, question. Is this okay? One of my main concerns is of course users who don't have javascript enabled; the application simply doesn't work. I have read about graceful degradation and progressive enhancement, but I'm just not sure if this application is do-able without JS.
The fact of the matter is, Javascript is a pretty intrinsic part of what we call "Web Applications" now. The difference between a web application & a web site is that the former is intelligent. Most sites usually just process requests and display the relevant data, applications however usually make decisions, update the state of the system and modify the output based on the input.
What you appear to be building I would classify as a web application.
I do not believe in this day and age of HTML5 (kinda) with the facebooks & youtubes of today that it is unreasonable to require the use of javascript to use the web application.
People who disable thier javascript these days do it through plugins like AdBlock & NoScript which usually allow you to selectively disable things. The best way to combat this is to seperate your javascript into easily recognizable components so users will know which scripts to allow.
Example
Site.js- Responsible for the site's function & operation.Ads.js- Responsible for your advertisements
You can't stop people from blocking your ads, if you try they usually just wont use your service. (Assuming you plan on ads)
So build your graceful degradation to inform your users that your application requires JavaScript to function, you can even let them know which files are required to help ease the process.
The actual 'planner' page is a whole different story though. One of the first things I was wondering about is whether or not I can use/call functions from a view. If I follow the MVC guidelines, I would say I cannot. So what I'm doing now is stacking all the data in $data arrays in my controller and then echo'ing those out through jQuery AJAX calls, straight into my webpage.
The key to remember is: MVC is a guideline not a rule. While it's best to stick to your system, you have to apply it where it's relevant. You probably shouldn't be pulling database records from your view but when presented with some out-of-the-box situations, it leaves you with two options:
- Break the paradigm slightly where it makes sense (for a good reason)
- Refactor your system to accomidate the paradigm
A good example: Re-usable widget blocks like a tag-cloud or recent-posts block
The bottom line is that you probably don't want to have to keep providing the data to $this->load->vars(...) or even worse in each $this->load->view in each controller function.
One approach is to re-design your system so you have a common theme library responsible for collecting common information & providing it, then passing your view data ($this->load->view("someview", array(),true) will render your view to a string instead of the page).
Another approach is to design a special view that has a simple job, using a model load the relevant data (Cache if you can) & display it. Like a widget, or self contained thing. This breaks MVC but you need to examine the reasons we use MVC. The key is that the view shouldn't be responsible for the implementation, this way you can swap out the view and the controller logic remains unchanged. Does that apply? this could be a highly view-implementation specific component, the controller may not know it needs this information. So if you keep a handle on it and mark it so you remember it's responsible for itself, you should be able to accommodate it just fine.
Another thing I'm not sure about (AJAX-wise) is the fact that I have two different AJAX-calls on $(document).ready, and then like four more when the user clicks on different elements. It also bothers me that jQuery .html() doesn't actually put the contents inside my html tags (when I view source).
This sounds like you're trying to do too much in the client code. Can any of those ajax calls @ the start be provided by the view?
Four ajax calls when a user clicks on stuff? Most clicks represent a single action, usually only one ajax should suffice, maybe two if you need to process the response and request more information, but rarely more than that.
$.fn.html(...) in jQuery puts the first parameter inside the element selected. If you're looking to replace the HTML of the entire page (not reccomended, ever... that should be a page load). You would call this:
var theHtmlToPutInPage = "... whatever ...";
$("body").html(theHtmlToPutInPage);
My main problem, where I'm stuck now, is the part beneath the days. I have those 'Woe, 20 april' table headers, but then underneath that I need to get my actual events. I'm not sure what would be the best approach to creating this feature. Should I put it in a table? But then how would I put certain events on the right place? For now, all I have achieved is a function which outputs all events for a certain day into an array, like so:
There are many approaches to this problem. You could build the entire thing as a big table of time-blocks, but this could get rather confusing. Also, tables are nasty, There are many well-written articles on when & where to use tables.
You could set up the visuals as a uniform grid with CSS Divs & float the appointments overtop using position: absolute and controlled from your Client Code (javascript).
This is a rather complex part of your project, there's many answers and I don't have time to really deep-dive any solutions here, you'll just have to prototype & experiment.
I'm willing to provide a link to my source code (github) if anyone would like to take a look at my mess and perhaps try to put me on the right track again. Perhaps I AM on the right track, still; I just don't feel that way. I got stuck at the displaying-events part, and I just feel horrible because I'm not happy with what I wrote (even though most of it works, at this point).
I would be willing to look it over & give suggestions, as I'm sure some others here would too.
As I'm on Easter break at the moment, I can't contact my teacher for another week, so I'm willing to provide a 100-150 rep bounty for a good, helpful answer to this huge rant/question.
Generally bounty should be used as a motivator to get your question answered correctly. The kind of thing that gets people to go in depth (like perhaps this answer, it's getting mega long now).
You're welcome to offer a bounty, it's your rep, however do not feel like you have to offer a bounty. If this answer is satisfactory (or any other one someone else might post, simply accepting an answer should be more than enough).
Summary & Final Thoughts
Alright, so in the course of writing this monstrosity of an answer (does it count as a novella yet?) I think I may have deduced where you might be going wrong. It might be by design, but it might be accidental.
I think you might be mistaking the view for the client code. When we talk about MVC we do not neccesarily mean, it should all be loaded in via ajax, and the view is the javascript & dom running on the client's browser.
If this is not the case, then please disregard that last paragraph.
It really sounds like you've got the wrong weighting of responsibilities. It looks like you're tasking too much of your application to javascript. Page loads are not the devil, ajax is trendy but often can be Too Much. You have to find the right fit for your app. It really seems like you could benefit simplifying your problems by tasking more responsibility to the view instead of the client code.
I hope this answer has helped you, sorry it took so long for me to post this, I saw your question when you posted it but didn't have the time to go in-depth like this then.
加载中,请稍侯......
精彩评论