آموزش طراحی سایت فروشگاهی با php و MySQL — ساخت فروشگاه اینترنتی در ۱۰ گام

6.51k بازدید
آخرین بروزرسانی: 29 دی 1403
پی اچ پی php
زمان مطالعه: 36 دقیقه

در این مقاله به آموزش طراحی سایت فروشگاهی با php به‌صورت گام به گام خواهیم پرداخت. مهم‌ترین قسمت یک سایت فروشگاهی، قابلیت خرید یا همان سبد خرید است. در این آموزش نحوه ایجاد سیستم سبد خرید با PHP و MySQL به صورت کامل توضیح داده می‌شود تا شما بتوانید محصولات موجود در سایت فروشگاهی خودتان را به سبد خرید اضافه کرده و سفارش ثبت کنید.

مقدمه

زمانی که صحبت از سایت فروشگاهی می شود، مهم ترین قسمت آن یعنی سبد خرید جایگاه پررنگ‌تری را به خود می گیرد. چون تنها تفاوت یک سایت فروشگاهی و سایت معمولی همین قابلیت خرید است. داشتن یک سیستم سبد خرید برای بازدیدکنندگان وب سایت، امکان می دهد محصولات را مشاهده کنند و آن‌ها را به سبد خرید اضافه کنند یعنی عملیات ثبت سفارش انجام دهند.

برای ثبت سفارشات و ذخیره کردن آن در پایگاه داده لازم است نحوه اتصال پایگاه داده با PHP را بدانیم. در این آموزش از رابط PDO برای دسترسی به پایگاه داده MySQL با PHP استفاده می کنیم. چون تعامل با پایگاه داده و دستکاری جداول با این روش بسیار آسان است. سایت فروشگاهی که ایجاد خواهیم کرد شامل ۴ محصول خواهد بود. این محصولات در اصل مثال هستند که ما به عنوان نمونه در این آموزش استفاده می کنیم. شما می توانید محصولات بیشتری را بعداً اضافه کنید.

۱- شروع کار آموزش طراحی سایت فروشگاهی با php

قبل از آموزش طراحی سایت فروشگاهی با php باید چند مرحله را انجام دهیم. حتماً می دانید برای برنامه نویسی PHP و کار با پایگاه داده MySQL احتیاج به یک وب سرور داریم. در ابتدا پیشنهاد می کنیم از شبیه ساز سرور Xamp استفاده کنید. برای نصب و استفاده از این شبیه ساز، آموزش های متنوعی وجود دارد که در این قسمت از توضیح آن اجتناب می کنیم.

نیاز‌های اولیه

در سیستم خودتان از نصب شبیه ساز سرور Xamp مطمئن باشید.
از یک IDE یا ویرایشگر کد استفاده کنید. (پیشنهاد ما VScode می‌باشد)

آنچه در آموزش طراحی سایت فروشگاهی با php یاد خواهید گرفت

طراحی قالب: صفحه اصلی، صفحه محصولات، صفحه محصول، صفحه سبد خرید، و صفحه سفارش با HTML5 و CSS3 طراحی می‌کنید و یاد خواهید گرفت که چگونه سیستم قالب PHP را با HTML پیاده سازی کنید.
درخواست‌های دریافت و ارسال: فرم‌های HTML و مدیریت درخواست داده‌ها را با PHP ایجاد می‌کنید.
پرس و جوهای آماده SQL: نحوه آماده سازی پرس و جوهای SQL را یاد می‌گیرید.
اعتبار سنجی پایه: اعتبارسنجی داده های فرم که به سرور ارسال می شوند را انجام می دهید.
مدیریت جلسه: راه اندازی جلسات و نحوه ذخیره سازی محصولات سبد خرید را یاد می گیرید.

ساختار و راه اندازی فایل

اکنون می توانید وب سرور خود را راه اندازی کنید و فایل ها و دایرکتوری های سایت فروشگاهی را ایجاد کنید. برای این منظور دستورالعمل های زیر را انجام دهید:

کنترل پنل XAMPP را باز کنید.
در کنار ماژول Apache، روی Start کلیک کنید.
در کنار ماژول MySQL، روی Start کلیک کنید.
به دایرکتوری نصب XAMPPs (C:\xampp) بروید.
دایرکتوری htdocs را باز کنید.
دایرکتوری ها و فایل های زیر را در پوشه ای مثلاً با نام Pstore ایجاد کنید:

\-- shoppingcart
|-- functions.php
|-- index.php
|-- home.php
|-- products.php
|-- product.php
|-- cart.php
|-- placeorder.php
|-- style.css
\-- imgs
|-- featured-image.jpg
|-- camera.jpg
|-- headphones.jpg
|-- wallet.jpg
|-- watch.jpg

۵ تصویر با فرمت jpg را می توانید از این لینک (+) دانلود کنید. هر فایل یا دایرکتوری شامل موارد زیر خواهد بود:

functions.php: این فایل شامل تمام توابع مورد نیاز برای سایت فروشگاهی است.
index.php: این فایل شامل الگوی اصلی (هدر، فوتر، و غیره) و مسیریابی اولیه است.
home.php: این فایل صفحه اصلی است که حاوی یک تصویر و ۴ محصول است.
products.php: این فایل برای نمایش تمام محصولات خواهد بود.
product.php: این فایل یک محصول را نمایش می دهد و حاوی فرمی است که به مشتری امکان می دهد محصول را به سبد خرید اضافه کند.
cart.php: صفحه سبد خرید که تمام محصولاتی که به سبد خرید اضافه شده اند را به همراه تعداد، قیمت کل و قیمت فی پر می کند.
placeorder.php: صفحه است که یک پیام را در هنگام ثبت سفارش برای کاربر نمایش می دهد.
style.css: شیوه نامه (CSS3) که برای سایت فروشگاهی استفاده خواهیم کرد.
imgs: فولدر یا دایرکتوری که تمام تصاویر سایت فروشگاهی (تصاویر ویژه، تصاویر محصول و غیره) در درون آن است. می توانید تصاویر متنوعی را به دلخواه قرار دهید.

همچنین اگر با مفاهیم مربوط به طراحی سایت مشکل دارید می توانید مجموعه آموزش طراحی سایت فرادرس را از لینک زیر تهیه کنید:

مجموعه آموزش طراحی سایت — کلیک کنید

۲- ایجاد پایگاه داده و تنظیم جداول

در این بخش از آموزش طراحی سایت فروشگاهی با php به سراغ پایگاه داده می رویم. در phpMyAdmin دستورالعمل های زیر را انجام دهید:

به http://localhost/phpmyadmin/ بروید.
روی تب Databases در بالا کلیک کنید.
در قسمت ایجاد پایگاه داده، shoppingcart را در کادر متنی تایپ کنید.
utf8_general_ci را به عنوان دسته بندی انتخاب کنید.
بر روی Create کلیک کنید.

حال می توانیم جدول محصولات را در پایگاه داده ایجاد کنیم. از جدول محصولات برای ذخیره محصولات با ستون های نام محصول، توضیحات، تصویر، قیمت، تعداد و تاریخ استفاده می کنیم. این محصولات را بعداً در قسمت برنامه نویسی PHP بازیابی خواهیم کرد. در ادامه روی پایگاه داده shoppingcart در پنل سمت چپ کلیک کنید و در قسمت SQL عبارت زیر را اجرا کنید:

CREATE TABLE IF NOT EXISTS `products` (
     `id` int(11) NOT NULL AUTO_INCREMENT,
     `name` varchar(200) NOT NULL,
     `desc` text NOT NULL,
     `price` decimal(7,2) NOT NULL,
     `rrp` decimal(7,2) NOT NULL DEFAULT '0.00',
     `quantity` int(11) NOT NULL,
     `img` text NOT NULL,
     `date_added` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
     PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

INSERT INTO `products` (`id`, `name`, `desc`, `price`, `rrp`, `quantity`, `img`, `date_added`) VALUES
(۱, 'ساعت دیجیتال', '<p>ساعت منحصر به فرد ساخته شده از فولاد ضد زنگ، ایده آل برای کسانی که ساعت های تعاملی را ترجیح می دهند.</p>\r\n<h3>ویژگی ها</h3>\r\n<ul>\r\n<li>تجهیز شده توسط Android با برنامه‌های داخلی.</li>\r\n<li>قابل تنظیم برای مناسب بودن بیشتر.</li>\r\n<li>دوام باتری طولانی، استفاده مداوم تا ۲ روز.</li> \r\n<li>طراحی سبک، راحتی روی مچ دست شما.</li>\r\n</ul>', '35000', '0.00', 10, 'watch.jpg', '2022-03-13 17:55:22'),
(۲, 'کیف پول چرمی', '', '۲۰۰۰۰', '۲۵۰۰۰', ۳۴, 'wallet.jpg', '2022-03-13 18:52:49'),
(۳, 'هدفون بی سیم', '', '۵۰۰۰۰', '۰.۰۰', ۲۳, 'headphones.jpg', '2022-03-13 18:47:56'),
(۴, 'دوربین دیجیتال', '', '۹۸۰۰۰', '۰.۰۰', ۷, 'camera.jpg', '2022-03-13 17:42:04');

پس از اجرای دستورات در phpMyAdmin در بخش Structure بایستی فیلدها به صورت تصویر زیر باشد:

کد دستور SQL بالا جدول محصولات را با ستون های زیر ایجاد می کند:

id: شناسه منحصر به فرد برای محصول، این به طور خودکار افزایش می یابد.
name: نام محصول.
desc: توضیحات محصول.
price: قیمت محصول.
rrp: قیمت با تخفیف ویژه، اگر محصول را حراج می کنید، قیمت حراجی را در این بخش خواهید نوشت.
date_added: تاریخی که محصول اضافه شده است.

در دستور SQL چهار نمونه محصول درج شده است که به عنوان تست از آنها استفاده می کنیم. بعداً وقتی کد را پیاده‌سازی کردیم، می‌توانید آن ها را تغییر یا حذف کنید.

۳- طراحی CSS سایت فروشگاهی

در آموزش طراحی سایت فروشگاهی با php به جای استفاده از کتابخانه Bootstrap، با CSS3 یک طراحی تمیز، واضح و مدرن ایجاد می کنیم. این طراحی شامل فایل SCSS و کد CSS طراحی واکنشگرا می باشد. شما به راحتی می توانید طرح رنگ، فونت ها، اندازه محتوا و غیره را با SCSS تغییر دهید. فایل style.css را باز کنید و کد زیر را به آن اضافه کنید:

* {
     box-sizing: border-box;
     font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
     font-size: 16px;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}
html {
     height: 100%;
}
body {
     position: relative;
     min-height: 100%;
     color: #555555;
     background-color: #FFFFFF;
     margin: 0;
     padding-bottom: 100px; /* Same height as footer */
}
h1, h2, h3, h4, h5 {
     color: #394352;
}
.content-wrapper {
     width: 1050px;
     margin: 0 auto;
     direction: rtl;
}
header {
     border-bottom: 1px solid #EEEEEE;
}
header .content-wrapper {
     display: flex;
}
header h1 {
     display: flex;
     flex-grow: 1;
     flex-basis: 0;
     font-size: 20px;
     margin: 0;
     padding: 24px 0;
}
header nav {
     display: flex;
     flex-grow: 1;
     flex-basis: 0;
     justify-content: center;
     align-items: center;
}
header nav a {
     text-decoration: none;
     color: #555555;
     padding: 10px 10px;
     margin: 0 10px;
}
header nav a:hover {
     border-bottom: 1px solid #aaa;
}
header .link-icons {
     display: flex;
     flex-grow: 1;
     flex-basis: 0;
     justify-content: flex-end;
     align-items: center;
     position: relative;
}
header .link-icons a {
     text-decoration: none;
     color: #394352;
     padding: 0 10px;
}
header .link-icons a:hover {
     color: #4e5c70;
}
header .link-icons a i {
     font-size: 18px;
}
header .link-icons a span {
     display: inline-block;
     text-align: center;
     background-color: #63748e;
     border-radius: 50%;
     color: #FFFFFF;
     font-size: 12px;
     line-height: 16px;
     width: 16px;
     height: 16px;
     font-weight: bold;
     position: absolute;
     top: 22px;
}
main .featured {
     display: flex;
     flex-direction: column;
     background-image: url(imgs/featured-image.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     height: 500px;
     align-items: center;
     justify-content: center;
     text-align: center;
}
main .featured h2 {
     display: inline-block;
     margin: 0;
     width: 1050px;
     font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
     font-size: 68px;
     color: #FFFFFF;
     padding-bottom: 10px;
}
main .featured p {
     display: inline-block;
     margin: 0;
     width: 1050px;
     font-size: 24px;
     color: #FFFFFF;
}
main .recentlyadded h2 {
     display: block;
     font-weight: normal;
     margin: 0;
     padding: 40px 0;
     font-size: 24px;
     text-align: center;
     width: 100%;
     border-bottom: 1px solid #EEEEEE;
}
main .recentlyadded .products, main .products .products-wrapper {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     padding: 40px 0 0 0;
    text-align: right;
}
main .recentlyadded .products .product, main .products .products-wrapper .product {
     display: block;
     overflow: hidden;
     text-decoration: none;
     width: 25%;
     padding-bottom: 60px;
}
main .recentlyadded .products .product img, main .products .products-wrapper .product img {
     transform: scale(1);
     transition: transform 1s;
}
main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {
     display: block;
     color: #555555;
     padding: 20px 0 2px 0;
}
main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {
     display: block;
     color: #999999;
}
main .recentlyadded .products .product .rrp, main .products .products-wrapper .product .rrp {
     color: #BBBBBB;
     text-decoration: line-through;
}
main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {
     transform: scale(1.05);
     transition: transform 1s;
}
main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {
     text-decoration: underline;
}
main > .product {
     display: flex;
     padding: 40px 0;
}
main > .product > div {
     padding-left: 15px;
}
main > .product h1 {
     font-size: 34px;
     font-weight: normal;
     margin: 0;
     padding: 20px 0 10px 0;
}
main > .product .price {
     display: block;
     font-size: 22px;
     color: #999999;
}
main > .product .rrp {
     color: #BBBBBB;
     text-decoration: line-through;
     font-size: 22px;
     padding-left: 5px;
}
main > .product form {
     display: flex;
     flex-flow: column;
     margin: 40px 0;
}
main > .product form input[type="number"] {
     width: 400px;
     padding: 10px;
     margin-bottom: 15px;
     border: 1px solid #ccc;
     color: #555555;
     border-radius: 5px;
}
main > .product form input[type="submit"] {
     background: #4e5c70;
     border: 0;
     color: #FFFFFF;
     width: 400px;
     padding: 12px 0;
     text-transform: uppercase;
     font-size: 14px;
     font-weight: bold;
     border-radius: 5px;
     cursor: pointer;
}
main > .product form input[type="submit"]:hover {
     background: #434f61;
}
main > .products h1 {
     display: block;
     font-weight: normal;
     margin: 0;
     padding: 40px 0;
     font-size: 24px;
     text-align: center;
     width: 100%;
}
main > .products .buttons {
     text-align: right;
     padding-bottom: 40px;
}
main > .products .buttons a {
     display: inline-block;
     text-decoration: none;
     margin-left: 5px;
     padding: 12px 20px;
     border: 0;
     background: #4e5c70;
     color: #FFFFFF;
     font-size: 14px;
     font-weight: bold;
     border-radius: 5px;
}
main > .products .buttons a:hover {
     background: #434f61;
}
main .cart h1 {
     display: block;
     font-weight: normal;
     margin: 0;
     padding: 40px 0;
     font-size: 24px;
     text-align: center;
     width: 100%;
}
main .cart table {
     width: 100%;
}
main .cart table thead td {
     padding: 30px 0;
     border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
     text-align: right;
}
main .cart table tbody td {
     padding: 20px 0;
     border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
     text-align: right;
}
main .cart table .img {
     width: 80px;
}
main .cart table .remove {
     color: #777777;
     font-size: 12px;
     padding-top: 3px;
}
main .cart table .remove:hover {
     text-decoration: underline;
}
main .cart table .price {
     color: #999999;
}
main .cart table a {
     text-decoration: none;
     color: #555555;
}
main .cart table input[type="number"] {
     width: 68px;
     padding: 10px;
     border: 1px solid #ccc;
     color: #555555;
     border-radius: 5px;
}
main .cart .subtotal {
     text-align: right;
     padding: 40px 0;
}
main .cart .subtotal .text {
     padding-right: 40px;
     font-size: 18px;
}
main .cart .subtotal .price {
     font-size: 18px;
     color: #999999;
}
main .cart .buttons {
     text-align: left;
     padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
     margin-left: 5px;
     padding: 12px 20px;
     border: 0;
     background: #4e5c70;
     color: #FFFFFF;
     font-size: 14px;
     font-weight: bold;
     cursor: pointer;
     border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
     background: #434f61;
}
main .placeorder h1 {
     display: block;
     font-weight: normal;
     margin: 0;
     padding: 40px 0;
     font-size: 24px;
     text-align: center;
     width: 100%;
}
main .placeorder p {
     text-align: center;
}
footer {
     position: absolute;
     bottom: 0;
     border-top: 1px solid #EEEEEE;
     padding: 20px 0;
     width: 100%;
}

این شیوه نامه یا CSSای است که ما برای آموزش طراحی سایت فروشگاهی با php استفاده خواهیم کرد.

مجموعه آموزش‌ PHP در فرادرس — کلیک کنید

۴- ایجاد فایل توابع یا functions

فایل functions.php شامل تمام توابعی است که ما می خواهیم در طراحی سایت فروشگاهی با php استفاده کنیم. این فایل شامل هدر و فوتر قالب و توابع اتصال پایگاه داده است. این فایل را باز کنید و کدهای زیر را به آن اضافه کنید:

<?php
function pdo_connect_mysql() {
    $DATABASE_HOST = 'localhost';
    $DATABASE_USER = 'root';
    $DATABASE_PASS = '';
    $DATABASE_NAME = 'shoppingcart';
    try {
    	return new PDO('mysql:host=' . $DATABASE_HOST . ';dbname=' . $DATABASE_NAME . ';charset=utf8', $DATABASE_USER, $DATABASE_PASS);
    } catch (PDOException $exception) {
    	exit('اتصال به پایگاه داده انجام نشد!');
    }
}
function template_header($title) {
echo <<<EOT
<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>$title</title>
          <link href="style.css" rel="stylesheet" type="text/css">
          <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
     </head>
     <body>
        <header>
            <div class="content-wrapper">
            <h1>طراحی سایت فروشگاهی با PHP</h1>
                <nav>
                    <a href="index.php"><b>صفحه اصلی</b></a>
                    <a href="index.php?page=products"><b>محصولات</b></a>
                </nav>
                <div class="link-icons">
                <a href="index.php?page=cart">
                    <i class="fas fa-shopping-cart"></i>
                </a>
            </div>
            </div>
        </header>
        <main>
EOT;
}
function template_footer() {
$year = date('Y');
echo <<<EOT
        </main>
        <footer>
            <div class="content-wrapper">
                <p style="text-align:center">پی استور &copy; $year</p>
            </div>
        </footer>
        <script src="script.js"></script>
    </body>
</html>
EOT;
}
?>

توابع استفاده شده در functions.php اتصال به پایگاه داده و قالب بندی صفحات را ممکن می کند. از این فایل در اکثر فایل های PHP استفاده خواهیم کرد.

۵- ایجاد فایل Index

index.php فایل اصلی ما برای دسترسی به تمام صفحات سایت خواهد بود. در این فایل مسیریابی اولیه را انجام می دهیم و از درخواست های GET برای تعیین اینکه کدام صفحه باز شود، استفاده خواهیم کرد.

الف) اتصال به پایگاه داده MySQL

در ادامه آموزش طراحی سایت فروشگاهی با php فایل index.php را باز کنید و کدهای زیر را به آن اضافه کنید:

<?php
session_start();
include 'functions.php';
$pdo = pdo_connect_mysql();
$page = isset($_GET['page']) && file_exists($_GET['page'] . '.php') ? $_GET['page'] : 'home';
include $page . '.php';
?>

ابتدا یک جلسه یا session را با تابع session_start ایجاد می کنیم. با استفاده از این دستور می‌توانیم محصولاتی را که به سبد خرید اضافه می‌شوند را ذخیره کنیم، در ادامه اسکریپت با استفاده از تابع اتصال پایگاه داده که قبلاً ایجاد کردیم، در فایل functions.php به MySQL متصل می‌شوید.

ب) مسیریابی پایه

در ادامه می توانید کد های زیر را اضافه کنید:

$page = isset($_GET['page']) && file_exists($_GET['page'] . '.php') ? $_GET['page'] : 'home';
include $page . '.php';
?>

در مسیریابی پایه بررسی می شود که آیا متغیر درخواست GET ($_GET[‘page’]) وجود دارد؟ در صورت وجود نداشتن، صفحه پیش فرض روی صفحه اصلی ست می شود و اگر وجود داشته باشد، به صفحه درخواستی منقل شود. برای مثال، اگر بخواهیم به صفحه محصولات دسترسی پیدا کنیم، می توانیم به آدرس http://localhost/Pstore/index.php?page=products برویم.

اگر در مرورگر خود به صفحه index.php بروید، صفحه خالی است، چون هنوز فایل home.php را ویرایش نکرده ایم.

۶- ایجاد صفحه اصلی Home

صفحه اصلی یا Home اولین صفحه ای خواهد بود که مشتریان خواهند دید. در آموزش طراحی سایت فروشگاهی با php، برای این صفحه، یک تصویر و متن ویژه به همراه فهرستی از ۴ محصول اضافه می‌کنیم.

الف) دریافت جزئیات محصول از پایگاه داده

فایل home.php را باز کنید و کدهای زیر را به آن اضافه کنید:

<?php
$stmt = $pdo->prepare('SELECT * FROM products ORDER BY date_added DESC LIMIT 4');
$stmt->execute();
$recently_added_products = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

کد بالا یک کوئری SQL را اجرا می کند که ۴ محصول موجود را از پایگاه داده بازیابی می کند. تنها کاری که ما باید با این کوئری انجام دهیم این است که بر اساس ستون date_added آن ها را مرتب کنیم و نتیجه را در متغیر recently_added_products$ به عنوان یک آرایه مرتبط ذخیره می کنیم.

ب) ایجاد قالب صفحه اصلی

در ادامه فایل home.php بعد از تگ <? کدهای زیر را اضافه کنید:

<?php
$stmt = $pdo->prepare('SELECT * FROM products ORDER BY date_added DESC LIMIT 4');
$stmt->execute();
$recently_added_products = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<?=template_header('صفحه اصلی')?>

<div class="featured">
    <h2>پی استور</h2>
    <p>PHP طراحی سایت فروشگاهی با</p>
</div>
<div class="recentlyadded content-wrapper">
    <h2>محصولات جدید</h2>
    <div class="products">
        <?php foreach ($recently_added_products as $product): ?>
        <a href="index.php?page=product&id=<?=$product['id']?>" class="product">
            <img src="imgs/<?=$product['img']?>" width="200" height="200" alt="<?=$product['name']?>">
            <span class="name"><?=$product['name']?></span>
            <span class="price">
             <?=$product['price']?> ﷼
             <?php if ($product['rrp'] > 0): ?>
                <span class="rrp"><?=$product['rrp']?>  ﷼</span>
                <?php endif; ?>
                 </span>
        </a>
        <?php endforeach; ?>
    </div>
</div>

<?=template_footer()?>

این کدها در home.php یک الگوی اصلی برای ما ایجاد می کند. کد بالا متغیر آرایه recently_added_products$ را تکرار می کند و برای ما نمایش می دهد. قیمت تخفیف یا RRP تنها زمانی اعمال خواهد شد که مقدار آن بیشتر از ۰ باشد.

توجه: در آموزش طراحی سایت فروشگاهی با php تمامی تصاویر محصول در دایرکتوری img قرار دارند. اگر از نمونه محصولاتی که قبلا ایجاد کردیم استفاده می کنید، باید تصاویر آن محصولات را دانلود کنید. می‌توانید پوشه این تصاویر را از قسمت پایین همین پست از باکس دانلود، دانلود کنید.

حال اگر به http://localhost/Pstore/index.php برویم، صفحه اصلی بصورت زیر قابل مشاهده است:

حتی می توانید با تعیین پارامتر صفحه (http://localhost/Pstore/index.php?page=home) به صفحه اصلی دسترسی پیدا کنید.

۷- ایجاد صفحه محصولات

صفحه محصولات جایی خواهد بود که مشتریان برای مشاهده همه محصولات مراجعه می کنند. در این پروژه ما تعداد محصولات را برای نمایش در هر صفحه طراحی می کنیم تا به مشتریان امکان دهد بین صفحات حرکت کنند. در ادامه آموزش طراحی سایت فروشگاهی با php مراحل ایجاد صفحه محصولات را یاد خواهیم گرفت.

الف) دریافت محصولات از پایگاه داده با صفحه بندی

فایل products.php را باز کنید و موارد زیر را اضافه کنید:

<?php
$num_products_on_each_page = 4;
$current_page = isset($_GET['p']) && is_numeric($_GET['p']) ? (int)$_GET['p'] : 1;

$stmt = $pdo->prepare('SELECT * FROM products ORDER BY date_added DESC LIMIT ?,?');
$stmt->bindValue(1, ($current_page - 1) * $num_products_on_each_page, PDO::PARAM_INT);
$stmt->bindValue(2, $num_products_on_each_page, PDO::PARAM_INT);
$stmt->execute();

$products = $stmt->fetchAll(PDO::FETCH_ASSOC);

برای تعیین اینکه مشتری در کدام صفحه است، می توان از درخواست GET استفاده کرد، که در URL به صورت index.php?page=products&p=1 ظاهر می شود.

ب) تعداد کل محصولات

برای داشتن تعداد محصولات در ادامه فایل products.php کد های زیر را اضافه کنید:

$total_products = $pdo->query('SELECT * FROM products')->rowCount();
?>

کد بالا تعداد کل محصولات را از جدول محصولات دریافت می کند و مشتری می تواند تعداد کل محصولات را در بالای صفحه محصولات مشاهده کند.

ج) ایجاد الگوی محصولات

برای داشتن یک الگوی مناسب در صفحه محصولات، بعد از تگ بسته شدن PHP کدهای زیر را اضافه کنید:

<?=template_header('صفحه محصولات')?>

<div class="products content-wrapper">
    <h1>محصولات ما</h1>
    <b> تعداد کل محصولات: <?=$total_products?></b>
    <div class="products-wrapper">
        <?php foreach ($products as $product): ?>
        <a href="index.php?page=product&id=<?=$product['id']?>" class="product">
            <img src="imgs/<?=$product['img']?>" width="200" height="200" alt="<?=$product['name']?>">
            <span class="name"><?=$product['name']?></span>
            <span class="price">
            <?=$product['price']?>﷼
                <?php if ($product['rrp'] > 0): ?>
                <span class="rrp"><?=$product['rrp']?>﷼</span>
                <?php endif; ?>
            </span>
        </a>
        <?php endforeach; ?>
    </div>
    <div class="buttons">
        <?php if ($current_page > 1): ?>
        <a href="index.php?page=products&p=<?=$current_page-1?>">قبلی</a>
        <?php endif; ?>
        <?php if ($total_products > ($current_page * $num_products_on_each_page) - $num_products_on_each_page + count($products)): ?>
        <a href="index.php?page=products&p=<?=$current_page+1?>">بعدی</a>
        <?php endif; ?>
    </div>
</div>

<?=template_footer()?>

حال اگر به آدرس http://localhost/Pstore/index.php?page=products برویم، باید شکل زیر را مشاهده کنید:

۸- ایجاد صفحه محصول

صفحه محصول تمام جزئیات یک محصول را نمایش می دهد. مشتریان می توانند قیمت، تصویر و توضیحات محصول را مشاهده کنند و با یک کلیک تعداد محصول را تغییر داده و به سبد خرید اضافه کنند.

الف) دریافت محصول از پایگاه داده با درخواست GET

در ادامه آموزش طراحی سایت فروشگاهی با php فایل product.php را باز کنید و کدهای زیر را اضافه کنید:

<?php
if (isset($_GET['id'])) {
    $stmt = $pdo->prepare('SELECT * FROM products WHERE id = ?');
    $stmt->execute([$_GET['id']]);
    $product = $stmt->fetch(PDO::FETCH_ASSOC);
  
    if (!$product) {
        exit('محصولی وجود ندارد!');
    }
} else {
    exit('محصولی وجود ندارد!');
}
?>

کد بالا بررسی می کند که آیا متغیر id درخواستی (درخواست GET) وجود دارد یا خیر؟ اگر id مشخص شده باشد، کد برای دریافت محصول از جدول محصولات در پایگاه داده اقدام می کند. اگر محصول در پایگاه داده وجود نداشته باشد، یک پیام “محصولی وجود ندارد!” را خروجی نمایش می دهد.

ب) ایجاد الگوی محصول

بعد از تگ بسته شدن PHP کدهای زیر را اضافه کنید:

<?=template_header('صفحه محصول')?>
<div class="product content-wrapper">
    <img src="imgs/<?=$product['img']?>" width="500" height="500" alt="<?=$product['name']?>">
    <div>
        <h1 class="name"><?=$product['name']?></h1>
        <span class="price">
            <?=$product['price']?> ﷼
            <?php if ($product['rrp'] > 0): ?>
            <span class="rrp"><?=$product['rrp']?>﷼</span>
            <?php endif; ?>
        </span>
        <form action="index.php?page=cart" method="post">
            <input type="number" name="quantity" value="1" min="1" max="<?=$product['quantity']?>" placeholder="Quantity" required>
            <input type="hidden" name="product_id" value="<?=$product['id']?>">
            <input type="submit" value="افزودن به سبد خرید">
        </form>
        <div class="description">
            <?=$product['desc']?>
        </div>
    </div>
</div>
<?=template_footer()?>

برای الگویی صفحه محصول یک فرم ایجاد می کنیم و ویژگی action به همراه روشی که برای ارسال تنظیم شده است، در صفحه سبد خرید با آدرس index.php?page=cart تنظیم می شود و محصول به سبد خرید اضافه می شود. با فیلد value، می توانیم یک مقدار حداکثر را تعیین کنیم، این مقدار به تعداد محصول بستگی دارد. شناسه یا id محصول نیز به فرم اضافه می شود، چون به این صورت است که می دانیم، مشتری کدام محصول را اضافه کرده است.

اگر به http://localhost/Pstore/index.php?page=product&id=1 بروید، باید تصویر زیر را مشاهده کنید:

اگر پارامتر id در URL را به ۴ تغییر دهید، محصول متفاوتی را نشان خوهد داد.

۹- ایجاد صفحه سبد خرید

صفحه سبد خرید جایی است که کاربر می تواند لیست محصولات اضافه شده به سبد خرید را مشاهده کند. در سبد خرید امکان حذف محصولات و به روز رسانی تعداد وجود دارد.

الف) افزودن محصول به سبد خرید

برای طراحی سبد خرید فایل cart.php را باز کنید و کدهای زیر را به آن اضافه کنید:

<?php
if (isset($_POST['product_id'], $_POST['quantity']) && is_numeric($_POST['product_id']) && is_numeric($_POST['quantity'])) {
    $product_id = (int)$_POST['product_id'];
    $quantity = (int)$_POST['quantity'];
    $stmt = $pdo->prepare('SELECT * FROM products WHERE id = ?');
    $stmt->execute([$_POST['product_id']]);
    $product = $stmt->fetch(PDO::FETCH_ASSOC);
    if ($product && $quantity > 0) {
        if (isset($_SESSION['cart']) && is_array($_SESSION['cart'])) {
            if (array_key_exists($product_id, $_SESSION['cart'])) {
                $_SESSION['cart'][$product_id] += $quantity;
            } else {
                $_SESSION['cart'][$product_id] = $quantity;
            }
        } else {
            $_SESSION['cart'] = array($product_id => $quantity);
        }
    }
    header('location: index.php?page=cart');
    exit;
}

در کد بالا از متغیرهای SESSION_$ استفاده می کنیم. از SESSION یا نشست برای به خاطر سپردن محصولات سبد خرید استفاده می کنند، برای مثال، وقتی مشتری به صفحه دیگری می‌رود، سبد خرید همچنان حاوی محصولاتی است که قبلاً اضافه شده‌اند و تا زمانی که جلسه منقضی نشده همان محصولات در سبد خرید باقی خواهند ماند. در سبد خرید، متغیر session یک آرایه مرتبط از محصولات خواهد بود و با این آرایه می توانیم چندین محصول را به سبد خرید اضافه کنیم.

ب) حذف یک محصول از سبد خرید

برای حذف یک محصول از سبد خرید، کدهای زیر را در ادامه جایگذاری کنید:

if (isset($_GET['remove']) && is_numeric($_GET['remove']) && isset($_SESSION['cart']) && isset($_SESSION['cart'][$_GET['remove']])) {
    unset($_SESSION['cart'][$_GET['remove']]);
}

در صفحه سبد خرید مشتری این امکان را خواهد داشت که یک محصول را از سبد خرید حذف کند. وقتی روی حذف کلیک می شود، می توانیم از یک درخواست GET برای تعیین اینکه کدام محصول را حذف کنیم، استفاده کنیم، به عنوان مثال، اگر محصولی با شناسه ۲ داشته باشیم، آدرس زیر آن را از سبد خرید حذف می کند: http://localhost/Pstore/index.php?page=cart&remove=2.

ج) به روز رسانی تعداد محصول

برای به روز رسانی تعداد محصول در سبد خرید کدهای زیر را اضافه کنید:

if (isset($_POST['update']) && isset($_SESSION['cart'])) {
    foreach ($_POST as $k => $v) {
        if (strpos($k, 'quantity') !== false && is_numeric($v)) {
            $id = str_replace('quantity-', '', $k);
            $quantity = (int)$v;
            if (is_numeric($id) && isset($_SESSION['cart'][$id]) && $quantity > 0) {
                $_SESSION['cart'][$id] = $quantity;
            }
        }
    }
    header('location: index.php?page=cart');
    exit;
}

کد بالا محصولات موجود در سبد خرید را تکرار می کند و مقادیر را به روز می کند تا مشتری امکان تغییر تعداد در صفحه سبد خرید را داشته باشد.

د) رسیدگی به سفارش

در ادامه کدهای زیر را اضافه کنید:

if (isset($_POST['placeorder']) && isset($_SESSION['cart']) && !empty($_SESSION['cart'])) {
    header('Location: index.php?page=placeorder');
    exit;
}

اگر کاربر بر روی دکمه ثبت سفارش کلیک کند، به صفحه اتمام سفارش هدایت خواهد شد.

ه) بازیابی جزئیات محصولات سبد خرید از پایگاه داده

کدهای زیر را در ادامه اضافه کنید:

$products_in_cart = isset($_SESSION['cart']) ? $_SESSION['cart'] : array();
$products = array();
$subtotal = 0.00;
if ($products_in_cart) {
    $array_to_question_marks = implode(',', array_fill(0, count($products_in_cart), '?'));
    $stmt = $pdo->prepare('SELECT * FROM products WHERE id IN (' . $array_to_question_marks . ')');
    $stmt->execute(array_keys($products_in_cart));
    $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
    foreach ($products as $product) {
        $subtotal += (float)$product['price'] * (int)$products_in_cart[$product['id']];
    }
}
?>

در کد بالا گفته شده اگر محصولاتی در سبد خرید وجود دارد، آن محصولات را از جدول محصولات به همراه نام ستون (نام محصول، توضیحات، تصویر و قیمت) بازیابی کنید.

و) ایجاد الگوی سبد خرید

زیر تگ بسته شدن PHP کد های زیر ار برای ایجاد الگوی سبد خرید اضافه کنید:

<?=template_header('سبد خرید')?>
<div class="cart content-wrapper">
    <h1>سبد خرید</h1>
    <form action="index.php?page=cart" method="post">
        <table>
            <thead>
                <tr>
                    <td colspan="2">محصول</td>
                    <td>قیمت</td>
                    <td>تعداد</td>
                    <td>قیمت کل</td>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($products)): ?>
                <tr>
                    <td colspan="5" style="text-align:center;">شما هیچ محصولی را در سبد خرید خود اضافه نکرده اید</td>
                </tr>
                <?php else: ?>
                <?php foreach ($products as $product): ?>
                <tr>
                    <td class="img">
                        <a href="index.php?page=product&id=<?=$product['id']?>">
                            <img src="imgs/<?=$product['img']?>" width="50" height="50" alt="<?=$product['name']?>">
                        </a>
                    </td>
                    <td>
                        <a href="index.php?page=product&id=<?=$product['id']?>"><?=$product['name']?></a>
                        <br>
                        <a href="index.php?page=cart&remove=<?=$product['id']?>" class="remove">حذف</a>
                    </td>
                    <td class="price"><?=$product['price']?>﷼</td>
                    <td class="quantity">
                        <input type="number" name="quantity-<?=$product['id']?>" value="<?=$products_in_cart[$product['id']]?>" min="1" max="<?=$product['quantity']?>" placeholder="Quantity" required>
                    </td>
                    <td class="price"><?=$product['price'] * $products_in_cart[$product['id']]?>﷼</td>
                </tr>
                <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
        <div class="subtotal">
            <span class="text">مبلغ قابل پرداخت: </span>
            <span class="price"><?=$subtotal?>﷼</span>
        </div>
        <div class="buttons">
            <input type="submit" value="بروزرسانی" name="update">
            <input type="submit" value="ثبت سفارش" name="placeorder">
        </div>
    </form>
</div>
<?=template_footer()?>

با این الگو مشتری می تواند محصولات را حذف کرده و یا تعداد درخواستی از محصول را به روز کند.

اگر چند محصول را به سبد خرید اضافه کنید و به http://localhost/Pstore/index.php?page=cart بروید، تصویر زیر را خواهید دید:

برای نشان دادن تعداد محصولات در کنار آیکون سبد خرید، باید فایل functions.php را ویرایش کنید و موارد زیر را به تابع هدر قالب اضافه کنید:

$num_items_in_cart = isset($_SESSION['cart']) ? count($_SESSION['cart']) : 0;

در ادامه در الگوی قالب به دنبال عبارت زیر بگردید:

<i class="fas fa-shopping-cart"></i>

و پس از آن کد زیر را قرار دهید:

<span>$num_items_in_cart</span>

حال مشتری می داند که همیشه چند محصول در سبد خرید خود دارد، چون در هر صفحه تعداد محصولات اضافه شده به سبد خرید در کنار آیکون بالا نشان داده می شود.

۱۰- ایجاد صفحه سفارش

این صفحه به مشتری اطلاع می دهد که سفارش او با موفقیت ثبت شده است. مشتریان باید محصولاتی را در سبد خرید خود داشته باشند و بر روی ثبت سفارش در صفحه سبد خرید کلیک کرده باشند.

الف) ایجاد الگوی سفارش

فایل placeorder.php را باز کنید و موارد زیر را اضافه کنید:

<?=template_header('ثبت سفارش')?>
<div class="placeorder content-wrapper">
    <h1>سفارش شما با موفقیت ثبت شد</h1>
    <p>با تشکر از خرید شما. از طریق ایمیل جزئیات سفارش شما ارسال خواهد شد.</p>
</div>
<?=template_footer()?>

و حالا اگر محصولی را به سبد خرید خود اضافه کنیم و روی دکمه ثبت سفارش کلیک کنیم، موارد زیر را مشاهده خواهیم کرد:

در صورت نیاز در این صفحه می توان اطلاعات تماس و آدرس را از مشتری گرفت و به درگاه بانکی متصل شد. خاطر نشان می کنیم در این آموزش هدف ما طراحی سایت فروشگاهی ساده با php بود و برای طراحی خوب باید از کدهای HTML و CSS بیشتری استفاده کرد. برای آموزش داشتن یک طراحی خوب پیشنهاد می کنیم از لینک آموزش پروژه محور اچ تی ام ال و سی اس اس HTML و CSS فرادرس دیدن کنید.

مجموعه آموزش طراحی سایت با HTML و CSS — کلیک کنید

آموزش طراحی سایت فروشگاهی با php و MySQL

در آموزش طراحی سایت فروشگاهی با php یک سیستم سبد خرید با PHP و MySQL ایجاد شد. به یاد داشته باشید که سیستم سبد خرید در طراحی سایت فروشگاهی یک اصل پایه است پس یادگیری این سیستم برای طراحی لازم و ضروری است. در صورت نیاز می توانید از سورس کد آماده طراحی سایت با php ما نیز استفاده کنید. اگر از این آموزش لذت بردید، ما را از نظرات و دیدگاه های خود مطلع کنید تا در آینده آموزش های بیشتری ارائه کنیم. موفق و پیروز باشید.

سورس کد فروشگاه اینترنتی با PHP - فروشگاه لوازم کامپیوتری

کلیک کنید

امین جلیل زاده رزین

پایه گذار و موسس وب سایت آموزشی پی استور، مدرس دانشگاه فنی و حرفه ای، برنامه نویس و تحلیل گر سیستم، پژوهشگر در حوزه الگوریتم های ابتکاری، فرا ابتکاری، یادگیری ماشین، شبکه و پایگاه داده. ایشان در زبان های برنامه نویسی متعدد، نظیر ++C، سی شارپ، PHP ،Java، متلب MATLAB و Python تسلط و سابقه تدریس فعال دارند.

مشاهده مقالات بیشتر نویسنده

مقالات مرتبط با موضوع

آموزش php پروژه محور — به همراه پروژه های آماده پی اچ پی

11 پاسخ

سارینا عبدی گفت:

۵ دی ۱۴۰۳ در ۲:۲۸ ب٫ظ

خیلی خیلی ممنون. برای من جواب داد. خیلی آموزش کامل و مفیدی هست. برای دوستانی که تازه شروع کردن پیشنهاد می کنم حتماً طبق مراحل این آموزش جلو برن

پاسخ
سجاد کوهی گفت:

۲۳ فروردین ۱۴۰۳ در ۱۰:۲۰ ق٫ظ

سلام ببخشید چجوری میتونم تصافیر محصولات رو آپلود کنم؟

پاسخ
هیرو باپیری گفت:

۲۰ آذر ۱۴۰۲ در ۷:۳۸ ب٫ظ

با عرض و خسته نباشید ممنون بابت آموزش مفیدتان اما برای من دوتا مشکل پیش امد اول اینکه در انتهای این خط دستوری را قید می کنه ($page = isset($_GET[‘page’]) && file_exists($_GET[‘page’] . ‘.php’) ? $_GET[‘page’] : ‘home’; include $page . ‘.php’; ?>) ، دوم اینکه دستوری که گفته بودید در تابع هدر قرار بدهیم تا تعداد محصولات در سبد خرید نشان داده بشود ارور میگیره میشه دلیلشو بگید هم داخل تگ هدر گذاشتمش هم در بقیه خط های تک هدر

پاسخ
حسین احمدی گفت:

۲۸ مهر ۱۴۰۲ در ۸:۴۰ ب٫ظ

سلام فایل دانلود نمیشه

پاسخ
1. فاطمه اسماعیلی گفت:
  
  ۲۹ مهر ۱۴۰۲ در ۱۲:۰۲ ب٫ظ
  
  سلام. لطفا اگر وی پی ان روشن دارید خاموش کنید و مجدد امتحان کنید.
  
  پاسخ
محمد گفت:

۱۱ مرداد ۱۴۰۲ در ۳:۳۴ ب٫ظ

با سلام ووقت بخیر آموزشتون دیدم منتهی برای محصول فیزیکی برای محصول مجازی چطور میشه واضح تر بگم یعنی من یک سری pdf و فیلم آموزشی درست کردم وقتی که کاربر مثلا روی محصول آموزش ریاضی کلیک کرد تا زمانی که پرداخت نکرده باشد اجازه دانلود کلیپ بهش داده نشود

پاسخ
1. فاطمه اسماعیلی گفت:
  
  ۱۴ مرداد ۱۴۰۲ در ۳:۵۵ ب٫ظ
  
  سلام وقت بخیر
  برای این کار پلاگین های مختلف وجود دارد یا میتوانید به کمک وردپرس سایت خود را طراحی نموده و نوع محصول خود را مجازی-دانلودی قرار دهید تا پیش از پرداخت دکمه دانلود قابل مشاهده نباشد.
  
  پاسخ
مرتضی گفت:

۱۵ اسفند ۱۴۰۱ در ۱۰:۲۸ ق٫ظ

سلام ببخشید شما کار با دیتابیس سرور سمپ هستید؟

پاسخ
1. فاطمه اسماعیلی گفت:
  
  ۱۵ اسفند ۱۴۰۱ در ۱۱:۰۶ ق٫ظ
  
  سلام. لطفا سوال خود را واضح بپرسید.
  
  پاسخ
رضایی گفت:

۳۰ آذر ۱۴۰۱ در ۰:۵۰ ق٫ظ

سلام اقای جلیل زاده کاش یه ایمیل میذاشتن برای سوالاتمون ولی بسیار عالی بود
فقط برای زیرمنو که زیر هم بیاد گزینه ها نمیشه نمیدونم چرا میشه لطفا راهنمایی کنید

پاسخ
طاها زمانی گفت:

۶ تیر ۱۴۰۱ در ۱:۳۴ ب٫ظ

ای ول … خیلی خوب و گام به گام جلو رفتید. من تمامی موارد رو جلو رفتم و جواب گرفتم.

پاسخ
ژاله پاکپور گفت:

۵ تیر ۱۴۰۱ در ۸:۱۶ ب٫ظ

با سلام .عالی بود .خیلی مفید بود ممنون

پاسخ

کد تخفیف: PR1404

با خرید اشتراک ویژه ، با هزینه بسیار کمتر به فایل های پاورپوینت دسترسی داشته باشید!