Web应用程序 - 显示月份日期功能的滑块

Question

对于学校项目,我们必须构建一个Web应用程序.我将创造一些人们可以跟踪他们的课程,家庭作业和空闲时间的东西.计划者/日历.(我说这听起来很蹩脚但是嘿,我累了,英语不是我的第一语言;))

我将在CodeIgniter中为PHP逻辑工作,结合通常的.. CSS,jQuery,mySQL.PHP是课程的要求; 我之所以选择在CI中这样做是因为我想学习框架.我们必须炫耀我们在"学校生涯"这一点上能做些什么.

无论如何,我想问一些关于我想要实现的功能的见解.在我的页面顶部,我想显示一个包含该月日期的栏.在天数下面,我将通过一些点显示当天添加了多少任务.当用户点击上一个或下一个时,我想显示上一个/下个月的日期.我还想在这个盒子下方放置一些滑块,用户可以使用它来左右滑动,并循环播放这些日子.我希望这是有道理的？

编辑2:我希望滑块是动态的.如果用户滑到上个月或下个月,或点击按钮,我希望它加载上个月/下个月的日期并显示这些日期.另外,假设我们在一个月的第26个月,滑块必须显示本月的10-31和下个月的1-10.我想我还必须改变我的月份指示(不像这里的图像那样),以便用户知道何时开始另一个月(我将向他们展示月份的名称).

这是一张图片(不要介意那些数字搞砸了,我在Photoshop中正确地做了这个.会解决这个问题):

我一直在看jQuery UI滑块.我想我必须从数据库或使用PHP获取天数？我想cal_days_in_month函数在这里可以派上用场.当用户向左或向右单击箭头或幻灯片时,我不希望页面刷新.我应该在那里使用ajax电话吗？说实话,我不太清楚如何实现这一点.这些数字也是日历类型视图的链接,显示在此栏下方.我可以使用CI日历课吗？或者更适合成熟的谷歌日历类型的日历？我认为这个截屏可能有用吗？

如果可能的话,有人可以提供一些有关如何开始工作的见解以及我可能使用的插件/等等吗？说实话,我不知道从哪里开始.我确信我能以某种方式解决这个问题,但我想通过这里的一些帮助获得kickstart会很好.我看到的主要问题是滑块/下一个/上一个东西,并在上个月/下个月的日子里加载.

提前致谢.

编辑:我意识到有些人可能会说/想'OMG,为什么不用你所拥有的技能而不是尝试一些你要问我们的东西!'.嗯,这是因为我真的想在做这个项目时学到一些东西.请记住,我不是在这里要求代码行,我只是想要了解从哪里开始以及使用什么东西; 也许是可以帮助我的小片段.谢谢.

更新:

我有一个非常基本的"日间酒吧"工作.仍然没有滑块,前一个和下一个按钮也不起作用,但是嘿..至少它动态地填充它.它显示当天前5天,然后是本月直到结束.无论剩下什么都填满了下个月的日子.相当基本.但是,我确实有几个问题!

因为昨天有人告诉我,我正在按照我的方式做一些东西来破坏设计模式,我对我现在工作的方式非常偏执,我真的很喜欢'CodeIgniter pro'的一些反馈.为了填写"日期栏",我用几种方法创建了一个帮助器.(一种动态填充你在图片中看到的'月份'事物的方法,另一种方法init()加载日期列表,就像我之前解释过的那样).我在控制器中加载了这个帮助器,我现在正在使用我视图中的方法:

    <ul>
        <?php
            init($current_day_of_month, $current_month, 
                          $current_year, $days_in_current_month, $show_history);
        ?>
    </ul>

帮助者然后在我的视图中回应我的日期值.这是好事还是坏事？当我想开始为此编写代码时,我一直在思考错误的方法..我想在我的控制器中的某个地方有一个函数,然后从视图中调用它,但我读到我不应该这样做.我不得不改变我的逻辑.我发现很难绕过这样一个事实:我必须通过向我的视图(从我的控制器)发送数据数组来做到这一点,所以我选择创建帮助器.好？坏？我应该阅读的任何提示,资源,我应该看的截屏视频？谢谢一堆.

Answer 1

如果您希望系统是动态的，关键是要缩短数据传输时间。因此，正如 icchanobot 所说，使用 Ajax 发送特定月份的请求。使用获取：

'some_controller?m=' + month + '&y=' + year

甚至：

'some_controller?next' // or previous

控制器必须获取正确月份的数据，但不能发回整个月 - 仅以尽可能严格的格式发送显示所需的数据。您可以查询该月的哪几天运行了多少个事件：

SELECT day, count(event) FROM event_table WHERE DATE BETWEEN 'yyyy-mm-01' AND 'yyyy-mm-31' GROUP BY day ORDER BY day;

查询需要适应您的数据结构 - 使用函数从完整日期中获取日期，并且可能使用索引以便查询快速返回数据。

然后控制器返回一个尽可能短的字符串，其中相关数据按日顺序排序：

1=3,15=1,29=2

这意味着“第 1=3 个事件，第 15=1 个事件，29=2 个事件”。如果您不想要事件的数量，那么“1,15,2”就足够了。空日子不会被传播。

数据由网页上的 ajax 事件处理程序接收，并使用 split 对其进行解析，然后使用循环填充滑块。

在一个非常动态的应用程序中，最大的阻力是当您反复询问下个月和下个月时它是否会变慢。一些技巧：

• 等待数据时更新显示；您发送查询，在处理查询时，您可以将月份滑入视图，并显示正确的天数，看起来已禁用，以便用户立即知道他们将获取数据，并且正在进行中。然后当数据到来时，填充并突出显示。感觉会是瞬间的，但事实并非如此。
• 避免处理用户不再需要的信息。如果有人点击“下一步”三次，他们想要的是 7 月的数据，而不是 5 月、6 月和 7 月的数据。不要处理不显示的内容。
• 缓存您已经请求的数据，除非您希望系统动态返回服务器以获取日历的最新状态。您已请求 5 月和 6 月的数据，但未显示；当用户点击“返回”时，不要再次询问该数据。

祝你好运！