CRUD | ToDo list

{"draftJsState":{"blocks":[{"data":{"image":{"id":"668bbf11db69b121a6d540bc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8fuda"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приветствую тебя, начинающий кодер. В какой-то момент у каждого web разработчика появляется необходимость работать с базами данных. В этой статье я покажу самый простой способ связать свой PHP код и базу данных, с помощью технологии MySQLi.","type":"unstyled","key":"6qpne"},{"data":{"image":{"id":"668bc6c569790e665083c02b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cl748"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7bmmq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что будем делать?","type":"header-three","key":"dt7rs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В рамках этой статьи мы пошагово создадим ToDo лист с функцией добавления, обновления и удаления записей.","type":"unstyled","key":"3nplp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Будет использован следующий стек:","type":"unstyled","key":"cb5l6"},{"data":{"image":{"id":"668bc494bf000b1123db36d0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bvvri"},{"data":{"image":{"id":"668bc4d5ac340e4b0db2e057"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4apou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаем файловую структуру","type":"header-three","key":"5jpvh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Структура нашего проекта будет состоять из корневого каталога, в котором будут храниться страницы интерфейса, и каталога vendor, в котором находятся файлы для работы с серверной частью.","type":"unstyled","key":"58otv"},{"data":{"image":{"id":"668bd50af7eaa0212d66d5de"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e4hf9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6edbh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пишем интерфейс","type":"header-three","key":"d6e1s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На главной странице мы разместим 3 элемента:","type":"unstyled","key":"eplmg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ссылки для фильтрации записей (Все/Выполненные/Невыполненные);","type":"unordered-list-item","key":"8plp6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таблица для вывода записей;","type":"unordered-list-item","key":"2ii2d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Форма для добавления задачи.","type":"unordered-list-item","key":"6bi1s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Очень важный момент заключается в создании формы. Она должна состоять из двух инпутов: текстового (Input:text) и кнопки отправки (input:submit). Данные должны передаваться в скрытом от пользователя режиме (методом post). Вот пример страницы, которая получилась у меня","type":"unstyled","key":"78naj"},{"data":{"image":{"id":"668bd04962d21a0b5b7c498a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9krdq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"fk280"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"3qfjk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"b7mf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все","type":"blockquote","key":"1l4b0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выполненные","type":"blockquote","key":"44atu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Невыполненные","type":"blockquote","key":"2hp3g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"10qt4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5afvk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"co2gb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dp9ql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"9619i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4adc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"d579e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"3b307"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

№	Задача	Действия

","type":"blockquote","key":"5tbnt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dk64l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"8pisq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8qjr7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"2mft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"bul46"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Осталось только прописать шаблон для нашей записи. Я добавлю иконки для кнопок действий.","type":"unstyled","key":"flisu"},{"data":{"image":{"id":"668bd3a969790e6650a86cb9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"62j6j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"b0j1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fkbse"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1","type":"blockquote","key":"75g28"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Написать статью","type":"blockquote","key":"b5d6k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"12e8i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"eu4u2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6ghaj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"f5mum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проектируем базу данных","type":"header-three","key":"cv1tb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, давайте определимся с тем, что будет хранить наша база данных. Помимо уникального идентификатора запись (id), наша таблица с задачами будет содержать заголовок и статус задачи (Выполнено/не выполнено)","type":"unstyled","key":"lk1u"},{"data":{"image":{"id":"668bdbc5babc1246bdaa38bc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"571bm"},{"data":{"image":{"id":"668bdc12db69b121a626a895"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4uj8q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавим туда тестовую запись для проверки вывода","type":"unstyled","key":"7v5cd"},{"data":{"image":{"id":"668bdc7a7b018800afdb8a97"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f381h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Реализация вывода записей на страницу","type":"header-three","key":"7jtoj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, когда наша база готова, давайте к ней подключимся. Для этого переходим в файл connect.php и создаем там переменную connect, в которой реализуем функцию mysqli_connect с необходимыми параметрами","type":"unstyled","key":"58l3g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$connect = mysqli_connect(\"Адрес сервера\", \"Имя пользователя\", \"Пароль\", \"Имя базы данных\");","type":"blockquote","key":"fo89k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь подключим созданный файл к нашей главной странице. В начале нашего файла index.php добавляем следующую строку кода","type":"unstyled","key":"7jqbc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ee7fr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Осталось только вывести все записи с нашей таблицы. Вывод работает по следующему принципу:","type":"unstyled","key":"6d47l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подключаемся к БД;","type":"ordered-list-item","key":"3ub9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получаем все записи;","type":"ordered-list-item","key":"drke3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Преобразуем данные в массив;","type":"ordered-list-item","key":"1eh8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выводим данные в верстку.","type":"ordered-list-item","key":"c0cto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код для перебора массива выглядит так:","type":"unstyled","key":"209vc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"tso8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8bbgs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"aa53o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь отредактируем нашу верстку. Для этого в каждом теге обратимся к каждому элементу массива","type":"unstyled","key":"8n7ml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8rvib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6l8lg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"aheeb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cbke6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fbaqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"61k0o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7imuv"},{"data":{"image":{"id":"668be17fbf000b11232a0eee"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6plf0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание записей","type":"header-three","key":"a03i3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала немного отредактируем нашу форму. В атрибут action пропишем путь до create.php, а полю присваиваем name и id tasktitle.","type":"unstyled","key":"4n2m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2s8uo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее пропишем содержимое самого create.php. Получим содержимое нашего поля, отправим его на сервер и переадресуем пользователя обратно на главную","type":"unstyled","key":"b69oj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5pk2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Попробуем перейти по ссылке для первой записи и увидим результат","type":"unstyled","key":"8mmro"},{"data":{"image":{"id":"668bfa9824159d370c216c9a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"60uha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дальше все по шаблону, получаем данные, выполняем запрос и переадресуем пользователя","type":"unstyled","key":"2kv7l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"d45t0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cmvvl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7osa0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"a3rcq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"b1i1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dk7c5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CRUD | ToDo list","type":"blockquote","key":"anm2d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6rnp4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"385c5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cd71b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"cg4qg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"3l6to"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"efljg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все","type":"blockquote","key":"95ihq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выполненные","type":"blockquote","key":"an1kd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Невыполненные","type":"blockquote","key":"18ljg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"dp428"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"am36m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"3gs56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"br9cu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4qv55"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"9emi9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"em8ik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ac2vj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"53p50"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"avskm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой форме присутствует скрытое поле taskid, которое будет передавать идентификатор нашей записи в обработчик, без заполнения данных пользователем. Для обработки пропишем следующее","type":"unstyled","key":"ds3um"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"