در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم

با سلام به تمامی دوستان ITPro ، توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت JQuery مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .

تغییر در کد Index .php (توی فولدر Index) :

                          .
                          .
                          .
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="JS/JQuery.js"></script>
</head>
                          .
                          .
                          .

من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script >

یا

<script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script >

فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید .

خوب میریم سر قواعد دستوری در JQuery :

تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .

$(function()
{
       دستورات ...
});

قواعد دستوری در JQuery بصورت زیر هست :

$(selector).action();

که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .

$("#message").hide();

مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .

رویدادها در JQuery :

با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .

syntax بصورت زیر هست .

$(selector).event(function()
{ 
      دستورات ... 
});

که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { } مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت JQuery برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون .

تغییر در کد Index .php (توی فولدر Index) :

                        .
                        .
                        .
<body>
	
    <div id="Reg_News">
        <ul>
            <li class="right">
                <div id="Register">
                    <ul>
                        <li id="title">
                            عضویت در سایت ...!       	
                        </li>
                        <li>
                            <input type="text" name="txt_Name" id="txt_Name" value="نام" />&nbsp;
                            <input type="text" name="txt_Family" id="txt_Family" value="نام خانوادگی" />
                        </li>
                        <li>
                            <input type="text" name="_txt_pass" id="_txt_pass" value="رمز عبور" />
                        </li>
                        <li>
                        <input type="text" name="_txt_pass2" id="_txt_pass2" value="تکرار رمز عبور" />
                        </li>
                        <li>
                            <input type="text" dir="rtl" name="txt_Email" id="txt_Email" value="آدرس پست الکترونیکی" />
                        </li>
                        <li>
                            <input type="text" name="txt_Email2" id="txt_Email2" value="تکرار آدرس پست الکترونیکی" />
                        </li>
                        <li>
                            
                            <input name="radio_Sex" type="radio" id="radio_Sex" value="0" />
                            <label id="lbl_Male">مرد</label>
                                
                            <input class="radio_FeMale" name="radio_Sex" type="radio" id="radio_Sex" value="1"  />
                            <label id="lbl_Female">زن</label>
                          
                        </li>
                        <li>
                            <input type="text" name="txt_Question" id="txt_Question" value="سوال امنیتی" />
                        </li>
                        <li>
                            <input type="submit" name="btn_Reg" id="btn_Reg" value="ثبت نام" />
                        </li>
                        <li>
                            <label>
                                <p>
                                    <div>
                                        در صورتی که بر روی دکمه ثبت نام کلیک کنید یعنی شما تایید میکنید
                                    </div>  
                                    <div>   
                                         که  <a href="#Rules">قوانین سایت</a> را مطالعه کرده و پذیرفته اید .
                                    </div>
                                </p>
                            </label>
                        </li>
                    </ul>
                </div>
            </li>
            
            <li class="left">
            	<div id="News">
                    <ul>
                    	<li>
                        	News1...........
                        </li>
                        <li>
                        	News2...........
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
	</div>

</body>
</html>

خروجی :

دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم

خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .

                     .
                     .
                     .
<title>Untitled Document</title>
<script type="text/javascript" src="JS/JQuery.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/Register.css"/>
</head>

<body>
                     .
                     .
                     .

فقط تگ <link> اضافه کردم .

کد register.css :

#Register
{
	padding: 5px;
	width: 600px;
	border: 1px solid darkgrey;
	direction: rtl;
	margin: 100px 0 0 10px;
	border-radius: 5px;
}
#News
{
	padding: 5px;
	width: 500px;
	border: 1px solid darkgrey;
	direction: rtl;
	margin: 100px 0 0 10px;
	border-radius: 5px;
}

خروجی :

دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم

این خط کد رو به Register# اضافه میکنیم :

text-align:right;

نتیجه :

دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم

خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)

تغییر در کد Index .php (توی فولدر Index) :

                        .
                        .
                        .
عضویت در سایت ...!
</li>
<li id="fn_ln">
	<input type="text" name="txt_Name" id="txt_Name" value="نام" class="borderstyle" />&nbsp;
                        .
                        .
                        .

فقط "id="fn_ln اضافه کردم .

حالا دوباره کدهایی به register.css اضافه میکنیم .

#Register #fn_ln
{
	width: 500px;
}

#Register #_txt_pass, #Register #_txt_pass2, #Register #txt_Email, #Register #txt_Email2, #Register #txt_Question
{
	width: 330px;
}

#Register input, #Register #lbl_Male, #Register #lbl_Female
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
}

نتیجه :

دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم

خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .

ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .

class="borderstyle"

کد Index.php (شبیه زیر):

                        .
                        .
                        .
                        <li id="title">
                            عضویت در سایت ...!       	
                        </li>
                        <li id="fn_ln">
                            <input type="text" name="txt_Name" id="txt_Name" value="نام" class="borderstyle" />
                            <input type="text" name="txt_Family" id="txt_Family" 
                            										value="نام خانوادگی" class="borderstyle" />
                        </li>
                        <li>
                            <input type="text" name="_txt_pass" id="_txt_pass" value="رمز عبور" class="borderstyle" />
                        </li>
                        <li>
                        	<input type="text" name="_txt_pass2" id="_txt_pass2" 
                            										value="تکرار رمز عبور"  class="borderstyle" />
                        </li>
                        <li>
                            <input type="text" dir="rtl" name="txt_Email" id="txt_Email" 
                            									value="آدرس پست الکترونیکی" class="borderstyle" />
                        </li>
                        <li>
                            <input type="text" name="txt_Email2" id="txt_Email2" 
                            								value="تکرار آدرس پست الکترونیکی" class="borderstyle" />
                        </li>
                        <li>
                            
                            <input name="radio_Sex" type="radio" id="radio_Sex" value="0" />
                            <label id="lbl_Male">مرد</label>
                                
                            <input class="radio_FeMale" name="radio_Sex" type="radio" id="radio_Sex" value="1" />
                            <label id="lbl_Female">زن</label>
                          
                        </li>
                        <li>
                            <input type="text" name="txt_Question" id="txt_Question" 
                            										value="سوال امنیتی" class="borderstyle" />
                        </li>
                        <li>
                            <input type="submit" name="btn_Reg" id="btn_Reg" value="ثبت نام" />
                        </li>
                        <li>
                            <label>
                                <p>
                                    <div>
                                        در صورتی که بر روی دکمه ثبت نام کلیک کنید یعنی شما تایید میکنید
                                    </div>  
                                    <div>   
                                         که  <a href="#Rules">قوانین سایت</a> را مطالعه کرده و پذیرفته اید .
                                    </div>
                                </p>
                            </label>
                        </li>
                    </ul>
                </div>
            </li>
            
            <li class="left">
                           .
                           .
                           .

حالا تکه کد زیر به register.css اضافه میکنیم :

#Register .borderstyle
{
	border: 1px solid darkgrey;
	border-radius: 3px;
	text-indent: 7px;
	padding: 5px 0;
	width: 162px;
     color: darkgrey;
	
	box-shadow: 0 0 11px #d8d8d8;
	-moz-box-shadow: 0 0 11px #d8d8d8;
	-webkit-box-shadow: 0 0 11px #d8d8d8;
	-ms-box-shadow: 0 0 11px #d8d8d8;
	-o-box-shadow: 0 0 11px #d8d8d8;
}

نتیجه :

دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم

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

#Register li, #Reg_News li
{
	list-style: none;
	padding: 0;
	margin: 0 0 7px 0;
}

#btn_Reg
{
	width: 150px;
	padding: 6px;
	border: 1px solid black;
	background-color: #08a000;
	border-radius: 3px;
	color: #000;
	margin-top: 20px;
	font-size: 14px;
}

نتیجه :

دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم

حالا میایم یه خورده استایل دو خط متنی که زیر دکمه "ثبت نام" قرار داره رو تغییر میدیم :

#Register label
{
	width: 200px;
	color: #333;
	font-size: 13px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}

#Register label a
{
	margin: 0 5px;
	color: red;
	text-decoration: none;
	text-shadow: 0 2px 3px red;
}

نتیجه :

دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم

و یه خورده هم متن "عضویت در سایت ...!" تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :

.radio_FeMale
{
	margin: 0 40px 0 0;
}

#title
{
	font-size: 25px;
	margin-bottom: 20px;
	margin-right: 10px;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	color: #006396;
	text-shadow: 0.9px 0.9px 12px #006396;
}

نتیجه :

دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم

یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .

#Reg_News
{
	margin: 0 auto;
	width: 1200px;
}

#Reg_News li.right
{
	float: right;
}

#Reg_News li.left
{
	float: left;
}

توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left. و right. بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)

نتیجه :

دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم

یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .

کد Footer.php :

                        .
                        .
                        .
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<title>Untitled Document</title>
                        .
                        .
                        .

کد Footer.css :

#Footer
{
	margin: 0 auto;
	background-color: #6260b6;
	height: 300px;
	text-align: center;
}

نتیجه :

دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم

خوب باید ارتفاع RegNews# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت RegNews# (توی کد register.css) اضافه میکنیم .

height: 600px;

خوب الان یه بار دیگه نتیجه رو میبینیم :

دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم

خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه) .

کد زیر به Footer.css اضافه میکنیم :

#Footer div
{
	padding-top: 250px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 15px;
}

حالا عرض قسمت Register# تغییر میدیم .

width:530px;

عرض قسمت News# هم تغییر میدیم .

width:450px;

یه خروجی از نتیجه کارمون میگیریم :

دوره آموزشی برنامه نویسی MVC در PHP قسمت هشتم

تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:

1) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .2) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.3) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .4) ......یکی یکی این کارا رو توی قسمت بعدی باهم انجام میدیم . امیدوارم از این آموزش هم استفاده لازم برده باشید .

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

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

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

#شی_گرایی_در_php #آموزش_mysql #آموزش_mvc_و_oop_در_php #آموزش_گام_به_گام_php #آموزش_jquery #آموزش_css #mvc_در_php #آموزش_php #آموزش_پی_اچ_پی #آموزش_mvc_در_php
عنوان
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 قسمت چهاردهم رایگان
زمان و قیمت کل 0″ 0
1 نظر
zs_iman

عالی بود.

بهترین آموزش طراحی وبی بود که تا به حال دیده بودم.

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....