Сайт на PHP - делаем простой пример интернет-магзаина

В этой статье мы разберем простой сайт на php на примере небольшого интернет-магазина. Цель статьи - дать новичкам понимание, как работают сайты написанные на php, и что нужно для их запуска. Мы пройдем путь от настройки сервера до момента, когда у вас будет готовый сайт на php. Вы сможете скачать код файлов примера сайта на php и использовать их для дальнейшего изучения.

Часть 1. Подготовка веб-окружения

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

Nginx или Apache - веб-сервер, будет обрабатывать запросы к сайту;
MySQL - база для хранения данных;
PHP - интерпретатор языка программирования.

Как запустить PHP на разных операционных системах

Windows - установите программу XAMPP;
Mac OS - установите программу MAMP;
Ubuntu - надо установить все компоненты вручную, или с помощью скрипта install.sh ниже

install.sh - скрипт для установки PHP, MySQL, NGING на Ubuntu

!/bin/bash

echo "--- Установка Nginx, MySQL и PHP ---"
sudo apt update && sudo apt install nginx mysql-server php-fpm php-mysql -y

echo "--- Настройка прав доступа к файлам ---"
sudo chown -R $USER:$USER /var/www/html/
rm -f /var/www/html/index.nginx-debian.html
echo "<?php phpinfo(); ?>" > /var/www/html/index.php

echo "--- Настройка доступа к Базе Данных ---"
sudo mysql -e "ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY ''; FLUSH PRIVILEGES;"

echo "--- Настройка веб-сервера ---"
PHP_V=$(php -r "echo PHP_MAJOR_VERSION.'.'.PHP_MINOR_VERSION;")

sudo tee /etc/nginx/sites-available/default <<EOF
server {
   listen 80 default_server;
   root /var/www/html;
   index index.php index.html;
   server_name _;
   include /etc/nginx/mime.types;
   location / {
       try_files $uri $uri/ /index.php?$args;
   }
   location ~ \.php$ {
       include snippets/fastcgi-php.conf;
       fastcgi_pass unix:/var/run/php/php$PHP_V-fpm.sock;
   }
}
EOF

echo "--- Перезапуск сервисов ---"
sudo chmod 666 /var/run/php/php$PHP_V-fpm.sock
sudo systemctl restart php$PHP_V-fpm nginx mysql

echo "Окружение готово!"
echo "Сайт доступен по адресу: http://localhost , MySQL пользователь: root, пароль: пустой"

Чтобы запустить скрипт, создайте файл у себя на сервере в его содержимым, перейдите в директорию со скриптом, и выполните в терминале команду

bash install.sh

Что дальше, как запустить php на сайте? На самом деле все уже должно работать и у вас в браузере будет открываться сайт http://localhost , а PHP файл для редактирования будет доступен на сервере по пути /var/www/html/index.php

Часть 2. Развертывание базы данных

Чтобы наш сайт на PHP с нуля мог выводить каталог товаров, нам нужна база данных. Мы создадим три таблицы в MySQL: категории, товары и заказы.

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

Создайте в папке /var/www/html/ файл install-db.php и вставьте в него следующий код:

install-db.php - скрипт для наполнения демо-базы

<?php
// Включаем отображение всех ошибок для отладки
ini_set('display_errors', 1);
error_reporting(E_ALL);

$host = 'localhost';
$user = 'root';
$pass = '';
$db   = 'my_shop';

// 1. Подключение
$link = mysqli_connect($host, $user, $pass);
if (!$link) {
   die("Ошибка подключения: " . mysqli_connect_error());
}

// 2. Создание базы
mysqli_query($link, "CREATE DATABASE IF NOT EXISTS $db CHARACTER SET utf8mb4");
mysqli_select_db($link, $db);

// 3. Создание таблиц по одной (так надежнее, чем multi_query)
$table1 = "CREATE TABLE IF NOT EXISTS categories (
   id INT AUTO_INCREMENT PRIMARY KEY,
   title VARCHAR(255) NOT NULL
) ENGINE=InnoDB";

$table2 = "CREATE TABLE IF NOT EXISTS products (
   id INT AUTO_INCREMENT PRIMARY KEY,
   category_id INT,
   title VARCHAR(255) NOT NULL,
   price DECIMAL(10, 2) NOT NULL,
   image VARCHAR(255),
   FOREIGN KEY (category_id) REFERENCES categories(id) ON DELETE SET NULL
) ENGINE=InnoDB";

if (!mysqli_query($link, $table1) || !mysqli_query($link, $table2)) {
   die("Ошибка создания таблиц: " . mysqli_error($link));
}


// 4. Проверка на пустую базу и вставка данных
$check = mysqli_query($link, "SELECT id FROM categories LIMIT 1");
if (mysqli_num_rows($check) == 0) {
   // Вставляем категории
   mysqli_query($link, "INSERT INTO categories (title) VALUES ('Смартфоны'), ('Ноутбуки')");
  
   // Вставляем товары
   $insert_products = "INSERT INTO products (category_id, title, price, image) VALUES
       (1, 'iPhone 15', 85000.00, 'iphone.jpg'),
       (1, 'Samsung S23', 70000.00, 'samsung.jpg'),
       (2, 'MacBook Air', 120000.00, 'macbook.jpg')";
  
   if (mysqli_query($link, $insert_products)) {
       echo "<h1>Успех!</h1><p>База данных my_shop настроена и товары добавлены.</p>";
   } else {
       echo "Ошибка вставки данных: " . mysqli_error($link);
   }
} else {
   echo "<h1>Все в порядке</h1><p>База уже содержит данные.</p>";
}

mysqli_close($link);
?>

Просто откройте в браузере адрес: http://localhost/install-db.php

Если вы видите сообщение об успехе, значит, ваш сайт на PHP теперь имеет рабочую базу данных. Скрипт можно запускать повторно - благодаря проверкам IF NOT EXISTS, он не удалит уже существующие товары.

Часть 3. index.php - главная страница

Ниже представлен пример код файла index.php, вставьте его в ваш файл и перейдтие на сайт. Вы увидите пример верстки шаблона интернет-магазина, шапку с контактами, меню, слайдер акциями, карточки товаров с кнопкой добавления в корзину, футер. Это типичная страница сайта на php, где контент подгружается из базы в реальном времени.

index.php - скрипт главной страницы

<?php
// 1. Подключение к базе данных (MySQLi)
$link = mysqli_connect('mysql', 'root', 'mysqlrootpass', 'my_shop');
if (!$link) die("Ошибка подключения: " . mysqli_connect_error());


// 2. Логика фильтрации по категориям
$cat_id = isset($_GET['category_id']) ? (int)$_GET['category_id'] : 0;


// Запрос для меню (все категории)
$categories_res = mysqli_query($link, "SELECT * FROM categories");
$categories = [];
while($row = mysqli_fetch_assoc($categories_res)) { $categories[] = $row; }


// Запрос для товаров (с учетом фильтра)
$sql = "SELECT * FROM products";
if ($cat_id > 0) {
   $sql .= " WHERE category_id = $cat_id";
}
// Добавим сортировку по новизне
$sql .= " ORDER BY id DESC";
$products_res = mysqli_query($link, $sql);
?>


<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Moguta.Lite — Premium Store Concept</title>
  
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />


   <style>
       :root {
           --primary: #6366f1; /* Indigo */
           --primary-dark: #4f46e5;
           --primary-soft: #e0e7ff;
           --secondary: #ec4899; /* Pink */
          
           --bg: #f1f5f9;
           --text: #0f172a;
           --text-light: #64748b;
           --white: #ffffff;
          
           /* Премиальные тени */
           --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.04);
           --shadow-md: 0 10px 30px -5px rgb(0 0 0 / 0.08);
           --shadow-lg: 0 20px 50px -10px rgb(0 0 0 / 0.12);
           --shadow-primary: 0 10px 20px -5px rgba(99, 102, 241, 0.4);
          
           /* Скругления */
           --radius-sm: 12px;
           --radius-md: 20px;
           --radius-lg: 32px;
          
           --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
       }


       body { font-family: 'Inter', sans-serif; margin: 0; background: var(--bg); color: var(--text); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }
       .container { max-width: 1280px; margin: 0 auto; padding: 0 30px; width: 100%; box-sizing: border-box; }
       a { text-decoration: none; color: inherit; transition: var(--transition); position: relative; }
      
       button { font-family: 'Inter', sans-serif; outline: none; border: none; cursor: pointer; transition: var(--transition); }


       /* Вспомогательные классы */
       .gradient-text { background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }
       .glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.2); }


       /* --- ШАПКА --- */
       .top-bar { background: var(--white); font-size: 13px; padding: 12px 0; color: var(--text-light); border-bottom: 1px solid #e2e8f0; font-weight: 500; }
      
       header { padding: 25px 0; background: var(--bg); position: relative; z-index: 10; }
       .header-content { display: flex; justify-content: space-between; align-items: center; }
      
       .logo { font-family: 'Poppins', sans-serif; font-size: 26px; color: var(--text); display: flex; align-items: center; gap: 12px; letter-spacing: -1px; }
       .logo-icon { width: 38px; height: 38px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 10px; box-shadow: var(--shadow-primary); }
      
       .header-action-group { display: flex; align-items: center; gap: 20px; }
       .phone { font-weight: 600; font-size: 17px; }
       .phone:hover { color: var(--primary); }


       .cart-link { background: var(--primary); color: white; padding: 14px 28px; border-radius: var(--radius-sm); font-weight: 600; box-shadow: var(--shadow-primary); display: flex; align-items: center; gap: 8px; }
       .cart-link:hover { transform: translateY(-3px) scale(1.02); background: var(--primary-dark); }
       .cart-count { background: var(--white); color: var(--primary); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }


       /* --- НАВИГАЦИЯ --- */
       nav { sticky; top: 0; z-index: 100; margin-top: -10px; }
       .nav-wrap { padding: 10px 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: flex; justify-content: center; gap: 8px; border: 1px solid rgba(255,255,255,0.4); }
      
       nav a { color: var(--text-light); padding: 14px 25px; display: block; font-size: 15px; font-weight: 600; border-radius: var(--radius-sm); }
       nav a::after { content: ''; position: absolute; bottom: 8px; left: 25px; right: 25px; height: 3px; background: var(--primary); border-radius: 2px; transform: scaleX(0); transition: var(--transition); }
       nav a:hover { color: var(--primary); }
       nav a.active { color: var(--primary); background: var(--primary-soft); }
       nav a.active::after { transform: scaleX(1); }


       /* --- СЛАЙДЕР --- */
       .hero-slider { margin: 40px auto 60px; }
       .swiper { width: 100%; height: 420px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
       .swiper-slide { display: flex; align-items: center; padding: 60px 80px; box-sizing: border-box; }
      
       .slide-card { padding: 40px; border-radius: var(--radius-md); max-width: 500px; box-shadow: var(--shadow-lg); transition: 0.8s ease-out; transform: translateY(30px); opacity: 0; }
       .swiper-slide-active .slide-card { transform: translateY(0); opacity: 1; }
      
       .slide-card h3 { margin: 0 0 15px; font-size: 32px; color: var(--text); font-weight: 700; line-height: 1.2; }
       .slide-card p { margin: 0 0 25px; color: var(--text-light); line-height: 1.7; font-size: 16px; }
      
       .slide-btn { display: inline-block; background: var(--primary); color: white; padding: 14px 30px; border-radius: var(--radius-sm); font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; }
       .slide-btn:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-primary); }


       .swiper-pagination-bullet { width: 12px; height: 12px; background: var(--white); opacity: 0.6; }
       .swiper-pagination-bullet-active { opacity: 1; background: var(--primary); width: 30px; border-radius: 6px; }


       /* --- КАТАЛОГ --- */
       main { flex: 1; padding-bottom: 80px; }
       .catalog-header { display: flex; justify-content: space-between; align-items: center; margin: 0 0 40px; border-left: 6px solid var(--primary); padding-left: 20px; }
       .catalog-header h2 { font-size: 32px; margin: 0; font-weight: 700; color: var(--text); }
      
       /* Сетка товаров */
       .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px; perspective: 1000px; /* Для 3D эффекта */ }
      
       /* Карточка товара */
       .product-card { background: var(--white); border-radius: var(--radius-md); padding: 30px; text-align: center; box-shadow: var(--shadow-md); transition: transform 0.1s ease, box-shadow 0.3s var(--transition); border: 1px solid rgba(0,0,0,0.02); position: relative; overflow: hidden; transform-style: preserve-3d; }
       .product-card:hover { box-shadow: var(--shadow-lg); border-color: rgba(99,102,241,0.1); }
      
       .product-img { background: #f8fafc; height: 200px; border-radius: var(--radius-sm); margin-bottom: 25px; display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-weight: 500; font-size: 14px; position: relative; transition: var(--transition); transform: translateZ(20px); /* Выносим фото вперед в 3D */ }
       .product-card:hover .product-img { transform: translateZ(30px) scale(1.03); }
      
       .product-card h3 { font-size: 20px; margin: 0 0 12px; font-weight: 600; color: var(--text); transform: translateZ(15px); }
       .price { font-size: 24px; color: var(--primary); font-weight: 700; margin: 15px 0 25px; transform: translateZ(10px); }
      
       .buy-btn { width: 100%; background: #f1f5f9; border: none; padding: 15px; border-radius: var(--radius-sm); font-weight: 600; color: var(--text); font-size: 15px; transform: translateZ(5px); }
       .buy-btn:hover { background: var(--primary); color: white; transform: translateZ(10px) translateY(-3px); box-shadow: var(--shadow-primary); }


       /* --- ФУТЕР --- */
       footer { background: var(--white); border-top: 1px solid #e2e8f0; padding: 80px 0 40px; position: relative; }
       .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 50px; }
      
       .footer-col .logo { margin-bottom: 20px; }
       .footer-col h4 { margin: 0 0 25px; font-size: 17px; font-weight: 600; position: relative; display: inline-block; }
       .footer-col h4::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 40px; height: 3px; background: var(--primary); border-radius: 2px; }
      
       .footer-col ul { list-style: none; padding: 0; margin: 0; }
       .footer-col li { margin-bottom: 15px; color: var(--text-light); font-size: 15px; display: flex; align-items: center; gap: 10px; }
       .footer-col a:hover { color: var(--primary); padding-left: 5px; }
      
       .copyright { margin-top: 60px; padding-top: 30px; border-top: 1px solid #e2e8f0; text-align: center; font-size: 14px; color: var(--text-light); font-weight: 500; }
  /* --- КАТАЛОГ --- */
main {
   flex: 1;
   padding-bottom: 120px; /* Увеличили с 80px до 120px для большего пространства */
}


/* --- ФУТЕР --- */
footer {
   background: var(--white);
   border-top: 1px solid #e2e8f0;
   padding: 80px 0 40px;
   position: relative;
   margin-top: 40px; /* Добавили внешний отступ сверху */
}
  </style>
</head>
<body>


   <div class="top-bar">
       <div class="container" style="display: flex; justify-content: space-between;">
           <span>📍 Москва, ул. Разработчиков, д. 101, Офис 404</span>
           <span style="display: flex; gap: 15px;">
               <span> Пн—Пт: 09:00 — 20:00</span>
               <span>📧 support@moguta.lite</span>
           </span>
       </div>
   </div>


   <header>
       <div class="container header-content">
           <a href="/" class="logo">
               <div class="logo-icon"></div> Moguta.<span class="gradient-text">Lite</span>
           </a>
           <div class="header-action-group">
               <a href="tel:+74950000000" class="phone">+7 (495) <span style="color:var(--primary)">000-00-00</span></a>
               <a href="/cart.php" class="cart-link">🛒 <span style="margin-right:5px">Корзина</span> <div class="cart-count" id="cart-count">0</div></a>
           </div>
       </div>
   </header>


   <nav>
       <div class="container">
           <div class="glass nav-wrap">
               <a href="/" class="<?php echo $cat_id == 0 ? 'active' : ''; ?>">Все товары</a>
               <?php foreach($categories as $cat): ?>
                   <a href="?category_id=<?php echo $cat['id']; ?>"
                      class="<?php echo $cat_id == $cat['id'] ? 'active' : ''; ?>">
                      <?php echo $cat['title']; ?>
                   </a>
               <?php endforeach; ?>
           </div>
       </div>
   </nav>


   <?php if ($cat_id == 0): // Показывать слайдер только на главной ?>
   <div class="hero-slider container">
       <div class="swiper">
           <div class="swiper-wrapper">
               <div class="swiper-slide" style="background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);">
                   <div class="glass slide-card">
                       <span class="gradient-text" style="text-transform: uppercase; font-size:12px; letter-spacing:2px;">Акции месяца</span>
                       <h3>Весенний апгрейд со скидкой 40%</h3>
                       <p> iPhone 15 Pro, MacBook Air M3 и новые Galaxy уже ждут вас. </p>
                       <a href="#" class="slide-btn">В каталог</a>
                   </div>
               </div>
               <div class="swiper-slide" style="background: linear-gradient(135deg, #ec4899 0%, #701a75 100%);">
                   <div class="glass slide-card">
                       <span class="gradient-text" style="text-transform: uppercase; font-size:12px; letter-spacing:2px; color: #fdf2f8">New Arrival</span>
                       <h3>Мощь и стиль в каждом пикселе</h3>
                       <p>Новое поступление игровых ноутбуков и ультрабуков 2026 года.</p>
                       <a href="#" class="slide-btn">Подробнее</a>
                   </div>
               </div>
           </div>
           <div class="swiper-pagination"></div>
       </div>
   </div>
   <?php else: // Если выбрана категория, добавим отступ ?>
       <div style="margin-top: 60px;"></div>
   <?php endif; ?>


   <main class="container">
       <div class="catalog-header">
           <h2>
               <?php
               if ($cat_id > 0) {
                   foreach($categories as $c) if($c['id'] == $cat_id) echo $c['title'];
               } else {
                   echo "Популярные товары";
               }
               ?>
           </h2>
           <div style="color: var(--text-light); font-size:14px;">Найдено: <?php echo mysqli_num_rows($products_res); ?> шт.</div>
       </div>


       <div class="product-grid">
           <?php if (mysqli_num_rows($products_res) > 0): ?>
               <?php while($product = mysqli_fetch_assoc($products_res)): ?>
                   <div class="product-card js-tilt" data-tilt-perspective="1000" data-tilt-scale="1.02">
                       <div class="product-img">
                           <span style="font-size: 60px; opacity:0.2">📦</span>
                       </div>
                       <h3><?php echo htmlspecialchars($product['title']); ?></h3>
                       <div class="price"><?php echo number_format($product['price'], 0, '.', ' '); ?> ₽</div>
                       <button class="buy-btn" onclick="addToCart(<?php echo $product['id']; ?>, '<?php echo addslashes($product['title']); ?>', <?php echo $product['price']; ?>)">
                          В корзину
                      </button>
                   </div>
               <?php endwhile; ?>
           <?php else: ?>
               <div style="grid-column: 1/-1; text-align:center; padding: 50px; background:var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);">
                   <p style="font-size: 20px; color:var(--text-light);">В этой категории товаров пока нет.</p>
                   <a href="/" class="slide-btn">На главную</a>
               </div>
           <?php endif; ?>
       </div>
   </main>


   <footer>
       <div class="container">
           <div class="footer-grid">
               <div class="footer-col" style="flex: 2;">
                   <a href="/" class="logo">
                       <div class="logo-icon"></div> Moguta.<span class="gradient-text">Lite</span>
                   </a>
                   <p style="font-size: 15px; line-height: 1.8; color: var(--text-light); margin-top:20px;">
                       Премиальный концепт интернет-магазина, созданный для демонстрации возможностей современного PHP и CSS.
                   </p>
               </div>
               <div class="footer-col">
                   <h4>Покупателям</h4>
                   <ul>
                       <li><a href="/">Главная</a></li>
                       <li><a href="#">Доставка</a></li>
                       <li><a href="#">Гарантии</a></li>
                       <li><a href="#">Контакты</a></li>
                   </ul>
               </div>
               <div class="footer-col">
                   <h4>Каталог</h4>
                   <ul>
                       <?php foreach(array_slice($categories, 0, 4) as $cat): ?>
                           <li><a href="?category_id=<?php echo $cat['id']; ?>"><?php echo $cat['title']; ?></a></li>
                       <?php endforeach; ?>
                   </ul>
               </div>
           </div>
           <div class="copyright">
               &copy; <?php echo date('Y'); ?> Moguta Shop Concept. Разработано командой Mogut.CMS специально для обучения.
           </div>
       </div>
   </footer>


   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.1/vanilla-tilt.min.js"></script>
  
   <script>
       // Инициализация слайдера
       const swiper = new Swiper('.swiper', {
           loop: true,
           speed: 800,
           parallax: true, // Включаем параллакс эффект
           autoplay: { delay: 6000, disableOnInteraction: false },
           pagination: { el: '.swiper-pagination', clickable: true },
       });


       // Инициализация 3D наклона карточек
       VanillaTilt.init(document.querySelectorAll(".js-tilt"));
   </script>

   <script>
        new Swiper('.swiper', { loop: true, autoplay: { delay: 5000 } });
        VanillaTilt.init(document.querySelectorAll(".js-tilt"));

        // ЛОГИКА КОРЗИНЫ
        function addToCart(id, title, price) {
            let cart = getCookie('shop_cart');
            cart = cart ? JSON.parse(cart) : [];

            let found = cart.find(item => item.id === id);
            if (found) { found.count++; } 
            else { cart.push({ id: id, title: title, price: price, count: 1 }); }

            setCookie('shop_cart', JSON.stringify(cart), 30);
            updateCartCounter();

            // Анимация кнопки корзины
            const counter = document.getElementById('cart-count');
            counter.classList.add('cart-bump');
            setTimeout(() => counter.classList.remove('cart-bump'), 300);
        }

        function updateCartCounter() {
            let cart = JSON.parse(getCookie('shop_cart') || "[]");
            let total = cart.reduce((sum, item) => sum + item.count, 0);
            document.getElementById('cart-count').innerText = total;
        }

        function setCookie(name, value, days) {
            let date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            document.cookie = name + "=" + value + "; expires=" + date.toUTCString() + "; path=/";
        }

        function getCookie(name) {
            let nameEQ = name + "=";
            let ca = document.cookie.split(';');
            for (let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }
        updateCartCounter();
    </script>

</body>
</html>
<?php mysqli_close($link); ?>

Часть 4. cart.php - корзина и оформление заказа

Перейдем от «витрины» к функционалу. Чтобы собирать качественные сайты на языке php, важно также понимать что такое Cookies и для чего они нужны. Cookies хранятся в браузере пользователя и позволят нам запоминать что посетитель сайта добавил в корзину и в последствии оформить заказ с этим составом товаров.

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

Основная логика работы

Мы разделили работу с корзиной на два уровня:

Клиентская сторона (JavaScript + Cookies): Когда пользователь нажимает кнопку «В корзину», мы не перезагружаем страницу а мгновенно записываем данные о товаре в Cookies браузера в формате JSON. Это позволяет корзине существовать даже после закрытия вкладки.
Серверная сторона (PHP): Страница cart.php считывает эти куки, расшифровывает JSON и формирует таблицу товаров. При нажатии «Заказать» PHP берет данные из формы и отправляет их на почту администратора.

cart.php - скприт для обработки заказа в интенет-магазине

<?php
/**
* CART.PHP — Обработка и оформление заказа
*/


// 1. Инициализация переменных
$cart_items = [];
$total_sum = 0;
$order_success = false;


// 2. Считываем корзину из Cookies
if (isset($_COOKIE['shop_cart'])) {
   $cart_data = json_decode($_COOKIE['shop_cart'], true);
   if (is_array($cart_data)) {
       $cart_items = $cart_data;
       foreach ($cart_items as $item) {
           $total_sum += $item['price'] * $item['count'];
       }
   }
}


// 3. ОБРАБОТКА ФОРМЫ (Когда нажали "Подтвердить заказ")
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['user_name']) && !empty($cart_items)) {
  
   $name = htmlspecialchars($_POST['user_name']);
   $phone = htmlspecialchars($_POST['user_phone']);
   $admin_email = "mark-avdeev@mail.ru";
  
   // Формируем текст письма для админа
   $subject = "Новый заказ: Moguta.Lite";
   $message = "Данные клиента:\n";
   $message .= "Имя: $name\n";
   $message .= "Телефон: $phone\n\n";
   $message .= "Состав заказа:\n";
  
   foreach ($cart_items as $item) {
       $message .= "- " . $item['title'] . " (ID: ".$item['id'].") x " . $item['count'] . " шт. = " . ($item['price'] * $item['count']) . " ₽\n";
   }
  
   $message .= "\nИТОГО К ОПЛАТЕ: $total_sum ₽";
  
   // Заголовки для корректного отображения кириллицы
   $headers = "MIME-Version: 1.0" . "\r\n";
   $headers .= "Content-type:text/plain;charset=UTF-8" . "\r\n";
   $headers .= "From: no-reply@yourshop.ru" . "\r\n";


   // Отправка (на локальных серверах может имитироваться)
   mail($admin_email, $subject, $message, $headers);


   // Очищаем куки корзины (ставим время в прошлое)
   setcookie('shop_cart', '', time() - 3600, '/');
  
   // Переключаем флаг успеха
   $order_success = true;
   $cart_items = []; // Очищаем массив, чтобы таблица скрылась
}
?>


<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Оформление заказа — Moguta.Lite</title>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
  
   <style>
       :root {
           --primary: #6366f1;
           --bg: #f1f5f9;
           --text: #0f172a;
           --white: #ffffff;
           --radius: 24px;
           --transition: all 0.3s ease;
       }


       body {
           font-family: 'Inter', sans-serif;
           background: var(--bg);
           color: var(--text);
           margin: 0;
           padding: 60px 0;
           line-height: 1.5;
       }


       .container { max-width: 850px; margin: 0 auto; padding: 0 20px; }
      
       .cart-card {
           background: var(--white);
           border-radius: var(--radius);
           padding: 50px;
           box-shadow: 0 20px 50px rgba(0,0,0,0.05);
       }


       h1 { margin: 0 0 30px 0; font-size: 32px; font-weight: 800; letter-spacing: -1px; }


       /* Таблица товаров */
       .cart-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
       .cart-table th {
           text-align: left;
           color: #64748b;
           font-size: 13px;
           text-transform: uppercase;
           letter-spacing: 1px;
           padding-bottom: 15px;
           border-bottom: 1px solid #f1f5f9;
       }
       .cart-table td { padding: 20px 0; border-bottom: 1px solid #f1f5f9; }


       /* Итоговая сумма */
       .total-block { text-align: right; margin-bottom: 40px; }
       .total-label { color: #64748b; font-size: 14px; display: block; margin-bottom: 5px; }
       .total-price { font-size: 36px; font-weight: 800; color: var(--primary); }


       /* Форма заказа */
       .order-form-box {
           background: #f8fafc;
           padding: 40px;
           border-radius: 20px;
           border: 1px solid #e2e8f0;
       }
       .order-form-box h3 { margin-top: 0; margin-bottom: 25px; font-size: 20px; }


       .form-group { margin-bottom: 20px; }
       .form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #475569; }
      
       .form-control {
           width: 100%;
           padding: 15px;
           border: 1px solid #cbd5e1;
           border-radius: 12px;
           box-sizing: border-box;
           font-family: inherit;
           font-size: 16px;
           transition: var(--transition);
       }
       .form-control:focus {
           outline: none;
           border-color: var(--primary);
           box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
       }


       .btn {
           display: inline-block;
           padding: 18px 32px;
           border-radius: 14px;
           font-weight: 700;
           cursor: pointer;
           transition: var(--transition);
           text-decoration: none;
           border: none;
           text-align: center;
       }
       .btn-primary { background: var(--primary); color: white; width: 100%; font-size: 18px; }
       .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3); }


       /* Успех */
       .success-area { text-align: center; padding: 40px 0; }
       .success-icon {
           width: 80px; height: 80px; background: #ecfdf5; color: #10b981;
           border-radius: 50%; display: flex; align-items: center; justify-content: center;
           font-size: 40px; margin: 0 auto 25px;
       }


       .empty-area { text-align: center; padding: 60px 0; color: #64748b; }
   </style>
</head>
<body>


<div class="container">
   <div class="cart-card">
      
       <?php if ($order_success): ?>
           <div class="success-area">
               <div class="success-icon">✓</div>
               <h1>Заказ оформлен!</h1>
               <p style="font-size: 18px; color: #64748b; margin-bottom: 30px;">
                   Мы получили вашу заявку. Менеджер свяжется с вами в ближайшее время на указанный номер телефона.
               </p>
               <a href="index.php" class="btn btn-primary" style="width: auto;">Вернуться на главную</a>
           </div>


       <?php elseif (empty($cart_items)): ?>
           <div class="empty-area">
               <div style="font-size: 60px; margin-bottom: 20px;">🛒</div>
               <h2>Ваша корзина пуста</h2>
               <p>Похоже, вы еще ничего не выбрали.</p>
               <a href="index.php" class="btn btn-primary" style="width: auto; margin-top: 20px;">Перейти к покупкам</a>
           </div>


       <?php else: ?>
           <h1>Ваша корзина</h1>
          
           <table class="cart-table">
               <thead>
                   <tr>
                       <th>Наименование товара</th>
                       <th>Кол-во</th>
                       <th>Стоимость</th>
                   </tr>
               </thead>
               <tbody>
                   <?php foreach ($cart_items as $item): ?>
                   <tr>
                       <td style="font-weight: 600;"><?php echo htmlspecialchars($item['title']); ?></td>
                       <td><?php echo $item['count']; ?> шт.</td>
                       <td style="font-weight: 700;"><?php echo number_format($item['price'] * $item['count'], 0, '.', ' '); ?> ₽</td>
                   </tr>
                   <?php endforeach; ?>
               </tbody>
           </table>


           <div class="total-block">
               <span class="total-label">Итого к оплате</span>
               <div class="total-price"><?php echo number_format($total_sum, 0, '.', ' '); ?> ₽</div>
           </div>


           <div class="order-form-box">
               <h3>Оформление заказа</h3>
               <form method="POST" action="cart.php">
                   <div class="form-group">
                       <label>Как вас зовут?</label>
                       <input type="text" name="user_name" class="form-control" placeholder="Например: Александр" required>
                   </div>
                   <div class="form-group">
                       <label>Контактный телефон</label>
                       <input type="tel" name="user_phone" class="form-control" placeholder="+7 (___) ___-__-__" required>
                   </div>
                   <button type="submit" class="btn btn-primary">Заказать сейчас</button>
               </form>
           </div>
          
           <p style="text-align: center; margin-top: 30px;">
               <a href="index.php" style="color: #64748b; font-size: 14px;">← Вернуться в магазин</a>
           </p>
       <?php endif; ?>


   </div>
</div>


</body>
</html>

1. Обработка данных (Backend)

В начале файла мы проверяем наличие куки shop_cart. Если она есть, мы превращаем строку JSON в массив объектов PHP. При отправке формы (метод POST) скрипт формирует тело письма, в которое включается:

Имя и телефон клиента.
Перечень всех товаров из массива корзины.
Итоговая сумма заказа.

2. Интерактивная форма оформления

Мы создали HTML форму, которая фокусирует внимание пользователя на главном.

Валидация: Поля input помечены атрибутом required, что предотвращает отправку пустых заявок.
Безопасность: Данные проходят через htmlspecialchars(), чтобы избежать XSS-инъекций.

3. UX-фишки (Пользовательский опыт)

После отправки данных корзина очищается, а клиент видит подтверждение. Это стандарт для любого сайта на базе PHP. Использование Cookies вместо БД для временного хранения - самое эффективное решение для небольших проектов, так как это повышает скорость и автономность.

Пример оформления заказа на PHP

Для небольших магазинов и лендингов хранение корзины в куках - это самое эффективное решение:

Скорость: Нет лишних запросов к базе данных при каждом клике «В корзину».
Автономность: Корзина работает даже у неавторизованных пользователей.
Простота: Нам не нужно создавать отдельную таблицу carts в MySQL и следить за её очисткой от брошенных корзин.

Итог

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

Если вы ищете более сложные решения, мы приглашаем вас изучить Moguta.CMS. Она также написана на чистом PHP и является отличным примером профессиональной разработки. Также у нас есть подробная документация и сообщество всегда поможет вам, если вы решите создать свой уникальный проект!

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

Сайт на PHP - делаем простой пример интернет-магазина

Часть 1. Подготовка веб-окружения

Часть 2. Развертывание базы данных

Часть 3. index.php - главная страница

Часть 4. cart.php - корзина и оформление заказа

Основная логика работы

Итог

Комментарии (0)

Как открыть интернет-магазин

Как выбрать нишу для интернет-магазина

Выбор CMS для Интернет-магазина: Полное Руководство

Как правильно оформить интернет-магазин

Интернет-магазин для новичков

54 фз для интернет-магазинов

Стартовый набор, интернет-магазин за 39 591 !