مقدمه
امروزه افراد زیادی هستند که دیگر برای خرید به جستجو در کوچه و بازار و مراکز خرید نمیروند و اکثر خریدهایشان را به صورت اینترنتی انجام میدهند. آنها ترجیح میدهند به جای اینکه مسافتی طولانی را طی کرده و چندین ساعت از وقت خود را از مغازهای به مغازه دیگر بروند، به راحتی در خانه یا محل کار، در هر زمان از شبانهروز، با گوشی از سایتهای مختلف بازدید کرده و خرید خود را انجام دهند. در این روند که تقریباً فراگیر هم شده، اگر صاحب صنف و فروشگاهی هستید برای اینکه کسب و کارتان از رونق نیفتد باید فکری بکنید!
ساخت فروشگاه اینترنتی با php و MySql رایگان روشی ساده است که میتوانید برای کسبوکار خودتان یک فروشگاه اینترنتی طراحی کنید. در این صورت شما علاوه بر اینکه به تعداد مشتریان خود میافزایید، هم نیازی به رودررویی با مشتریان مشکل پسند را ندارید و هم از چانهزنیها خلاص میشوید. حال اگر به کسبوکار مدرن علاقهمندید و به فکر افزایش سود خود هستید با صرف کمی حوصله میتوانید با ساخت فروشگاه اینترنتی با php و MySql رایگان به مقصود خود برسید.
مقدمات آموزش رایگان طراحی سایت با php
قبل از شروع ساخت فروشگاه اینترنتی با php و MySQL بهتر است با ۴ تعریف اصلی آشنا شویم:
۱) (HTML (Hyper Text Markup Language: یک زبان نشانهگذاری که برای ساختاردهی و ارائه محتوا در شبکه جهانی وب استفاده میشود.
۲) (Cascading Style Sheets) CSS: نحوهی نمایش عناصر Html را روی صفحه، کاغذ یا رسانههای دیگر توضیح میدهد.
۳) php ( Personal Hypertext Preprocessor): زبان برنامهنویسی سمت سرور بوده و بسیار محبوب است. این زبان انعطافپذیر و دارای ویژگیهای نوآورانه میباشد. php سریعترین راه موجود برای ایجاد وبسایتهای پویا با پایگاه داده است.
۴) MySQL: یک سیستم مدیریت پایگاه داده مبتنی بر زبان پرسوجوی ساختیافته (SQL) است که در برنامههای کاربردی وب استفاده میشود.
لازمه برنامهنویسی php و کار با پایگاه داده MySQL یک وب سرور است. زیرا php یک زبان سمت سرور است و برای اجرای آن نیازمند یک سرور هستیم. اما با توجه به هزینههای خرید سرور، شبیه ساز سرور نیز کار راه انداز است. انواع وب سرورها یا هان شبیه سازها وجود دارند، اما معمولاً رایج است که از وب سرور xampp استفاده کنند چراکه وب سرور xampp با یک روش ساده و آسان به شما این امکان را میدهد که یک وب سرور محلی ایجاد کنید. پس در شروع ساخت فروشگاه اینترنتی با php و MySQL، وب سرور xampp را نصب میکنیم.
آموزش نصب و راه اندازی xampp
برای نصب وب سرور xampp ابتدا وارد سایت اصلی زمپ میشویم و نسخهای را انتخاب میکنیم که با سیستم ما سازگاری داشته باشد. برای دانلود زمپ میتوانید اینجا (+) کلیک کنید. من نسخه ویندوز را برای نصب انتخاب میکنم و وارد مرحله بعد نصب میشوم.
در این مرحله پیام خوشآمد گویی ظاهر میشود که با زدن دکمه Next از این مرحله عبور میکنیم.
در این مرحله اجزای موردنیاز برای نصب به صورت پیش فرض انتخاب شدهاند در صورت تمایل هر کدام را که نیاز ندارید میتوانید حذف کنید و بعد دکمه Next را میزنیم.
میرسیم به مرحلهای که باید مشخص کنیم xampp در چه مسیری و پوشهای نصب شود که بعد از تعیین مسیر مورد نظر دکمه Next را میزنیم.
حالا زبان مورد نظر را انتخاب میکنیم و دکمه Next را میزنیم.
و باز هم دکمه Next را میزنیم.
و بعد از این قسمت نصب شروع میشود.
در مرحله بعد، باید Apache و MySQL را به صورت دستی راه اندازی کنیم که برای آن هم فقط روی دکمه Start کلیک میکنیم.
ساخت فروشگاه اینترنتی با php و MySql رایگان
خب حالا باهم یک فروشگاه مواد غذایی میسازیم. مواردی که برای این فروشگاه موادغذایی درنظر گرفتهایم عبارتنداز:
- نام اقلام مواد غذایی
- مقدار اقلام مواد غذایی
- وضعیت اقلام مواد غذایی که شامل دو مورد در انتظار خریداری و در دسترس نیست، میباشد.
- تاریخ
گام اول – اجرای شبیه ساز زمپ
کنترل پنل xampp را باز میکنیم و در سرویسهای Apache و MySQL دکمه Start را میزنیم تا راه اندازی شوند. در این قسمت از ساخت فروشگاه اینترنتی با php و MySql رایگان وارد پوشه Explorer میشویم تا پوشه xampp موجود در درایو C باز شود. البته به جای آن میتوانید به مسیر C:\xampp بروید.
در داخل پوشه xampp وارد پوشه htdocs میشویم. در این پوشه فایلهای مروبط به پروژه قرار میگیرند.
بعد از ورود به پوشه htdocs، داخل آن پوشهای برای پروژه خود باز میکنیم که من نام آن را shop نهادهام. ما تمام فایلها را در پوشه shop نگه میداریم. در داخل این پوشه، پنج فایل به نامهای (add.php ،connect.php ،delete.php ،index.php ،update.php) ایجاد میکنیم. همانطور که میدانید در php اولین فایلی که اجرا خواهد شد index.php است. یک پوشه به نام CSS نیز وجود دارد که داخل آن هم فایلی به نام style.CSS ایجاد کردهایم. فونت فارسی که استفاده کرده ایم، نیز در داخل پوشه font قرار دادهایم.
گام دوم – ایجاد پایگاه داده و جدول
در گام دوم به آدرس http://localhost/phpmyadmin میرویم. برای ایجاد پایگاه داده جدید همانطوریکه در شکل زیر مشخص شده گزینه new را میزنیم و صفحه سمت راست ظاهر میشود. بعد نام دلخواه خود را برای پایگاه داده وارد میکنیم که من shopdb را در نظر گرفتم و با زدن create پایگاه داده جدید ایجاد میشود.
در این پایگاه داده جدولی به نام shoptb با ۵ ستون درست میکنیم. این ستونها عبارتنداز Id (کلید اصلی)، Item_name، Item_Quantity، Item_status و Date. حالت افزایش خودکار برای ستون Id باید روشن باشد. طبق تصویر زیر، مقادیر و نوع داده هر فیلد را انتخاب کنید.
گام سوم – ایجاد فایل ارتباط یا connection
به گام سوم ساخت فروشگاه اینترنتی با php و MySql رایگان رسیدیم، اگر یادتان باشد در گام اول پوشهای بنام shop ایجاد کردیم و گفتیم که تمام فایلها را داخل آن نگه خواهیم داشت، حالا فایل connect.php را داخل همان پوشه ایجاد میکنیم. این صفحه برای اتصال صفحه php ما با پایگاه داده “shopdb” ساخته شده است. پس از اتصال با این پایگاه داده، شی اتصال به متغیر $con برگردانده میشود. اگر اتصال برقرار نشود، پیام “ارتباط برقرار نشد” نمایش داده میشود.
با توجه به کد mysqli_connect که در این فایل وجود دارد، نسخه php که در این فروشگاه طراحی کردهایم ۷.۳ به بالا است. بنابراین نمیتوانید از شبیه ساز زمپ نسخه قدیمی استفاده کنید.
<?php $con=mysqli_connect("localhost","root","","shopdb"); if(!$con) { die("ارتباط برقرار نشد"); } ?>
گام چهارم – طراحی صفحه اصلی
همانطور که در بالا گفتیم، در فایلهای php اولین فایلی که اجرا میشود index.php است. پس باید صفحه اصلی فروشگاه را در این فایل طراحی کنیم. اگر بخواهید این کار را انجام دهید باید کمی به زبانهای HTML و CSS تسلط داشته باشید. اگر با این دو زبان آشنایی ندارید، پیشنهاد میکنیم مطلب آموزش ساخت قالب ساده با HTML را حتماً مطالعه نمایید.
حال در ادامه تنها کافیست یک فایل index.php در داخل پوشه shop ایجاد کنید و کدهای زیر را در داخل آن قرار دهید.
<?php include("connect.php"); if (isset($_POST['btn'])) { $date=$_POST['idate']; $q="select * from shoptb where Date='$date'"; $query=mysqli_query($con,$q); } else { $q= "select * from shoptb"; $query=mysqli_query($con,$q); } ?> <HTML> <head> <meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8"> <title>فروشگاه</title> <link rel="stylesheet" href="CSS/bootstrap.min.CSS"> <link rel="stylesheet" href="CSS/style.CSS"> </head> <body> <div class="container mt-5"> <div class="row"> <div class="col-lg-8"> <h1>نمایش آیتم ها</h1><br> <a class="btn btn-info" href="add.php">اضافه کردن</a> </div> <div class="col-lg-4"> <div class="row"> <div class="col-lg-8"> <form method="post" action=""> <input type="date" class="form-control" name="idate"> </div> <div class="col-lg-4" method="post"> <input type="submit" class="btn btn-danger float-right" name="btn" value="فیلتر"> </div> </form> </div> </div> </div> <div class="row mt-4"> <?php while ($qq=mysqli_fetch_array($query)) { ?> <div class="col-lg-4"> <div class="card"> <div class="card-body"> <h5 class="card-title"><?php echo $qq['Item_name']; ?></h5> <h6 class="card-subtitle mb-2 text-muted"><?php echo $qq['Item_Quantity']; ?></h6> <?php if($qq['Item_status'] == 0) { ?> <p class="text-info">در انتظار</p> <?php } else if($qq['Item_status'] == 1) { ?> <p class="text-success">موجود</p> <?php } else { ?> <p class="text-danger">ناموجود</p> <?php } ?> <a href="delete.php?id=<?php echo $qq['Id']; ?>" class="btn btn-danger">حذف</a> <a href="update.php?id=<?php echo $qq['Id']; ?>" class="btn btn-success">ویرایش</a> </div> </div><br> </div> <?php } ?> </div> </div> </body> </HTML>
مجدداً “connect.php” را برای اتصال صفحه با پایگاه داده اضافه میکنیم. با استفاده از دستورات SQL آیتمهای موجود در پایگاه داده را فراخوانی میکنیم. از آنجایی که یک ویژگی فیلتر به صفحه اصلی اضافه کردهایم، بنابراین باید دو دستور SQL بنویسیم. دکمهای که برای فیلتر در نظر گرفتهایم دارای ویژگی name است و مقدار آن btn میباشد. پس زمانی که تاریخی برای فیلتر انتخاب شده باشد و روی دکمه فیلتر کلیک شود، دستور SQL زیر اجرا میشود.
select * from shoptb where Date='$date';
اگر فیلتری وجود نداشته باشد تمامی آیتمها نمایش داده خواهند شد. بنابراین دستور زیر اجرا میشود.
select * from shoptb";
اگر آیتمی در پایگاه داده وجود داشته باشد در صفحه اصلی نمایش داده خواهد شد و در غیر این صورت خالی خواهد بود. در این صفحه سه پیوند به نامهای اضافه کردن، حذف و ویرایش وجود دارد که به سه صفحه متفاوت (add.php ،delete.php ،update.php) منتقل میشوند. این فایلها را از قبل ایجاد کردهایم و در ادامه کدنویسی خواهیم کرد. در ادامه بیایید کدنویسی فایل استایل را انجام دهیم.
گام پنجم – ایجاد فایل استایل
در طراحی این فروشگاه، از بوت استرپ برای ظاهر سایت استفاده شده است. به همین دلیل فایل بوت استرپ را دانلود کردهایم و در داخل پوشه CSS قرار دادهایم. این فایل آماده در سطح اینترنت قابل دسترس است و میتوانید از اینجا (+) دانلود کنید. حال کدهای زیر را در داخل فایل style.CSS که ایجاد کردهاید وارد کنید.
@font-face { font-family: IRANSans; font-style:normal; font-weight:400; src: url('../font/IRANSansWeb.woff') format('woff'); } * {font-family: IRANSans;} body { font-weight: 300; background-color: beige; } h1, h2, h3, h4, h5 { font-weight: 700; } .mt-5 { text-align: right; direction: rtl; }
گام ششم – ایجاد صفحه اضافه کردن آیتم
همانطور که در بالا گفتیم، دکمهای به نام اضافه کردن وجود دارد که با کلیک بر روی آن به صفحه ایجاد محصول منتقل میشوید. برای طراحی این صفحه کدهای زیر را داخل فایل add.php وارد کنید.
<HTML> <head> <meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8"> <title>فروشگاه</title> <link rel="stylesheet" href="CSS/bootstrap.min.CSS"> <link rel="stylesheet" href="CSS/style.CSS"> </head> <body> <div class="container mt-5"> <h1>اضافه کردن مورد جدید</h1> <form action="add.php" method="POST"> <div class="form-group"> <label>نام:</label> <input type="text" class="form-control" name="iname"/> </div> <div class="form-group"> <label>تعداد:</label> <input type="text" class="form-control" name="iqty"/> </div> <div class="form-group"> <label>وضعیت:</label> <select class="form-control" name="istatus"> <option value="0" >در انتظار</option> <option value="1">موجود</option> <option value="2">ناموجود</option> </select> </div> <div class="form-group"> <label>تاریخ:</label> <input type="date" class="form-control" name="idate"> </div> <div class="form-group"> <input type="submit" value="ثبت" class="btn btn-success" name="btn"> <a class="btn btn-primary" href="index.php">بازگشت به صفحه اصلی</a> </div> </form> </div> <?php if(isset($_POST["btn"])) { include("connect.php"); $item_name=$_POST['iname']; $item_qty=$_POST['iqty']; $item_status=$_POST['istatus']; $date=$_POST['idate']; $q="insert into shoptb(Item_name,Item_Quantity,Item_status,Date)values('$item_name',$item_qty,'$item_status','$date')"; mysqli_query($con,$q); header("location:index.php"); } ?> </body> </HTML>
صفحه فوق برای این است که بتوانیم محصولات را از طریق فرم HTML در جدول “shoptb” در پایگاه داده “shopdb” که از قبل ساختهایم، درج کنیم. فرم HTML شامل مقادیر نام، تعداد، وضعیت آیتم و تاریخ است که باید توسط کاربر وارد شوند. زمانی که بر روی دکمه ثبت کلیک کنید، دستور SQL زیر اجرا میشود.
insert into shoptb(Item_name,Item_Quantity,Item_status,Date)values('$item_name',$item_qty,'$item_status','$date');
چنانچه تمامی مقادیر وارد شده باشند، پس از کلیک بر روی دکمه ثبت صفحه به index.php منتقل میشود. در غیر این صورت نیز همچنان به این صفحه منتقل خواهید شد تنها با این تفاوت که محصول جدید ایجاد نخواهد شد. همچنین یک دکمه به نام بازگشت به صفحه اصلی وجود دارد که با کلیک بر روی آن نیز به صفحه اصلی منتقل میشوید. صفحه add.php به صورت تصویر زیر خواهد بود.
گام هفتم – ایجاد صفحه ویرایش محصول
در صفحه ویرایش کاربر قادر خواهد بود اطلاعاتی که وارد کرده است ویرایش کند. برای این کار ابتدا مقادیر هر فیلد را از پایگاه داده فراخوانی میکنیم و سپس در داخل input ها نمایش میدهیم.کدهای زیر را در داخل فایل update.php وارد کنید.
<?php include("connect.php"); if(isset($_POST['btn'])) { $item_name=$_POST['iname']; $item_qty=$_POST['iqty']; $istatus=$_POST['istatus']; $date=$_POST['idate']; $id = $_GET['id']; $q= "update shoptb set Item_name='$item_name', Item_Quantity='$item_qty', Item_status='$istatus', Date='$date' where Id=$id"; $query=mysqli_query($con,$q); header('location:index.php'); } else if(isset($_GET['id'])) { $q = "SELECT * FROM shoptb WHERE Id='".$_GET['id']."'"; $query=mysqli_query($con,$q); $res= mysqli_fetch_array($query); } ?> <HTML> <head> <meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8"> <title>فروشگاه</title> <link rel="stylesheet" href="CSS/bootstrap.min.CSS"> <link rel="stylesheet" href="CSS/style.CSS"> </head> <body> <div class="container mt-5"> <h1>ویرایش آیتم</h1> <form method="post"> <div class="form-group"> <label>نام:</label> <input type="text" class="form-control" name="iname" value="<?php echo $res['Item_name'];?>"/> </div> <div class="form-group"> <label>تعداد:</label> <input type="text" class="form-control" name="iqty" value="<?php echo $res['Item_Quantity'];?>"/> </div> <div class="form-group"> <label>وضعیت:</label> <select class="form-control" name="istatus"> <?php if($res['Item_status'] == 0) { ?> <option value="0" selected>در انتظار</option> <option value="1">موجود</option> <option value="2">نا موجود</option> <?php } else if($res['Item_status'] == 1) { ?> <option value="0">در انتظار</option> <option value="1" selected>موجود</option> <option value="2">نا موجود</option> <?php } else if($res['Item_status'] == 2) { ?> <option value="0">در انتظار</option> <option value="1">موجود</option> <option value="2" selected>نا موجود</option> <?php } ?> </select> </div> <div class="form-group"> <label>تاریخ:</label> <input type="date" class="form-control" name="idate" placeholder="Date" value="<?php echo $res['Date']?>"> </div> <div class="form-group"> <input type="submit" value="بروزرسانی" name="btn" class="btn btn-success"> <a class="btn btn-primary" href="index.php">بازگشت به صفحه اصلی</a> </div> </form> </div> </body> </HTML>
برای اینکه بتوانیم دادهها را از پایگاه داده فراخوانی کنیم، از ویژگی ID که به عنوان کلید اصلی در نظر گرفتهایم استفاده خواهیم کرد. این کار توسط دستور SQL زیر انجام میشود.
SELECT * FROM shoptb WHERE Id='".$_GET['id']."';
پس از آن که مقادیر جدید را وارد کردیم و بر روی دکمه دکمه بروزرسانی کلیک کردیم، دستور SQL زیر اجرا میشود که توسط آن مقادیر جدول shoptb بروزرسانی میشوند.
update shoptb set Item_name='$item_name', Item_Quantity='$item_qty', Item_status='$istatus', Date='$date' where Id=$id;
این صفحه مشابه add.php است و به صورت زیر خواهد بود.
گام هشتم – ایجاد صفحه حذف محصول
در آخرین مرحله از ساخت فروشگاه اینترنتی با php و MySql رایگان، صفحه حذف محصول را نیز کدنویسی میکنیم. در حذف یک آیتم نیز همانند بروزرسانی، از ویژگی ID استفاده میکنیم و محصول مورد نظر را فراخوانی میکنیم. سپس با استفاده از دستور SQL آن را از پایگاه داده حذف میکنیم. کدهای زیر را در صفحه delete.php وارد کنید.
<?php include("connect.php"); $id = $_GET['id']; $q = "delete from shoptb where Id = $id "; mysqli_query($con,$q); ?> <HTML> <head> <meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8"> <title>فروشگاه</title> <link rel="stylesheet" href="CSS/bootstrap.min.CSS"> <link rel="stylesheet" href="CSS/style.CSS"> </head> <body> <div class="container mt-5"> <h1>آیتم مورد نظر حذف شد</h1><br> <a class="btn btn-primary" href="index.php">بازگشت به صفحه اصلی</a> </div> </body> </HTML>
ابتدا آیتم مورد نظر با استفاده از ID فراخوانی میشود سپس توسط دستور SQL زیر حذف میشود.
delete from shoptb where Id = $id;
در این صفحه یک پیغام “آیتم مورد نظر حذف شد” وجود دارد و همچنین دکمهای برای بازگشت به صفحه اصلی قرار دادهایم. صفحه delete.php به صورت زیر خواهد بود.
بدین ترتیب موفق شدیم یک فروشگاه با قابلیت اضافه کردن، ویرایش و حذف محصول همراه با فیلتر تاریخ با استفاده از زبانهای php و پایگاه داده MySql ایجاد کنیم. سورس کد کامل این فروشگاه همراه با پایگاه داده آن در انتهای مطلب قابل دانلود است.
سخن آخر درباره ساخت فروشگاه اینترنتی با php و MySql رایگان
در این پست پس از طی ۷ مرحله، به پایان ساخت فروشگاه اینترنتی با php و MySql رایگان رسیدیم. در دورهای زندگی میکنیم که مطمئناً اهمیت ساخت فروشگاه اینترنتی برای هر کسبوکاری بر هیچ کس پوشیده نیست. وجود آن برای رونق و کسب درآمد بیشتر آنقدر مهم است که وجود بازاریابی برای آن.
ما در این آموزش سعی کردهایم با زبانی ساده و به صورت عملی مراحل ایجاد و راهاندازی یک فروشگاه را برای شما عزیزان همراه با شکل شرح دهیم، به گونهای که هر کس با حداقل دانش کامپیوتر بتواند از عهده آن برآید. امیدواریم همراه ما قدم به قدم مسیر را آمده و در نهایت فروشگاه اینترنتی مورد نظر خود را ایجاد کرده باشید. بسیار خوشحال خواهیم شد اگر نظرات خود را درباره مطالب ساخت فروشگاه اینترنتی با php و MySql رایگان با ما درمیان بگذارید و امتیاز بدهید.
4 پاسخ
سلام بابت توضیحات کامل تان متشکرم
مثال عالی ممنون از نویسنده
سلام
بسیار ممنونم مثال ساده و جامع بوده
سلام خدمت شما
لطفا درون مطلب طریقه ساخت table رو هم نمایش دهید