Пробное приложение — реестр счетов

schet_1Скрипт «пробного приложения» который реализует функции реестра счетов.

Приложение состоит из следующих страниц:
1. Реестр (список) счетов
2. Карта счета (добавление счета, правка уже существующего счета)

Функции приложения:
1. Создание нового счета (с заполнением полей и позиций)
2. Правка существующего счета (с возможностью редактировать все введенные данные, менять состав позиций)

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

Из задания сказано:

Создать пробное приложение — реестр счетов.
Поля счета: номер, дата, сумма счета – связана с позициями счета.
Каждый счет включает в себя произвольное количество позиций. Поля позиции: наименование, количество (может быть дробным), цена, стоимость. В этом тестовом задании все поля можно заполнять вручную.

Приложение состоит из следующих страниц:
1. Реестр (список) счетов
2. Карта счета (добавление счета, правка уже существующего счета)

Функции приложения:
1. Создание нового счета (с заполнением полей и позиций)
2. Правка существующего счета (с возможностью редактировать все введенные данные, менять состав позиций)

Видим здесь как минимум две таблицы для базы данных, таблица «СЧЕТ» и таблица «ПОЗИЦИИ».

База данных приложения «реестр счетов»

База данных СЧЕТА

В таблице «СЧЕТ», я ее назвал [gd_schets], поле «summa» это сумма стоимостей позиций счета, т.е. счет может состоять из нескольких позиций. Кто то скажет «зачем отдельное поле для этого, всегда же можно выбрать позиции счета и подсчитать сумму?» — да, можно, но это лишний запрос к базе данных и этот запрос выполняется в тот момент когда надо БЫСТРО, а при добавлении счета в систему это время не так критично и не так много места занимает.

В таблице «ПОЗИЦИИ», я ее назвал [gd_position], поле stoimost скорее всего лишнее и смысла ее хранить нет, т.к. при отображении счета «стоимость» вычисляется из умножения «количества» на «цену» и легче это сделать с помощью языка программирования PHP.

Поле [id_schet] отвечает за связь позиции с счетом, необходимо чтобы мы могли знать к  какому «счету» относится «позиция».

С базой данных разобрались, теперь можно заняться проектированием интерфейса и продумыванием логики приложения.

Для визуального интерфейса приложения я использовал bootstrap фреймворк, он удобен для написания админок и содержит в себе все самое необходимое для красивого отображения информации.

Страница «Реестр (список) счетов»

Страница реестр счетов

Здесь, по моему мнению, не хватает поля «название» счета, чтобы в списке таких счетов можно было бы найти по смыслу счет, но не я заказчик.

Страница списка элементов, представляет собой таблицу с заглавием и строками — счетами, у каждого счета есть две кнопки «удалить» и «редактировать».

Также должна быть кнопка «Добавить» счет.

Страница «Карта счета» добавление/редактирование все в одном

Реестр счетов добавление счета

Интерфейс представляет собой форму в которой реализована функция добавления позиций в счет. Вот тут есть много вопросов и несколько реализаций добавления позиций в счет.

Первый способ самый простой для программиста.

  1. Создаем счет — отдельная форма.
  2. Добавляем в счет одну позицию — отдельная форма.
  3. Для редактирования счета необходима еще форма с возможностью удаления и редактирования позиций — это еще один велосипед.

Получается если в счете 100 позиций, тогда необходимо будет 100 раз открывать форму добавления позиции в счет и 100 раз нажимать кнопку «добавить», нет ни какой интерактивности и юзабелити.

Второй способ удобный для клиента (его и реализуем)

  1. Создаем счет — отдельная форма, она же и является формой для добавления позиций.

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

Третий способ, не знаю для кого удобный

  1. Создаем «позиции» — отдельная форма, после создания нескольких они будут висеть в системе без привязки к счету
  2. Выбираем позиции для создания счета — с помощью галочек выбираем позиции и создаем счет.
  3. Форма редактирования счета должна быть.

Способ имеет место быть, и в некоторых случаях клиенты привыкли так работать.

Итак мы остановились на втором способе, т.к. удобнее и так сказал клиент.

На форме первая строка представляет собой «форму» для позиции, заполняете «наименование», «количество» и «цену», стоимость автоматически считается. И нажимаете [+] «позиция» добавляется в счет, с возможностью редактирования «позиции» и удаления с помощью кнопки [-].

И в принципе все на данном этапе с интерфейсами закончили.

Программный код «реестра счетов»

Код для отображения списка счетов.

выбираем из таблицы счетов данные и заносим в массив $out[‘items’], далее этот массив передаем в smarty для формирования html кода:

Код для отображения «редактирования/добавления» счетов

Здесь в переменной $_REQUEST определяется имеется ли запрос на редактирование, если да, тогда определяем id редактируемого элемента и выполняем запрос к БД.

Закомментированная строка позволяет не потерять созданные позиции при ошибочных действиях!

Для формирования HTML кода опять передаем переменную $out в $smarty

Здесь представлен код который подходит и для добавления и для редактирования счета и позиций. Но это только HTML он формирует интерфейс для пользователя, интерактивность и «удобность» необходимо реализовать на стороне клиента с помощью jQuery (или JavaScript). Я использую jQuery.

Код для подсчета стоимости позиции, берется количество, цена и умножаются

Код для добавления позиции в счет, здесь используется ajax технология, которая позволяет не обновляя страницу изменять ее содержимое

В переменной data формируется POST данные для скрипта index.php в формате json  передаются данные, как на сервер, так и обратно. И если нет ошибок, тогда в таблицу «счета» добавляем строку с новой позицией.

Код на стороне сервера который принимает данные по ajax.

Здесь используем $_SESSION для хранения временных данных, до момента создания счета, в момент создания мы все временные данные записываем в таблицу базы данных.

После формирования счета позициями, сохраняем наши данные.

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

Вот в принципе и все. Осталось только добавить кучу проверок на ввод данных и оптимизировать логику работы.

P.S. для людей которые ищут все готовое я могу за отдельную плату сделать все за них.

Google Bookmarks Digg Reddit del.icio.us Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong
Запись опубликована в рубрике free-lance, PHP программирование с метками , , , , , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *