<MyRusakov.ru />

Фреймворк Yii 2.0 с нуля. Пример создания сайта

Фреймворк Yii 2.0 с нуля. Пример создания сайта

Видеокурс "Фреймворк Yii 2.0 с нуля. Пример создания сайта" обучит Вас созданию профессиональных сайтов с использованием фреймворка Yii. В курсе есть 2 раздела: теоретический и практический. В теоретическом разделе будут разобраны возможности фреймворка Yii с примерами их использования, а в практической части будет создан сайт Blog.MyRusakov.ru с помощью полученных знаний из теоретического раздела.

Так же почти ко всем урокам идут упражнения для закрепления материала из урока на практике.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Создаём сокращатель URL. Часть 1.

Создаём сокращатель URL. Часть 1.

Теория - вещь нужная. Без теории никуда. Но, если вы будете просто её знать, вы врядли сможете что-нибудь сделать на практике. Вот именно это я и хочу исправить, так что сегодня я начинаю цикл статей, в которых мы с вами пошагово создадим сокращатель URL.

Как это будет работать

У нас будет текстовое поле и кнопка. В поле будет вводиться какой-нибудь url(например, http://test.com/), а на выходе мы будем получать строку примерно такого вида: http://наш_домен.ru/1njcht/ Кликнув по данной ссылке, мы перейдём на test.com. Также, в базу данных будет занесено значение 1njcht и соотвествующий ему адрес test.com.

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

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Сокращатель URL</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
   <h1 class="title">Сокращатель URL</h1>
   <form action="shorten.php" method="post">
    <input type="url" name="url" placeholder="Введите URL" autocomplete="off">
    <input type="submit" value="Сократить">
   </form>
  </div>
</body>
</html>

В разметке нет ничего сложного, кроме того, что мы используем здесь поле типа url и новые атрибуты, появившиеся в html5, но всё это мы уже изучали в предыдущих статьях, и это не должно вызывать трудностей. Перейдём теперь к стилям CSS.

body {
  font: 0.9em Tahoma, sans-serif;
}

.title {
  font-weight: normal;
}

.container {
  width: 100%;
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
}

input {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  margin: 0;
}

input[type="url"] {
  width: 300px;
}

input[type="url"]:focus {
  border: 1px solid blue;
}

input[type="submit"] {
  padding: 9px;
  transition: all .3s;
}

input[type="submit"]:hover {
  box-shadow: 0 0 3px #faf;
  transition: all .3s;
}

Стили пояснять тоже нет смысла, т.к. абсолютно всё вы здесь уже должны знать.

Итак, это всё. Вот какая красивая форма у нас получилась!

Наша форма

На этом я заканчиваю первую статью. Увидимся в следующей!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (3):

ppk-center ppk-center 27.04.2014 08:16:04

Зачем нужен класс title, если можно применить к h1! Зачем container, если есть body!

Ответить

alexandrdante alexandrdante 27.04.2014 12:06:23

а вдруг там будут ещё блоки или куча h1 которым нужен другой стиль либо наоборот,всем одинаковый,а этому первому -другой?)

Ответить

Web-дизайнер. Web-дизайнер. 16.01.2016 08:55:02

Доброго времени суток всем! Вот у меня этот блок из css input[type="url"]:focus { border: 1px solid blue; } // border: 1px solid blue; // не сработал, то есть, нет голубого бордера, даже при увеличении 10px нет.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.