Веб-приложение - слайдер, показывающий функцию дней месяца

Question

Для школьного проекта мы должны создать веб-приложение.Я буду создавать что-то, где люди смогут отслеживать свои занятия, домашние задания и свободное время.Планировщик / календарь.(Я делаю это звучит очень глупо, но эй, я устал, и английский не мой родной язык;))

Я буду работать в CodeIgniter для логики PHP, в сочетании с обычным.. CSS, JQuery, MySQL.PHP является обязательным требованием для курса;Я решил сделать это в CI, потому что хорошо .. Я хотел изучить структуру.Мы должны показать, что мы можем сделать в этот момент нашей «школьной карьеры».

В любом случае, я хотел бы попросить вас рассказать о функции, которую я хочу реализовать.В верхней части моей страницы я хотел бы показать бар, который содержит дни месяца.Ниже номера дня я буду показывать, сколько задач добавляется в этот день с помощью нескольких точек.Когда пользователь нажимает предыдущий или следующий, я хочу показать дни предыдущего / следующего месяца.Я также хочу, чтобы под этим полем находился какой-то ползунок, который пользователь может использовать для перемещения влево и вправо и циклически перемещаться по тем же дням.Надеюсь, это имело смысл?

РЕДАКТИРОВАТЬ 2: Я хочу, чтобы ползунок был динамический .Если пользователь перемещается к предыдущему или следующему месяцу или нажимает кнопки, я хочу, чтобы он загружал дни предыдущих / следующих месяцев и отображал их.Кроме того, скажем, что мы находимся на 26-ом числах месяца, ползунок должен будет показать что-то вроде 10-31 этого месяца и 1-10 следующего месяца.Я полагаю, что мне также придется изменить индикацию месяца (не так, как показано на рисунке), чтобы пользователь знал, когда начинается другой месяц (я покажу ему название месяца).

Вот картинка (не берите в голову искаженные цифры дня, мне было лень делать это правильно в Photoshop. Я исправлю это томо):

Я искална ползунках пользовательского интерфейса jQuery.Я полагаю, мне нужно было бы получить количество дней из базы данных или с помощью PHP?Я думаю, функция cal_days_in_month может пригодиться здесь.Когда пользователь нажимает на стрелки или скользит влево или вправо, я не хочу, чтобы страница обновлялась.Должен ли я пойти с ajax звонками там?Я не совсем уверен, как это реализовать, если честно.Числа также являются ссылками на вид календаря, который отображается под этой панелью.Могу ли я использовать для этого класс CI Calendar?Или это больше для полноценного календаря Google типа календарей?Я подумал, эта скринкаст может быть полезна?

Если это возможно, кто-нибудь может рассказать о том, как начать работать над этим и какие плагины и т. Д. Я мог бы использовать?Я не уверен, с чего начать, если честно.Я уверен, что смогу решить это как-нибудь, но я думаю, было бы неплохо получить кикстарт с помощью некоторой помощи здесь.Основная проблема, которую я вижу, это слайдер / следующая / предыдущая вещь и загрузка в дни предыдущего / следующего месяца.

Заранее спасибо.

РЕДАКТИРОВАТЬ: я понимаю, что некоторые люди могут сказать / подумать «О Боже, почему бы вам просто не использовать свои навыки вместо того, чтобы что-то спросить нас о!».Ну, это потому, что я действительно хочу научиться чему-то, работая над этим проектом.Имейте в виду, я не прошу здесь строки кода, я просто прошу дать некоторое представление о том, с чего начать и какие вещи использовать;возможно, маленькие отрывки, которые могут мне помочь.Спасибо.

ОБНОВЛЕНИЕ:

У меня есть очень простой рабочий день.Все еще без ползунка, и при этом предыдущая и следующая кнопки не работают, но эй .. по крайней мере это заполняет это динамически.Показывает 5 дней, предшествующих текущему дню, затем этот месяц до конца.Все, что осталось заполнить, заполняется днями следующего месяца.Довольно простой.Однако у меня есть пара вопросов!

Поскольку вчера кто-то сказал мне, что я нарушаю шаблоны проектирования, выполняя некоторые вещи так, как я это делаю, я крайне параноидален в отношении того, как я сейчас работаю, и мне очень хотелось бы получить отзыв от CodeIgniter pro's , Чтобы заполнить «дневной бар», я создал помощника с несколькими методами. (Один метод для динамического заполнения того «месяца-года», который вы видите на рисунке, другой метод init (), который загружает список дней, как я объяснял ранее). Я загрузил этот помощник в контроллер, и теперь я использую методы на мой взгляд:

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

Помощник затем отображает мои дневные значения в моем представлении. Это хорошая или плохая практика? Я продолжал думать неправильно, когда хотел начать писать код для этого ... Я хотел иметь функцию где-нибудь в моем контроллере, а затем вызывать ее из представления, но я прочитал, что я не должен делать это так. что я должен был изменить свою логику. Мне трудно осознать тот факт, что я должен сделать это, отправив массивы данных в мое представление (из моего контроллера), поэтому я решил создать помощника. Хорошо? Плохой? Любые советы, ресурсы, которые я должен прочитать, скринкасты, которые я должен смотреть? Большое спасибо.

Answer 1

Это кажется довольно прямым для меня.У меня действительно нет времени, чтобы написать все это сейчас.но вот какие шаги я бы предпринял.

1) создайте модель, которая получает все задачи за месяц и использует ее для создания массива {date}=>{num_tasks}, например, {'1'=>3,'2'=>1, "3"=>0, ...}.// подсказка: используйте регулярный подсчет SQL ИЛИ просто зацикливайтесь на них и подсчитывайте их.

2) создайте функцию контроллера для возврата этого массива в виде JSON.Примерно так:

public function get_month($month, $year) {
    $tasks = $this->task_model->get_each_days_taskcount($month, $year);
    $json = json_encode ($tasks);
    echo $json;
}

3) написать html-страницу с функцией javascript для вызова этой функции контроллера с помощью AJAX.Примерно так:

function fill_calendar(month, year) {
$.get('some_controller/get_month/' + month + '/' + year, function(data) {
    // parse the JSON then
    // do something with the data here like $('#calendar').append();
});
}

4) Загрузите в этом месяце что-то вроде этого:

$(function() {
    var d = new Date();
    var tmonth = d.getMonth();
    var tyear = d.getFullYear();
    fill_calendar(tmonth, tyear); // populate with this month
});

5) заставьте кнопки prev и next работать с чем-то вроде

$('#prev_button').click(function() {
    fill_calendar(current_month - 1 , tyear);
    // you will probly need to make this calculation smarter than just minus 1
});

Answer 2

Я действительно не вижу сложностей по этому поводу .......

Если вы просто используете jQuery UI DataPicker и изменяете файл js, чтобы он сохранял дни в ползунке, затем поместитеданные в jQuery UI Slider, и вы должны иметь почти то, что вам нужно.

Answer 3

Главное, если вы хотите, чтобы ваша система была динамичной, это сделать передачу данных короткой. Таким образом, используя Ajax, как говорит icchanobot, отправьте запрос на определенный месяц. Используйте get:

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

или даже:

'some_controller?next' // or previous

Контроллер должен получать данные за правильный месяц, но не отправлять обратно весь месяц - только данные, необходимые для вашего дисплея, в максимально плотном формате. Вы можете запросить, сколько событий выполняется в какие дни этого месяца:

ВЫБРАТЬ день, считать (событие) FROM event_table ГДЕ ДАТА МЕЖДУ «ГГГГ-ММ-01» И «ГГГГ-ММ-31» GROUP BY день ЗАКАЗАТЬ ПО ДНЕМ;

запрос должен адаптироваться к вашей структуре данных - используйте функцию, чтобы получить день от полной даты, и, возможно, используйте индексы, чтобы запрос быстро возвращал данные.

Затем контроллер возвращает максимально короткую строку соответствующих данных, отсортированных в порядке дня:

1 = 3,15 = 1,29 = 2

Это будет означать «1-е = 3 события, 15-е = 1 событие, 29 = 2 события». Если вам не нужно количество событий, тогда достаточно «1,15,2». Пустые дни не передаются.

данные принимаются обработчиком событий ajax на вашей веб-странице, и вы анализируете их с помощью split, а затем заполняете ползунок с помощью цикла.

Самое большое сопротивление в очень динамичном приложении - это замедление при повторном запросе следующего месяца и следующего. Несколько трюков:

• Обновление дисплея во время ожидания данных; Вы отправляете свой запрос, и пока он обрабатывается, вы можете просмотреть месяц, указав правильное количество дней и выглядя отключенными, чтобы пользователь сразу знал, что он получит свои данные и что он выполняется. Затем, когда данные поступают, заполните и выделите. Это будет ощущаться мгновенно, хотя это не так.
• Избегайте обработки информации, которую пользователь больше не хочет. Если кто-то нажимает «следующий» три раза, ему нужны данные за июль, а не за май, июнь и июль. Не обрабатывайте то, что не отображаете.
• Кэшируйте данные, которые вы уже запросили, если только вы не хотите, чтобы система динамически возвращала на сервер последнее состояние календаря. Вы запросили данные за май и июнь, но не отобразили их; когда пользователь нажимает «назад», не запрашивайте эти данные снова.

Удачи!