درخواست های ارتباط
جستجو تنظیمات
لیست دوستان من

قسمت چهاردهم آموزش MVC در PHP

6 نظرات

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


کد زیرو بصورت زیر تغییر میدیم ( فایل register.js ):


                       .
                       .
                       .
	$(".refresh").click(function()
	{
		if($('#Register #txt_Question').val() != 'سوال امنیتی')
		{
			$('#Register #txt_Question').css("border-color" , "#c30009");
		}
		
		$("#canvas #canvasid").remove();
                       .
                       .
                       .

فقط خطهای 6 تا 9 اضافه شده مابقی تکراری هستن .


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


Image


Image


این مشکل واسه این بوجود میاد چون ما از تگهای <li> و <ul> اسنفاده کردیم و همونطور که میدونید این تگا واسه لیست بندی استفاده میشن و ما توی کدمون دایره های که به واسطه این تگا ایجاد میشد مخفی میکردیم باید فاصله ایجاد شده رو هم حذف میکردیم که یادمون رفت اینکارو انجام بدیم، پس راه حل این مشکل حذف کردن فاصله های اضافی هست .


در ابتدا توی قسمت Register# کد زیر پیدا میکنیم و حذفش میکنیم یا بصورت کامنت درش میاریم .


padding: 25px 35px;

و بجای کد بالا، کد زیرو مینویسیم :


width:540px;

تو قسمت News# هم یه خورده عرضو زیاد میکنیم :


width: 520px;

خوب حالا میایم فاصله های اضافی پاک میکنیم، کد زیر اضافه می کنیم :


#Reg_News ul	
{
	padding: 0;
}

#Register ul
{
	margin: 30px 50px 30px 0;
}

یه تغییر هم توی قسمت Reg_News# میدیم :


#Reg_News
{
	margin: 0 auto;
	width: 1200px;
	height: 700px;
	direction: rtl;
}

حالا تو قسمت Register li, #Reg_News li# ، دو خط زیر پیدا میکنیم و سپس پاکشون میکنیم :


padding: 0;
margin: 0 0 7px 0;

و بجای کدای بالا ، کد زیر مینویسیم :


margin-bottom: 7px;

Image


مشکل سایتمون برطرف شد .



اگه دقت کرده باشید زمانی با یوزر و پسورد وارد سایت میشیم و روی نام کاربری کلیک میکنیم، کاراکتر # توی URL نوشته میشه و ما اینو نمیخوایم در نتیجه واسه حل این مشکل هم در آخر کدای این تابع ()a.Username").click")$ (که توی فایل header.php نوشتیم) این خط کدو اضافه میکنیم، یعنی میخوایم تگ لینک عمل نکنه (بزارید اینجوری بگم، زمانی که ما مثلاً روی تگ لینک کلیک میکنیم انتظار داریم یه آدرس توی url نوشته بشه و اگه اول این آدرس، کاراکتر # نبود مارو به آدرسی که توی url نوشته شده هدایت کنه یعنی صفحه رو برامون باز کنه ولی با کدی که پایین نوشتیم این عمل کنسل میکنیم )


return false;

Image


یه فایل براتون میزارم که توش توابع آماده jquery هست دانلودش کنید و بزاریدش توی فولدر js، بعداً ازش استفاده میکنیم .


لینک دانلود


خوب حالا میریم سر وقت ایجاد صفحه پروفایل کاربری، در ابتدا یه کلاس واسش ایجاد مکنیم و بعدش کدای html بهمراه css مینویسیم .


یه فایل بنام profile.php توی فولدر Controllers ایجاد میکنیم و کدای زیر توش مینویسیم :


<?php

	class Profile extends controller
	{
		function __construct()
		{			
			parent::__construct();
			$this->view->Render("Profile/index");
		}
	}

خوب حالا باید یه تغییر توی کدای header.php بدیم، میخوایم زمانی که هر کاربری وارد سایت میشه و کلیک میکنه روی لینک "صفحه شخصی" که یکی زیر منوی نام کاربری هست، کاربر وارد پروفایل شخصی خودش بشه و اطلاعات مربوط به خودشو ببینه، فعلاً تمامی کارا رو انجام میدیم و یه مقادیر فرضی هم واسه پروفایل ست میکنیم تا توی جلسات بعدی اطلاعات از دیتابیس بخونیم و نمایش بدیم .


تگ MenuDropDown توی فایل header.php پیدا کنید و بصورت زیر تغییر بدید .


                     .
                     .
                     .
<div id="MenuDropDown">
    <ul>
        <li class="EditProfile"><a href="Profile<?php 
                                    echo '\\'.Session::GetUserLogin(); ?>">صفحه شخصی</a></li>
                     .
                     .
                     .

حالا باید یه فولدر بنام profile توی فولدر views ایجاد کنیم و دو تا فایل بنامهای Index.php و profile.js توش بسازیم و بعدش یه فایل دیگه بنام profile.css توی فولدر css ایجاد کنیم .


فایل Index.php باز کنید و کدای زیرو توش بنویسید .


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>پروفایل</title>

<script type="text/javascript" src="../JS/JQuery.js"></script>
<script type="text/javascript" src="../JS/jquery.tools.min.js"></script>
<script type="text/javascript" src="../Views/Profile/Profile.js"></script>

<link rel="stylesheet" type="text/css" href="../CSS/Profile.css">
</head>
<body>

	<div id="i_cover">
    	<img src="#" class="img_cover" />
    </div>
    <div id="menu_cover">
    	<ul>
        	<li class="Profile">
            	<img src="#" class="img_Profile" />
            </li>
            <li class="username">
            	<label><?php if(Session::IsLogin()) echo Session::GetUserLogin(); ?></label>
            </li>
            <li class="btn_imgCover">
            	<label>تصویر کاور</label>
            </li>
            <li class="btn_imgProfile">
            	<label>تصویر پروفایل</label>
            </li>
        </ul>
    </div>
    
    <div id="box_profile">
        <div id="_Profile">
            <ul>
                <li id="RightProfile">
                    <ul id="Sector">
                        <li class="_title">
                            <div id="NO">0</div>
                            <label>پیام های خصوصی</label>
                        </li>
                        <li class="content">
                            <ul>
                                <li class="item"><a href="#SendMassage">ارسال پیام</a></li>
                                <li class="line"></li>
                                <li class="item"><label>پیام های ارسالی : </label></li>
                                <li class="item"><label>پیام های دریافتی : </label></li> 
                                <li class="line"></li>
                                <li class="item"><a href="#FollowMassage">پیگیری پیام خصوصی</a></li>
                            </ul>                      
                        </li>         
                    </ul>
                    <ul id="Sector">
                        <li class="_title"><label>اطلاعات کاربری</label></li>
                        <li class="content">
                            <ul>
                                <li class="item"><label>امتیاز : </label></li>
                                <li class="item"><label>نوع کاربری : </label></li>
                                <li class="line"></li>
                                <li class="item"><label>تاریخ عضویت : </label></li>
                                <li class="line"></li>
                                <li class="item"><label>تاریخ و زمان آخرین فعالیت : </label></li>
                                <li class="item"><label>تاریخ و زمان آخرین بازدید : </label></li>
                            </ul>
                        </li>         
                    </ul>
                    <ul id="Sector">
                        <li class="_title"><label>تنظیمات</label></li>
                        <li class="content">
                            <ul>
                                <li class="item"><a href="#ChangePass">تغییر پسورد</a></li>
                                <li class="line"></li>
                                <li class="item"><a href="#ChangePic">ویرایش عکس شخصی</a></li>
                                <li class="item"><a href="#ChangeBlacklist">ویرایش لیست سیاه</a></li>
                            </ul>
                        </li>         
                    </ul>
                    <ul id="Sector">
                        <li class="_title">
                            <div id="NO">0</div>
                            <label>دوستان</label>
                        </li>
                        <li class="content">
                            
                        </li>         
                    </ul>
                </li>
                <li id="ContentProfile">
                    <div id="MenuProfile">
                        <ul>
                            <li id="InfoUser" class="selected">
                                <a href="#InfoUser">اطلاعات عمومی</a>
                            </li>
                            <li id="Massage">
                                <a href="#Massage">پیام ها</a>
                            </li>
                            <li id="Entries">
                                <a href="#Entries">مطالب</a>
                            </li>
                            <li id="Setting">
                                <a href="#Entries">تنظیمات</a>
                            </li>
                        </ul>
                    </div>
                    <div class="line"></div>
                    <div class="content">
                        <div class="InfoUser">
                            <ul>
                                <li id="right">
                                    <div class="box">
                                        <ul>
                                            <li class="box_title">اطلاعات عمومی</li>
                                            <li class="box_content">
                                                <ul>
                                                    <li id="name">
                                                        <label>نام : </label>&nbsp;&nbsp;
                                                        <label>سعید</label>
                                                    </li>
                                                    <li id="family">
                                                        <label>نام خانوادگی : </label>&nbsp;&nbsp;
                                                        <label>خلیفه</label>
                                                    </li>
                                                    <li id="family">
                                                        <label>جنسیت : </label>&nbsp;&nbsp;
                                                        <label>مرد</label>
                                                    </li>
                                                    <li id="family">
                                                        <label>تاریخ تولد : </label>&nbsp;&nbsp;
                                                        <label>2 اردیبهشت 1369</label>
                                                    </li>
                                                    <li id="family">
                                                        <label>سن : </label>&nbsp;&nbsp;
                                                        <label>24</label>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="box">
                                        <ul>
                                            <li class="box_title">درباره من</li>
                                            <li class="box_content">
                                                <ul>
                                                    <li id="Context">
                                                        <label>متخصص برنامه نویسی و شبکه</label>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li id="left">
                                    <div class="box">
                                        <ul>
                                            <li class="box_title">امضا</li>
                                            <li class="box_content">
                                                <ul>
                                                    <li id="Context">
                                                        <label>The Best Programming</label>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="box">
                                        <ul>
                                            <li class="box_title">آدرس</li>
                                            <li class="box_content">
                                                <ul>
                                                    <li id="country">
                                                        <label>کشور : </label>&nbsp;&nbsp;
                                                        <label>ایران</label>
                                                    </li>
                                                    <li id="province">
                                                        <label>استان : </label>&nbsp;&nbsp;
                                                        <label>فارس</label>
                                                    </li>
                                                    <li id="city">
                                                        <label>شهر : </label>&nbsp;&nbsp;
                                                        <label>شیراز</label>
                                                    </li>
                                                    <li id="DetailAddress">
                                                        <label>جزئیات آدرس : </label>&nbsp;&nbsp;
                                                        <label>---</label>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>                    
                        
                        <div class="Massage">
                            <ul>
                                <li id="right">
                                    <ul>
                                        <li id="btn_newpm">
                                            <label>پیام جدید</label>
                                        </li>
                                        <li id="inbox" class="selected">
                                            <img id="refresh_inbox" src="../Pic/refresh.png" />
                                            <a href="#inbox">پیام های دریافتی</a>
                                        </li>
                                        <li id="send">
                                            <img id="clear_pmSend" src="../Pic/download.png" />
                                            <a href="#send">پیام های ارسالی</a>                                        
                                        </li>
                                        <li id="Trash">
                                            <img id="clear_Trash" src="../Pic/download.png" />
                                            <a href="#Trash">سطل آشغال</a>
                                        </li>
                                    </ul>
                                </li>
                                <li id="left">
                                    <ul id="btn_newpm">
                                        <li id="lbl">
                                            <ul>
                                                <li>
                                                    <label>فرستنده : </label>
                                                </li>
                                                <li>
                                                    <label>گیرنده : </label>
                                                </li>
                                                <li>
                                                    <label>موضوع : </label>
                                                </li>
                                            </ul>
                                        </li>
                                        <li id="txt">
                                            <ul>
                                                <li>
                                                    <input type="text" id="txt_send" />
                                                </li>
                                                <li>
                                                    <input type="text" id="txt_recieve" />
                                                </li>
                                                <li>
                                                    <input type="text" id="txt_subject" />
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <textarea id="txtcontent" ></textarea>
                                        </li>
                                    </ul>
                                    <ul id="inbox">
                                        <li id="menu">
                                            <ul>
                                                <li><input type="checkbox" id="chk" /></li>
                                                <li><a href="#Del">حذف</a></li>                                            
                                            </ul>
                                        </li>
                                    </ul>                                
                                </li>                                
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Image


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


Image


ما هنوز واسه صفحه پروفایل استایلی ننوشتیم واسه همین هیچ استالی نداریم ولی چیزی که اینجا ایراد داره اینه که استایل header و footer هم نداریم، این بخاطر آدرس فایلهای استایل هست واسه اینکه این مشکل برطرف بشه یه متعییر ثابت تعریف میکنیم و همه جا ازش استفاده میکنیم .


یه فایل ینام define.php توی فولدر config میسازیم و کدای زیرو توش مینویسیم :


<?php

	define("path", "http://127.0.0.1/PHP-MVC/");

باید این فایل توی سایتمون لود کنیم، در نتیجه کد زیرو توی فایل index.php (توی فولدر اصلی سایت) مینویسیم .


require("Config/define.php");

خوب الان هر جا که فایل استایلی یا فایل جاوا اسکریپتی لود کردیم توی سایت، میایم بصورت زیر مینویسیم و همچنین جاهایی که از تگ لینک استفاده کردیم .


مثلاً توی header.php باید کدارو بصورت زیر تغییر بدیم : (4 خط کد زیرو واسه فهمیدن قضیه گذاشتم در ادامه کد تغییر یافته header.php میبینید )


<link rel="stylesheet" type="text/css" href="<?php echo path ?>CSS/Header.css"/>
<script type="text/javascript" src="<?php echo path ?>JS/jquery.js"></script>
<img src="<?php echo path ?>Pic/Letter.png" />
<img src="<?php echo path ?>Pic/warning.png" />

کد header.php :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="<?php echo path ?>CSS/Header.css"/>
<script type="text/javascript" src="<?php echo path ?>JS/jquery.js"></script>

<script type="text/javascript">
	$(function()
	{
		$("a.Username").click(function()
		{
			if ($("#Username #MenuDropDown").is(":visible") == false)
			{
				$("#Username #MenuDropDown").css("display","inline");
	
				$(document).click(function(e)
				{
					if(!$(e.target).is('a.Username')) 
					{
						$("#Username #MenuDropDown").css("display","none");
					}
				});
			}
			else
			{
				$("#Username #MenuDropDown").css("display","none");
			}
			
			return false;
		});		
		
	});
</script>

<!--<title>Untitled Document</title>-->
</head>

<body>
	
    <div id="WhoLogin">
    	<div>
        	<ul>
				<?php if(!Session::IsLogin()) {?>
                    <li class="Right" id="Login">
                        <a href="<?php echo path ?>Login">ورود</a>
                    </li>
                <?php } else { ?>
                    <li class="Right" id="Username">
                        <div id="MenuDropDown">
                            <ul>
                                <li class="EditProfile"><a href="<?php echo path ?>Profile<?php 
                                                            echo '\\'.Session::GetUserLogin(); ?>">صفحه شخصی</a></li>
                                <li class="Setting"><a href="<?php echo path ?>Profile#Setting">تنظیمات</a></li>
                                <li class="line"></li>
                                <li class="Exit"><a href="<?php echo path ?>Profile#Exit">خروج</a></li>
                            </ul>
                        </div>
                        <a href="<?php echo path ?>#" class="Username"><?php echo Session::GetUserLogin(); ?></a>
                    </li>
                    <li class="Right" id="Letter">
                        <div id="Num_Letter"><label class="Number">2</label></div>
                        <img src="<?php echo path ?>Pic/Letter.png" />
                    </li>
                    <li class="Right" id="Message">
                        <div id="Num_Message"><label class="Number">1</label></div>
                        <img src="<?php echo path ?>Pic/warning.png" />
                    </li>
                    <li class="Right" id="Post">
                        <a href="<?php echo path ?>Profile#">ارسال مطالب</a>
                    </li>
            	<?php } ?>
                <li class="Left">
                    <input type="text" id="txt_search" name="txt_search" value="جستجو ..." />
                </li>
        	</ul>
        </div>
    </div>
    <div id="Header">
    	
    	<div id="SingUp">
            <ul>
                <li id="title">
                    ITPro.ir
                </li>
                <?php if(!Session::IsLogin()) {?>
                    <li>
                        <input type="button" id="Btn_SingUp" value="ثبت نام" name="Btn_SingUp" />
                    </li>
                <?php } ?>
                <li id="title2">
                    <a href="http://tosinso.com">انجمن تخصصی فن آوری اطلاعات ایران</a>
                </li>
            </ul>
    	</div>
        
        <div id="MainMenu">
            <ul>
                <li>
                    <a href="<?php echo path ?>Index">خانه</a>
                </li>
                <li>
                    <a href="<?php echo path ?>#">انجمن</a>
                </li>
                <li>
                    <a href="<?php echo path ?>About">درباره</a>
                </li>
            </ul>
        </div>        
    </div>

</body>
</html>

Image


استایل این قسمت زیاد میشه (حداقل 500 خط کد میشه)، میزاریم واسه قسمت بعدی آموزش .


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


امیدوارم از این آموزش هم استفاده لازم ببرید، ITPro باشید .



نویسنده : مهدی رزمجویی


منبع : انجمن تخصصی فناوری اطلاعات ایران


هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد .


آیا این مطلب را پسندیدید؟
ردیف عنوان قیمت
1 قسمت اول آموزش MVC در PHP رایگان
2 قسمت دوم آموزش MVC در PHP رایگان
3 قسمت سوم آموزش MVC در PHP رایگان
4 قسمت چهارم آموزش MVC در PHP رایگان
5 قسمت پنجم آموزش MVC در PHP رایگان
6 قسمت ششم آموزش MVC در PHP رایگان
7 قسمت هفتم آموزش MVC در PHP رایگان
8 قسمت هشتم آموزش MVC در PHP رایگان
9 قسمت نهم آموزش MVC در PHP رایگان
10 قسمت دهم آموزش MVC در PHP رایگان
11 قسمت یازدهم آموزش MVC در PHP رایگان
12 قسمت دوازدهم آموزش MVC در PHP رایگان
13 قسمت سیزدهم آموزش MVC در PHP رایگان
14 قسمت چهاردهم آموزش MVC در PHP رایگان
  • سلام و خسته نباشید


    آموزشتون عالی بود



    من یه مشکل دارم


    من میخوام از طریق فایل index که در پوشه view قرار داره یه تابع از فایل index در پوشه controller رو صدا بزنم


    این کد رو نوشتم


    $index = new index;
    $index -> test();
    

    ولی میوفته تو حلقه نامحدود


    اومدم اون تابع رو استاتیک تعریف کردم اینجوری صداش زدم


    index::test();
    

    چون از $this داخل تابع استفاده کردم ارور میده


    چطوری اون تابع رو صدا بزنم؟


    لطفا راهنمایی کنید


    ممنون


  • معمولا وقتی در صفحه ویو میخواید کاری انجام بشه، یا یک فرمی هست که خوب توی action اون فرم آدرس کنترولرتون رو میدید، یا یک منو دارید که لینک میخوره به کنترلر



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


    میتونید اون تابع رو توی index اصلی (خارج از پوشه ویو) تعریف کنید و بقیه جاها بصورت ساده صداش بزنید، مثلا اگر تابع تبدیل تاریخ (datechange) رو توی index تعریف کنیم میتونیم توی هر صفحه view که بودیم اینطوری صداش بزنیم


    <?php datechange(); ?>
    
  • سلام


    آموزشتون خیلی خوبه عالیه اگه همین آموزشو ادامه بدید و قطع نشه خیلی ممنونتون میشم


    منتظر ادامه آموزشاتون هستم


  • سلام اقای رزمجو خسته نباشید


    میخواستم بپرسم این قسمت آخر آموزش بود و به طور کامل مبحث MVC در PHP رو تمام کردید؟


    ممنونم


  • سلام...


    آقا وااااقعا حیف نیست این آموزش رو شروع کردین و به اتمام نرسوندین؟؟


    خیلی خوب پیش رفتین.....


    اگه کسی هست که میتونه ادامه بده آموزش این آقارو خواهشن دست بگیره تاپیکو.. ممنون بابت زحماتتون.


  • سلام ، این سایت در مسایل کامپیوتر یکی از معدود سایت های خوب وبی نظیر است اما نمی خواهم این ناتمام کردن آموزش روبه حساب سایت بزارم و میزارم روی مشکلات شخصی که ممکن است برای هر آدمی پیش بیاد.


    پس از مدیران خواهش میکنم که این اموزش خوب را به پایان برسونید.


    انشاءالله تا قله های موفقیت با itpro


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

arrow