ایجاد پنل مدیریت سایت (Admin panel) با PHP - مقدمه

php-build-admin-panel

با سلام دوباره به شما عزیزان، در قسمت های گذشته در مورد پروفایل کاربر و اختیاراتی که باید به کاربر بدهیم تا بتواند رابطه خوبی با سایت برقرار کند، توضیحات مفصلی داده شد. اما در این قسمت با همدیگر به ایجاد پنل مدیریت سایت (Admin panel) خواهیم پرداخت.

پنل مدیریت سایت (Admin panel)، مانند میزفرمان سایت است و فقط باید در اختیار صاحب سایت قرار بگیرد و او را از خیلی از جزییات کدنویسی دور کند. همچنین این پنل به راحتی امکانات فراوانی در اختیار او قرار دهد.

دقیقا در وردپرس نیز همین رویکرد در نظر گرفته  شده است، به گونه ایی که اگر مدیر سایت یک برنامه نویس نباشد، باز هم می تواند به راحتی، سایت خودش را مدیریت کند. ما هم از این قسمت به بعد،به صورت مشابه ای همین رویکرد را در مورد سایتی که ایجاد کرده ایم، در نظر خواهیم گرفت.

من در ادامه تصویری برای شما عزیزان قرار می دهم که انشاالله در ادامه قصد داریم که آن را با هم بسازیم.

پنل مدیریت سایت با PHP

همانطور که در تصویر بالا مشاهده می نمایید، امکانات خاصی در اختیار مدیر سایت قرار گرفته است. امکاناتی همچون:

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

در این پنل مدیریت، مدیر سایت می تواند به دیدن مشتریان و اعضای سایت و تمام سفارش ها و پرداخت های صورت گرفته و ... بپردازد.

ایجاد فایلهای مورد نیاز برای پنل مدیریت سایت با PHP

اما برای ایجاد پنل مدیریت سایت (Admin panel) چه کاری باید انجام دهیم؟

از این قسمت به بعد در مورد تمام جزییات و نکات ریز و درشت اینکار با هم صحبت خواهیم کرد و قدم به قدم، پنل مدیریت سایت (Admin panel) را خواهیم ساخت.

برای ساخت پنل مدیریت سایت (Admin panel)، اولین قدم، ساخت یک فولدر مخصوص به نام admin_area است، نگران نباشید ما اینکار را در نخستین قسمتها انجام داده ایم، اگر به آدرس C:\wamp\www\ecommerce مراجعه نمایید، فولدر admin_area را خواهید دید، به تصویر زیر نگاه کنید.

فایل admin_area

فولدر admin_area از این به بعد، شامل تمام فایل های مورد نیاز برای مدیریت سایت می شود. حال اگر شما فولدر admin_area را باز کنید، فایلها و فولدر های زیر را باید در آن مشاهده نمایید.

فایلها و فولدر های موجود در admin_area

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

فایل image

حالا آن را از حالت فشرده خارج نمایید و در آدرس C:\wamp\www\ecommerce\admin_area (فولدر admin_area) قرار دهید، به تصویر زیر نگاه کنید.

قرار دادن فولدر image در فولدر admin_area

حالا باید فایل index.php را در آدرس C:\wamp\www\ecommerce\admin_area ایجاد نماییم، تصویر زیر را نگاه کنید.

ساختن فایل index در فولدر admin_area

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

ایجاد کردن فایل include

همانطور که در تصویر بالا مشاهده کردید، فولدر include را ایجاد کردم؛ سپس کاری که باید انجام دهیم به این صورت است که، باید چند فایل جدید را در فولدر include ایجاد کنیم که اسامی آنها به این صورت است:

  • db.php
  • Footer.php
  • Header.php
  • Right_Sidebar.php

تصویر زیر که در واقع فایل های موجود در آدرس C:\wamp\www\ecommerce\admin_area\include را به شما نشان می دهد، نگاه کنید.

فایلهای موجود در فولدر include پنل مدیریت سایت با PHP

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

در ادامه توضیح خواهم داد که در هر کدام از این فایل ها چه کدهایی را باید قرار دهید. به همین خاطر ابتدا باید فایل db.php را با استفاده از Notepad++ باز کنید و کدهای زیر را در آن قرار دهید.

<?php
	
	$con=mysqli_connect("localhost","root","","ecommerce");

	if(mysqli_connect_errno())
	{
		echo "ارتباط با پایگاه داده برقرار نیست . شماره خطا :".mysqli_connect_errno();
	}

?>

سپس آن را save کنید و در ادامه فایل Header.php را باز کنید و کدهای زیر را در آن قرار دهید.

<?php 
	session_start();
	require('include/db.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fa"  dir="rtl">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 		<title>پنل مدیریت سایت جهانگیر پچکم</title>
		<meta name="keywords" content="خرید و فروش انواع وسایل و کالای خانه" />
		<meta name="description" content="بهترین سایت طراحی شده تا اکنون" />
		<link href="styles/style.css" rel="stylesheet" type="text/css" />
		<script src="tinymce/tinymce.min.js"></script>
		<script>tinymce.init({ selector:'textarea' });</script>
	</head>
	<body>
		<div id="templatemo_container">
			
			<div id="templatemo_header">
				<img src="images/user.png"  height="120px" alt="Flower Shop" />
			</div>

حالا به سراغ فایل Right_Sidebar.php بروید و آن را باز کنید و کدهای زیر را در آن قرار دهید.

<div id="templatemo_content_right">
	
	<div class="templatemo_right_section">
		<div class="templatemo_right_section_content">
			<ul>
				
				<li><a href="../index.php" target="_blank"><h4>مشاهده سایت</h4></a></li>
				<li><a href="index.php?insert_pro"><h4>وارد کردن محصول جدید</h4></a></li>
				<li><a href="index.php?view_pro"><h4>مشاهده تمامی محصولات</h4></a></li>
				<li><a href="index.php?insert_cat"><h4>وارد کردن دسته جدید</h4></a></li>
				<li><a href="index.php?view_cats"><h4>مشاهده تمامی دسته ها</h4></a></li>
				<li><a href="index.php?insert_brand"><h4>وارد کردن برند جدید</h4></a></li>
				<li><a href="index.php?view_brands"><h4>مشاهده تمامی برند ها</h4></a></li>
				<li><a href="index.php?view_customers"><h4>مشاهده ی لیست مشتریان</h4></a></li>
				<li><a href="index.php?view_orders"><h4>مشاهده تمامی سفارش ها</h4></a></li>
				<li><a href="index.php?view_payments"><h4>مشاهده پرداخت ها</h4></a></li>
				<li><a href="index.php?logout_admin"><h4>خروج</h4></a></li>
				
			</ul>
		</div>
	</div>
	
</div>

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

رویکردی که ما در ادامه در نظر خواهیم گرفت استفاده از متغییر سراسری $_GET خواهد بود؛ که شما اگر به تصویر زیر نگاه کنید، به طور کامل متوجه خواهید شد که چه هدفی از این نوع لینک دادن داریم. در واقع با استفاده از این شگرد می توانیم در ادامه و با استفاده از متغییر سراسری $_GET، جهت و مسیر اجرای برنامه را به سمت مورد نظر خودمان تغییر دهیم.

استفاده از متغییر سراسری$_GET

حالا نوبت به فایل Footer.php می رسد، آن را باز کنید  کدهای زیر را در آن قرار دهید.

</div>
</body>
</html>

سپس به آدرس C:\wamp\www\ecommerce\admin_area\styles بروید و فایل style.css  را باز کرده و کدهای زیر را در آن قرار دهید.

/*
CSS Credite: jahangir pachkam/
*/
@font-face {
  font-family: 'b nazanin';
  src: url('../fonts/BNazanin.eot') format('eot'),  /* IE6,8 */
  url('../fonts/BNazanin.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
  url('../fonts/BNazanin.ttf') format('truetype');  /* Saf3?5, Chrome4+, FF3.5, Opera 10+ */
    font-weight: normal;
    font-style: normal;
	}
@font-face {
    font-family: 'BYekan';
    src: url('../fonts/BYekan.eot') format('eot'),
         url('../fonts/BYekan.woff') format('woff'),
         url('../fonts/BYekan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	}

body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family:BYekan;
	font-size: 11px;
	color: #fff;
	background: #fff;
}

a:link, a:visited { color: #F1A5D5; text-decoration: underline; } 
a:active, a:hover { color: #FFFF00; text-decoration:none; }

h1 {
	margin: 0px;
	padding: 10px 0 20px 0;
	font-size: 24px;
	color: #ffffff;
	font-weight: normal;
}

h2 {
	margin: 0 0 20px 0;
	padding: 10px 15px 10px 0px;
	font-size: 24px;
	color: #ffffff;
	font-weight: normal;
	background-color: #440522;
}

h3 {
	margin: 0 0 10px 0;
	padding: 5px 10px 5px 0px;
	font-size: 16px;
	color: #ffffff;
	font-weight: normal;
	background-color: #be457c;
}

h4 {
	margin: 0;
	padding: 5px 15px 5px 0px;
	font-size: 16px;
	color: #ffffff;
	font-weight: normal;
	background-color: #be457c;
}

p {
	margin: 0px;
	padding: 0 0 10px 0;
	text-align: justify;
}

.price{
	font-size:16px;
	margin-bottom: 10px;
}

.price span{
	font-size:16px;
	color: #ffffff;
}

.buynow a{
	clear: both;
	display: block;
	float: left;
	width: 100px;
	padding: 1px 0;
	margin: 0 15px 10px 0;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	color: #ffffff;
	background: #be457c;
	border-bottom: 1px solid #f285b6;
}

.cleaner {
	clear: both;
	width: 100%;
	height: 1px;
	font-size: 1px;	
}

.cleaner_with_height {
	clear: both;
	width: 100%;
	height: 30px;
	font-size: 1px;	
}

#templatemo_container{
	width: 940px;
	margin: 0 auto;
	border: 10px solid #f2d9ef;
}




/* header panel */
#templatemo_container #templatemo_header {
background: #ebbce5;
overflow: hidden;
width: 870px;
height: 110px;
padding: 15px 30px;
border: 5px solid #f8c7f2;
}
/* end of header panel */



/* content */
#templatemo_content{
	width: 940px;
	background: #811044;
}

#templatemo_content #templatemo_content_left {
	float: left;
	width: 720px;
}


#templatemo_content #templatemo_content_right {
	float: right;
	width: 220px;
}

.templatemo_right_section {
 	width: 210px;	
	border: 5px solid #f8c7f2;
	background: #ebbce5;
	
}

.templatemo_right_section_content{
 	width: 180px;
	padding: 15px;	
} 
.templatemo_right_section_content h3{
	margin-bottom: 0px;	
} 


.templatemo_right_section_content ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.templatemo_right_section_content li {
	margin: 10px 0;

}

.templatemo_right_section_content li a{
	color: #be457c;
	text-decoration: none;	
	
}

.templatemo_right_section_content li a:hover{
	color: #440522;
	text-decoration: none;
	}
/* end of content */
table, th, td 
				{
					background:#c82c74;
					margin:25px auto;
					font-family: b nazanin;
					font-size: 20px;
				}
			table, th, td 
				{
					border: 1px solid black;
					border-collapse: collapse;
				}
			th, td 
				{
					padding: 15px;
				}
			caption
			{
				margin-bottom:15px;
				color:#c82c74;
			}

سپس با انجامات اقدامات بالا، اولین قدم ها را برای ساخت پنل مدیریت سایت (Admin panel)، برداشتیم، حالا باید به سراغ فایل index.php برویم که در آدرس C:\wamp\www\ecommerce\admin_area قرار دارد و کدهای زیر را درون آن قرار دهیم.

<!-- start of Header -->
<?php	include('include/Header.php');	?>
<!-- end of Header -->				

<div id="templatemo_content">
	
	
	<!-- start of ocntent left -->
	<div id="templatemo_content_left">
		
		
		<div class="cleaner_with_height">&nbsp;</div>
	</div> 
	<!-- end of ocntent left -->
	
	<!-- start of right content -->
	<?php	include('include/Right_Sidebar.php');	?>
	<!-- end of right content -->
	
	<div class="cleaner">&nbsp;</div>
</div>

<!-- start of footer -->
<?php include('include/Footer.php');	?>
<!-- end of footer -->

حالا اگر wamp را روشن کنید و به آدرس http://localhost/ecommerce/admin_area/index.php در مرورگر خودتان مراجعه نمایید؛ باید با تصویری شبیه به تصویر زیر روبرو شوید.

پنل مدیریت سایت با PHP

همانطور که مشاهده می نمایید، فونت ما، فونت همیشگی نیست، این به این دلیل است که فولدر مخصوص فونت را به پوشه admin_area  نیاورده ایم به همین خاطر ابتدا به آدرس C:\wamp\www\ecommerce می رویم و از فولدر fonts یک کپی تهیه می کنیم، به تصویر زیر نگاه کنید.

کپی گرفتن از فولدر fonts

حالا به آدرس C:\wamp\www\ecommerce\admin_area بر می گردیم و در این مکان، copy تهیه شده را Paste می کنیم.

Paste کردن در فولدر admin_area

در انتها، فولدر fonts در میان سایر فولدر ها و فایل های موجود در admin_area قرار گرفت.

قرار گرفتن فولدر fonts در میان فایل های فولدر admin_area

حالا یکبار دیگر آدرس http://localhost/ecommerce/admin_area/index.php را در مرورگر خودتان وارد نمایید. همانگونه که در تصویر زیر مشاهده می کنید، فونت ما تغییر کرده است.

فونت تغییر کرده است.

کار دیگری که باید انجام دهیم، حذف فایل اضافه db.php از آدرس C:\wamp\www\ecommerce\admin_area می باشد، به تصویر زیر نگاه کنید.

حذف فایل db

خب دوستان عزیزم من، انشاالله که خسته نباشید، ما به انتهای این قسمت از سری آموزش های ساخت فروشگاه اینترنتی با php رسیدیم؛ همانطور که مشاهده نمودید، تمامی مقدمات و فایل های ابتدایی را برای ایجاد پنل مدیریت سایت (Admin panel) ایجاد نمودیم و همانطور که در عمل دیدید، پنل مدیریت ایجاد شد، در قسمت آینده به سراغ گزینه های موجود در سایدبار سمت راست خواهیم رفت و هر کدام را به صورت مجزا بررسی می کنیم و کدهای آنها را می نویسیم. بنابراین قسمت های آینده را حتما مطالعه بفرمایید.

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

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

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

mahla
09 آذر 1399
با سلام. برای من فایل style.css کار نمی کنه

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

mahla
09 آذر 1399
سلام. حروف را به صورت علامت سوال و رنگ ها فعال نشدن. دلیل چیه؟

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

mohammad
02 آبان 1399
من میخوام پنل ادمین ایجاد کردم همه کارای لاگینش انجام دادم فقط یه موضوعی باقی میمونه کاربر خطا میکنه میخوام ادمین پیغام خطا بده کاربر محترم به علت رعایت قوانین شما تا تاریخ فلان اخراج میشید و با php میشه نوشت وقتی کاربر محدودیتش طی اون زمان برداشته شد اونوقت حذفش کدش هست میخوام پیغام اخطار با php امکانش هست میخوام php یادبگیرم درسته سخته ولی همه چی داره اگه پاسخ بدید ازتون ممنون میشم

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

محمد
23 خرداد 1399
سلام ببخشید نمیشه باhtml پنل ساحت

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

shadi
30 اردیبهشت 1399
سلام خیلی عالی بود ممنون برای وردپرس هم میشه از همین روش انجام داد؟

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

M.h
22 فروردین 1399
باسلام اگه میشه کدهای آسون وقابل فهم بگذارین

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

جهانگیر پچکم
23 فروردین 1399
سلام به شما اگر قسمت اول را مطالعه کنید همان اولین پاراگراف ها "با سلام خدمت شما سروران گرامی برای ایجاد یک فروشگاه اینترنتی با PHP در ابتدا باید چند زبان برنامه نویسی وب را به خوبی یاد گرفته باشید یا حداقل مهارت لازم را کسب کنید تا در فهم کدها دچار مشکل نشوید. این زبانها عبارتند از php، css، html، javascript و کار با MySQL. خوشبختانه وب سایت روکسو یک مجموعه کامل از آموزش زبان PHP را به صورت رایگان در اختیار کاربران قرار داده است که برای دستیابی تمام این بخش ها کافیست به لینک زیر مراجعه کنید: https://www.roxo.ir/series/php-tutorials/ دومین مسئله داشتن یک دامنه و هاست هست که بتوانید کد هایی را که می نویسید در آنجا تست کنید. پیشنهاد من این است که ابتدا از یک محیط لوکال هاست استفاده کنید که دیگر نیازی به هزینه اضافی نداشته باشید. در مورد ایجاد یک محیط لوکال هاست هم مقاله ی “فصل ۱: مقدمه و معرفی زبان برنامه نویسی PHP https://www.roxo.ir/introduction-to-php7-xampp-and-phpstorm/” را می توانید مطالعه کنید. من با پیش فرض هایی که در بالا به آن اشاره کردم شروع به آموزش برنامه نویسی خواهم کرد. پس با من همراه باشید." دقت کردید که من به وضوح توضیح داده ام باید حداقلهایی را برای آموزش داشته باشید. اگر در هر کدام از این مهارتها ضعفی احساس می کنید به لینکهاییی که در بالا به آنها اشاره شده مراجعه نمایید. با آرزوی موفقیت برای شما، جهانگیر پچکم

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

M.H
17 اردیبهشت 1399
بله من زبانهای html و css و mysql کامل بلدم ولی php بلدنیسم واین کدها هم قابل فهم نیس

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

مرتضی براتی
15 اسفند 1398
با سلام و درود خدمت شما جناب پچکم ممنون از اموزش خوبتون به نظرتون به چه دلیل فونت رو نمیخونه در استایل؟ و اینکه اصولا تغییرات روی استایل اصلا راحت نیستن و تغییرات اعمال نمیشن براش

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

جهانگیر پچکم
02 فروردین 1399
سلام شما بعد از تغییرات سعی کنید از کلید های ترکیبی ctrl+f5 استفاده کنید. اگر باز هم مشکلی بود به من اظلاع بدید. در ضمن وقتی می خواهید فونتی رو عوض کنید حتما باید اونو به درستی در فایل css خودتون معرفی کنید. مثلا ببینید وقتی من می خوام فونت b nazanin رو به css معرفی کنم باید کدهای زیر رو توی css قرار بدم. @font-face { font-family: 'b nazanin'; src: url('fonts/BNazanin.eot') format('eot'), /* IE6,8 */ url('fonts/BNazanin.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('fonts/BNazanin.ttf') format('truetype'); /* Saf3?5, Chrome4+, FF3.5, Opera 10+ */ font-weight: normal; font-style: normal; } انشاالله موفق باشید، جهانگیر پچکم

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

ساناز
05 اسفند 1398
سلام سایت عالی داری اگر میشه اموزش ساخت سایت دانلود فیلم و موزیک هم بزاری که پنل مدیریت داشته باشه بشه پست و اهنگ و ویدئو گذاشت

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

جهانگیر پچکم
09 اسفند 1398
سلام به شما ساناز خانم عزیز انشاالله

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

ماهان حاتمی
23 آذر 1398
با سلام اگر می شود فایل ها را بذارین

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

جهانگیر پچکم
23 آذر 1398
سلام به شما دوست عزیز فایل ها در آدرس زیر قرار دارن و شما می تونید کل قالب رو از آدرس زیر تهیه کنید. https://www.roxo.ir/home/programming/php-online-shop-script با آرزوی موفقیت برای شما، جهانگیر پچکم

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

sara
12 فروردین 1400
سلام میشه درباره phpmyadmin هم توضیح بذین که باید چی نوشت

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