Как сделать таблицу php
Все для создания своего сайта
Часто бывает нужно вывести значения из базы данных в виде таблицы. Например, все позиции вашего прайса в магазине, цены, наименование товара и так далее. Да и много чего. Потому что это нужно практически ежедневно. Сейчас не будем говорить о том, что для профессионалов это уже старая избитая тема. Это статья только для начинающих веб программистов.
Так как же сделать таблицу на странице сайта используя php?
Таблицу, обычно выводят, используя достаточно известную функцию while или for. Профессионалы используют уже готовые скрипты или функции, где просто меняют несколько переменных и файлы, отвечающие за дизайн. Для начинающих скажу, чтобы понять как все работает мы рассмотрим небольшой скрипт чуть ниже. А сейчас немного теории как все работает.
Вначале подключаемся к базе данных, выводим файл конфигурации. Затем делаем запрос к базе, записывая его в переменную, которая содержит значение “SELECT * FROM `users` ORDER by `id` DESC”;.
Атрибут (*) обозначает что мы выбираем все значения из базы users.
Атрибут ORDER by `id` DESC означает что мы сортируем всех пользователей по убыванию id пользователей. То есть вверху будут максимальное значение id. А если в конце указать вместо атрибута desc указать asc. То сортировка по id будет в противоположную сторону, то есть по возрастанию и вверху будет самое меньшее значение по id.
Полученный запрос обрабатываем функцией mysql_fetch_array. Она достаточно универсальная потому что возвращает ассоциативный массив с двумя индексами с численными индексами и индексами по значению таблиц.
Вместо этогй функции многие используют запрос mysql_fetch_assoc который возвращает массив только с индексами по значению таблиц в базе данных.
А вот, и сам пример скрипта
А здесь можно скачать и посмотреть наглядно как все работает на странице. Следует иметь в виду путь к файлу конфигурации в вашем варианте может быть другим.Это напрямую зависит куда вы поместите сам файл конфигурации для всего сайта. Для наглядности файл конфигурации вы найдете в zip-архиве.
Сегодня мы рассмотрели, как работает скрипт для вывода таблицы на php. Скажу сразу, что это всего лишь пример, чтобы иметь представление как все работает. Мы не стали рассматривать как сделать дизайн таблицы, прописать красивые шрифты, изменить заголовок таблицы. Думаю, если вы изучили или изучите в будущем CSS, вам абсолютно не трудно будет это сделать самому.
Возможно вас заинтересуют другие статьи
Добавить комментарий
Сергей 2019.11.25 12:30:27
Пример использования циклов: отрисовка HTML таблицы на PHP
Здравствуйте уважаемые читатели блога Site on! В прошлой статье мы рассмотрели всё о циклах в PHP, но для закрепления полученных теоритических материалов, предлагаю выполнить практическую задачу, которая довольно часто встречается в повседневной жизни разработчика сайтов.
В наших с вами любимых CMS для отрисовки любой HTML таблицы используются циклы, по-другому никак. Например, у товара (смартфона) есть характеристики: ширина, высота, глубина, цвет, размер дисплея, объём памяти и тд. Все эти свойства обычно отрисовываются в виде HTML таблицы, это очень удобно и хорошо, ровно выглядит.
Чтобы понять, как это делается, сегодня мы решим такую простую задачу, как создание таблицы умножения:
Приступим
Для начала нужно придумать и понять алгоритм, которому мы будем следовать. Из чего состоит HTML таблица? Давайте я нарисую:
Как видим из рисунка, тег table встречается всего 1 раз, поэтому он явно должен быть вне цикла. Повторяется у нас только строка (tr) и внутри неё ячейки, они же столбцы (td). Всё, больше у нас ничего не повторяется.
Теперь нужно решить, какой цикл лучше использовать для данной задачи. Это классический вариант и лучшим решением будет цикл for, хотя можно использовать и while, если вы к нему привыкли больше. Но нам понадобится не один цикл, а два: первый будет рисовать и считать строки (tr), а второй столбцы (td).
В первом цикле мы отрисовываем tr, внутри него td. Этот код можно было бы назвать идеальным шаблоном отрисовки любой таблицы, но я знаю, как сделать ещё лучше. Незачем каждый раз напрягать PHP и делать вывод на экран (echo) после каждой итерации, гораздо лучше поместить всё в одно место (переменную) и сделать echo в самом конце, один единственный раз:
Для этого мы использовали оператор .= присвоение через конкатенацию. Результат будет точно таким же. Но это ещё не всё. Нам нужно привести нашу таблицу к виду, как на самом первом рисунке в этой статье. То есть сделать первую строку и столбец полужирным и поставить зелёный фон. Такого результата можно добиться двумя способами:
Итак, делаем с помощью PHP:
Красота 🙂 Можете выводить таблицу хоть 100 на 100. Балуйтесь, как хотите, это полезно для опыта. Спасибо за внимание, и приятных вам выходных!
MnogoBlog
как создать сайт на wordpress, настроить и оптимизировать wordpress
Создаём и редактируем таблицы MySQL с помощью PHP
Здравствуйте, сегодня будем создавать таблицу MySQL, заполнять её данными, научимся извлекать данные из таблицы, изменять их и удалять.
Для тестирования нижеуказанного кода можно использовать плагин – Hello (скачать данный плагин по этой ссылке) – в нем нижеуказанный код закомментирован (с помощью /* и */).
Можете установить и активировать плагин hello, далее зайти в админке в пункт “Плагины”, подпункт “Редактор”, выбрать плагин hello, разкомментировать нужный код и протестировать изменения с помощью phpMyAdmin.
Грамотно разработанный сайт залог успеха Вашего бизнеса в Сети. Чтобы создать сайт, который будет корректно представлять ваш бренд нужно обратиться к профессионалам своего дела –
здесь на базе платформы «1С-Битрикс» Вам помогут создать и осуществить продвижения сайта любой сложности.
1. Создаём таблицу MySQL:
1.1. Подключаемся к базе данных MySQL:
Вот мой тестовый сайт со следующими данными:
Вставляем данные в код и получим следующее:
1.2. Добавим новую таблицу в существующую базу данных MySQL:
Создадим новую таблицу “store_details”.
В таблице будет 4 столбца:
ID – этот столбец будет первичным ключом для таблицы
store_name
store_owner
store_country
Для столбца ID будет использоваться целочисленный тип данных (тип int), в то время как остальные столбцы будут установлены на строковый тип данных, а именно – varchar(255) – по желанию можете установить другие типы.
Vы добавили таблицу с названием store_details в нашу базу данных MySQL, теперь если мы зайдем в phpMyAdmin:
, то увидим, что появилась новая таблица store_details:
, давайте же приступим к её наполнению.
2. Вставляем данные в таблицу базы данных MySQL с помощью PHP:
2.1. Проверяем подключение к базе данных:
2.2. Вставляем данные в таблицу:
Добавим в таблицу store_details новую строку со следующими данными для столбцов:
MyShop (столбец store_name)
Kostya (столбец store_owner)
Russia (столбец store_country)
Первый столбец (“ID”) оставим без изменений – он будет заполняться автоматически.
Код, который мы будем использовать:
Каждый новый php запрос будет создавать новую строку в таблице.
Давайте запустим вышеуказанный код несколько раз и посмотрим, что получится.
Заходим в phpMyAdmin, выбираем нашу таблицу – store_details
Как видим у нас создалось несколько одинаковых строк.
3. Как извлечь данные из таблицы MySQL:
Теперь, когда мы уже знаем: как создать новую таблицу в MySQL и как вставить данные в таблицу – давайте попробуем извлечь данные из определенной строки. Для этого мы будем использовать значение столбца таблицы в качестве условия.
Наша таблица store_details выглядит следующим образом:
Предположим, что мы знаем название нашего магазина – “MyShop” и хотим вывести имя владельца магазина (столбец store_owner) и страну магазина (столбец store_country).
Мы будем использовать имя магазина (“MyShop”) в качестве условия для поиска по таблице – условие будет выглядеть так:
“найти строку со столбцом “store_name” в значении MyShop” и получить значения для других столбцов в этой строке”.
3.1. Проверяем подключение к базе данных:
3.2. Извлекаем значения из таблицы MySQL
А далее с помощью конструкции echo мы вывели их значения на экран.
4. Изменяем значения столбцов в конкретной строке таблицы:
4.1. Проверяем подключение к базе данных:
4.2. Меняем значение столбцов в конкретной строке таблицы:
Для напримера, давайте для первой строки поменяем собственника магазина (store_owner) с Kostya на Mnogoblog.
5. Удаляем запись таблицы:
5.1. Проверяем подключение к базе данных:
5.2. Удаляем запись таблицы:
В данном примере, обработчик удалит запись с идентификатором «id», равным “2”.
На этом всё! Красивых и успешных Вам сайтов!
Website-create.ru
Недавно получила письмо, где человек просит помочь разобраться в создании приложения на php и MySQL с использованием нескольких таблиц базы, которые между собой взаимосвязаны. Суть такова (насколько мне удалось понять из письма): врач ведет учет пациентов и хочет хранить их данные в таблице базы, однако, записи о приемах он тоже хочет хранить в другой таблице. Нужно, чтобы была возможность добавлять новых пациентов, новые записи об их приемах и, конечно же, иметь возможность эти данные просматривать в удобной форме. Сегодня попробуем реализовать такое приложение.
Для начала нужно определиться, что мы получим на выходе. А на выходе у нас должно быть приложение со следующим интерфейсом: главная страница, где пользователь может выбрать одно из действий: либо добавить нового пациента, либо выбрать имеющегося и добавить запись об его приеме, либо посмотреть все данные любого пациента включая личные данные и все записи его приемов.
Я решила организовать это в виде трех блоков на главной странице: блок с формой для занесения нового пациента; блок, в котором выводится список всех имеющихся пациентов, под которым есть форма для занесения новой записи (сначала выберем конкретного пациента из списка, потом заполняем форму с информацией о приеме и нажмём кнопку); блок, где мы можем выбрать пациента и посмотреть всю его историю, а также личные данные.
Можно организовать это и на разных страницах, но я, для компактности и дабы не создавать целую кучу файлов, решила сделать на одной. В этом уроке я показываю принцип, а оформление – это уже личные предпочтения каждого.
Итак, с желаемым итоговым результатом все более или менее понятно. Теперь давайте заглянем в базу данных и организуем наши таблицы. Я для этого примера создала новую базу данных, которую назвала «ychet».
1. В новой базе данных мы создадим две таблицы: первая будет хранить личные данные каждого пациента, такие как имя, фамилия, телефон, адрес (не знаю, что там еще обычно нужно для врача, но это лишь пример – а Вы создавайте те поля, которые нужны Вам); во второй таблице будут храниться данные о приемах для всех пациентов (потом мы будем писать код, чтобы из всего многообразия данных приемов извлекать именно нужные).
Итак, создаем первую таблицу. Я назвала ее «my_pacient» и снабдила пятью полями: id, name, last_name, adress, telefon. Для поля «id» нужно выбрать тип «int», а также присвоить «AUTO_INCREMENT» и первичный ключ (primary key). Для остальных полей в качестве типа указала «varchar».
Структуру таблицы Вы можете видеть на скриншоте ниже:
Давайте сразу создадим и вторую таблицу, в которой будут храниться все данные о приемах. Я назвала эту таблицу «visits» и создала в ней 5 полей: id, num, date, comments, next_date. То есть здесь мы будем хранить дату приема, комментарии врача и дату следующего приема. Поле «num» (должно иметь тип «int») будет соответствовать идентификатору пациента (значению поля «id» из первой таблицы – этот идентификатор будет уникальным для каждого пациента). Полю «id» нашей второй таблицы я также присвоила «AUTO_INCREMENT» и первичный ключ (primary key) и оно также должно иметь тип данных «int». Полям «date» и «next_date» дадим тип данных «datetime», а полю «comments» дадим тип данных «text».
Структуру этой таблицы со всеми полями и их типами данных Вы можете увидеть на скриншоте ниже:
2. Теперь давайте займемся интерфейсом нашего приложения. Для начала создадим файл (я назвала его «index.php»).
Как я уже говорила, на нашей главной странице будет 3 блока: для внесения нового пациента в список, для занесения новой записи для какого-либо пациента и для выбора пациента из списка и просмотра всей его истории. Для этого мы организуем три тега «form», для каждого из которых я сразу же пропишу в атрибуте «action» имя соответствующего файла-обработчика, которые мы создадим чуть позже. Также мы пропишем подключение файла таблицы стилей, которую создадим в следующем шаге.
Итак, вот код для нашего файла «index.php»:
3. Сейчас создадим файл таблицы стилей, подключение к которому мы уже прописали в файле «index.php». Я создам файл с именем «style.css», сохраню его в том же каталоге, что и файл «index.php» и пропишу самые основные стили, чтобы наша страница выглядела более или менее симпатично.
Теперь можно посмотреть нашу страницу в браузере. Если Вы тестируете Ваши php-коды с локального компьютера, то используйте для этого локальный сервер «Денвер» (установить его можно по этой ссылке ). Итак, наберите в адресной строке браузера «localhost/имя папки, в которой хранятся Ваши файлы/index.php». Вы должны увидеть вот такой результат:
4. Давайте займемся первым блоком, тем, который позволяет добавить нового пациента в базу данных. Ему мы прописали файл-обработчик с именем «add_pacient.php».
Давайте создадим этот файл и сохраним его в том же каталоге, что и файл «index.php» (если Вы захотите создать отдельную папку и хранить там файлы-обработчики, то не забудьте исправить пути к файлам в атрибуте «action» наших форм).
Сейчас мы уже можем приступить к написанию кода для этого обработчика. Первое, что нам нужно сделать – это соединиться с базой данных. Код соединения с базой мы будем использовать во всех файлах-обработчиках, и поэтому, чтобы не писать один и тот же код в каждом файле, я предлагаю создать отдельный файл соединения с базой, который мы потом просто будем подключать одной строчкой везде, где нужно.
Так что давайте на время оставим файл «add_pacient.php» и создадим файл с именем «connect.php» (я сохраняю его в том же каталоге, что и остальные файлы).
Я установила на мою базу данных «ychet» привилегии (имя пользователя и пароль), которые и буду использовать при подключении (если Вы не знаете, как установить привилегии, то можете почитать об этом в этой статье).
Итак, код соединения с базой данных следующий (Вы, конечно же, подставляйте свое имя пользователя и пароль, а также свое имя базы данных, если оно отличается от моего):
Теперь можете закрыть этот файл и вернуться к файлу «add_pacient.php».
5. Здесь задача файла-обработчика: соединиться с базой данных, получить значения, введенные в форму из файла «index.php», создать запрос на их вставку в таблицу базы «my_pacient» и собственно эту вставку выполнить.
Также попутно мы проверим прошла ли вставка успешно, и если что-то пошло не так, то выведем сообщение об ошибке. Также вставим в конце кода ссылку для переходя обратно к основному интерфейсу.
В первой строке мы подключаем файл «connect.php», который реализует соединение с базой.
В следующий 4-х строчках мы получаем значения, введенные в поля нашей первой формы и заносим их в переменные.
Далее мы формируем запрос и исполняем его посредствам функции «mysql_query».
В конце выводим ссылку, при помощи которой можно будет перейти обратно к главному интерфейсу.
Теперь мы можем попробовать добавить новых пациентов и убедиться, что вставка проходит удачно. Я предлагаю на этом этапе добавить нескольких пациентов при помощи формы.
Я добавила троих пациентов, и если сейчас я зайду в базу данных в таблицу «my_pacient», то увижу следующее:
6. Теперь давайте займемся второй формой – эта форма для добавления записи какому-то конкретному пациенту. Как вы, наверное, заметили, сама форма для добавления записи у нас есть, но нам еще нужно знать — для какого конкретно пациента мы эту запись добавляем. Для этого мы можем вывести всех имеющихся пациентов перед формой в виде выбора из радиокнопок. Сначала мы будем отмечать какому пациенту мы хотим добавить запись о приеме, потом заполнять форму и отправлять ее файлу-обработчику.
Работа с HTML таблицами
Учебник HTML CSS
Практика
Продвинутый курс
Практика
Адаптив
Продвинутые вещи
Практика
Начиная с этого урока, я больше не буду приводить структуру всей страницы, считайте, что мы всегда работаем внутри тега body.
В HTML таблицы создаются по похожему принципу. Там тоже есть столбцы и строки с ячейками, однако HTML код таблиц при первом взгляде может показаться непривычным.
Изучите внимательно следующий пример с таблицей (тегу table добавлен атрибут border, который задает границу таблице и ее ячейкам):
Так код будет выглядеть в браузере:
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
Кроме тегов td существуют также теги
Так код будет выглядеть в браузере:
По умолчанию текст в ячейках th будет жирный и расположен по центру (это поведение можно поменять, но об этом позже).
Вы обратили внимание на то, что между ячейками есть некоторое расстояние, из-за которого видно то, что каждая ячейка имеет свою границу? Это расстояние регулируется атрибутом cellspacing. При этом, если мы не напишем этот атрибут, то его значение будет совсем не ноль (в этом случае все ячейки слиплись бы друг с другом). То есть, атрибут cellspacing по умолчанию имеет некоторое ненулевое значение, из-за которого ячейки не слипаются (это расстояние равно нескольким пикселям).
Давайте посмотрим на примере. Сейчас я увеличу отступ между ячейками до 10 пикселей:
Так код будет выглядеть в браузере:
То, что cellspacing имеет некоторое значение по умолчанию, зачастую может мешать вам. В этом случае следует просто поставить его в ноль.
В HTML5 этот атрибут считается устаревшим (но он по-прежнему придает отступ по умолчанию). Вместо него следует использовать специальное CSS свойство, о котором мы поговорим попозже.
Атрибут cellpadding задает отступ между текстом и границей ячейки. В следующем примере я поставлю значение этого атрибута в 20px и теперь текст отойдет от границы ячеек:
Так код будет выглядеть в браузере:
Для сравнения привожу то, как таблица будет выглядеть по умолчанию:
Этот атрибут, так же, как и cellspacing, считается устаревшим в HTML5.
Давайте обнулим cellpadding и cellspacing и посмотрим, что станет с таблицей в этом случае:
Так код будет выглядеть в браузере:
Как вы видите, в данном случае ячейки таблицы слиплись, однако все равно заметно, что каждая ячейка имеет свою границу (то есть границы сейчас двойные). Вы сможете поправить это, когда изучите язык CSS.
Посмотрите на пример их применения:
Так код будет выглядеть в браузере:
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.