آموزش Php پروژه محور

مقدمه

خیلی از شاگردهای من و افرادی که با این رشته سر و کار دارند از وجود نداشتن کتابی هدفمند در این زمینه گله داشتند. اکثر کتاب هایی که در این زمینه منتشر شده اند به بررسی کدها پرداخته اند ولی هیچکدام در راستای یک پروژه (تعریف و اجرای آن) که همچنین شامل همه ی فن آوری های موجود هم باشد, قدم برنداشته اند.

در این کتاب نهایت سعی خود را کرده ایم که این موضوع را تحقق ببخشم. تنها مورد ناگفته در این کتاب گرافیک فتوشاپ می باشد با این حال ما حتی تا طراحی با HTML/CSS پیش خواهیم رفت. تمامی مطالبی این کتاب عملی و در قالب یک پروژه ی تجاری است.

نگاه اول

دید آکادمیک به طراحی سایت

اگر رشته ی دانشگاهیتان مهندسی نرم افزار بوده می دانید که یک سیستم باید بر اساس نیاز ها ساخته شود. بنابراین برای ایجاد یک CMS (1) ابتدا باید نیاز های موجود سنجیده و فهمیده شوند. تا جاییکه ممکن است باید ریز نیازها استخراج شوند و طرحی کلی از الگوریتم برنامه برای خود ایجاد کنیم.

از ایجاد یک وبلاگ ساده گرفته تا ایجاد اتوماسیون اداری. به طور مثال بیایید نگاهی به موضوع پروژه خودمان بی اندازیم. هیچ گاه فراموش نکنیم که CMS باید بر مبنای نیاز تهیه شود(۲).

سیستم مدیریت محتوای شرکتی بر پایه ی معماری MVC

شاید خیلی از شماها نمی دانید که MVC چه معنایی دارد و شاید خیلی ها نیز به دنبال مرجع آن بوده اید. پس با خیال راحت این کتاب را بخوانید چون جواب هر دوی شما اینجاست.

قبل از شروع نوشتن یک CMS باید از خود سوالات زیر را بپرسیم:

CMS ما هدفش چیست؟
چند کاربرد دارد؟
چه امکاناتی را فراهم می کند؟
چه ویژگی هایی دارد؟
آیا امنیت در آن مهم است؟
قابلیت توسعه برای آن ضروری است؟
بر پایه ی مفاهیم روز پیاده سازی می شود؟

مطلب

سرفصل های دوره آموزشی Php Mysql

(در پایان این کتاب, مرجعی پرکاربرد برایتان گذاشته ام که کدهای روز را میتوانید در آن پیدا کنید.)

حال برای اینکه بتوانیم چنین سیستمی را پیاده سازی کنیم باید به ترتیب و به صورت موازی با هم مراحل را پیش ببریم.

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

من همیشه در کلاس هایم اولین جمله ای که بیان می کنم این است که “HTML جدول ضرب طراحی سایت, JS و CSS مشتق گیری و PHP پاسخ معادله ای است که باید حل شود(برنامه نویسی وب سایت معادله ی ماست)”.

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

شروع

با عبارت Hello World! آشنایید؟ تفاوت کتاب از همینجا نیز مشخص است. چون ما این مثال تکراری را انجام نمی دهیم! نرم افزاری که ما برای انجام کارمان به آن احتیاج داریم فقط و فقط NotePad است. NotePad را باز کرده و عبارات زیر را در آن بنویسید:

<html>

<head>

</head>

<h1>به وب سایت من خوش آمدید!</h1>

<div>تمامی مطالب آموزشی را خواهید یافت.</div>

</body>

</html>

همانطور که درست حدس زده اید این یک تکه کد به زبان HTML است. یادتان نرود که HTML یک زبان برنامه نویسی نیست, زبان طراحی است! زبان نشان دهنده ی المان هایی فراتر از متن. مثل لینک, تصویر, لیست و…

فراموش نشود که در هنگام ذخیره فایل در NotePad از لیست موجود گزینه ی utf-8 انتخاب شود تا در نمایش حروف فارسی مشکلی وجود نداشته باشد.

مطلب

لینک بیلدینگ چیست؟ (Link Building)

در صفحه ای که به زبان HTML نوشته شده است دو قسمت وجود دارد:

قسمت غیر قابل مشاهده یا تگ <Head>
قسمت قابل مشاهده یا تگ <Body>

بعضاً به سر و بدن تشبیه شده اند همانطور که معنی لغوی آنهاست. فایلی که نوشته اید را در یک پوشه خالی با نام index.html ذخیره کنید. به فرمت .html توجه داشته باشید. با همین فرمت شما بیان می کنید که این یک فایل وب است. تبریک! شما اولین صفحه ی وب خود را ساختید. حال به پوشه محل ذخیره رفته و فایل index.html را اجرا نمایید.

شکل۱ اولین پروژه شما

در اینجا کاملا مشخص است که عبارتی که داخل تگ <title> نوشته شده است در محل عنوان مرورگر و هرچیزی که در تگ <body> نوشته شود در داخل پنجره مرورگر نشان داده می شود. تفاوت نمایش دو خطی که وجود دارند نوع تگ آنهاست. تگ h1 تا h6 برای نوشتن عنوان موضوعات که مهم هستند و باید به چشم بیایند استفاده می شوند. می توانید با عوض کردن ۱ تا ۶ و Save کردن تغییر را مشاهده کنید. توجه کنید که هر تگی که باز می شود باید به همان ترتیب نیز بسته شود. تگ <div> برای تقسیم بندی صفحه به صورتی عمودی یا افقی استفاده می شود. پس اگر ما بخواهیم یک پارتیشن افقی در صفحه ایجاد کنیم و داخل آن یک عنوان و زیر عنوان یک توضیح بنویسیم کد زیر را در <body> قرار می دهیم:

<div>

<h1>دومین وب من</h1>

<br />

<div>توضیحات را خواهیم دید. </div>

مطلب

المنتور پرو (در نسخه ی المنتور 3.11.6 به پایین) هک شد!

</div>

به طور کلی تگ های HTML در بین دو کارکتر < و > قرار میگیرند. بعضی تگ ها دو جزئی هستند مثل <div>و</div> ولی بعضی مثل <br /> تک بخشی. این تگ برای بردن متن بعد از خود به خط پایین استفاده می شود. توجه داشته باشید که در HTML فاصله های نوشتاری مانند WORDعمل نمی کنند و Enter زدن در کد HTML به معنی رفتن به خط بعد نیست. همچنین فاصله و تب. به این موضوع نیز توجه داشته باشید که ما در کد قبل, ترتیب باز و بسته کردن تگ ها را رعایت کردیم ولی کد زیر نمونه ای از باز و بسته کردن اشتباه کدهاست:

<div>

<h1>

</div>

</h1>

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

برای قسمت بندی صفحه	<div></div>
ایجاد لینک	<a href=”http://www.google.com”>Google</a>
ایجاد فیلد متنی	<textarea>متن در ایتجا قرار میگیرد</textarea>

ما با مثال های عملی پیش خواهیم رفت بنابراین در برخی موارد ابتدا کد را نوشته و سپس توضیح می دهیم.

تا حالا فهمیده ایم:

صفحاتی که با فرمت .html ذخیره می شوند صفحه وب محسوب می گردند.
هر المان قابل مشاهده در یک وب سایت در تگ <body> قرار دارد.
بخش هایی که قابل مشاهده نیستند در تگ <head> قرار میگیرند.
هر تگ دو بخشی باید به ترتیب باز شدن بسته شود.
با تگ های h1-h6 و a و textarea و div آشنا شدیم.

به مثال زیر دقت کنید:

اگر بخواهیم صفحه ی زیر را درست کنیم چه کدهایی لازم است؟

مطلب

تبدیل صدا به متن (فارسی) Voice in (Speech to Text Dictation)

شکل ۲ صفحه بندی یا Layout

همانطور که اشاره کردیم تگ <div> برای قسمت بندی صفحه استفاده می شود. این بدان معنی است که برای ساختن کادرهای مورد نیاز باید از تگ <div> استفاده کنیم.

کدهای زیر را در <body> بنویسید:

</div>

قصد داریم Layout نشان داده شده را انجام دهیم. اما اگر الآن فایل را Save کنیم و مشاهده کنیم چیزی در صفحه نمیبینیم!

اینجا است که نیاز پیدا می کنیم تا با CSS آشنا شویم. لازم نیست مخفف آن را بدانیم, CSS شبه کدی است برای تغییر استایل و نحوه نمایش عناصر. کد HTML را Save نمایید. حال در بین تگ <header>-</header> کدهای زیر را اضافه نمایید:

body{

direction:rtl;

font-family:Tahoma;

}

.header{

width:1000px;

height:150px;

margin:0 auto;

margin-top:20px;

border-radius:10px;

background-color:#6CC;

}

.main{

width:1000px;

margin:0 auto;

margin-top:20px;

}

.left{

width:790px;

margin-right:10px;

float:left;

height:250px;

border-radius:10px;

background-color:#CCC;

}

.right{

width:190px;

margin-left:10px;

float:left;

height:200px;

border-radius:10px;

background-color:#CCC;

}

.clear{

clear:both;

}

.footer{

width:1000px;

margin:0 auto;

margin-top:20px;

margin-bottom:20px;

height:50px;

border-radius:10px;

background-color:#3CC;

}

</style>

حال فایل را سیو کنید و ببینید با آن صفحه ی خالی چه کرده اید!

این سبک استاندارد کدنویسی است, یعنی Style و HTML کاملاً جدا از هم باشند. در کدهای HTML برای هر تگ یک ویژگی به نام Class تعریف کردیم و به آن مقدار دادیم. هر تگ شامل تعداد زیادی ویژگی است. ویژگی Class که تقریباً برای هر تگ HTML در نظر گرفته می شود به عنوان رابط بین CSS و HTML رفتار می کند. بطوریکه تگی که دارای مقدار header برای ویژگی Class است دارای ویژگی های کلاس .header در CSS می باشد.

مطلب

با خوشه بندی موضوعی به SERPs وارد شوید

<style>

.red{color:#F00;}

</style>

حال به بررسی کدهای CSS می پردازیم:

Width:1000px;	عرض المان را برابر ۱۰۰۰ پیکسل می کند.
height:200px;	ارتفاع المان را برابر ۲۰۰ پیکسل می کند.
Margin:0 auto;	المان را از محیط خارجش به یک اندازه ست می کند(وسط قرار میدهد).
Margin-top:20px;	فاصله المان از بالا ۲۰ پیکسل می کند.
Padding:10px;	فاصله المان از محیط داخلش را ۱۰ پیکسل قرار می دهد.
Border-radius:10px;	شعاع گوشه های المان را ۱۰ پیکسل قرار می دهد.
Background-color:#FFF;	رنگ زمینه المان را سفید می کند.
Float:right; or left;	المان را در سمت چپ یا راست قرار میدهد.

در تصویر زیر کاملاً تفاوت میان padding و margin مشخص می شود. باکس وسطی را در نظر بگیرید. سپس margin و padding آن به صورت زیر است.

شکل ۳ تفاوت padding و margin

ویژگی border-radius جزء دستورات CSS3 است بنابراین برای اینکه روی تمام مرورگرها اجرا شود باید با پیشوند های مختص به هر مرورگر نوشته شود, بطور مثال باید به این شکل استفاده شود:

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

بطور کلی این پیشوندها برای تعداد بسیاری کدهای دیگر نیز استفاده می شوند که –o- برای مرورگر Opera و

–webkit- برای Safari و Chrome و –moz- برای موزیلا استفاده می شوند.

Float:left;
Float:right;

Float در لغت به معنی شناور است و در CSS نیز به همین معنی ست. با مقدار left المان مورد نظر در سمت چپ قرار میگیرد و با مقدار right در سمت راست. اگر بیشتر از دو المان را بخواهیم با استفاده از این ویژگی بچینیم, اولویت با المانی است که کد HTML آن زودتر نوشته شده باشد. تنها نکته ی این ویژگی این است که می بایست در انتهای تمام المان های HTML که با استفاده از این ویژگی در کنار هم قرار میگیرند, یک تگ div با کلاس clear که به صورت زیر تعریف می شود قرار دهیم:

Clear:both;

مطلب

چگونه کلمات کلیدی به سایت اضافه کنیم؟

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

ما برای تعریف ویژگی CSS برای تگ <body> از نقطه استفاده نکردیم. این به دلیل این است که body یک تگ HTML است و Class نیست. اینگونه ما به تگ <body> وصل می شویم جدا از اینکه نیاز باشد بدانیم Class آن چیست. اگر به جای body تگ div را قرار دهیم این استایل به تمامی div های موجود در صفحه وصل می شود.