Создать приложение как дела которое запрашивает имя пользователя с помощью текстового поля edit
Cоздание приложения в Lazarus состоит из следующих шагов:
- Подготовка
- Размещение компонентов интерфейса пользователя
- Создание процедур-обработчиков событий
- Тестирование и отладка приложения
Подготовка
Подготовка состоит из следующих шагов.
- Создать отдельную папку для каждого проекта.
Без пробелов! Без русских букв!
Место создания: C:\2kurs\your_name. - Запустить Lazarus.
- Закрыть проект:
Проект/Закрыть проект. - Создать новый проект: Приложение
- Сохранить проект в созданной специально для него папке:
Проект/Сохранить проект как. - Проверить успешность компиляции и запуска нового пустого проекта
клавиша F9. - Закрыть запущенный пустой проект.
- Продолжить сборку проекта.
- Регулярно сохранять проект в процессе сборки
сочетание клавиш Ctrl+S.
Создание процедуры-обработчика щелчка по кнопке Button1
1. На панели компонентов Standard выберите компонент TButton.
2. Разместите компонент TButton на форме:
должна появиться кнопка Button1.
3. Выделите на форме кнопку Button1, щелкнув по ней мышкой.
Проверьте: в верхней части окна Инспектор объектов в дереве
объектов должна быть выделена кнопка Button1.
4. В нижней части окна Инспектор объектов перейдите на
вкладку События.
5. На вкладке События выберите событие OnClick: должно появиться
поле ввода, справа от которого - кнопка с многоточием ". ".
6. Щелкните по кнопке с многоточием ". " напротив события OnClick.
7. В окне редактора должна появиться заготовка для процедуры
обработчика щелчка по кнопке Button1:
8. Для объявления переменных напишите
var
со списком переменных и указанием типов
между заголовком процедуры
procedure TForm1.Button1Click(Sender: TObject);
и словом
begin.
9. Операторы подпрограммы запишите между словами
begin и end;.
Об отметках
Основные упражнения не отмечены никакими специальными знаками, их выполнения достаточно для удовлетворительной оценки. Дополнительные упражнения отмечены "звездочками", их выполнение необходимо для получения повышенной оценки.
- "5" - в отчете выполнены все основные упражнения, дополнительно выполнены упражнения с одной и двумя "звездочками".
- "4" - в отчете выполнены все основные упражнения дополнительно выполнены упражнения с одной "звездочкой".
- "3" - в отчете выполнены все основные упражнения.
Упражнения
1. В программе присвоить строковой переменной s
строковую константу, например, 'abcd'.
Вывести значение s в метку Label1 при щелчке
по кнопке Button1.
На форму поместить:
Label1
Button1
procedure TForm1.Button1Click();
var
s : string;
begin
s := 'abcd'; // Присваиваем строковую константу.
Label1.Caption := s;
end;
2. Текст из метки Label1 присвоить строковой переменной s,
а затем вывести значение в Label2.
Эти действия должны выполняться при щелчке по кнопке Button1.
На форму поместить:
Label1
Label2
Button1
procedure TForm1.Button1Click();
var
s : string;
begin
s := Label1.Caption; // Присваиваем текст из метки.
Label2.Caption := s;
end;
2. Создайте приложение с одной кнопкой и двумя областями ввода. В области ввода пользователь вводит размеры окна формы (ширину и высоту). При нажатии на кнопку размеры соответствующим образом изменяются.
3. Создайте приложение «5 лет назад», которое через области ввода запрашивает у пользователя имя и возраст. А при нажатии на кнопку в заголовке формы выводит надпись с именем и возрастом, который был 5 лет назад. Например, ввели имя «Вася», а возраст «17» лет, то приложение должно выдать «Вася, 5 лет назад Вам было 12». Причем если было введено число меньше 5, то приложение выводит «Вы еще не родились».
4. Создайте приложение по расчету значения функции f (x,y) =x + y*3 , где x и y вводятся в полях ввода. Результат отображается в метке. Например, «Значение функции f (x,y) = 35, при x =5, y = 10». Вводимые значения должны быть целыми.
5. Создайте приложение «Ювелир», вычисляющее стоимость золотого изделия. В однострочных редакторах пользователь заносит массу изделия и стоимость (в руб) одного грамма золота. Итоговая цена изделия должна отобразиться в отдельном однострочном редакторе Edit. Учтите, что масса может быть не целой величиной.
6. Создайте приложение с двумя кнопками и областью ввода Edit. В область ввода пользователь вводит шаг (целое число). При нажатии на первую кнопку все края окна увеличиваются на значение, равное шагу. При нажатии на вторую кнопку все края окна соответственно уменьшаются. Причем центр окна остается неименным. По умолчании шаг равен 5.
7. Создайте приложение «Двигающаяся форма» с четырьмя кнопками. При нажатии на эти кнопки форма перемещается на один пиксель влево, вправо, вверх либо вниз соответственно. В заголовке формы отображаются текущие координаты формы. Например: «Форма имеет координаты: x=95, y=124».
8. Создайте приложение «Мини-калькулятор», которое бы позволило выполнять четыре арифметические действия с целыми числами: сложение, вычитание, умножение и деление. Каждое действие обозначается отдельной кнопкой. На форме находятся две области ввода EditNum1 и EditNum2, и область вывода EditResult.
9. Создайте приложение «Наблюдение за мышкой», которое выводит в заголовке окна текущие координаты курсора при перемещении его по форме. При щелчке по форме мышкой в компоненте Label должна появиться информация о координатах щелчка.
10. Создайте приложение «Улучшенный мини-калькулятор», которое бы позволяло вычислить четыре арифметических действия с действительными числами: сложение, вычитание, умножение и деление. Каждое действие обозначается отдельной кнопкой. На форме находятся две области ввода для чисел EditNum1, EditNum2 и область вывода результата арифметиче6ских действий EditResult. При делении на ноль в EditResult отображается текст « Деление на ноль».
11. Создайте приложение для нахождения корней квадратного уравнения. Коэффициенты при неизвестных вводятся в три области ввода Edit. Результат выдается в компоненте Label после нажатия на кнопку. Если решения нет, то в компоненте Label появляется соответствующая надпись.
И? Попытайтесь сделать что-то сами, погуглите (если все-таки будете гуглить, то используйте ключевое слово pascal или delphi вместо lazarus), посмотрите учебник. Если на какой-то вопрос никак не удается найти ответ, то покажите код, расскажите, что конкретно не получается.
Ну либо в раздел фриланс (или контакты у меня в подписи) за вознаграждение.
Изначально человек создавал компьютер для того, чтобы машина выполняла расчеты. И в настоящий момент вычисления — это одна из основных задач для компьютера. Вычислительные программы запрашивают у пользователя входные данные, проводят вычисления и выдают результат.
Задачи урока
- Ввод и вывод числовых данных.
- Преобразование из строкового типа в целочисленный и обратно.
Выполнение упражнения
В этом упражнении мы создадим простейший калькулятор, который будет находить сумму двух чисел. Приложение будет состоять из двух однострочных редакторов для ввода чисел, кнопки «Вычислить» и ещё одного однострочного редактора для вывода результата (рисунок 1).
Рисунок 1. Окно приложения
1. Дизайн приложения
- Поместите на форму компоненты, как показано на рисунке 2а.
а) б)
Рисунок 2
В результате получится форма, показанная на рисунке 2б.
2. Назначение компонентам имён
Теперь корректно назовите компоненты на форме (т. е. измените значения свойства Name):
Имя, которое
было
Ничего не изменили, т. к. форма одна
Label1, Label2, Label3
LabelNum1, LabelNum2, LabelResult
Эти метки ничего не делают. Они просто информируют пользователя
Number (переводится как число) — поля для ввода 1-го и 2-го чисел
Result (переводится как результат) — поле для вывода результата
Сalculation (переводится как вычислить ) — кнопка для вычисления
3. Обработка события
- Сохраните приложение, затем запустите. Проверьте работу приложения: сложите числа 6 и 9. Вас удивил ответ? (рисунок 3а). Мы получили результат сложения символов из однострочных редакторов.
а) б)
Рисунок 3
- Дело в том, что свойство Text компонента Edit имеет тип String, поэтому получился результат сложения двух текстовых строк: к первой строке была присоединена вторая. Убедитесь в этом, введя строковые значения и нажав на кнопку (рисунок 3б).
Напомним, что операция присоединения одной строки к другой называется конкатенацией.
4. Преобразование типов
Для того чтобы компьютер работал с данными как с числами, необходимо перевести их из строкового типа в числовой, сложить, а затем результат перевести обратно в строковый для вывода на экран. Для перевода из строки в целое число служит функцияStrToInt, а для обратного перевода — IntToStr (перейти к функциям преобразования).
- Опишите три локальные переменные: две будут служить для хранения исходных чисел, а третья — для хранения результата. Ниже приведён правильный код процедуры:
В переменную Num1 записывается целое число, преобразованное из однострочного редактора EditNum1, в переменную Num2 — число из EditNum2. Затем в переменную Result заносится их сумма. После этого ответ преобразовывается в строку и выводится в однострочном редакторе EditResult.
- Запустите приложение. Теперь калькулятор будет работать так, как надо (рисунок 4).
Рисунок 4
5. Коротко о главном
У каждого компонента есть множество событий. Но одно, наиболее используемое (по мнению разработчиков среды Delphi), создаётся после двойного щелчка по компоненту.
Для вывода числового значения на компонент либо для чтения числа из компонента необходимо пользоваться функциями преобразования типов.
6. Выполнение заданий
Особенности заданий
- Для полей ввода Edit необходимо ввести поясняющие надписи с помощью компонента Label.
- Компоненты должны иметь осмысленные имена.
- Кнопка выхода из приложения — обязательна!
- Комментируйте код программы!
- Перед размещением компонентов на форме желательно нарисовать их расположение на листе бумаги.
Задания I уровня сложности
2. Создайте приложение с одной кнопкой и двумя областями ввода. В области ввода пользователь вводит размеры окна формы (ширину и высоту). При нажатии на кнопку размеры соответствующим образом изменяются.
6. Создайте приложение с двумя кнопками и областью ввода Edit. В область ввода пользователь вводит шаг (целое число). При нажатии на первую кнопку все края окна увеличиваются на значение, равное шагу. При нажатии на вторую кнопку окно соответственно уменьшается. Причём центр окна остаётся неизменным! По умолчанию шаг равен 5.
Задания II уровня сложности
3. Создайте приложение для нахождения корней квадратного уравнения. Коэффициенты при неизвестных вводятся в три области ввода Edit. Результат выдаётся в компоненте Label после нажатия на кнопку. Если решения нет, то в компоненте Label появляется соответствующая надпись.
Ввод и редактирование текста выполняется в специальных полях или областях формы. При необходимости пользователь может изменить отображаемые данные. Для этих целей система Delphi предлагает различные компоненты, например, Edit, MaskEdit, Memo, RichEdit и LabeledEdit.
Однострочный редактор, или поле редактирования (поле ввода), представляет собой поле ввода текста, в котором возможно отображение и изменение текста. В Delphi есть несколько однострочных редакторов, из них наиболее часто используется компонент Edit.
Компонент ввода и редактирования текста Edit
Компонент Edit позволяет вводить и редактировать с клавиатуры различные символы, при этом поддерживаются операции, такие как перемещение по строке с использованием клавиш управления курсором, удаление символов с помощью клавиш <Backspace> и <Delete>, выделение части текста и др. Отметим, что у однострочного редактора отсутствует реакция на управляющие клавиши <Enter> и <Esc>.
Свойство CharCase
Для изменения регистра символов в поле редактирования служит свойство СharСase типа TEditcharCase, которое может принимать одно из трех значений:
- ecLowerCase — текст преобразуется к нижнему регистру;
- ecNormal — регистр символов не изменяется (по умолчанию);
- ecUpperCase — текст преобразуется к верхнему регистру.
Свойство PasswordChar
При использовании компонента Edit для ввода пароля можно воспользоваться свойством PasswordChar типа Char, задающим символ для отображения в поле ввода. Этот символ при вводе текста появляется вместо фактически введенного символа. Например, после выполнения инструкций
Компонент MaskEdit
Компонент MaskEdit также является однострочным редактором, но по сравнению с компонентом Edit он предоставляет дополнительную возможность ввода информации по шаблону. С помощью шаблона (маски) можно ограничить число вводимых пользователем символов, тип вводимых символов (алфавитный, цифровой и т. д.). Кроме того, во вводимую информацию можно вставить дополнительные символы (разделители при вводе даты, времени и т. п.). С помощью редактирования по маске удобно вводить телефонные номера, даты, почтовые индексы и другую информацию заранее определенного формата.
Свойство EditMask
Маска задается в свойстве EditMask типа string и представляет собой последовательность специальных кодов, определяющих для поля редактирования формат содержащегося в ней текста.
Маска состоит из разделенных символом трех полей:
- первое поле является собственно маской;
- второе поле— это символ, определяющий, считаются ли литеральные символы частью данных. По умолчанию используется 1, и литеральные символы маски являются частью не только значения, редактируемого в визуальном компоненте, но и значения, содержащегося в поле. Если вместо 1 установить символ о, то литеральные символы маски по-прежнему будут отображаться при редактировании значения, однако в поле не сохраняются. Литеральные символы удобно применять в качестве разделителей, например, при вводе телефонных номеров;
- третье поле содержит символ, используемый для указания незаполненных символов во вводимом тексте, по умолчанию это символ подчеркивания.
Если второе и/или третье поля не определены, то для них действуют значения по умолчанию.
В маске могут использоваться следующие специальные символы:
Примеры масок:
- !99/99/00; 1;_ — для даты;
- !000−00−00; 1;_ — для семизначного телефонного номера, разделитель «-» является частью редактируемого и запоминаемого значения;
- !000−00−00, −0;_—для семизначного телефонного номера, разделитель «-» является частью только редактируемого значения;
- !90:00; 1;_ — для времени;
- 1_1_1_1_1_1_;1;_— для слова длиной в шесть букв максимум (между буквами отображаются пробелы).
Для составления маски можно использовать редактор шаблонов (Input Mask Editor). Редактор шаблонов вызывается двойным щелчком мыши в поле значения свойства EditMask или командой Input Mask Editor контекстного меню.
Маска вводится в поле Input Mask, ее также можно выбрать из образцов в поле Sample Masks и затем изменить. Флажок Save Literal Characters управляет включением в маску литеральных символов, а поле Character for Blanks содержит символ, используемый для указания незаполненных позиций во входной строке. Поле Test Input позволяет проверить функционирование подготовленной маски. Маску также можно загрузить из файла с расширением dem, который выбирается в окне Open Mask File, открываемом нажатием кнопки Masks.
Подготовить маску можно и самому, но это более сложно. Удобно, воспользовавшись редактором маски, выбрать наиболее близкую к требуемой маску, а затем уже откорректировать ее вручную.
Компонент LabeledEdit
Компонент LabeledEdit представляет собой однострочный редактор с надписью и, в отличие от обычного однострочного редактора Edit, дополнительно имеет три свойства, управляющие надписью: EditLabel, LabelPosition и LabelSpacing.
Свойство EditLabel
Свойство EditLabel типа TBoundLabel указывает объект надписи, основные свойства которого (Caption, Alignment, AutoSize, Transparent, Color, Font) не отличаются от свойств рассмотренной ранее надписи Label.
Свойство LabelPosition
Свойство LabelPosition типа TLabeiPosition задает расположение надписи относительно поля редактирования и может принимать значения:
- lpAbove (над полем) — по умолчанию;
- lpBelow (под полем);
- lpLeft (слева от поля);
- lpRight (справа от поля).
Свойство LabelSpacing типа Integer указывает расстояние (в пикселах) между надписью и полем редактирования (по умолчанию 3).
Обработчик события onKeyPress
Для проверки информации, вводимой в редакторы, можно использовать обработчики событий нажатия клавиш, например обработчик события onKeyPress.
В следующем примере для редактора Edit1 установлено разрешение ввода только десятичных цифр:
В поле редактирования может содержаться одна строка без символа конца строки, поэтому при нажатии клавиши <Enter> не выполняются никакие действия и в строку ничего не вводится. При необходимости программист должен сам написать код действий, связанных с нажатием клавиши <Enter>. Чаще всего нажатие этой клавиши служит признаком окончания ввода информации в поле редактора, после чего следует перейти к другому элементу управления, т. е. передать ему фокус ввода, например, с помощью метода SetFocus или установки значения свойства ActiveControl.
Задать реакцию однострочного редактора на нажатие клавиши <Enter> можно так:
Информация последовательно вводится в три поля, являющихся компонентами Edit1, Edit2 и Edit3. При окончании ввода в первое или второе поля нажатие клавиши <Enter> автоматически активизирует очередное поле. Из третьего поля фокус ввода автоматически не передается. Передача фокуса ввода из разных полей реализована двумя способами: с использованием свойства ActiveControl формы и с помощью метода SetFocus.
Часто при окончании ввода в элемент редактирования и переходе к следующему (в порядке табуляции) элементу управления удобнее использовать разделяемый (общий) обработчик события, связанного с нажатием клавиши <Enter>. Эта процедура должна быть общей для всех элементов редактирования и может выглядеть так:
При нажатии клавиши <Enter> выполняется метод SelectNext, передающий фокус ввода следующему элементу управления. Процедура SelectNext (CurControl: TWinControl; GoForward, CheckTabStop: Boolean) имеет три параметра, из которых CurControl указывает оконный элемент управления, относительно которого выполняется передача фокуса. Параметр GoForward определяет направление передачи фокуса. Если его значение равно True, то фокус получает следующий элемент управления, в противном случае — предыдущий элемент управления. Параметр CheckTabStop определяет, нужно ли учитывать значение свойства TabStop элемента управления, который должен получить фокус. При значении True параметра элемент управления получит фокус, если его свойство Tabstop также имеет значение True.
Чтобы приведенная процедура вызывалась в качестве обработчика для всех трех редакторов, ее нужно включить в описание класса формы и указать в качестве обработчика события OnKeyPress:
Аналогично можно создать разделяемую процедуру, общую для нескольких компонентов (в том числе и разных, например, Edit и Memo), выполняющую обработку других событий.
Аналогичным образом выполняется обработка нажатия клавиши <Esc> и других клавиш.
Джанго это мощный фреймворк для создания веб-приложений. Изначально Django был создан для того, чтобы быстро создавать, например, новостные сайты (или другие сайты, который нужно создавать максимально быстро). И после нативного PHP не покидает ощущение, что ты едешь на очень быстрой машине разработки. Чтобы посмотреть все его возможности для быстрой разработки, мы с вами попробуем создать простое Todo — приложение.
Начнем с формулировки краткого т.з. У нас будет небольшое веб-приложение с версткой на Bulma (да, я очень люблю Bulma. Возможно, когда-нибудь я сверну на Bootstrap или Picnic, но всему свое время). У нас (пока) нет авторизаций и пользователь может создавать, редактировать и удалять либо категорию дел, либо карточку todo, которая связана с какой-либо категорией, которую создал пользователь. Todo карточку или категорию можно удалить, поставив галочку на checkbox и нажав кнопку удалить.
Основные концепции Django
Немного поговорим о Django. Django реализует архитектурный паттерн MVT (Модель Представление Шаблон), которая немного отличается от знакомого большинству MVC (Модель Представление Контроллер) на котором работает Ruby on Rails и Laravel.
Модель (Model) Модель в Django описывает схему данных в БД. С Django ORM, вы можете самостоятельно описывать поля и любые другие типы данных, и совершать миграции для упрощения разработки.
Шаблон Шаблон в Django это простой HTML код со специальным шаблонным языком Django. DTL (Django Template Language) — это язык, с помощью которого вы можете динамически менять содержимое страницы (к примеру, изменять имя пользователя на странице, в зависимости от того, как зовут авторизовавшегося пользователя).
Настройки Файл настроек в Django, в котором находятся все настройки вашего веб-приложения. Он включает в себя секретный ключ, папки с шаблонами, middlewares (которые отвечают, например за то, чтобы ваши приватные альбомы не увидели другие пользователи), подключение к базе данных, и много всего остального.
Url Файл настройки роутинга — примерно то же самое, что и в Angular или Laravel. Это связывает представление с url запросами.
Установка Python и Django
Автор этой статьи (то есть я) кроме написания статей занимается еще и обучением основам питона детей. По долгу службы я ставил Python и его пакеты на достаточно большое количество разнообразных машин. И кроме переустановок питона, один раз для установки пакета глобально сработал даже даунгрейд версии языка. Да, так тоже бывает.Версии Python
До последнего времени активно поддерживались и развивались две основные ветки Python: 2.7 и 3.x. Я буду использовать версию 3.7.3 в данной статье, но на самом деле это не так важно. Если вы правда хотите знать разницу между ними, есть специальная вики. С другой стороны, сейчас уже нет никакого смысла использовать Python версии 2.7 — обновление языка остановилось на 2.7.17 (если я правильно понимаю документацию на официальном сайте). Это означает, что есть смысл переводить проекты написанные на Python 2.7.x на новую ветку, а вот новые писать на 2 версии совсем бессмысленно.
Инсталляция Python
Если вы работаете на Mac или Ubuntu — у вас уже скорее всего установлен Python, однако 2 версии. Python третьей версии придется скачивать отдельно, и вызывать его в командной строке вы сможете через python3. В любом случае, лучше всего скачать последний релиз здесь.
Создание своего виртуального окружения
На самом деле первое приложение на Django вы можете начать разрабатывать и не создавая свое виртуальное окружение, однако навык создания виртуального окружения может пригодится если вы, например, разрабатываете приложение с определенной версией библиотеки и не хотите устанавливать библиотеки глобально и замусоривать ваш system.
Так как же использовать virtual env?
1) Самый простой вариант. Вы можете скачать замечательный IDE от JET BRAINS PyCharm Community Edition отсюда. После установки PyCharm создайте новый проект, и Pycharm по умолчанию предложит вам создать Virtual Env, в котором будет возможность установить нужную версию Django (или по умолчанию последнюю, которая на момент написания данной статьи 3.0.2):
2) Чуть более хардкорный вариант:
А что, если вы хотите запустить Django в virtual env, к примеру, в любимой папке?
Во, первых, создаем папку, в которой мы будет творить:
Дальше вводим следующие команды для активации venv, где django_env имя нашего виртуального окружения:
Далее наше виртуальное окружение активировалось. Можем поставить необходимые пакеты. В нашем случае это Django:
Если вы захотите выключить виртуальное окружение, чтобы вернуться в ваш глобальный python (вернуться в контекст system), введите следующую команду:
Хорошо, надеюсь с виртуальным окружением мы разобрались. Если возникли какие-то проблемы и дополнительные вопросы, полезные ссылочки можно найти здесь и здесь .
Создание самого проекта
Допустим вы выбрали какой-то из способов создания своего виртуального окружения (или даже делаете все глобально, что же, никто не запрещает вам это делать). Теперь проходим в папку проекта и начинаем его создание:
Так, после того как Django открыл стартовую страницу, необходимо проинсталлировать наше приложение todolist в основное приложение. Открываем settings.py и добавляем в уже имеющийся список приложений наш собственный todolist:
Следующим шагом будет связывание приложения с базой данных. Если базы данных — это не то, с чем вы хотите возиться, вам стоит воспользоваться решением по умолчанию — SQlite. Я же решил воспользоваться PostgreSQL — она популярна и классически связана с Django, кроме того, потом мы можем захотеть увеличить производительность приложения. Инструкций как устанавливать PostgreSQL на все операционные системы достаточно много. Я разрабатываю под MacOS и не без небольших танцев с бубном я поставил эту базу данных, скачав сам Postgres.app отсюда . Что касается интерфейсов для БД, то здесь я воспользовался Postico и пробной версии для разработки приложения нам вполне хватит (хотя в принципе можно обойтись и без неё, потому что все наше взаимодействие с базой данных будет построено через само веб-приложение и миграции). Кроме того, пришлось поставить psycopg2 в виртуальное окружение проекта (без этого драйвера с БД ваше приложение работать не будет).
Дальше нужно настроить работу статики. По-прежнему редактируем файл settings.py , теперь в самом конце добавляем работу со статикой:
Для того, чтобы у вас заработала статика, проверьте что в списке INSTALLED_APPS находился пакет, отвечающий за статику:
django.contrib.staticfiles, на тот случай, если произойдет ошибка.
И последнее в подготовительных работах, нам нужно ещё настроить базовую работу url в проекте:
Я добавил редирект так как хочу, чтобы с дефолтной страницы localhost сразу переходил на подстраницу category(чтобы не дай бог пользователь не потерялся). Также у нас есть роутинг на две страницы: категорий и дел.
Итак, надеюсь ваше приложение не упало. Далее мы можем наконец-то переходить к созданию самого приложения:
Создание модели Todo и Категорий
Дальше приступим к созданию модели, которая будет базово взаимодействовать с нашей базой данных. Для создания модели открываем файл models.py в нашем todolist и начинаем творить. Начнем с того, что создадим таблицу категорий:
Отлично! Да, здесь у нас будет только две колонки в таблице Категорий: id и name. Дальше создадим таблицу для наших дел. Думаю, из комментариев все понятно:
После того, как ваша модель будет готова, необходимо создать миграции:
И потом запускаете сами миграции:
Создание view
Откроем файл view.py в todolist и отредактируем его. Для начала добавим необходимые импорты и редирект с главной на category:
Потом начинаем создание нашего дела. У экземпляра дела будут поля самого текста, даты, до которой должно быть закончено дело, категория дела, и объединенный контент:
После этого добавим функции добавления и удаления дел:
С тудушками все. Дальше можем перейти к странице Категорий. Создаем функцию категорий, в которой у нас тоже будет функция добавления и удаления категории. Принципиально здесь ничего нового не будет, у нас так же здесь будет возможность добавления и удаления:
На этом мы заканчиваем с файлом view и можем переходить к шаблонам:
Работа с шаблонами
Как вы помните, чтобы не писать css лишний раз, я воспользовался bulma.css для упрощения верстки. Т.к. наши страницы категорий и todo буду очень схожи, я создал три файла:
base.html , который будет включать в себя все одинаковое, что у нас есть на страницах, а в category.html , todo.html будут располагаются отличия:
Создаем base.html и редактируем его:
Дальше у нас пойдут страницы todo.html и category.html :
И category.html . В ней у нас не особо много чего меняется, принципиально никак не отличается от todo.html :
Всем спасибо! На этом все. Возможно, где-то не идеальна верстка, или есть другие предложения по улучшению приложения, всех жду в комментарии. По традиции, несколько полезных ссылок:
Читайте также: