آموزش php قسمت اول

php یک زبان برنامه نویسی قدرتمند در سمت سرور برای ایجاد وب سایت های پویا و تعاملی است.

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

سینتکس PHP بسیار شبیه به Perl و C است .php اغلب با Apache (وب سرور) بر روی سیستم عامل های مختلف استفاده می شود. همچنین از ISAPI پشتیبانی می کند و می تواند با IIS مایکروسافت در ویندوز مورد استفاده قرار گیرد.

 


پیشنیازها:

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

  • html
  • دانش کمی از  اسکریپت نویسی

php چیست؟

  • php برگرفته از PHP: Hypertext Preprocessor
  • php  یک زبان اسکریپتی سمت سرور مانند asp است
  • در php اسکریپتها بر روی سرور اجرا میشوند
  • php  از دیتابیس های (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, ….)  پشتیبانی میکند
  • php یک نرم افزار منبع باز است
  • دانلود و استفاده از آن رایگان است.

فایل php چیست؟

  • فایلهای php میتوانند شامل متن، تگهای html و اسکریپت باشند
  • فایلهای php به عنوان html ساده به مرورگر برگردانده میشوند
  • فرمت این فایلها: “.php”, “.php3”, یا  “.phtml”

MYSQL چیست؟

  • MYSQL  پایگاه داده سرور
  • MYSQL  برای اپلیکشن های بزرگ و کوجک ایده آل است
  • MYSQL  از استاندارد sqlپشنیانی میکند
  • MYSQL در تعدادی از سیستم عاملها کامپایل میشود
  • دانلود و استفاده از آن رایگان است

PHP + MySQL

ترکیب این دو cross-platform است . یعنی بر روی هر سیستم عاملی در سرور اجرا میشود

 

 

 

 

 

 

 

جاوا اسکریپت

تفاوت زبان ها ی اسکریپتی-برنامه نویسی

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

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

همین جا اشاره ی کوچکی به تفاوت زبانهای اسکریپتی و زبانهای برنامه نویسی میشه کرد. وقتی برنامه هایی که با زبانهایی مثل c++وc#و… مستقیما بدون نیاز به نرم افزار دیگری  کامپایل شده و یک فایل اجرایی در اختیار ما قرار داده و بر بروی سیستم عامل اجرا  میشوددر واقع یک زبان کامل به حساب می ایند  ولی برنامه های نوشته شده توسط زبانهای اسکریپتی باید برای اجرا شدن،  بر روی یک نرم افزار دیگری(کدهای دیگر)  که به آن مفسر میگویند سوار شود یا قرار میگیرد وبه جای کامپایل شدن خط به خط در زمان اجرا توسط مفسر اجرا میشود. مانند جاوا اسکریپت، پایتون، phpو…….

 

using-js

 

 

جاوا اسکریپت

آموزش جاوا اسکریپت

02

سلام به دوستان گرامی

بخش html  خدارا شکر به پایان رسید، از آنجایی که پیش نیاز یادگیری جاوااسکریپت html هست بنابراین  من تصمیم گرفتم در کنار html5,css، یادگیری javascript را هم شروع کنم.

قبل شروع یه چند تا نکته را عرض میکنم که فکر میکنم جالب باشه واسه دانستن جایگاه js.

دوستانی که برنامه نویسن و حداقل با یک زبان آشنایی دارند، میدونن که یک شی از یک سری ویژگیها و گاها از یک سری رفتار ها درست میشه. به عنوان مثال یک انسان از یک سری ویژگیها مثل سر، بدن، دست، پا، چشم و…. ایجاد شده که هر انسان صرفا به خاطر رنگ چشم، مو، بلندی و کوتاهی قد و… از هم تشخیص داده میشه. از طرفی گفتیم این شی یک سری رفتار هم داره مثل راه رفتن، غذا خوردن، بلند کردن یک صندلی و…

حالا بیاین این مثالی که من زدم را به html,css,js نسبت دهیم:

اون حالت ساختار، ویژگیهای کلی مثل سر و بدن و … را به  html

مقداری که این ویژگی ها میگیرن تا هر شی از یه شی دیگه متفاوت باشه  css

رفتار و کاری که انجام میدهدjs

ترکیب این سه مورد با هم دیگر، ایجاد یک صفحه وب جذاب و تعامل با کاربر را به دنبال دارد.

جاوا اسکریپت تعامل با کاربر را به صفحه اضافه میکند.

js

معرفی HTML5

HTML5

html5 جدیدترین و پیشرفته ترین نسخه html میباشد.

از ویژگی ها :

اولین ویژگی مورد توجه، هنگام نوشتن سند HTML5، اعلان doctype می باشد. با این اعلان، ساپورت  نوع سند  یعنی  تمام نسخه های html را در html5  داریم. 

<!DOCTYPE HTML>

قطعه کد زیر روش کد کذاری کاراکترها را روی  utf-8 تنظیم میکند تا عبارات غیر انگلیسی هم در تمام مرورگر ها به درستی نمایش داده شوند. مثل فارسی

<meta charset=”UTF-8″>

 

عناصر جدید در html5

<article>

 <aside><audio><canvas> <datalist> <details><embed><footer><header><nav><output><progress><section><video>

 

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>html5</title>
   </head>

   <body>	

      <header >
      </header>

      <footer>
      </footer>

   </body>   
</html>

cross platform ویژگی مهم دیگری است که در html5  اضافه شده است.

 

cross-platform

iframe در html

iframe در html

برای نمایش یک صفحه وب درون یک صفحه وب، از تگiframe (inline frame ) استفاده میشود. تگ <iframe> به تگ frameset  مربوط نمیشود ولی در هر نقطه از سند html  به کار میرود.iframe با تعریف  یک ناحیه مستطیل شکل،  به صورت جداگانه، در سند html توسط ویژگیهایی مثل src, scrollbars وborders نمایش داده میشود.

یک مثال که در آن کاربرد iframe را نشان میدهد:

<html>
<head>
<title>HTML Iframes</title>
</head>
<body>

<iframe src="http://sufra.ir/" width="555" height="200">
   Sorry your browser does not support inline frames.
</iframe>

</body>
</html>

خروجی:

[box type=”custom” bg=”#eaeaea” color=”#000000″ border=”#” radius=”1″]HTML Iframes

 

 

[/box]

ایجاد frame در صفحات وب

<frame> تگ

قابها یا frame ها به ما امکان میدهند دو یا چند صفحه وب را درون یک پنجره مرورگر و در کنار یکدیگر قرار دهیم.

 

خصوصیات یا ویژگیهای مهم frame:

ویژگی توضیح
src  فریم برای داشتن محتوا از ویژگی src استفده میکند. با قرار دادن  نشانی صفحه ای که میخواهیم در frame  موردنظر به عنوان محتوا نمایش داده شود، مقدار میگیرد.
name نام فریم را مشخص میکند
frameborder مقادیر ۰یا۱ میگیرد و مشخص میکند که فریم خط جدا کننده داشته باشد یا خیر
noresize یکی از خصوصیات frame که باعث میشود کاربر نتواند اندازه قابها را تغییر دهد.
scrolling اگر محتوا بیشتر از اندازه فریم ها شود از این ویژگی استفاده میشود. در حالت پیش فرض نوار های اسکرول برای بالا پایین کردن محتوا به کار می رود.

تگ <frameset>

برای اینکه این frame  ها درون یک پنجره یا صفحه نشان داده شوند باید درون تگ frameset قرار بگیرند.  این تگ دارای خصوصیات مختلفی از جمله  border, scrolling, resize و …  میباشد.

عنصر frameset  ویژگیهای سطر و ستون  درون تگ frameset  دارد، که مقا دیر آنها  با درصد یا تعدادی از پیکسلها مقدار میگیرند.

 

<frameset cols="100, 25%, *"></frameset>
<frameset rows="100, 25%, *"></frameset>

 

نکته
در این نوع  پنجره ها تگ  frameset  جایگزین body  میشود.
تگ فریم html5 را ساپورت نمیکند.

 

 

 در پایان، تگ <noframes> راهی برای مرورگرهایی که فریم را ساپورت نمیکنند تولید میکند. 
 <frameset cols="25%,50%,25%">
 <frame src="a.htm" />
 <frame src="b.htm" />
 <frame src="c.htm" />
 <noframes>Frames not supported!</noframes>
 </frameset>

 

ویژگی توضیحات
cols تعیین تعداد قابهای ستونی. به روشهای زیر این تقسیم بندی ستونی انجام میشود.

  • “۱۰۰, ۵۰۰,۱۰۰″مقادیر این ویژگی بر اساس پیکسل حساب شده است. 
  • “۱۰%, ۸۰%,۱۰%” اینجا درصدی از پنجره بروزر در نظر گرفته میشود.
  • “۱۰%, *,۱۰%” در اینجا ۱۰ درصد ستون اول، ۱۰درصد ستون سوم و ما بقی ستون دوم. (با مقادیر پیکسلی هم میشود)
rows مقادیری که این ویژگی میگیرد دقیقا مانند ستون ها میباشد با این تفاوت که به صورت افقی فریم ها قرار میگیرند.
border حاشیه هر فریم را به پیکسل مشخص میکند.

مثال۱٫ ساخت سه فریم به صورت سطری یا ردیفی:

به ترتیت کدها را در صفحات html  جداگانه و با نام های زیر ذخیره کنید:

  1. fram.html
  2. top_frame.html
  3. main_frame.html
  4. bottom_frame.html
 <html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
 <frame name="top" src="top_frame.html" />
 <frame name="main" src="main_frame.htm" />
 <frame name="bottom" src="bottom_frame.html" />
 <noframes>
 <body>
 Your browser does not support frames.
 </body>
 </noframes>
</frameset>
</html>
 <html> 
<head> 
<body bgcolor="#ffe6ff"> 
<h1>top_frame</h1> 

</body> 
</html>
 <html> 
<head> 
<body bgcolor="#993366"> 
<h1>main_frame</h1> 

</body> 
</html>
 <html> 
<head> 
<body bgcolor="#ffe6ff"> 
<h1>bottom_frame</h1> 

</body> 
</html>

rows-frame

مثال۲٫ ساخت سه فریم به صورت ستونی:

مانند مثال قبل، کد زیر را در فایل frame.html ذخیره کنید:

 
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
 <frame name="left" src="top_frame.html" />
 <frame name="center" src="main_frame.htm" />
 <frame name="right" src="bottom_frame.html" />
 <noframes>
 <body>
 Your browser does not support frames.
 </body>
 </noframes>
</frameset>
</html>

cols-frame

مثال

صفحه ای با قابندی زیر بسازید.

 

sample-frame

<html>
<head>
<title>HTML Target Frames</title>
</head>
<form>
<frameset rows=”7%,86%,7%” frameborder=”0″ >
<frame src=”تبلیغات.html” >
<frameset rows=”86%” >
<frameset cols=”200,*” >
<frame src=”منو.html” >
<frame src=”محتوا.html” >
</frameset>
</frameset>
<frameset rows=”7%” >
<frame src=”نشانی.html” >
</frameset>
</html>

<html>
<head>
<title>first page</title>
</head>
<body bgcolor=”green” dir=”rtl”>

<b>تبلیغات تصویری</b>
</p>
</body>
</html>

<html>
<body bgcolor=”maroon” dir=”rtl”>
<h1>منوی سایت <h1>
</body>
</html>

 

<html>
<body bgcolor=”green” dir=”rtl”>

<b>نشاني و تلفن تماس فروشگاه </b>
</body>
</html>

<html>
<body bgcolor=”green” dir=”rtl”>

<b>نشاني و تلفن تماس فروشگاه </b>
</body>
</html>

مشاهده روی لینک زیر کلیک کنید:

 

 index.html

رنگها در html

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

1

کامپیوتر ها از نقاط رنگی زیادی(پیکسل) تشکیل شده اند و همه رنگها از ترکیب سه رنگ قرمز، سبز، و آبی (RGB–>Red,Green,Blue) ساخنه میشوند، به همین  خاطر هنگام انتخاب رنگ برای صفحات وب از سیستم RGB استفاده میکنند. هر کدام از رنگها، کدی بین ۰-۲۵۵ دارند.برای مثال برای ساخت رنگی مثل زرد باید R و G را برابر ۲۵۵ و B را برابر صفر قرار دهید. این مقدار را میتوان به صورت (۰,۲۵۵,۲۵۵)RGB هم نشان داد.

[table]

     
۰ ۲۵۵ ۲۵۵
     

[/table]

بنابراین ار ترکیب سه رنگ که هر یک میتوانند ۲۵۵ حالت داشته باشند تعداد ۲۵۵^۳ معادل ۱۶۷۷۷۲۱۶ رنگ قابل نمایش به دست می اید.در هنگام طراحی صفحات وب، به جای استفاده از قالب عددی ذکر شده(دهدهی)، مقادیر رنگها را در یک سیستم هگزادسیمال (مبنای شانزده) نمایش میدهند:

۰, ۱, ۲, ۳, ۴, ۵, ۶, ۷, ۸, ۹, A, B, C, D, E, F

همانطور که دیده میشود ۱۶ رقم داریم که کمترین ۰ و بیشترین F میباشد.مقادیر هگزا دسیمال با استفاده از نماد هشتگ (#)و قبل از  سه یا شش حرف هگزا نوشته میشوند.

رنگ فونت و پس زمینه

توسط ویژگی bgcolor  میتوانیم رنگ پس زمینه  و توسط تگ font و ویژگی color  رنگ متن  صفحات وب را تغییر میدهیم.

 <html>
 <head> 
 <title>background color</title> 
 </head>
 <body bgcolor="#000099">
 <h1>
 <font color="#FFFFFF"> White headline </font>
 </h1> 
 </body>
</html>

Capt;lure

تگ form در html

تگ فرم در html

طراحی سایت بدون فرم یک ارتباط یک طرفه با کاربر است که فقط  کاربر از اطلاعات استفاده  میکند.

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

در این آموزش ما فقط به ایجاد ظاهر فرم میپردازیم .

از تگ  باز و بسته <form> برای ایجاد فرم استفاده میشود.

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

<form action="Script URL" method="GET|POST">
    form elements like input, textarea etc.
</form>

ویژگی action

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

 

ویژگی method

دومین ویژگی مهم method میباشد که نحوه ارسال اطلاعات به سرور یا همان صفحه ای که توسط action مشخص میشود،  را مشخص میکند وسه مقدار میگیرد که postو get که رایجتر هستند.

get

اطلاعات به آدرس مورد نظر  به صورت عمومی و در url ارسال  میشود.

 

نکات

  • این روش ناامن است. چون نام و مقدار کنترل به این صورت name=value&name=value در آدرس صفحه به صورت عمومی نمایان هستند.
  • ولی برای جابه جایی اطلاعات ساده مانند عددی و رشته ای موردی ندارد.
  • url محدودیت تعداد کاراکتر دارد ونمیتواند داده هایی با حجم بالا ارسال کند.
  • داده هایی مثل عکس که باینری هستند حجم بالایی دارند، بنابراین از این طریق ارسال نمیشوند.

post

اطلاعات از طریق هدر http ارسال میشوند.

نکات

  • اطلاعات در آدرس صفحه نمایش داده نمیشوند.
  • محدودیتی در حجم اطلاعات نیست.
  • رو امن  برای ارسال اطلاعاتی که حساس و مهم مثل پسورد ها  هستند.

 

name

ویژگی name  یک نام برای فرم مشخص میکند.

تگ کنترل <input>

برای گرفتن ورودی از کاربر، به کنترلی که بشود با کاربر تعامل داشت نیاز است، مانند فیلدهای متنی، چک باکس، دکمه ارسال و… . برای این کار از ویژگیهای تگ input استفاده میشود. این تگ در فرم نوشته میشود.

 

مقدار ویژگی
  نوع ورودی را مشخص میکند. type
. یک نام انتخاب میشود. این نام زمانی که داده به سمت سرور  ارسال میشود کاربرد دارد name
.حداکثر تعداد کاراکتری که کاربر میتواند وارد کند maxlength
متنی که کاربر میبیند value
TextBox : برای گرفتن متن از کاربر
 <input type=”text” name=”username” /><br />
<input type=”password” name=”password” />
Radio: انتخاب یک مورد از چند مورد
Male
Female
 <input type=”radio” name=”gender” value=”male” /> Male <br />
<input type=”radio” name=”gender” value=”female” /> Female <br />
CheckBox: انتخاب یک یا چند مورد از چند مورد

 c++

 c#

 <input type=”checkbox” name=”gender” value=”1″ /> Male <br />
<input type=”checkbox” name=”gender” value=”2″ /> Female <br />
Submits: دکمه ارسال اطلاعات
 <input type=”submit” value=”Submit” />
مثال ساده از فرم

Male

Female

C++
C#
python
php

عناصر Block and Inline

 عناصر درون خطی و بلاک

هر عنصر html دارای یک مقدار پیش فرض برای نمایش است که نوع آن را مشخص میکند. این دو نوع  مقدار پیش فرض نمایش ، block و inline هستند.

Block-level Elements

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

 

:مانند

<h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div>

عناصر inline از یک خط جدید شروع نمیشوند و لزومی ندارد تا اخر سطر را اشغال کنند. یعنی کنار هم قرار میگیرند.

مانند:

<b>, <a>, <strong>, <img>, <input>, <em>, <span>

عنصر div و span

عنصر div یک عنصر block است، به عنوان ظرفی که حاوی دیگر عناصر html  میباشد. این تگ بیشتر در بخش بندی صفحه وب کاربرد دارد.

عنصر span یک عصر  inline میباشد. به عنوان ظرفی که حاوی متن میباشد.

تفاوت این دو  تگ را در مثال زیر بررسی میکنیم:

 <!DOCTYPE html>
<html>
<head>
<title> div & span </title>
</head>
<body>

<div style="color:red">
 <h4>This is first group</h4>
 </div>
<div style="color:green">
 <h4>This is second group</h4>
</div>
<p>This is <span style="color:red">red</span> and this is <span style="color:green">green</span></p>
</body>
</html>

lk

 <html>
<head>
<title> Div&span</title>
</head>
 <body>
 <h1>Div&span</h1>
 <div style="background-color:green; color:white; padding:20px;">
 <h2>Some 
 <span style="color:red">Important</span>
 Message</h2>
 <p>Some paragraph text goes here.</p>
 <p>Another paragraph goes here.</p>
 </div>
 </body>
</html>

Untitkkkled

جداول

جداول

جدول ها توسط تگ <table> ایجاد میشوند. هر سطر جدول با تگ <tr>  و هر ستون توسط تگ <td> ایجاد میشود. مثال زیر یک نمونه ایجاد جدول ساده میباشد با ویژگی border  که با ۱ مقدار دهی و باعث ایجاد حاشیه میشود.

همچنین از تگ th جهت  تعریف هدر جدول استفاده شده است.

 

 <html>
 <head>
 <title> Creating a Table</title>
 </head> 
 <body>
<table border="1">
 <tr>
 <th>Firstname</th>
 <th>Lastname</th> 
 <th>Age</th>
 </tr>
 <tr>
 <td>Jill</td>
 <td>Smith</td> 
 <td>50</td>
 </tr>
 <tr>
 <td>Eve</td>
 <td>Jackson</td> 
 <td>94</td>
 </tr>
</table>
 </body>
</html>

Capt';ure

نکته
 تگ td یا همان ستونها ی جدول مانند ظرفی که حاوی اطلاعات است میباشند. این اطلاعات میتواند شامل همه عناصر html مثل متن، عکس، لیست و…. باشد

ویژگی colspan وrowspan

 

از colspan برای ادغام  دو یا چند ستون استفاده میشود.

از rowspan برای ادغام  دو یا چند ردیف استفاده میشود.

 <html>
 <head>
 <title> Colspan Attribute</title>
 </head> 
 <body>
<table border="2">
 <tr>
 <td >Red</td>
 <td>Blue</td>
 <td>Green</td>
 </tr>
 <tr>
 <td><br /></td>
 <td colspan="2"><br /></td>
 </tr>
</table>
 </body>
</html>

Colspan

Unktitled

 <html>
 <head>
 <title> Colspan Attribute</title>
 </head> 
 <body>
<table border="2">
 <tr>
 <td rowspan="2">Red</td>
 <td>Blue</td>
 <td>Green</td>
 </tr>
 <tr>
 <td><br /></td>
 <td ><br /></td>
 </tr>
</table>
 </body>
</html>

rowspan

 

Unktitled