طراحی قالب فروشگاه اینترنتی با PHP و HTML و CSS

13 شهریور 1397
php-build-template

در این قسمت در مورد انتخاب یک قالب پیش فرض برای فروشگاه اینترنتی بعلاوه تنظیمات اولیه برای این کار می پردازیم. خب همین اول می رویم سراغ دانلود یک قالب فروشگاه اینترنتی پیش فرض که به صورت استاتیک هست و انشاالله با هم بر روی آن کار می کنیم و این قالب را به یک قالب داینامیک جذاب تبدیل خواهیم کرد.

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

باید طبق تصاویر زیر جلو برویم و آن را بر روی لوکال هاست خودمان نصب کنیم.

نصب قالب فروشگاه اینترنتی با PHP و HTML و CSS

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

آموزش نصب قالب HTML برای فروشگاه اینترنتی با PHP

بعد از آن باید فایل all-free-download.com را حذف کنیم و فایل index.html را به index.php و فایل templatemo_style.css را به style.css تغییر دهیم. تصویر زیر محتویات فایل قبل از اعمل تغییرات ما است.

آموزش تبدیل فایل HTML به PHP

تصویر زیر محتویات فایل بعد از اعمل تغییرات ما است.

آموزش تغییر قالب HTML به قالب PHP

خب حالا باید تمامی عکس هایی که در فایل images می باشد را به فایل images و دو فایل index.php و style.css موجود در فایل flower_shop_577 را به پوشه ecommerce (در جلسه قبل آن را معرفی کردیم) که در ومپ قرار دارد، منتقل کنیم.

دقت کنید که باید ابتدا فایل های index.php و style.css موجود در ecommerce را پاک کنید بعد این انتقال را انجام دهید.

خب حالا فولدر ecommerce را باز می کنیم. باید فایل style.css را به فولدر styles منتقل کنید.

ایجاد فایل CSS برای طراحی ظاهری قالب فروشگاه اینترنتی

سپس باید مسیر فایل css را به فایل html موجود اضافه کنیم. برای این کار فایل index.php را با Notepad++ باز و خط زیر را در آن پیدا کنید.

<link href="templatemo_style.css" rel="stylesheet" type="text/css" />

سپس آن را پاک کنید و کدهای زیر را به جای کد های قبلی قرار دهید.

<link href="styles/style.css" rel="stylesheet" type="text/css" />

در واقع با کد بالا آدرس جدید استایل قالب (فایل css قالب) را به قالب اضافه می کنیم که از لحاظ ظاهر به درستی کار کند. حالا کار دیگری نداریم فقط باید wamp را روشن کنید و در مرورگر خودتان http://localhost را وارد کنید.

آموزش ساخت فروشگاه اینترنتی با PHP - نصب قالب

اگر تمام موارد فوق را به درستی انجام داده باشیم، می توانیم بر روی این قالب شروع به کار کنیم.

کلیه کارهای مقدماتی را برای نصب کردن قالب استاتیک روی لوکال هاست انجام دادیم.

فقط یک نکته از جلسه قبل باید یادآوری کنم که آن منو (menu) سایت هست که جلسه قبل گفتم باید آن را تغییر دهیم.

برای این کار کافی هست که فایل index.php را با استفاده از Notepad++ باز و کدهای زیر را پیدا کنید.

<div id="templatemo_menu_panel">
        <ul>
            <li><a href="#" class="current">Home</a></li>
            <li><a href="http://www.templatemo.com" target="_parent">Features</a></li>
            <li><a href="http://www.templatemo.com/page/1" target="_parent">Gallery</a></li>
            <li><a href="http://www.templatemo.com/page/2" target="_parent">Templates</a></li>  
            <li><a href="#">About Us</a></li> 
            <li><a href="#">Contact Us</a></li>                     
        </ul> 
    </div>

این کدها را پاک کنید و به جای آن کدهای زیر را قرار دهید.

<div id="templatemo_menu_panel">
        <ul>
            <li><a href="#" class="current">خانه</a></li>
            <li><a href="#" target="_parent">همه محصولات</a></li>
            <li><a href="#" target="_parent">حساب من</a></li>
            <li><a href="#" target="_parent">خروج</a></li>  
            <li><a href="#">درباره ما</a></li> 
            <li><a href="#">تماس با ما</a></li>                     
        </ul> 
    </div>

درون کدهای بالا اگر دقت کرده باشید ما آدرس خاصی به تگ a هر کدام از li (منظورم "خانه - همه محصولات - حساب من - خروج - درباره ما - تماس با ما " هست ) ندادیم و این li ها را با آدرس "#"=href در نظر گرفتیم.

من در ادامه برای هر کدام از این تب هایی (tab) که در منو (menu) هستند، باید یک صفحه بسازم و این آدرس ها تغییر خواهد کرد.

این مطلب جهت تست است.

خب بعد از اینکار وقتی که آدرس http://localhost را رفرش کردید باید تصویر زیر برای شما به نمایش در بیاید.

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

همانطور که مشاهده می کنید منو (menu) ما تغییر کرد که من با دایره قرمز رنگ آن را به شما نمایش دادم. فقط دقت کنید که باید این قالب را راست چین کنیم که من به مرور این کار را انجام می دهم.

راست چین کردن منوهای قالب فروشگاه اینترنتی

به عنوان مثال هم اکنون این منو را باید در سمت راست قرار بدهیم. برای انجام اینکار کافی است که کد زیر را در فایل style.css پیدا کنید.

#templatemo_menu_panel ul li a{
	float: left;
	width: 110px;
	padding: 5px 0;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #ebbce5;
	border-left: 1px solid #5f3b11;	
}

و سپس ویژگی ;float: left را به ;float:right تبدیل کنید. نتیجه این تغییر را می توانید داخل تصویر زیر ببینید. منوی ما از حالت چپ چین به حالت راست چین درآمد.

راست چین کردن قالب HTML و استفاده از آن در PHP

معمولا در قسمت سایدبار (در قالبی که ما با آن کار می کنیم قسمت سمت راست) دسته بندی ها (Categories) قرار می گیرند.

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

خب دوستان عزیز داریم به پایان جلسه امروز نزدیک می شویم. در پایان باید بگویم که من برای ساخت فروشگاه از یک قالب بسیار ساده استفاده کردم چون قصد من آموزش php به شما است. اما انشاالله در آینده برای ساخت یک فروشگاه سعی کنید مباحث HTML5 و  CSS3 و JavaScript و مباحث مرتبط با Responsive و Bootstrap را به طور حرفه ای یاد بگیرید و قالب های بسیار پیشرفته تری را خلق کنید. انشاالله قسمت بعد که در مورد ساخت جداول پایگاه داده هست را دنبال کنید.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری فروشگاه اینترنتی با PHP توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما (12 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

Mm
19 اردیبهشت 1400
چرا من نمیتونم به پایگاه وصل بشم تموم کدایی که اینجا گفتین کپی کردم توروخدااااا کمکم کنید کارم خیلی گیره

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

حامد
15 آذر 1399
سلام ایا امکان استفاده از این فروشگاه در قالب وردپرس شدنیست ؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

SMB
23 مهر 1399
سلام مهندس. برای من راست چین کردم ولی تو هاستم ک رفتم راست چین نشد و همون طوری مونده چیکارکنم. من لوکال داشتم ولی الن مجبورم از هاست استفاده کنم.هر کاری هم کردم راست چین نشد.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

Negar
17 تیر 1400
سلام احتمالا تا الان مشکلتون حل شده ولی برای کسای دیگه ای که این مشکلو دارن میگم اسم فایل استایلتون در index.php رو چک کنین که حتما با اسم فایلی که تو پوشه استایله مطابقت داشته باشه من خودم اسم فایلو داخل پوشه استایل تغییر دادم ولی حواسم نبود که داخل کدا هم تغییرش بدم و راست چین نمیشد بعد وقتی چک کردم و تغییر دادم درست شد

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

مصطفی
12 مهر 1399
سلام دوستان.من فایل قالب ذخیره شده در انتها ادرس داده شده پیدا نمیکنم.ممنونم

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

صدف
28 مرداد 1399
سلام خیلی ممنون از اموزش خوبتون چطور میتونم قالبی که استفاده کردید رو دانلود کنم ممنون میشم کمکم کنید

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

جهانگیر پچکم
05 شهریور 1399
سلام به شما دوست عزیز لطفا به آدرس زیر برید تا بتونید فایل رو دانلود کنید http://s10.picofile.com/file/8406759668/flower_shop_577.zip.html انشاالله موفق باشید، جهانگیر پچکم

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

محمدرضا
11 مرداد 1399
سلام وقت بخیر چطوری باید قالب رو دانلود کنیم؟؟ میشه راهنمایی کنید

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

جهانگیر پچکم
05 شهریور 1399
سلام به شما دوست عزیز لطفا به آدرس زیر برید تا بتونید فایل رو دانلود کنید http://s10.picofile.com/file/8406759668/flower_shop_577.zip.html انشاالله موفق باشید، جهانگیر پچکم

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر
09 مرداد 1399
سلام فایل زیپ نیست؟؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

جهانگیر پچکم
05 شهریور 1399
سلام به شما دوست عزیز لطفا به آدرس زیر برید تا بتونید فایل رو دانلود کنید http://s10.picofile.com/file/8406759668/flower_shop_577.zip.html انشاالله موفق باشید، جهانگیر پچکم

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

mk
07 مرداد 1399
فایل دانلود قالب نیست از کجا باید دانلود کنم؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

جهانگیر پچکم
05 شهریور 1399
سلام به شما دوست عزیز لطفا به آدرس زیر برید تا بتونید فایل رو دانلود کنید http://s10.picofile.com/file/8406759668/flower_shop_577.zip.html انشاالله موفق باشید، جهانگیر پچکم

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

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

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

najme
29 خرداد 1399
سلام ممنون از آموزش خوب و کاملتون بعد از دانلود و نصب قالب عکس های فولدر image رو برام نشون نمیده و فقط عکسشون رو نشون میده لطفا راهنماییم کنین. تشکر

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

رسول
25 فروردین 1399
سلام اول از زحمات شما سپاسگذارم دوم اینکه دلیل این اموزش را متوجه نشدم شما در اصل یک فروشگاه طراحی می کنید. خب اینکه فروشگاه اماده مثل پرستا موجوده و امکانات بیشتری و ... پس کاربرد این اموزش چیه؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

جهانگیر پچکم
05 اردیبهشت 1399
سلام دوست گلم مرسی بایت سوال زیبایی که پرسیدید. این سوال مثل اینه که بپرسید چرا باید php رو یاد بگیریم. سیستم‌های مدیریت محتوی کار طراحی یک سایت رو برای ما آسون کردن. معروف‌ترین سیستم‌های مدیریت محتوای موجود برای زبان محبوب php عبارت‌اند از wordpress، joomla و drupal که از اون‌ها میشه در ایجاد وبسایت‌های مدیریت مطلب، وبسایت‌های فروشگاهی، وب‌سایت خبری، وبسایت‌های مدیریت تبلیغات و ... استفاده کرد. دقیقا نکته اینجا هست که پایه همه این سیستم های مدیریت محتوی php هست. اما این سیستم های مدیرت محتوی کامل نیستن و شما بعضی وقت ها به دنیال چیزی می گردید که توی این سیستمها نمی تونید اونو پیدا کنید و خودتون باید اونو کد نویسی کنید. این مجموعه برای اون افرادی هست که به دنبال خلاقیت هستن و قرار هست محدودیت ها رو کشف کنن و اونا رو حل کنن. حتی این آموزش می تونه به شما کمک کنه که یک سیستم مدیریت محتوی با توجه به نیازهای خودتون طراحی کنید. مرسی از همراهیتون.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

arsalan
27 اسفند 1398
سلام وقتتون بخیر من یک فایل db.php طبق اموزش ساختم و یک دیتا بیس هم دارم با جدول و رکورداش ولی موقعی که میخوام محصولی اضافه کنم یا برندی یا هرچیزی که به دیتابیس اضافه بشه نمیشه. و بالای صفحه هم اخطار قطع ارتباط با پایگاه داده میزنه :: (ارتباط با پایگاه داده برقرار نیست شماره خطا:0) ::: خیلی ممنون میشم کمکم کنید چون هر جارو چک کردم درسته!

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

جهانگیر پچکم
02 فروردین 1399
سلام دوست عزیزم ببینید فکر کنم مشکل 2 جا احتما داره باشه، اول خود فایل db.php و یا اینکه دوم کدی که هنگام اتصال نوشته شده. در ضمن شما حتما باید فایل db.php را حتما include کرده باشید. اگر بعد از بررسی این دو مورد بازم مشکل داشتید بفرمایید تا حل کنم. با تشکر، جهانگیر پچکم

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.