درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من
تخفیف های وب سایت
همه تخفیف ها

عضویت در

کانال تلگرام

توسینسو

اطلاعات مطلب
مدرس/نویسنده
مهدی رزمجویی
امتیاز: 8194
رتبه:73
0
17
2
36
توسعه دهنده C# ، ++C ، PHP ، SQL ، محقق بدافزار ، توسعه دهنده آنتی ویروس پادویش ، توسعه دهنده آزمایشگاه بدافزار ، علاقمند به مهندسی معکوس پروفایل کاربر

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

تاریخ 55 ماه قبل
نظرات 0
بازدیدها 1076
سلام به همه دوستداران ITPro ، تو این قسمت میخوایم یه جدول توی دیتابیس ایجاد کنیم واسه ذخیره اطلاعاتی که کاربران زمان ثبت نام وارد میکنن و یه استایل کوچیک هم مینویسیم . تمام فایلهایی که تا الان واسه وب سایت درست کردیم میتونید از این لینک دانلود کنید . خوب در ابتدا یه تغییر کوچیک توی سایت میدیم و سایت آماده میکنیم واسه کارایی که امروز میخوایم روش انجام بدیم .یه فولدر بنام Pic توی سایت میسازیم و دو تا عکس (از اینجا دانلود کنید) توش کپی میکنیم .خوب حالا هدر سایت تغییر میدیم :
                 .
                 .
                 .
<body>
	
    <div id="WhoLogin">
    	<div>
        	<ul>
                <li class="Right" id="Login">
                    <a href="#">ورود</a>
                </li>
                <li class="Right" id="Username">
                    <a href="#">نام کاربری</a>
                </li>
                <li class="Right" id="Letter">
                    <img src="Pic/Letter.png" />
                </li>
                <li class="Right" id="Message">
                    <img src="Pic/warning.png" />
                </li>
                <li class="Right" id="Post">
                    <a href="#">ارسال مطالب</a>
                </li>      
                <li class="Left">
                    <input type="text" id="txt_search" name="txt_search" value="جستجو ..." />
                </li>
        	</ul>
        </div>
    </div>
    <div id="Header">
    	
    	<div id="SingUp">
                 .
                 .
                 .
در بالا میبینید که من یه تگ div بنام WhoLogin ایجاد کردم و توی این تگ، چند تا تگ دیگه ایجاد کردم .
خروجی :
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

خوب حالا میایم و یه استایل بهش میدیم پس کدهای زیر رو به ادامه کدهای header.css اضافه میکنیم .
#WhoLogin
{
	background-color: #6260b6;
	margin: 0 auto;
}

#WhoLogin div
{
	margin: 0 auto;
	width: 1200px;
	height: 40px;
	background-color: #6260b6;
	direction: rtl;
}

#WhoLogin ul
{
	list-style-type: none;
}

#WhoLogin li.Right
{
	float: right;
}

#WhoLogin li.Left
{
	float: left;
}
خروجی :
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

از سمت چپ یه فاصله به textbox (جستجو) میدیم و یه فاصله هم به شی های سمت راست صفحه میدیم .
margin-left: 20px;
کد بالا رو به قسمت WhoLogin li.Right# اضافه میکنیم .
کد پایید به قسمت WhoLogin li.Left# اضافه میکنیم .
margin-left: 70px;
از بالا یه فاصله به تماممی تگهای <li> میدیم ، کد زیر اضافه میکنیم .
#WhoLogin li
{
	line-height: 40px;
}
بوسیله کد زیر رنگ و فونت و رنگ لینکهای "ورود" و "ارسال مطالب" عوض میکنیم و بصورت دکمه درشون میاریم . کد زیر هم اضافه میکنیم :
#WhoLogin li#Login a, #WhoLogin li#Post a
{
	text-decoration: none;
	color: #CCC;
	font: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	
	padding: 7px 20px;
	border: 1px solid #999;
	background-color: #3f44a0;
}
یکمی هم دو عکس کوچیک میکنیم و یه فاصله از بالا بهش میدیم ، کدهای زیر اضافه میکنیم .
#WhoLogin #Message img
{
	width: 25px;
	margin: 8px 0 0 0;
}

#WhoLogin #Letter img
{
	width: 30px;
	margin: 7px 0 0 0;
}
خروجی :
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

خوب الان یه استایل به textbox (جستجو) و لینک "نام کاربری" میدیم ، کدهای زیر اضافه میکنیم .
#WhoLogin #Username a
{
	text-decoration: none;
	color: #CCC;
	font: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
}

#WhoLogin #txt_search
{
	color: darkgrey;
	height: 22px;
	width: 230px;
}
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

واسه اینکه اون فضای خالی بالا از بین بره، کد زیر اضافه میکنیم به قسمت SingUp ul# :
margin: 0;
خروجی :
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

خوب الان میایم زوم میکنیم ببینیم همه چی درسته ؟!
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

خوب مثل اینکه درست کار میکنه و با زوم کردن قالب سایتمون بهم نمی ریزه .
حالا میایم border-bottom اضافه میکنیم به قسمت WhoLogin# .
border-bottom: 1px solid #5d26a0;
یه خروجی میگیریم .
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

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

:-( مثل اینکه یه جای کارمون درست انجام ندادیم .
این بخاطر اینه که عرض تگ <div> بنام WhoLogin بزرگ نمیشه پس میایم و کد زیر رو اضافه میکنیم به قسمت WhoLogin# .
min-width: 1200px;
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

:-) درست شد .
خوب الان یه استایل مینویسیم تا زمانی که نامه و پیغامی گیرمون میاد زبر دو تا عکس تعداد نامه و پیغام بهمون نشون بده ،فرض کنیم که یه پیغام داریم و 2 تا هم نامه .در ابتدا یه تغییر کوچیک توی header.php میدیم .
                      .
                      .
                      .
</li>
                <li class="Right" id="Letter">
                    <div id="Num_Letter"><label class="Number">2</label></div>
                    <img src="Pic/Letter.png" />
                </li>
                <li class="Right" id="Message">
                	<div id="Num_Message"><label class="Number">1</label></div>
                	<img src="Pic/warning.png" />
                </li>
                <li class="Right" id="Post">
                      .
                      .
                      .
دو تگ <div> بنامهای Num__Letter و Num__Message میسازیم که توشون یه label میزاریم .
خروجی :
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

خوب واسه اینکه این بهم ریختگی درست بشه کد زیر اضافه میکنیم .
#WhoLogin #Num_Letter, #WhoLogin #Num_Message
{
	position: absolute;
}
یه بار دیگه خروجی میگیریم :
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

دو تا عکس و textbox (جستجو) پشت این دوتا عدد قرار دارن، واسه اینکه بهتر بفهمید میایم border میزاریم واسه این عدد ها .کد زیر رو به قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
border: 2px solid green;
کد زیر رو اضافه میکنیم .
#Num_Letter .Number, #Num_Message .Number
{
	border: 2px solid red;
}
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

حالا که متوجه شدید این دو تا border حذف کنید .خوب الان میایم عرض و ارتفاع تگ <div> بنامهای Num__Letter و Num__Message کوچیک میکنیم، background-color بهش میدیم و وسط چینش میکنیم تا مشکلات بالا رفع بشه .کدهای زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
width: 16px;
height: 16px;
border: 2px solid #67000a;
background-color: #a4000f;
text-align: center;
خروجی :
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

کمی بهتر شد ، حالا میایم کمی بهترش میکنیم ، کد زیر به ادامه قسمت Num__Letter .Number, #Num__Message .Number# اضافه میکنیم .
padding-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFF;
line-height: 17px;
خروجی :
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

خوب الان میایم گردش میکنیم و یه خورده میاریمش پایین سمت چپ ،
کد زیر رو به ادامه قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
border-radius: 50px;
margin: 20px 12px 0 0;
خروجی :
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

الان خیلی بهتر شد ، فعلاً نامه یا پیغامی نداریم باید جدول نامه و پیغام و... درست کنیم و با کد نویسی تعدادشو محاسبه کنیم اینو فعلاً مخفی میکنیم و به موقش دوباره روش کار میکنیم .کد زیر رو به ادامه کدهای قسمت WhoLogin #Num__Letter, #WhoLogin #Num__Message# اضافه میکنیم .
display: none;
خروجی :
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

عنوان سایت خیلی خوب نیست، یه تغییر توی عنوان سایت میدیم ، تگ <div> بنام SingUp (توی فایل header.php) بصورت زیر تغییر میدیم .
<div id="SingUp">
    <ul>
        <li id="title">
            ITPro.ir
        </li>
        <li>
            <input type="button" id="Btn_SingUp" value="ثبت نام" name="Btn_SingUp" />
        </li>
        <li id="title2">
            <a href="http://tosinso.com">انجمن تخصصی فن آوری اطلاعات ایران</a>
        </li>
    </ul>
</div>
کدهای زیر رو ادامه کدهای header.css اضافه میکنیم .
#SingUp #title2
{
	margin-left: 20px;
}

#SingUp #title2 a
{
	color: #fff;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	text-shadow: 0px 0px 10px #FFF;
}
تغییر قسمت SingUp #title# بصورت زیر :
margin-right: 650px; 
margin-left: 60px;
تغییر در header.php بصورت زیر :
                     .
                     .
                     .
<div id="WhoLogin">
    	<div>
        	<ul>
                <li class="Right" id="Login">
                    <a href="Login">ورود</a>
                </li>
                <li class="Right" id="Username">
                    .
                    .
                    .
href دکمه ورود برابر Login قرار دادیم .
                     .
                     .
                     .
<div id="MainMenu">
            <ul>
                <li>
                    <a href="Index">خانه</a>
                </li>
                <li>
                    <a href="#">انجمن</a>
                </li>
                     .
                     .
                     .
دکمه ورود رو به دکمه انجمن تغییر دادیم و فعلا href برابر # قرار دادیم .
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم


تمام فایلهایی که تا الان واسه وب سایت درست کردیم (به همراه کارای این قسمت) میتونید از این لینک دانلود کنید .
خوب یه جدول بنام tbl__InfoUser واسه ثبت اطلاعات کابران ایجاد میکنیم بصورت زیر :
دوره آموزشی برنامه نویسی MVC در PHP قسمت دهم

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

من واسه راحتی کار دستور sql نوشتم ، اولین دستور واسه ایجاد کردن دیتابیس (البته اگه تا الان ایجادش نکردید) و دومین دستور واسه ایجاد کردن جدول مورد نظرمون هست .
CREATE DATABASE ITPro COLLATE=utf8_persian_ci

CREATE TABLE tbl_InfoUser(ID INT NOT NULL AUTO_INCREMENT,PRIMARY KEY(ID),Username VARCHAR(10) NOT NULL,Name VARCHAR(30) NOT NULL,Family VARCHAR(10) NOT NULL,Email VARCHAR(70) NOT NULL,Sex boolean NOT NULL) ENGINE=InnoDB COLLATE=utf8_persian_ci

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

نویسنده : مهدی رزمجویی
منبع : جزیره طراحی و توسعه وب وب سایت توسینسو
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد
برچسب ها
ردیف عنوان
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 قسمت چهاردهم
دوره مجموعه کل دوره
مطالب مرتبط

در حال دریافت اطلاعات

نظرات
  • این پست حذف شده است
    دلیل حذف: اشتباه شد

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