Пример создания сайта рекламной компании на PHP

Май 30, 2024

—

от автора

Создание сайта рекламной компании может показаться сложной задачей, особенно если вы только начинаете свой путь в веб-разработке. Но не переживайте! Сегодня я расскажу вам, как создать сайт на PHP, даже если вы не гуру программирования. Мы пройдемся по всем этапам: от планирования и дизайна до написания кода и размещения на сервере.

Содержание скрыть

Шаг 1: Планирование

Определение целей сайта

Структура сайта

Шаг 2: Дизайн

Wireframes и макеты

Выбор цветовой схемы и шрифтов

Шаг 3: Настройка окружения

Установка PHP и сервера

Создание проекта

Шаг 4: Верстка

HTML и CSS

Шаг 5: Программирование на PHP

Подключение к базе данных

Главная страница

Страница услуг

Шаг 6: Добавление функциональности

Обратная связь

Шаг 7: Тестирование и деплой

Локальное тестирование

Деплой на хостинг

Шаг 1: Планирование

Определение целей сайта

Первый шаг в создании любого сайта — четкое понимание его целей. Задайте себе несколько вопросов:

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

Структура сайта

После определения целей необходимо продумать структуру сайта. Обычно сайт рекламной компании включает следующие страницы:

Главная страница — Краткое описание компании, основные услуги.
О нас — Подробная информация о компании и команде.
Услуги — Описание предлагаемых услуг.
Портфолио — Примеры выполненных проектов.
Отзывы — Мнения клиентов.
Контакты — Форма обратной связи, контактные данные.

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

Шаг 2: Дизайн

Wireframes и макеты

Перед тем как приступить к кодированию, нарисуйте эскизы (wireframes) основных страниц сайта. Это можно сделать на бумаге или с помощью онлайн-инструментов, таких как Figma или Sketch. Эскизы помогут вам определиться с расположением элементов на странице.

Выбор цветовой схемы и шрифтов

Подумайте о цветовой схеме, которая будет соответствовать вашему бренду. Обычно рекламные компании используют яркие и запоминающиеся цвета, чтобы привлечь внимание. Ткаже выберите 1-2 шрифта, которые будут использоваться на сайте. Не забудьте про удобочитаемость!

Шаг 3: Настройка окружения

Установка PHP и сервера

Для разработки сайта на PHP вам потребуется веб-сервер (например, Apache или Nginx) и сам PHP. Если вы используете Windows, удобным вариантом будет установка пакета XAMPP, который включает Apache, PHP и MySQL. На macOS можно установить MAMP или использовать встроенные средства через Homebrew.

Создание проекта

Создайте новую папку для вашего проекта и внутри нее следующие подкаталоги:

/css — для стилей
/js — для скриптов
/images — для изображений
/includes — для включаемых файлов PHP
/templates — для HTML-шаблонов

Шаг 4: Верстка

HTML и CSS

Начнем с базовой верстки сайта. Вот пример структуры HTML для главной страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Рекламная компания</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>Добро пожаловать в нашу рекламную компанию</h1>
        <nav>
            <ul>
                <li><a href="index.php">Главная</a></li>
                <li><a href="about.php">О нас</a></li>
                <li><a href="services.php">Услуги</a></li>
                <li><a href="portfolio.php">Портфолио</a></li>
                <li><a href="contacts.php">Контакты</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Наши услуги</h2>
        <p>Описание услуг...</p>
    </main>
    <footer>
        <p>&copy; 2024 Рекламная компания</p>
    </footer>
</body>
</html>

Теперь добавим немного стилей в файл css/styles.css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

header nav ul {
    list-style: none;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin-right: 10px;
}

header nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 20px;
}

footer {
    text-align: center;
    padding: 10px 0;
    background-color: #333;
    color: #fff;
}

Шаг 5: Программирование на PHP

Подключение к базе данных

Предположим, что мы используем MySQL для хранения данных. Для начала нам нужно настроить соединение с базой данных. Создайте файл includes/db.php:

<?php
$host = 'localhost';
$db = 'ad_company';
$user = 'root';
$pass = '';

$dsn = "mysql:host=$host;dbname=$db;charset=utf8";
$options = [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
];

try {
    $pdo = new PDO($dsn, $user, $pass, $options);
} catch (PDOException $e) {
    die("Ошибка подключения к базе данных: " . $e->getMessage());
}
?>

Главная страница

Теперь давайте создадим файл index.php и подключим базу данных:

<?php
include 'includes/db.php';
?>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Рекламная компания</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>Добро пожаловать в нашу рекламную компанию</h1>
        <nav>
            <ul>
                <li><a href="index.php">Главная</a></li>
                <li><a href="about.php">О нас</a></li>
                <li><a href="services.php">Услуги</a></li>
                <li><a href="portfolio.php">Портфолио</a></li>
                <li><a href="contacts.php">Контакты</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Наши услуги</h2>
        <p>Описание услуг...</p>
    </main>
    <footer>
        <p>&copy; 2024 Рекламная компания</p>
    </footer>
</body>
</html>

Страница услуг

Создадим файл services.php и напишем код для вывода услуг из базы данных:

<?php
include 'includes/db.php';

$query = $pdo->query("SELECT * FROM services");
$services = $query->fetchAll();
?>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Наши услуги</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>Наши услуги</h1>
        <nav>
            <ul>
                <li><a href="index.php">Главная</a></li>
                <li><a href="about.php">О нас</a></li>
                <li><a href="services.php">Услуги</a></li>
                <li><a href="portfolio.php">Портфолио</a></li>
                <li><a href="contacts.php">Контакты</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Наши услуги</h2>
        <ul>
            <?php foreach ($services as $service): ?>
                <li><?php echo htmlspecialchars($service['name']); ?> - <?php echo htmlspecialchars($service['description']); ?></li>
            <?php endforeach; ?>
        </ul>
    </main>
    <footer>
        <p>&copy; 2024 Рекламная компания</p>
    </footer>
</body>
</html>

Шаг 6: Добавление функциональности

Обратная связь

Теперь добавим форму

обратной связи на страницу contacts.php:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Контакты</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>Контакты</h1>
        <nav>
            <ul>
                <li><a href="index.php">Главная</a></li>
                <li><a href="about.php">О нас</a></li>
                <li><a href="services.php">Услуги</a></li>
                <li><a href="portfolio.php">Портфолио</a></li>
                <li><a href="contacts.php">Контакты</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Свяжитесь с нами</h2>
        <form action="send_contact.php" method="post">
            <label for="name">Имя:</label>
            <input type="text" id="name" name="name" required>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
            <label for="message">Сообщение:</label>
            <textarea id="message" name="message" required></textarea>
            <button type="submit">Отправить</button>
        </form>
    </main>
    <footer>
        <p>&copy; 2024 Рекламная компания</p>
    </footer>
</body>
</html>

А вот PHP-скрипт для обработки формы send_contact.php:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = trim($_POST["name"]);
    $email = trim($_POST["email"]);
    $message = trim($_POST["message"]);

    if (empty($name) || empty($email) || empty($message)) {
        echo "Пожалуйста, заполните все поля.";
        exit;
    }

    $to = "[email protected]";  // замените на ваш email
    $subject = "Новое сообщение с сайта";
    $body = "Имя: $name\nEmail: $email\nСообщение:\n$message";
    $headers = "From: $email";

    if (mail($to, $subject, $body, $headers)) {
        echo "Сообщение отправлено.";
    } else {
        echo "Ошибка отправки сообщения.";
    }
}
?>

Шаг 7: Тестирование и деплой

Локальное тестирование

Протестируйте ваш сайт на локальном сервере. Убедитесь, что все страницы работают корректно, нет ошибок, и все формы работают как положено.

Деплой на хостинг

Когда вы уверены, что все работает, как задумано, пришло время перенести сайт на хостинг. Для этого вам понадобится:

Зарегистрировать домен и приобрести хостинг.
Загрузить файлы сайта на сервер с помощью FTP-клиента, например FileZilla.
Настроить базу данных на сервере и импортировать туда ваши данные.
Обновить конфигурационные файлы, если необходимо.

Автор статьи:

Игорь Матвеев

Обновлено:

30.05.2024

PHP

Пример создания сайта рекламной компании на PHP

Шаг 1: Планирование

Определение целей сайта

Структура сайта

Шаг 2: Дизайн

Wireframes и макеты

Выбор цветовой схемы и шрифтов

Шаг 3: Настройка окружения

Установка PHP и сервера

Создание проекта

Шаг 4: Верстка

HTML и CSS

Шаг 5: Программирование на PHP

Подключение к базе данных

Главная страница

Страница услуг

Шаг 6: Добавление функциональности

Обратная связь

Шаг 7: Тестирование и деплой

Локальное тестирование

Деплой на хостинг

Комментарии

Добавить комментарий Отменить ответ