Sdscompany.ru

Компьютерный журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Профиль пользователя html

Профиль пользователя сайта на HTML + CSS

Вашему вниманию простой профиль для пользователя, что зарегистрировался на сайте, где также идет вывод изображение с данными и соц.кнопками. Также называемая карта пользователя создана полностью html и css, где можете по информации добавить данные, так как по умолчанию идет только название. Все сделано в минималистическом стиле дизайна, это сам небольшой каркас, это идет вывод изображение, которое во внутри будет установлено, а немного выше, но здесь все можно выставить как нужно.

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

1. Многофункциональная карта профиля;
2. Хорошо документированы;
3. Полностью отзывчивый;
4. Нет перезагрузки страницы;
5. Включает также контактную форму;
6. Используемые иконки;

Больше всего его создавали под оригинальный дизайн, где на страницу, что отведена для пользователей, можно разместить этот скрипт.

Функционал проверен на работоспособность.

Приступаем к установке:

Сайт: Zornet.Ru

.kadvanta-gesotavin <
position: relative;
display: inline-block;
margin: 35px 10px;
min-width: 243px;
max-width: 320px;
width: 100%;
color: #121213;
text-align: left;
font-size: 17px;
background: #f5f5f5;
border-radius: 3px;
>

.kadvanta-gesotavin *,
.kadvanta-gesotavin:before,
.kadvanta-gesotavin:after <
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
>

.kadvanta-gesotavin img <
max-width: 37%;
margin-top: -10px;
margin-left: 58%;
margin-bottom: 10px;
backface-visibility: hidden;
vertical-align: top;
border-radius: 3px;
>

.kadvanta-gesotavin figcaption <
position: absolute;
top: 0;
right: 38%;
left: 0;
bottom: 0;
padding: 17px;
>

.kadvanta-gesotavin h3 <
margin: 0;
font-size: 1.3em;
font-weight: normal;
>

.kadvanta-gesotavin .dsatnem <
font-size: 1.3rem;
>

.kadvanta-gesotavin .dsatnem a <
color: #6b8bbb;
>

.kadvanta-gesotavin .dsatnem a:hover <
color: #053656;
>

Есть вероятность, что кому то потребуется увеличить, для того, чтоб поставить функций, что все можно сделать в CSS.

Профиль пользователя html

Создание профиля или личного кабинета пользователя на MVC, PHP и SQL

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

Сначала нужно модернизировать нашу таблицу с пользователями до такого вида:

Добавились два новых поля – ava и role. Поле ava будет хранить название загруженной аватарки пользователя с расширением. Поле role будет содержать статус пользователя: 0 – пользователь, 1 – администратор, 2 – младший модератор, 3 – старший модератор. Если пользователь не авторизирован, то он имеет статус гость.

Добавим маршруты в файл routes.php, он находится в папке config:

Теперь создадим обработчик для страницы профиля, создавать его нужно в файле UserController.php, он находится в папке controllers. Сначала с помощью функции checkAdminId проверяем, авторизирован ли пользователь, если да, то в переменную id_user вернется его id. Далее с помощью функции getUserById, по id записанному в переменной id_user, получаем данные пользователя из таблицы БД и записываем их в п переменную user. Эти данные будут отображаться в полях формы.

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

Если же аватар выбран в форме, то мы используем функцию editUserProfileImg. Функция выполнит загрузку нового аватара на сервер и изменит данные в таблице базы данных.

Теперь опишем используемые функции, они будут находиться в папке models в файле News.php:

Читать еще:  Php условие if

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

Функция editUserProfileImg. С помощью функции downloadAvatar загружает картинку на сервер и получает в переменную ava_url имя с расширением. Далее выполняет SQL запрос, который обновляет поле с аватаркой и логином пользователя:

Функция downloadAvatar. Эта функция полностью идентична функции загрузки изображений на сервер, разница лишь в пути сохранения изображения:

Функция checkAdminId проверяет, авторизирован ли пользователь, путем проверки существования переменной сессии user. Если переменная существует, то возвращаем значение этой переменной, иначе делаем редирект на страницу авторизации:

Функция getIserById получает данные пользователя из базы данных, по полученному id:

Создадим страницу с формой профиля. Если пользователь гость, то показываем ему сообщение, что он не авторизирован. Далее идет обычная страница с выводом ошибок и проставлением данных пользователя в поля.

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

В браузере эта форма будет выглядеть следующим образом:

Так как наши пароли зашифрованы, да и просто для удобства, создаем форму смены пароля. Создаем ее обработчик в NewsController.php:

В обработчике мы получили введенные в форму пароли, сравнили, равны ли введенные пароли и проверили, чтобы пароль был не короче шести символов. Далее если ошибок нет, то мы используем функцию generateHash, которая шифрует пароль (эта функция была разобрана в статье по созданию регистрации). Затем с помощью функции editPassword (была рассмотрена в этой статье ) меняем пароль в таблице базы данных на новый. Форма страницы редактирования пароля будет реализована так:

В браузере она будет отображаться следующим образом:

В итоге мы получаем профиль пользователя с возможностью смены логина и аватара. Чтобы не создавать функцию downloadAvatar, можно хранить аватарки вместе с загруженными картинками, а это не очень удобно. Лучше сделать проверку какого-то параметра в функции downloadImg и относительно него выбирать путь, по которому будем сохранять аватарку.

Смотрите также дополнительные статьи про MVC

Как создать собственную страницу профиля пользователя в WP

Каждый раз когда я хочу написать какой-либо интересный мне пост, я всегда смотрю в гугле, что уже имеется по этой теме. Если интернет уже переполнен ею, то я стараюсь выбрать что-либо другое.

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

Даже на англоязычных сайтах я ничего не нашел (не знаю, может искал плохо), конечно некоторые решения имелись, но все они были плагинами.

Шаг 1. Шаблон страницы

Кое-что про шаблоны страниц я тоже уже писал, поэтому сейчас сразу перехожу к коду.

Шаг 2. PHP-файл для обработки сохраняемых данных

Это и есть содержимое файла profile-update.php , который в прошлом шаге мы решили разместить прямо в папке с темой.

Если у вас есть вопросы по работе кода или предложения по его доработке, прошу вас проследовать в комментарии 🙂

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Читать еще:  Html checkbox checked

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Комментарии 10

Вау как вовремя! 🙂 Спасибо.
Миша, а может у тебя есть идеи как вывести создание постов? или уже есть готовая статья?

Например опубликовал запись + также есть возможность отредактировать или удалить его.
Такой ответ я думаю лучше оформить все в отдельный пост (вот тебе как идея для нового поста). Так как в инете ничего годного нет. А у тебя мануалы самые понятные 🙂

Форма создания постов для пользователей?:)

Если ты про добавление постов с фронтенда, то хорошая статья есть на dontforget.pro. Там с аяксом, допполями и картинками

ВОУ ВОУ МИША.
СУПЕР.
сейчас читаю мимолетом, приду с учебы более подробно все протестирую, посмотрю; возникнут вопросы и комментария напишу)))) (обязательно возникнут)
Спасибо Большое еще раз))

Миша спасибо большое еще раз
К сожалению только сейчас смог сесть и почитать и все сделать. пришлось уехать на некоторое время по делам и никак не мог добраться
Если я правильно понял мы создаем:
Шаблон страницы
А затем создаем второй файл (который подключили ранее в шаблоне (пункт 1) ) для того чтобы когда пользователь меняет информацию оно могла сохранится и обработаться так?
Это все работает отлично + я добавил плагин и теперь пользователь может менять аватарку опять же только в админке
как я не пытался понять и правильно сделать ( с помошью кода) не получается организовать замену аватарке так же как у вас отдельно на странице
Плюс хотел бы сделать чтобы (пример): пользователь А написал комментарий, пользователь Б нажал на его ник и его перекинуло в профиль пользователя А там аватарка его и инфа там город, телефон, может пару фоточек каких ну простой профиль такие отлично реализованы на DLE

Так, без аватарки поля хорошо работают, я правильно понял?

Относительно URL пользователей — там какой-то хук был вроде бы. Но думаю проще прямо в теме сменить и всё.

Попробуй плагин WP User Avatar там с помощью шорткода [avatar_upload] можешь загружать аватарки на front-end.

Ок сейчас просмотрю, спасибо.

Михаил, да и с аваторкой и и без поля работают все хорошо.

Создание профиля зарегистрированного пользователя

Исходники
5.9 Кб

Этот урок хотелось бы посвятить созданию личного профиля для зарегистрированных пользователей (дополнение к уроку Создание регистрации пользователей на сайте). Теперь пользователи смогут добавить свой аватар, изменить имя и фамилию, добавить место проживания и день рождения. Для этого в таблицу users добавим несколько полей:

Теперь создадим страницу профиля profile.php и добавим на странице index.php ссылку на нее
Теперь код самой страницы profile.php

Естественно перейдя на эту страницу, мы увидим стандартную аватарку noAvatar.jpg и возможно имя и фамилию, если пользователь при регистрации указал их, остальные пункты будут пусты. В самом конце этой страницы есть ссылка на страницу редактирование профиля edit.php. Код этой страницы очень легок и состоит из форм для ввода данных. Из-за довольно большого объема приводить здесь полностью я его не буду, а приведу лишь часть, полностью взять его можно будет в исходных файлах.

Все остальные формы аналогичны и будут ссылаться на один обработчик save_edit.php, который и будет вносить изменения в базу данных. Он также имеет достаточно большой код, и здесь я его тоже приводить не буду, а лишь немного расскажу, что в нем происходит (полностью код вы также с можете в исходных файлах). Первым делом мы создаем аватарку, если пользователь ее загрузил конечно, в противном случае оставляем стандартную. Если это так, то первым делом мы загружаем в папку avatars (кстати, создайте эту папку и поставьте ей права на запись 755) предварительно проверив с разрешенными расширениями. Затем создается новое изображение форматом зависящее от выбранного режима: $rezim = 1 создается квадратная картинка, $rezim = 2 картинка пропорциональная исходной. Также надо задать ширину создаваемого изображения $w и качество $quality. Созданное изображение мы сохраняем в формате jpg с помощью функции imagejpeg и генерируем для него случайное имя. Теперь нужно удалить старое изображение и обновить в базе данных на новое. На этом с изображениями все.

Читать еще:  Php if then

Все остальные пункты данного файла предназначены для обновления личных данных о пользователя и представляют собой простые запросы к базе данных для обновления полей. Предварительно перед обновлением проверяется существование входящих переменных и их безопасность с помощью stripslashes и htmlspecialchars. Если обновление происходит успешно, то мы сразу перенаправляем пользователя на страницу профиля.
Теперь сделаем так чтобы вошедший пользователь смог видеть всех остальных зарегистрированных пользователей. Для этого создадим страницу user.php, которая в цикле будет выводить всех пользователей.

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

Автор: Евгений Бочкарев и Дмитрий Данилов Урок добавлен: 11 Марта 2011 в 16:10 Просмотров: 65961

Множество различных jQuery примеров , элементы CSS
и большое количество других инструментов для Вашего сайта !

Подборка самых популярных WordPress плагинов для любого сайта.

Здесь вы сможете скачать различные jQuery скрипты для любых проектов.

Бесплатно скачать CSS3 наработки с различными эффектами анимации.

Можно скачать файлы HTML5 с современными возможностями разработки.

Множество различных free PSD объектов для WEB-дизайна.

Колекция различных элементов form jQuery для вашего сайта.

Бесплатно скачать иконки для сайта в форматах PSD, PNG и так далее.

Коллекция всегда обновляющихся модальных окон на jQuery.

Разные примеры jQuery validate собраны в одном месте сайта.

Симпатичные варианты реализации ваших jQuery gallery.

Большой сборник широкоформатных и адаптивных jQuery slider`ов.

Ишите примеры реализации jQuery scroll? Это то, что вам нужно.

Красивые и динамичные всплывающие подсказки на jQuery и CSS3.

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

Подобрка плагинов Javascript, библиотек, фреймворков и т.д.

Коллекция потрясающих примеров анимации для вашего сайта.

Модернизация элементов форм, создание систем автозаполнения

Плагины для выбора и настройки даты и времени в формах

Предзагрузчики, анимация загрузки, перлоадеры и т.д.

Компоненты, содержащие в себе реализацию параллакс-эффекта.

Создание вкладок, оформление списков в удобную навигацию.

Все, что касается таблиц с данными: фильтр, сортировка и т.д.

Наработки SVG-графики и наложение на нее анимации. Просто красиво.

Отрисовка элементов на веб-странице с помощью html5 canvas.

Примеры элементов, которые реагируют при наведении на них.

Плагины для фото и видео галерей, способные приблежать контент.

Кнопки. Создание красивы и незабываемых кнопок для сайта.

Все, что касается сортировки данных на странице. Плагины html5.

Выборка данных. Множество примеров jQuery select.

Различные способы создания красивого и эффектного меню для сайта.

Дерево элементов. Построение множественных списков на странице.

Примеры объектов в трехмерном пространстве с помощью CSS3 и jQuery.

Bouncing Profile Card — пример профиля пользователя

Источник

Демонстрируем пример эффекта при наведении. Анимация появления профиля пользователя на CSS с hover-эффектом. Неплохо отображается в большинстве популярных браузерах.

Смотрите также:

SEO-продвижение

Автоматическое продвижение сайта в TOP.

Если Вы нашли ошибку в тексте, пожалуйста, выделите область и нажмите Ctrl + Enter.

Последняя версия jQuery:

Небольшое руководство по тому, как скачать самую актуальную версию библиотеки jQuery, а также рекомендации по подключению скрипта.

Ссылка на основную публикацию
Adblock
detector