Blog2Art - Самое интересное из интернета в удобном формате Уроки

Гостевая книга на php и mysql процедурный стиль

Mon, 19 Aug 2013 16:13:31 +0000

Здравствуйте, дорогие друзья! В этой статье мы рассмотрим создание гостевой книги с помощью php и mysql. Будет приведен исходный код, и конечно же комментарии к нему. Ну и соответственно мы разбираем самый простой пример, специально для новичков.

Гостевая книга на php за 30 минут

Вся наша лабуда будет состоять из 3 php скриптов и одной базы данных в которой будет одна таблица:

index.php — Главный файл, здесь у нас будет жить html верстка и скрипт вывода записей в цикле.
db.php — Ну а в этом фале мы будем создавать базу данных и конектиться к ней
iaa.php — В этом скрипте мы перехватываем данные из формы и добавляем их в базe

Шаг 1. Скрипт, в котором мы будем подключаться к базе и создавать её.

[ad 3]

Итак, этот скрипт называется у нас db.php.

[accordion]
[item title=»Исходный код»]

// название сервера БД
$host = «localhost»;
// название базы данных
$name = «gb»;
// пользователь MySQL
$user = «root»;
// пароль к MYSQL
$pass = «»;

// создаем базу данных и таблицу gb
$link1=mysql_connect($host, $user, $pass) or die(«Нет конекта с MySQL сервером!»);
mysql_query («CREATE DATABASE IF NOT EXISTS «.$name) or die («Не могу создать базу данных gb.»);
mysql_select_db($name) or die(«Нет содениения с требуемой базой данных!»);
mysql_query («CREATE TABLE IF NOT EXISTS gb (id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, username VARCHAR (100), dt DATETIME, msg TEXT)») or die («Не могу создать таблицу gb.»);
?>

[/item]
[/accordion]

Табличка gb создается с необходимыми нашей книге полями:
username — имя чувака, оставляющего сообщение в гостевой;
dt — ну это время и дата сообщения;
msg — а это текст сообщения.
Если база данных и таблица уже имеются, то ничего не происходит.

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

Шаг 2. Теперь выводим в цикле все что у нас есть в базе данных.

За эту функцию у нас отвечает файл index.php

[accordion]

[item title=»Исходный код»]

require_once («db.php»);
?>

This is guest book

Guest book!

$c=0;
$r=mysql_query («SELECT * FROM gb ORDER BY dt DESC»); // выбор всех записей из БД, отсортированных так, что самая последняя отправленная запись будет всегда первой.
while ($row=mysql_fetch_array($r)) {
if ($c%2)
$col=»bgcolor=’#f9f9f9′»; // цвет для четных записей
else
$col=»bgcolor=’#f0f0f0′»; // цвет для нечетных записей

style=»margin: 10px 0px;»>

User name:
Date:
—————————————————————

$c++;
}

if ($c==0) // если ни одной записи не встретилось
echo «

- Guest book clear!

»;

Create message:

[/item]

[/accordion]

Функция while() и выводит в цикле все наши записи. Стоит отметить что четные и нечетные записи отображаются у нас разными цветами.

Данные из формы передаются в файл iaa.php.

Шаг 3. Добавление данных в базу.

За это у нас отвечает файл iaa.php

[accordion]
[item title=»Исходный код»]

require_once («db.php»);

// получаем переменные из формы
$username=$_POST[‘username’];
$msg=$_POST[‘msg’];
$action=$_POST[‘action’];

if ($action==»add»)
{
// добавление данных в БД
$sql=»INSERT INTO gb(username, dt, msg) VALUES (‘$username’, NOW(), ‘$msg’)»;
$r=mysql_query ($sql);
}

if ($action==»delete»)
{
// удаление базы гостевой
$sql=»DELETE FROM gb»;
$r=mysql_query($sql);
}

header(«Location: index.php»);
?>

[/item]
[/accordion]

Файл action.php ничего не возвращает браузеру. При выполнении action.php происходит редирект на файл index.php.

Ну вот и все. Наша гостевая книга на php готова.

СКАЧАТЬ ИСХОДНИК

The post Гостевая книга на php и mysql — процедурный стиль appeared first on Blog2Art - Самое интересное из интернета в удобном формате.

Проектирование макета рекламного Pre-Roll видеоплеера в Photoshop + psd исходник

Sat, 06 Apr 2013 10:29:03 +0000

В свете грядущего глобального перезапуска рекламной сети, в которой я работаю, встал вопрос о разработке рекламного видеоплеера для формата Pre-Roll.

Сам формат является не новым и наверняка встречался вам не раз и не два. Для тех, кто все же не в курсе, поясню — Pre-Roll или Преролл, это короткий рекламный ролик, который воспроизводится в том или ином онлайн видеоплеере перед просмотром оригинального видео. Зачастую подобные ролики вы можете увидеть в онлайн кинотеатрах. Даже Великий и Могущественный YouTube активно использует этот формат.

[ad 3]

Как правило, по истечении «обязательного времени», ролик можно пропустить, нажав на специальную ссылку.

В этой статье я расскажу о том, как спроектировать макет pre-roll плеера в photoshop. Это довольно просто и не составит труда даже новичкам.

Итак, из стандартного функционала такие плееры имеют следующие интерфейсы:

Ссылка на сайт рекламодателя;
Таймер обратного отчета «обязательного времени» просмотра
Появляющаяся ссылка, позволяющая пропустить рекламное видео

Мы решили добавить функцию включения/выключения звука, а также возможность разворачивать ролик на весь экран.

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

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

Четыре иконки для Pre-Roll плеера

Иконки были реализованы в пиксельном стиле (16×16 px) — чтобы как можно меньше отвлекать внимание пользователя, но в тоже время оставаться четкими и понятными.

Я не буду подробно описывать сам процесс создания подобных иконок — это тема для отдельной статьи. Скажу лишь, что я создал рабочее поле 16х16 пикселей и пользовался такими инструментами как «Карандаш» и различными стандартными примитивами (для создания специфических форм).

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

Настройки обводки:

Используем цвет #000000 в 1 пиксель с непрозрачностью 18%.

Настраиваем обводку

Настройки внутренней тени:

Используем режим для наложения «Яркий свет». Непрозрачность устанавливаем на 32%. Цвет белый — #ffffff, Смещение на 1 пиксель пол углом в 120°. Стягивание и Размер устанавливаем на ноль.

Настраиваем внутреннюю тень

Настройки градиента:

Устанавливаем непрозрачность в 14%. Используем угол в 90°. В градиенте я использовал всего два цветовых маркера — оба черного цвета #000000. Для создания эффекта исчезновения градиента правый маркер я сделал полностью прозрачный, правый оставил как есть.

Настраиваем градиент

Настройка тени:

Используем черный цвет — #000000. Режим наложения «Нормальный». Непрозрачность 12%. Смещение и Размер выставляем на 2 пикселя под углом в 120°. Размах оставляем нулевой.

Настраиваем тень

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

В качестве подложки используем инструмент «Прямоугольник со скругленными углами» с радиусом сглаживания углов в 5 пикселей. Используем черный цвет #000000 и выставляем прозрачность фигуры в 60%. Делаем подложку для каждой иконки, добавляем ссылку для перехода на сайт рекламодателя и получаем следующую заготовку (красный фон я подставил специально, чтобы вам было лучше видно элементы):

Заготовка интерфейсов для нашего видеоплеера

По задумке, при наведении курсора на тот или иной элемент непрозрачность подложки увеличивается с 60% до 80%. Это сделано для придания активным элементам визуальной интерактивности. Я всегда стараюсь продумать как будет вести себя тот или иной элемент при взаимодействии с пользователем. Пользователь должен знать, что элемент является интерактивным, а задача добросовестного проектировщика UI — продумать этот процесс.

Теперь осталось продумать как будет выглядеть таймер отчета — «обязательного времени» просмотра. После недолгих дискуссий мы решили, что в роли таймера будет выступать вот такая круглая фигура, заполняющаяся по истечении времени:

Круг

Для создания этой фигуры я использовал инструмент «Круг». Настройки нашего круглого примитива полностью совпадают с настройками подложек — черный цвет #000000 и прозрачность 60%. Далее, я дублировал заготовку круга и вклеил в него свойства иконок (скопировал настройки, которые мы применяли к иконкам выше). В итоге у меня получилось два круга — темный прозрачный и светлый непрозрачный. Два варианта необходимо, чтобы показать программисту как будет выглядеть незаполненный и заполненный таймер.

Наш индикатор

Размещаем наши интерфейсы на макете, согласно продуманной заранее схеме, добавляем тестовое изображение и получаем готовый исходник. Так как человек я не жадный — поделюсь с вами моим исходником. PSD-файл структурирован, все слои названы по русски. Вы можете бесплатно скачать исходник плеера по ссылке ниже (чтобы увидеть ссылку нажмите на иконку любой соц. сети):

СКАЧАТЬ ИСХОДНИК

Если этот материал оказался полезным, потратьте несколько минут — оставьте отзыв в комментариях ниже.

Дизайн видеоплеера в формате Pre-Roll, разработанный мной для рекламной сети

Ну вот и все. Буду рад, если вы сообщите о своих успехах!

The post Проектирование макета рекламного Pre-Roll видеоплеера в Photoshop + psd исходник appeared first on Blog2Art - Самое интересное из интернета в удобном формате.