طراحی فرم افزودن محصولات به فروشگاه اینترنتی با PHP - قسمت اول

15 شهریور 1397
php-add-product-forms

در این قسمت باید صفحه ای را طراحی کنیم که از طریق آن بتوانیم در پایگاه داده، داده ها (محصولات با تمامی فیلد های آن) را  بدون اینکه به محیط Phpmyadmin به صورت مستقیم برویم، وارد کنیم. برای این کار ابتدا فایلی به نام insert_product.php را ایجاد و آن را در فولدر admin_area قرار می دهیم. دقت کنید که در این فایل یک form باید داشته باشیم و یک جدول که با استفاده از این دو مورد ، اطلاعات را از کاربر گرفته و در پایگاه داده قرار می دهیم . بنابراین شما باید جدولی به صورت زیر ایجاد کنید.

ایجاد جدول برای ثبت اطلاعات محصول فروشگاه اینترنتی با PHP

دو مفهوم جدول (table) و form را باید از لحاظ برنامه نویسی html کاملا بلد باشید. بهتر است که مطالعاتی در این زمینه انجام دهید.

ایجاد فرم ورود محصولات به صورت استاتیک در قالب HTML

ما ابتدا صفحه insert_product را به صورت استاتیک ایجاد می کنیم و بعد با اعمال تغییرات لازم به حالت داینامیک تبدیل خواهیم کرد. برای اینکار ابتدا فایل insert_product.php را با استفاده از Notepad++ باز می کنیم و کد های زیر را در آن قرار می دهیم.

<!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" />
<head>

<form method="post" action="" enctype="multipart/form-data">
	<table  width="650" align="center">
						  
		<caption ><b>اطلاعات مربوط به محصول را در این جدول اضافه کنید</b></caption >
					  
		<tr>
			<th ><b>ویژگی های محصول</b></th >
			<th ><b>مقدار ورودی برای هر کدام از ویژگی ها</b></th >
		</tr>
					
		<tr>
			<td><b>نام محصول</b></td >
			<td><input type="text" name="product_title" size="70" required></td >
		</tr>

		<tr>
			<td><b>دسته بندی  محصول</b></td>
			<td>
			
			<select name="product_cat" required>
				<option>دسته ی مورد نظر خود را انتخاب کنید</option>
				  <option value="دوربین">دوربین</option>
				  <option value="کامپیوتر">کامپیوتر</option>
				  <option value="لپ تاب">لپ تاب</option>
			</select>
					
									
			</td >
		</tr>

					
		<tr>
			<td><b>برند محصول</b></td >
			<td>
			<select name="product_brand" required>
				<option>برند مورد نظر خود را انتخاب کنید</option>
				  <option value="پارس خزر">پارس خزر</option>
				  <option value="اچ تی سی">اچ تی سی</option>
				  <option value="شیاومی">شیاومی</option>
			</select>

			</td>
		</tr>


					
		<tr>
			<td><b>قیمت محصول</b></td >
			<td><input type="text" name="product_price" required></td >
		</tr>

					
		<tr>
			<td><b>توصیف محصول</b></td >
			<td>
				<textarea name="product_desc" required></textarea>
			</td >
		</tr>

					
		<tr>
			<td><b>عکس محصول</b></td >
			<td><input type="file" name="product_image" required></td >
		</tr>

					
		<tr>
			<td><b>کلمات کلیدی</b> </td >
			<td><input type="text" name="product_keywords" size="70" required></td >
		</tr>

								
		<tr>
			<td align="center"><input type="submit" name="submit" value="بارگذاری"></td >
			<td align="center"><input type="reset" name="reset" value="ریست کردن"></td >
		</tr>

	</table > 
</form>


</html>

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

فرم خام وارد کردن اطلاعات محصولات در PHP

همانطور که مشاهده می کنید این صفحه فاقد استایل است بنابراین حالا باید یک فولدر جدید در admin_area بسازیم و نام آن را style قرار بدهیم. سپس در فولدر style باید یک فایل با نام style.css بسازیم. به شکل زیر دقت کنید.

افزودن استایل (style.css) جهت تغییر ظاهر قالب

خب بعد از اینکه فایل style.css را ساختید باید کد های زیر را در آن قرار دهید.

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;
			}

و بعد از انجام این کار باید آدرس این استایل را به فایل insert_product.php بدهید. به همین خاطر ابتدا فایل insert_product.php را به وسیله ی notepad++ باز کنید و بین تگ head باید آدرس استایل را بدهید:

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

یعنی تگ head شما در فایل insert_product.php باید شبیه به کد زیر باشد.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style/style.css" rel="stylesheet" type="text/css" />
<head>

خب حالا اگر به آدرس http://localhost/ecommerce/admin_area/insert_product.php بروید باید تصویری شبیه به تصویر زیر را ببینید.

آموزش ساخت فروشگاه اینترنتی با php (4)

به این نکته دقت کنید که ما تگ های ورودی مربوط به دسته بندی محصول را به شکل select ایجاد کردیم، همچنین همین کار را برای برند محصول نیز انجام داده ایم. توصیه من به شما عزیزان این است که مطالعات عمیقی بر روی این تگ انجام دهید.

از طرفی دیگر عکس محصول باید از نوع ورودی file باشد که ما این کار را نیز انجام داده ایم.

همچنین همیشه توصیف های (توضیحات) محصول را باید از نوع ورودی textarea قرار دهید تا کادری برای ما نمایش داده شود و بتوانیم توضیحات محصول را در آن بنویسیم.

تبدیل قالب HTML به قالب PHP (داینامیک کردن فرم محصولات در فروشگاه اینترنتی)

پس از ساخت صفحه insert_product به صورت استاتیک، باید آن را به حالت داینامیک تبدیل کنیم.

می دانید وقتی می گوییم تبدیل از حالت استاتیک به داینامیک یعنی اینکه باید بین صفحه ای که ساخته ایم (در اینجا insert_product.php) و پایگاه داده یک رابطه برقرار کنیم.

به همین خاطر ابتدا باید در فولدر admin_area یک فایل جدید به نام db.php ایجاد کنیم و اتصال به پایگاه داده را در آن قرار داده و آنگاه این db.php را در فایل insert_product.php از طریق دستور include وارد کنیم.

خب به تصویر زیر نگاه کنید من ابتدا فایل db.php را در فولدر admin_area ساختم.

آموزش اتصال به پایگاه داده Mysql در فروشگاه اینترنتی

بعد باید کد های زیر را در فایل db.php قرار دهید.

<?php

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

و آن را save کنید. حالا فایل insert_product.php را باز کنید و فایل db.php را در آن include کنید یعنی به ابتدای آن کد زیر را اضافه کنید.

<?php 
	include('db.php');
?>

خب بعد از اینکه پایگاه داده خود را include کردیم، به سراغ تگ های select در فایل insert_product.php می رویم و آنها را تغییر می دهیم. خب ابتدا فایل insert_product.php را باز کنید و کدهای زیر را در آن بیابید.

				<option>دسته ی مورد نظر خود را انتخاب کنید</option>
				  <option value="دوربین">دوربین</option>
				  <option value="کامپیوتر">کامپیوتر</option>
				  <option value="لپ تاب">لپ تاب</option>

این کدها را حذف کنید و به جای آن کدهای زیر را قرار دهید.

              <option>دسته ی مورد نظر خود را انتخاب کنید</option>
				<?php
					$get_cat="select * from categories";
					$run_cat=@mysqli_query($con,"SET NAME utf8");
					$run_cat=@mysqli_query($con,"SET CHARACTER SET utf8");
					$run_cat=mysqli_query($con,$get_cat);
					while($row_cat=mysqli_fetch_array($run_cat))
					{
						$cat_id=$row_cat['cat_id'];
						$cat_title=$row_cat['cat_title'];
						echo"<option value='$cat_id'>$cat_title</option>";
					}
				?>

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

خب دوستان عزیز همین جا این قسمت به پایان می رسانم. امیدوارم به دقت مطالب این قسمت را مرور و تمرین کنید. در این قسمت چند نکته برجسته تر از دیگر موارد بود. لزوم یادگیری تگ های پرکاربرد <form> و نحوی ساخت جدول در html، همچنین کار با تگ select.

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

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

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

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

raha70
29 اسفند 1399
سلام وقتتون بخیر من قسمت نمایش محصولات را کدنویسی کردم.تمام داده ها رو در صفحه نشان میده جز عکس، عکس رو به صورت آیکن خراب نشون میده،وقتی رو آیکن کلیک راست میکنم و open image رو میزنم عکس رو نشون میده علت این مشکل چی میتونه باشه؟لطفا راهنمایی ام کنید

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

نیما خسروی
15 آذر 1399
سلام خدمت شما استاد عزیز آقای پکچم آموزش تون عالیه و اینکه رایگان هم منتشر شد عالی تر شده اگه می شد آموزش ویدیویی هم منتشر کنید فوق العاده میشد هرچند که همینجوری هم عالی هست باتشکر از شما

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

اشتری
31 تیر 1399
سلام خسته نباشید میخواستم از آموزش فوق العادتون تشکر کنم خیلی کامل و کاربردی توضیح دادید واقعا ازتون ممنونم

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

M.h
21 فروردین 1399
سلام لطفا کدهای ساده تری آموزش دهید واینکه این کدها فقط با Notpad اجرا میشه؟؟ با Dreamweaver اجرا نمیشه؟

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

جهانگیر پچکم
23 فروردین 1399
سلام به شما دوست عزیز من من تا آنجایی که ممکن هست، سعی کردم آسان و ساده آموزش را جلو ببرم، اما ممکن هست بعضی نکات خیلی ساده گفته نشود (من ابتدای آموزش هم عرض کردم، هدف من آموزش دستورات php نمی باشد، شما باید حداقل آشنایی با این دستورات داشته باشید). هدف این آموزش نحوی به کارگیری قواعد و دستورات php برای رسیدن به یک فروشگاه اینترنتی هست. در واقع من هدفم این هست که به شما آموزش بدهم چگونه دستورات php را کنار هم قرار بدهید تا یک پروژه را به سرانجام برسانید. در مورد اینکه "با Dreamweaver اجرا نمیشه؟" ، دوست گلم این غیر ممکن هست که اجرا نشوند، شاید باید جاهایی از کدها را تغییرات اندکی دهید که با محیط Dreamweaver سازگار شود. دقت کنید که تمام کدهایی که شما اینجا مشاهده می کنید توسط خو بنده اجرا شده است و هیچ مشکلی نداشته اند. مرسی از شما

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

Mohammad
24 خرداد 1398
Salam chera in file css mn roo zahere formm tasir nmizare ba inke linko nvshtm

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

جهانگیر پچکم
30 خرداد 1398
سلام به شما به احتمال زیاد جایی در کدنویسی اشتباهی انجام داده اید لطفا همین کدهای آموزش را مورد استفاده قرار بدید. با تشکر از شما، جهانگیر پچکم

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

هدا
14 دی 1399
درود بر شما و سپاس از آموزش خیلی خوب شما جسارتا آدرس دهی فایل css اشتباه انجام شده. به فولدر اشتباه. این آدرس دهی مربوط به فولدر admin_area هست و برای وارد شدن به فولدر مورد نظر .. ضرورری است. با تشکر

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

ali
31 فروردین 1398
با سلام این اموزش ها نسخه pdf نداره؟ برا دانلود

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

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

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

جهانگیر پچکم
18 بهمن 1397
سلام به شما دوست عزیز من سعی کردم در طول آموزش به نحوی این آموزش رو جلو ببرم که کسی که داره اونو مطالعه می کنه، به راحتی بتونه از پس هر کاری بر بیاد، مطمئنم با کمی ذوق و صلیغه شما به راحتی می تونید این بخش رو اضافه کنید. شما اگر تا انتها این مجموعه رو دنبال کنید، خیلی بهتر می تونید این کار رو انجام بدید. با تشکر از شما، جهانگیر پچکم

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

سالار
16 بهمن 1397
سلام آموزش عالیه فقظ صفخه نظردهی کمه اضاف کنید عالی میشه

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