Создаём собственный простой to-do list. Часть 1

Создаём собственный простой to-do list. Часть 1

Введение

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

Мы также будем затрагивать несколько более сложные темы, такие как:

  • AJAX
  • PHP
  • MySQL
  • E-mail
  • Безопасность / аутентификация

В случае необходимости я буду вдаваться в подробности. А также расскажу о основных методах разработки и о лучших примерах их использования.

Приложение

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

  • Сохранение задач и общей информации в базу данных MySQL
  • Использование jQuery для выполнения AJAX post-backs
  • Добавление / изменение / удаление задач и сохранение их с помощью AJAX
  • Обновление всего списка задач используя AJAX
  • Пометка выполненных задач используя AJAX
  • Автоматическая сортировка задач, основанная на сроки и приоритеты
  • Автоматическая отправка уведомления / напоминания пользователю (или участнику) на электронную почту о невыполненных задачах
  • Использование анимаций CSS для отображения активности
  • Использование CSS и jQuery для создания адаптивного дизайна и оформления, которое будет работать на разных платформах

По окончанию серии уроков, у нас получится полностью функциональное, на основе базы данных, адаптивное to-do list приложение сделанное самостоятельно.
В первой части мы сделаем каркас макета для нашего to-do приложения и начнём добавлять некоторые основные стили.

Приступая к работе

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

  • Имя задачи (string 250 символов, обязательное)
  • Дата (DateTime, обязательно)
  • Приоритет (numeric 1-5, обязательно)
  • Цвет (string, HEX или RGB значение)
  • Описание (string, 1000 знаков)
  • Посетители (список адресов электронной почты)

Как вы заметили? я также указал тип данных или описание для каждого свойства, это дает мне лучшее представление о том, какие требования у меня есть.
Они также говорит мне, не только какой тип данных (numeric, string, и.т.д.) мне нужно будет использовать в базе данных, но и говорит мне, какие контроллеры я могу использовать.

Типичный способ получения информации на веб-странице является использование элементов <form> и <input>. В HTML 5 появилось несколько новых типов входных данных и атрибутов, чтобы сделать их более удобными. Элементы input получили новые атрибуты такие как ‘required’ а также были добавлены:

  • datetime
  • number
  • color
  • email

Эти новые типы input-ов довольно понятны, но их реализация ограничена во всех браузерах. В частности IE и Firefox, но даже Chrome поддерживает не все из них. Лучший браузер для их использования оказывается Opera как ни странно (в силу этого все скриншоты будут из Opera). Мы собираемся использовать их, но в некоторых браузерах, нам придется расширить их функциональность, чтобы набраться опыта (это будет обсуждаться в следующих уроках).
Еще одна новая функция добавленная в HTML 5, это автоматическая проверка вводимых значений в поля в зависимости от их типа. Например, новый тип number должен иметь числовое значение. Используя атрибуты можно установить минимальные и максимальные значения, включая шаг (или на сколько увеличивается значение за один раз).

<input type="number" required min="1" max="5" step="1" value="2">

Форма

Теперь, когда мы знаем, какие типы input-ов имеются у нас в распоряжении, мы можем решить, как лучше их использовать.

<form id="add-new-task">
    <input id="new-task-name" name="new-task-name" type="text" required>
    <input id="new-task-date" name="new-task-date" type="datetime" required>
    <input id="new-task-priority" name="new-task-priority" type="number" required min="1" max="5" step="1" value="2">
    <input id="new-task-color" name="new-task-color" type="color">
    <input id="new-task-desc" name="new-task-desc" type="text">
    <input id="new-task-email" name="new-task-email" type="email" multiple>
    <input type="submit" value="Add new">
</form>

Как вы видите, я отметил поля имени, даты и приоритета как необходимые к заполнению, но я также установил атрибут multiple на поле e-mail. Этот атрибут сообщит браузеру, что может быть больше чем один адрес электронной почты. Эти адреса должны будут быть написаны через запятую.
Создаём собственный простой to-do list, простая форма
Теперь давайте немного структурируем нашу форму и добавим элементы маркировки и расположим поля на отдельных строках.

<form id="add-new-task">
    <label for="new-task-name">Name:</label>
    <input id="new-task-name" name="new-task-name" type="text" required>
    <label for="new-task-date">Date:</label>
    <input id="new-task-date" name="new-task-date" type="datetime" required>
    <br/>
    <label for="new-task-priority">Priority:</label>
    <input id="new-task-priority" name="new-task-priority" type="number" required min="1" max="5" step="1" value="2">
    <label for="new-task-color">Color:</label>
    <input id="new-task-color" name="new-task-color" type="color">
    <br/>
    <label for="new-task-desc">Description:</label>
    <input id="new-task-desc" name="new-task-desc" type="text">
    <br/>
    <label for="new-task-email">Invite:</label>
    <input id="new-task-email" name="new-task-email" type="email" multiple>
    <br />
    <input type="submit" value="Add new">
</form>

Теперь давайте применим некоторые основные стили для страницы и формы.

body {
    color: #000000;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

form#add-new-task label{
    width: 80px;
    display: inline-block;
    margin-right: 10px;
}
form#add-new-task input{
    width: 150px;
    margin-right: 10px;
}

Мы также добавим некоторые стили используя селектор :required, для полей которые мы отметили как обязательные к заполнению.
Создаём собственный простой to-do list, стилизованная форма

form#add-new-task :required {
    border-color: #11b8ff;
    -webkit-box-shadow: 0 0 5px rgba(17, 184, 255, .75);
    -moz-box-shadow: 0 0 5px rgba(17, 184, 255, .75);
    -o-box-shadow: 0 0 5px rgba(17, 184, 255, .75);
    -ms-box-shadow: 0 0 5px rgba(17, 184, 255, .75);
    box-shadow: 0 0 5px rgba(17, 184, 255, .75);
}

Это создаст голубое свечение полям с атрибутом required.

Таблица

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

<table id="to-do-list">
    <caption>What's up next?</caption>
    <colgroup>
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
    </colgroup>
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">Date</th>
            <th scope="col">Priority</th>
            <th scope="col">Name</th>
            <th scope="col">Description</th>
            <th scope="col">Invitees</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

И немного CSS стилей

table {
    width: 100%;
}

table, tr, td, thead, tfoot, colgroup, col, caption {
    margin: 0px;
    border-spacing: 0px;
}

table {
    border: 1px solid #333333;
}

table thead tr {
    background-color: #d3edf8;
}

table tbody tr td:last-child, table thead tr th:last-child, table tfoot tr th:last-child {
    text-align: right;
}

table tfoot tr th:first-child {
    text-align: left;
    background-color: #ffffff;
    border-right: 1px solid #333333;
}

table tbody tr td, table tbody tr th, table thead tr th, table thead tr td {
    border-bottom: 1px solid #333333;
    border-top: 0px;
    border-left: 0px;
    border-right: 1px solid #333333;
}

table tbody tr td:last-child, table tbody tr th:last-child, table thead tr th:last-child {
    border-right: 0px;
}

table colgroup col:first-child {
    background-color: #e3edf8;
}

table thead tr th, table tbody tr td {
    padding: 4px 7px 2px;
}

table tbody tr:nth-child(even){
    background-color: #ececec;
}

table tbody tr:nth-child(od){
    background-color: #ffffff;
}

В следующих уроках мы расширим таблицы, чтобы добавить дополнительные элементы управления и функции.
Создаём собственный простой to-do list, стилизованная таблица

jQuery

Следующим шагом в создании собственного to-do list будет способ добавления задач в таблицу. Чтобы сделать это, мы будем использовать JQuery и создадим новую строку для каждой задачи. Чтобы подключить JQuery к нашей странице, добавим следующий код в <head> нашей страницы:

<script src="/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Я расскажу о JQuery более подробно в следующем уроке, так что сейчас просто рассмотрим основы. JQuery это библиотека JavaScript, которая направлена на упрощение и добавление функциональности веб-сайтам. Она имеет простой синтаксис. Выборка элементов почти идентична селекторам CSS. Например, если я хочу, выбрать элемент формы, я буду использовать следующий код:

jQuery('form#add-new-task');

Затем если я хочу создать функцию которая будет срабатывать когда пользователь отправляет форму, я свяжу функцию и событие submit:

jQuery('form#add-new-task').bind('submit', function(event){});

Теперь, когда форма была отправлена наша функция будет выполнена.

Сначала мы обернём нашу функцию в другое событие. Это событие будет срабатывать только тогда, когда документ или страница будет полностью загружена. Это предотвращает JavaScript от падения, так как это выполняется перед загрузкой DOM.

jQuery(document).on('ready', function() {
    jQuery('form#add-new-task').bind('submit', function(event){

    });
});

Внутри нашей функции submit мы первым делом отключим действие по умолчанию с помощью event.preventDefault ();. Как только это будет сделано, мы должны получить нашу таблицу и ее элемент TBODY.

jQuery(document).on('ready', function() {
    jQuery('form#add-new-task').bind('submit', function(event){
        event.preventDefault();

        var tbody = jQuery('#to-do-list > tbody');
    });
});

Теперь, когда у нас есть TBODY, нам нужно добавить в него новую строку. Это можно сделать используя функцию добавления append JQuery. Мы также хотим, чтобы значения задачи было расположено в правильном столбце. Мы можем получить доступ к элементу формы с помощью ключевого слова this.

jQuery(document).on('ready', function() {
    jQuery('form#add-new-task').bind('submit', function(event){
        event.preventDefault();

        var tbody = jQuery('#to-do-list > tbody');

        tbody.append('' + this['new-task-date'].value +
            '' + this['new-task-priority'].value + '' + this['new-task-name'].value +
            '' + this['new-task-desc'].value + '' + this['new-task-email'].value + '');                

        return false;
    });
});

Теперь, когда пользователь нажимает кнопку «Отправить» новая строка будет добавлена в таблицу.
На этом первая часть по созданию собственный to-do list закончена.

Создаём собственный простой to-do list, таблица с данными

В следующем уроке

В следующем уроке мы будет превращать данные формы в JSON / XML и использовать AJAX post-back на PHP страницах.
Мы также столкнемся с некоторыми проблемами кросс-браузерной совместимостью.

Следите за продолжением уроков по созданию собственной to-do list. Подписывайтесь на обновление по RSS, по почте или twitter.

comments powered by Disqus
Subscribe to RSS Feed Следить в Twitter