Под личным кабинетом понимается место, где пользователь может редактировать данные своего профиля. Давайте сделаем страницу account.php, зайдя на которую пользователь увидит форму для редактирования данных своего профиля (кроме логина и пароля, их следует обрабатывать особым образом).
Обратите внимание на то, что id пользователя мы не передаем GET параметром – мы сделаем так, чтобы каждый пользователь на странице account.php видел данные своего профиля, а не чужого.
Для этого следует при авторизации пользователя мы должны в сессию записать id этого пользователя, вот так:
if (password_verify($_POST['password'], $hash)) { $_SESSION['auth'] = true; $_SESSION['id'] = $user['id']; }
Затем по заходу на страницу account.php мы будем делать SELECT запрос, который будет доставать из БД пользователя с id из сессии:
$id = $_SESSION['id']; $query = "SELECT * FROM users WHERE login='$id'"; $result = mysqli_query($link, $query); $user = mysqli_fetch_assoc($result);
Данные пользователя мы должны показать в форме для редактирования. Пусть, к примеру, это будут имя и фамилия пользователя:
После нажатия на кнопку отправки формы мы должны будем сделать запрос на обновление юзера:
if (!empty($_POST['submit'])) { $name = $_POST['name']; $surname = $_POST['surname']; $query = "UPDATE users SET name='$name', surname='$surname' WHERE id=$id"; mysqli_query($link, $query); }
Реализуйте описанный личный кабинет.
→ Веб-разработчику → CSS → 22 лучших формы входа и регистрации на сайте в HTML&CSS!
В этой статье у нас есть для Вас специальная коллекция лучших форм: форма входа и форма регистрации для сайта, созданные с помощью CSS3 и HTML5 технологий, в современном стиле и некоторыми классными эффектами на JavaScript. Смотрите одну из лучших и современных форм входа с эффектами JQuery.
На сегодняшнее время, формы html css, очень популярны, так как всё больше сайтов имеют свою регистрацию пользователей, а это означает, что им нужна будет форма для регистрации пользователей и их входа в личный кабинет (или ещё куда-то).
Чтобы помочь Вам, я подготовил для Вас подборку лучших, на моё мнение, форм, с различным расположением полей ввода, разными цветовыми оттенками и так далее. Некоторые имеют эффекты JavaScript, с 3D переворотами, эффектным появлением.
Я считаю, что веб-дизайн играет важную роль в создании подобных форм, и ему нужно уделить должное внимание. В принципе, форма входа имеет 3 стандартных поля: логин или имя пользователя, пароль, а также кнопка “Войти”.
Итак, затаив дыхание, представляю коллекцию 22 форм регистрации и входа на сайт!
1 → Темная форма входа
Простая форма темная входа, со стандартными полями, и креативной кнопкой синего цвета.
2 → Светлая форма входа
Светлая форма входа с прозрачной рамочкой и четкой структурой.
3 → Эффектная форма с эффектом появления
4 → Простая форма с эффектом появления
5 → Красивая форма с логотипом Apple
6 → Маленькая форма в розовом стиле
7 → Светлая форма
8 → Супер форма входа и восстановления пароля
9 → Приятная дизайнерская форма с эффектом
10 → Форма серого цвета
11 → Крупная форма с дополнительным элементом
12 → Дизайн в виде блокнота
13 → Красочная, прозрачная форма
14 → Apple Iphone форма
15 → Чёткая форма с заголовком
16 → Тёмная форма
17 → Черная форма
18 → Горизонтальная форма входа и регистрации
19 → Темная форма с дополнительными элементами
20 → Форма входа на сайт + регистрация
21 → Белая форма с красным заголовком
22 → Форма входа, регистрации и восстановление пароля
Заключение
Вот они и есть, все формы html css! Надеюсь, какая-то из них Вам точно подошла.
При использовании конкретной формы, Вам остается лишь её (возможно) немного корректировать, подогнать под свой сайт, и все будет супер! Если Вы собираетесь использовать какую-то из форм – дайте мне знать об этом в комментарии!
Данный урок подготовлен для вас командой сайта / Подготовил: Владислав Бондаренко Чтобы иметь возможность добавлять материал в закладки своего личного кабинета, Вам необходимо авторизоваться илизарегистрироваться.
Если вы читали мой блог, то реализацию авторизации на сайте с помощью Mysql можно было найти в статье про создание гостевой книги на PHP.
index.php
include __DIR__.'/config.php'; Пример авторизации на сайте if(AUTH) { //Если мы авторизированы Привет, echo $user['name']; ! Выход } else { //Если мы не авторизированы }
config.php
header('Content-type: text/html;charset=utf-8'); session_start(); define('SALT', 'As913yr-1u3 -ru1 mr=1r=1 m=0r813'); //рандомная строка function getPassword($password) { //функция получения зашифрованного пароля return md5($password.SALT); } $users = array( //мы не используем БД, поэтому пользователей храним в массиве //пароль = getPassword('password1') 'login1' => array('password' => '4b0e292e27ee63a490a5214e225999b0', 'name' => 'Имя пользователя'), //пароль = getPassword('password2') 'login2' => array('password' => 'cf4578943c7db66051404d5c2b535c7f', 'name' => 'Имя пользователя 2'), ); if(!isset($_SESSION['user']) && isset($_COOKIE['login']) && isset($_COOKIE['password']) && isset($users[$_COOKIE['login']]) && getPassword($users[$_COOKIE['login']]['password']) == $_COOKIE['password']) { //если нет сессии пользователя, но есть куки с пользовательским логином и паролем //проходим аторизацию $_SESSION['user'] = $_COOKIE['login']; } define('AUTH', isset($_SESSION['user']) && isset($users[$_SESSION['user']])); //флаг аторизованы мы или нет $user = AUTH ? $users[$_SESSION['user']] : null; $message = ''; if(!empty($_SESSION['message'])) { $message = $_SESSION['message']; unset($_SESSION['message']); }
login.php
include __DIR__.'/config.php'; if(!AUTH) { //мы еще не авторизованы if(!empty($_POST['login']) && !empty($_POST['password']) && isset($users[$_POST['login']])) { //передали данные для входа и логин существует if($users[$_POST['login']]['password'] == getPassword($_POST['password'])) { //пароль совпадает $_SESSION['user'] = $_POST['login']; if(isset($_POST['remember'])) { //стоит галка "запомнить меня" setcookie('login', $_POST['login'], time() + 3600 * 24 * 365, '/'); setcookie('password', getPassword($users[$_POST['login']]['password']), time() + 3600 * 24 * 365, '/'); } } } if(!isset($_SESSION['user']) || $_SESSION['user'] != $_POST['login']) { //авторизация не прошла, сохраним ошибку $_SESSION['message'] = 'Неверный логин или пароль'; } } else { if(isset($_GET['logout'])) { //выход из системы unset($_SESSION['user']); setcookie('login', '', time() - 3600 * 24 * 365, '/'); setcookie('password', '', time() - 3600 * 24 * 365, '/'); } } header('Location: index.php'); //переходим на главную страницу
Пояснения к статье:
- <<font>link>, <<font>script> — HTML теги. Используются для подключения стилей и скриптов.
- <<font>div>, <<font>h2>, <<font>input> — Парные HTML теги.
- <<font>Form> — Общий блок-контейнер. Необходим для создания формы.
- {Margin: 0 auto} — абсолютное выравнивание по центру. Работает за счет изменения внешних отступов, делает их ровными.
Здравствуйте, в этой статье мы расскажем вам о том, как создать форму авторизации для входа на сайт. Для этого нам понадобятся просто HTML и CSS, JavaScript будем использовать по минимуму.
Панель авторизации — очень важная часть любого сайта. Она позволяет пользователю зайти в свой личный кабинет на сайте, если такой имеется. На некоторых сайтах авторизация дает дополнительные привилегии для посетителя, взять то же написание комментариев.
Но в этой статье мы создадим необычную форму регистрации. Сегодня мы покажем вам конструкцию из двух блоков, плавно перелистывающихся.
Итак, мы создадим 2 блока — для авторизации и регистрации. При переключении между блоком форма будет плавно скользить. Ещё одним преимуществом является то, что это добавит интерактивности для вашего сайта.
Форма авторизации: HTML разметка.
Начнем с “HTML”, первое что нам нужно сделать, так это подключить все необходимые инструменты — JavaScript и CSS. Для этого создадим 2 тега в блоке head: script(для подключения скриптов, с помощью атрибута “src”) и “link”(для подключения стилей, с помощью атрибута “href”).
Теперь можно приступать к разметке нашей формы, открываем тег body. Внутри мы создадим небольшую конструкцию:
- Внешний блок с классом pinkbox — тег <<font>div>.
- Блоки для авторизации и регистрации с классами signup и signin.
- Заголовок и форма с различными элементами — теги <<font>form>, <<font>h2>, <<font>input> и т.д. Находятся внутри каждого блока.
Это была первая часть. Мы только что создали разметку для активного слайдера, который будет расположен поверх другого. Теперь нужно сделать разметку для другого слайдера.
Здесь уже другая конструкция. Нам также придется использовать изображения(тег <<font>img>).
После того, как мы создали все блоки, закрываем тег и все готово.
Форма авторизации: стилизация. CSS
Перед тем, как стилизировать все наши элементы и создавать отличнейший дизайн, нам необходимо прописать общие свойство для главного контейнера.
Из свойств мы применим только центрирование(margin 0 auto), изменим позиционирование, размеры и расположение по координатам.
Читайте также:
После этого приступаем к стилизации слайдеров. Здесь будут применены стандартные свойства CSS, такие как фон, изменение ширины и высоты, рамки, тени и т.д.
После стилизации слайдера, нам необходимо провести изменение небольших деталей, а также поработать над дизайном высшего блока.
Ваш CSS код должен выглядеть примерно так:
После этого нам нужно задать стилизацию для формы, а также для псевдоклассов активных форм.
Форма авторизации на сайт: JavaScript
Как мы говорили в самом начале, JavaScript особо не потребуется. Всё что нам нужно — пара скриптов для создания анимации и переключения между слайдерами. Это очень важная часть, но кода там не особо много.
Заключение
Теперь, если вам понадобится создать собственную панель регистрации или авторизации на сайт, вы знаете как это сделать. Огромным преимуществом станет то, то вам не нужно 2 вкладки для полей форм, все можно сделать с помощью слайдера.
Если хотите более детально разобраться в работе слайдера, а также в его конструкции — смотрите исходники. Желаем удачи в изучении!
Внимание! Начиная с версии 9.0.0, при первоначальной активации плагина WP-Recall на сайте, плагин автоматически создает все необходимые страницы и настройки необходимые для его работы. Проверьте работу плагина до того, как производить его установку по инструкции ниже. Возможно, может потребоваться активация/деактивация одного из дополнений в менеджере дополнений WP-Recall.
Выводим личный кабинет – способ первый:
Через шорткод
С версии 7.4.0 личный кабинет пользователя можно размещать на произвольной странице через шорткод:
[wp-recall]
И такая страница уже есть в списке ваших страниц: в админке переходите в “Страницы”, находите страницу “Личный кабинет”. т.е. действий с вашей стороны не потребуется. Убедитесь что в “Настройках” плагина стоит вывод кабинета через неё:
Такая установка самая простая, однако есть возможность разместить личный кабинет через шаблон author.php и она вполне может понадобиться тем, кому нужно показывать личный кабинет пользователя на странице архива этого пользователя, тогда следует произвести установку согласно инструкции размещенной ниже:
Способ второй:
Через шаблон author.php
Переходим в папку с используемой в данный момент WordPress темой вашего сайта, которая находится в папке: wp-content/themes/ и найти там файл author.php
На этом шаге может случится такая история, что такого файла в вашей теме просто нет. На самом деле, это совсем не проблема. Данный файл можно легко получить из простого переименования файла archive.php или index.php Для этого вы должны скопировать указанный файл к себе на жесткий диск, переименовать в author.php и загрузить этот файл обратно на сервер в папку активной вордпресс темы. Конечно, стоит допускать, что ВП темы могут быть очень разными (сложными по структуре) и такой способ получения файла author.php может не помочь в отдельных случаях, но мы будет пока ориентироваться на общие случаи. Тут важно понимать, что всё что нам нужно получить в итоге, это наличие файла author.php
Итак, после того как вы нашли или получили файл author.php, откройте его в текстовом редакторе. Я рекомендую использовать для этого дела вменяемые редакторы, например, notepad++. Далее вставляем в файл, выше цикла вывода записей, код:
if ( function_exists( 'wp_recall' ) ) wp_recall();
– необходимый для работы плагина WP-Recall:
После этого, сохраняете файл, заменяете его на сервере и в общих настройках плагина выставляете вывод кабинета через архив автора:
Кстати: Если у вас в теме нет файла author.php, то можно вставить следующий код в файл archive.php:
if ( function_exists( 'wp_recall' ) && is_author() ) wp_recall();
Небольшое видео процесса:
Надеюсь процесс описан подробно и понятно.
p.s. Разницы вывода личного кабинета через шорткод или файл author.php практически нет. Через шорткод вы получаете ссылку на кабинет вида: ваш-сайт/account/?user=1 (надпись “user” – в админке можно задать свою. 1 – идентификатор пользователя) Через author.php ссылка на кабинет получается вида: ваш-сайт/author/masha/ (masha – логин пользователя с которым он регистрируется)
Все дочерние ВП темы в каталоге CodeSeller уже поддерживают вывод через страницу архива автора.
Если у вас возникли вопросы – создавайте новую тему на открытом форуме поддержки. Удачи!
ли со статьей или есть что добавить?