<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру

PHP и MySQL с Нуля до Гуру

Данный курс - это более 20-ти часов видеоуроков по изучению PHP и MySQL. Ключевой момент курса - это создание движка для сайта с нуля. Каждая строчка комментируется. Практически для каждого урока имеются упражнения. Причём данные упражнения направлены не только на закрепление материала, но и на реализацию реальных задач, встающих перед Web-разработчиками при создании сайтов. После курса Вы сможете без проблем создавать движки для любых сайтов.

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

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

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

Подписавшись по 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 нет.

Ответить

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