PHP + MYSQL Простой сайт интернет магазина своими руками за два часа

Для новичков — как совсем с нуля начать делать сайт и выводить данные из базы… Необходимы только начальные знания синтаксиса (пхп, хтмл, запросов) и два часа времени (из них у меня большую часть заняло написание этой статьи)

Шаг 1: Выбор шаблона

С помощью поисковиков легко найти готовые, похожие на нужный вам, шаблоны сайтов. Шаблон — это статичная страница с уже готовой версткой, дизайн элементами и тд. Желательно выбирать максимально годный шаблон: с адаптивной версткой, нормальной минималистичной и валидной структурой кода и тд.
Но первый можно брать любой — главное чтобы Вам нравился).

Например, для нашей дальнейшей работы мы выберем startbootstrap.com/template-overviews/shop-homepage/ и скачаем себе в локальную папку (предполагаем что установить апач/нгинкс и запустить пхп с базой вы уже смогли)

Шаг 2: index.html => index.php

Переименуем главный файл шаблона — теперь он не просто шаблон, теперь он наш будущий сайт. И начинаем магию)

Шаг 3: Первое взаимодействие с базой (меню категорий)

<div class="col-md-3">
                <p class="lead">Shop Name</p>
                <div class="list-group">
                    <a href="#" class="list-group-item">Category 1</a>
                    <a href="#" class="list-group-item">Category 2</a>
                    <a href="#" class="list-group-item">Category 3</a>
                </div>
            </div>

Заменяем на вывод из базы, по мануалу из пхп.нет, предварительно создав таблицу (совсем совсем по мануалу, прям совсем!)

CREATE TABLE IF NOT EXISTS `categories` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `title` VARCHAR(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;
 
INSERT INTO `categories` (`id`, `title`) VALUES
(1, 'категория  1'),
(2, 'категория 2');

<?php
$mysqli = mysqli_init();
if (!$mysqli) {
    die('mysqli_init завершилась провалом');
}
 
if (!$mysqli->options(MYSQLI_INIT_COMMAND, 'SET AUTOCOMMIT = 0')) {
    die('Установка MYSQLI_INIT_COMMAND завершилась провалом');
}
 
if (!$mysqli->options(MYSQLI_OPT_CONNECT_TIMEOUT, 5)) {
    die('Установка MYSQLI_OPT_CONNECT_TIMEOUT завершилась провалом');
}
 
if (!$mysqli->real_connect('localhost', 'root', '111', 'shop')) {
    die('Ошибка подключения (' . mysqli_connect_errno() . ') ' . mysqli_connect_error());
}
 
$categories = array();
if ($result = $mysqli->query('SELECT * FROM categories')) {
    while($tmp = $result->fetch_assoc()) {
        $categories[] = $tmp;
    }
    $result->close();
}
?>
<div class="col-md-3">
   <p class="lead">Мой первый магазин</p>
   <div class="list-group">
        <?php
            foreach($categories AS $category) {
                echo ' <a href="?cat=' . $category['id'] . '" class="list-group-item">' . $category['title'] . '</a>';
            }
        ?>
    </div>
</div>

Шаг 4: Список продуктов

Аналогично добавляем выборку продуктов

CREATE TABLE IF NOT EXISTS `products` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `title` VARCHAR(255) NOT NULL,
  `img` VARCHAR(255) DEFAULT NULL,
  `intro` text NOT NULL,
  `price` DECIMAL(10,0) NOT NULL,
  `reviews_count` INT(11) NOT NULL,
  `reviews_score` INT(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;
 
INSERT INTO `products` (`id`, `title`, `img`, `intro`, `price`, `reviews_count`, `reviews_score`) VALUES
(1, 'продукт 1', 'http://placehold.it/320x150', 'вступление текст блабла', '10', 6, 4),
(2, 'продукт 2', 'http://placehold.it/320x150', 'вступление 2 текст блабла', '12', 18, 5);

<?php
$products = array();
if ($result = $mysqli->query('SELECT * FROM products')) {
    while($tmp = $result->fetch_assoc()) {
        $products[] = $tmp;
    }
    $result->close();
}
?>
<div class="row">
    <?php foreach($products AS $product) {?>
        <div class="col-sm-4 col-lg-4 col-md-4">
            <div class="thumbnail">
                <img src="<?php echo $product['img'];?>" alt="">
                <div class="caption">
                    <h4 class="pull-right">$<?php echo $product['price'];?></h4>
                    <h4><?php echo $product['title'];?></h4>
                    <p><?php echo $product['intro'];?></p>
                </div>
                <div class="ratings">
                    <p class="pull-right"><?php echo $product['reviews_count'];?> отзывов</p>
                    <p>
                        <?php
                           echo str_repeat('<span class="glyphicon glyphicon-star"></span>', $product['reviews_score']);
                           echo str_repeat('<span class="glyphicon glyphicon-star-empty"></span>', 5 - $product['reviews_score']);
                        ?>
                     </p>
                 </div>
            </div>
       </div>
   <?php } ?>
</div>

Шаг 5: Список продуктов по категориям

Привязываем к базе и делаем вывод при выбранной категории

CREATE TABLE IF NOT EXISTS `categories_products` (
  `id_category` INT(11) NOT NULL,
  `id_product` INT(11) NOT NULL,
  PRIMARY KEY (`id_category`,`id_product`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `categories_products` (`id_category`, `id_product`) VALUES
(1, 1),
(1, 2),
(2, 1);

<?php
$products = array();
$cat = isset($_REQUEST['cat']) ? (int) $_REQUEST['cat'] : 0; //то что мы на меню категории выводили как ссылку
$sql = 'SELECT p.* FROM products AS p ';
if ($cat) {
   $sql .= ' INNER JOIN categories_products AS cp ON cp.id_product=p.id AND cp.id_category=' . $cat;
}
if ($result = $mysqli->query($sql)) {
    while($tmp = $result->fetch_assoc()) {
        $products[] = $tmp;
    }
    $result->close();
}
?>

Результат

<?php
$mysqli = mysqli_init();
if (!$mysqli) {
    die('mysqli_init завершилась провалом');
}
 
if (!$mysqli->options(MYSQLI_INIT_COMMAND, 'SET AUTOCOMMIT = 0')) {
    die('Установка MYSQLI_INIT_COMMAND завершилась провалом');
}
 
if (!$mysqli->options(MYSQLI_OPT_CONNECT_TIMEOUT, 5)) {
    die('Установка MYSQLI_OPT_CONNECT_TIMEOUT завершилась провалом');
}
 
if (!$mysqli->real_connect('localhost', 'root', '111', 'shop')) {
    die('Ошибка подключения (' . mysqli_connect_errno() . ') ' . mysqli_connect_error());
}
 
$categories = array();
if ($result = $mysqli->query('SELECT * FROM categories')) {
    while($tmp = $result->fetch_assoc()) {
        $categories[] = $tmp;
    }
    $result->close();
}
 
$products = array();
$cat = isset($_REQUEST['cat']) ? (int) $_REQUEST['cat'] : 0;
$sql = 'SELECT p.* FROM products AS p ';
if ($cat) {
    $sql .= ' INNER JOIN categories_products AS cp ON cp.id_product=p.id AND cp.id_category=' . $cat;
}
if ($result = $mysqli->query($sql)) {
    while($tmp = $result->fetch_assoc()) {
        $products[] = $tmp;
    }
    $result->close();
}
$mysqli->close();
?><!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Мой первый магазин</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/shop-homepage.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Start Bootstrap</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
 
    <!-- Page Content -->
    <div class="container">
 
        <div class="row">
 
            <div class="col-md-3">
                <p class="lead">Мой первый магазин</p>
                <div class="list-group">
                    <?php
                    foreach($categories AS $category) {
                        echo ' <a href="?cat=' . $category['id'] . '" class="list-group-item">' . $category['title'] . '</a>';
                    }
                    ?>
                </div>
            </div>
 
            <div class="col-md-9">
 
                <div class="row carousel-holder">
 
                    <div class="col-md-12">
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img class="slide-image" src="http://placehold.it/800x300" alt="">
                                </div>
                                <div class="item">
                                    <img class="slide-image" src="http://placehold.it/800x300" alt="">
                                </div>
                                <div class="item">
                                    <img class="slide-image" src="http://placehold.it/800x300" alt="">
                                </div>
                            </div>
                            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>
                    </div>
 
                </div>
 
                <div class="row">
                    <?php foreach($products AS $product) {?>
                        <div class="col-sm-4 col-lg-4 col-md-4">
                            <div class="thumbnail">
                                <img src="<?php echo $product['img'];?>" alt="">
                                <div class="caption">
                                    <h4 class="pull-right">$<?php echo $product['price'];?></h4>
                                    <h4><?php echo $product['title'];?></h4>
                                    <p><?php echo $product['intro'];?></p>
                                </div>
                                <div class="ratings">
                                    <p class="pull-right"><?php echo $product['reviews_count'];?> отзывов</p>
                                    <p>
                                        <?php
                                        echo str_repeat('<span class="glyphicon glyphicon-star"></span>', $product['reviews_score']);
                                        echo str_repeat('<span class="glyphicon glyphicon-star-empty"></span>', 5 - $product['reviews_score']);
                                        ?>
                                    </p>
                                </div>
                            </div>
                        </div>
 
                    <?php } ?>
                </div>
            </div>
        </div>
    </div>
    <!-- /.container -->
    <div class="container">
        <hr>
        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Your Website 2014</p>
                </div>
            </div>
        </footer>
    </div>
    <!-- /.container -->
    <!-- jQuery -->
    <script src="js/jquery.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

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

XHTML: Вы можете использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">