اعرض موقعك حسب حجم شاشة الزائر

  يجب علي الموقع ان يحترم زواره و ان يقدم لهم الخدمة الافضل , و من هذه ان تعرض موقعك بالشكل الذي يناسب الزائر , لذا من المهم ان تعرض موقعك حسب اعدادات شاشاته و عرضها او ما يسمي الزيلويشن الابعاد ..

سوف تحكم بطريقة العرض عن طريق ملف css , يتغير باستخدام الجي كويري ..

بداية ً كيف يمكن لنا معرفة عرض الشاشة , لامر سهل لنظر ..

function checkWindowSize() {

if ( $(window).width() > 1800 ) {
$('body').addClass('large');
}
else {
$('body').removeClass('large');
}

}

بنظر الي النص البرمجي في الاعلي نستطيع تحديد عرض الشاشة بـ

 $(window).width();

لذا نحن قمنا بفحص اذا كان عرض الشاشة اكبر من 1800 سوف نضيف استايل الي البدي ,غير ذلك نقوم بحذف الاستايل

و هذا ملف ال CSS

#container {
width: 800px;
height: 1000px;
background: #e3e3e3;
margin: auto;
}

/* Change container size for larger windows. */
.large #container {
width: 1000px;
}

#nav {

width: 100%;
height: 100px;
border-bottom: 1px solid white;
background: #999999;

}

.large #nav {
float: left;
width: 200px;
border-bottom: none;
border-right: 1px solid white;
height: 1000px;
}

مشكلة Warning: Cannot modify header information - headers already sent by

هذه المشكلة كثيرة الحدوث , و تحدث بسبب ان Html يعالج قبل ال Headers , و معلوم ان Headers يجب ان تعالج قبل عرض الصفحة فاذا حدث العكس ظهرت هذه المشكلة , و هذا هو السبب الرئيس , هناك اسباب اخري ايضا , مثل common , او الفراغات الغير لازمة ..

و لحل هذه المشكلة انصح بوضوع في بداية الصفحة الكود التالي ..

<?php  ob_start();   ?>

و في نهايتها

<?php  ob_flush();   ?>

في السطر الاول نقوم بتشغيل ال output buffering تخزين البيانات , جميع البيانات حتي تكتمل الصفحة و بذلك نضمن ان الهيدر تم ارسله  ..
بالنسبة السطر الثاني نقوم فعال بارسال البيانات للعرض في الصفحة ..
و بهذه الطريقة تعتبر المشكلة حلت ..

اسرار الفوتوشوب

اسرار الفوتوشوب

1- ...لتكبير منظرور الصوره اظغط على Ctrl ولتصغيرها اظغط Crtl -
2- لتحديد نص او طبقه قم بالتأشير على الطبقه من لوحة الطبقات واضغط على Ctrl
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

-=-=-=-=-
1 - بدل ما تذهب إلى View ثم Actual Pixels لترى الصورة في حجمها الطبيعي أضغط مرتين بالفارة على العدسة المكبرة Zoom Tool في لوحة الأدوات ( فوتوشوب 5.5 لا أعلم أن كان النسخ القديمة لها نفس الميزة )
وكذلك بدل ما تذهب إلى View ثم fit on screen لترى الصورة بالكامل على حجم الأطار أضغط مرتين على الكف الأبيض Hand Tolo
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-
اذا اردت تحديد طبقه وبسرعه فاضغط على Ctrl ثم اضغط على الطبقه بالمواس
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-
تستطيع الوصول إلى أداة التحريك بواسطة الضغط على زر CTRL في أي أداة وعنما تترك الزر ترجع إلى آخر أداة كنت تستخدمها وتستطيع أستخدام أداة التحريك بالضغط على مفتاح V
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-
مفاتيح الإختصار Hot Key
قائمة files
مفتاح Ctrl N فتح ملف جديد
مفتاح Ctrl O فتح ملف
مفتاح Ctrl Alt O فتح باسم
مفتاح Ctrl w اقفال ملف
مفتاح Ctrl S حفظ ملف
مفتاح Ctrl Shift s حفظ ملف باسم
مفتاح Ctrl Alt S حفظ نسخة من ملف
مفتاح Ctrl Shift P اعداد الصفحة
مفتاح Ctrl P طباعة
قائمة Edit
مفتاح Ctrl Z الغاء اخر عملية
مفتاح Ctrl X قص
مفتاح Ctrl c نسخ
مفتاح Ctrl Shift C نسخ مجمع
مفتاح Ctrl V لصق
مفتاح Ctrl Shift V لصق في الداخل
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-
مفتاح Ctrl T يظهر لك نقاط تحجيم الكائنات (للتكبير أو التصغير)
مفتاح Ctrl U يظهر لك قائمة تغير الألوان .
مفتاح Ctrl B يظهر لك قائمة تغير الألوان ولكن بدقة تغير كل لون لحدة .
مفتاح Ctrl M يظهر لك وضوح الصور والتحكم فيها
مفتاح Ctrl L يغير في درجات نصوع وغمقان الصورة ..
مفتاح Ctrl Y يظهر لك ألوان CYMK على الرسمة .
مفتاح Ctrl E لتطبيق طبقة على الأخرى
مفتاح Ctrl Shift E لتطبيق جميع الطبقات على بعض.
مفتاح Ctrl O لفتح ملف .
مفتاح Ctrl N لفتح ملف جديد .
مفتاح F7 لإظهار قائمة الطبقات
مفتاح F5 لإظهار قائمة الريش .
مفتاح Ctrl r لإظهار المسطرة .
مفتاح Ctrl Z للتراجع
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-
أولاً / الأفضليات : تقدم هذه الميزة عشرات الطرق لتخصيص عمل البرنامج ولتوفير الوقت . فبإمكانك ليس ان تحدد فقط كيف يتم عرض الصوروقياسها بل أيضاً أي موارد سوف يستخدم البرنامج على جهازك ...بإمكانك الوصول إلى الأفضليات باختيار الأمر Preferences من القائمة File
ثانياً / هل تواجه مشكلة في تطبيق الفلاتر على طبقة نصية ..؟؟ كل ما عليك أن تفعله للخروج من هذه المشكلة هو تحويل الطبقة من طبقة نصية إلى طبقة رسومية ... ومن ثم يمكنك تطبيق جميع إمكانيات البرنامج عليه ... لفعل ذلك اختر الامر Render Layer من البند Type في قائمة Layer
ثالثاً / بإمكانك ان تحفظ حقوق نشر وتوزيع صورك وذلك عن طريق استخدام فلتر من فلاتر الفوتوشوب .... ( أي لا يستطيع أحد نسخها ) من على الانترنت كائناً من كان ..هل تصدق ذلك .... لكي تحفظ حقوق نشر وتوزيع تصميماتك اختر الفلتر Embed Watermark من Digimarc من القائمة Filter .... لكن للأسف هذه الخدمة ليست مجانية بل يجب ان تدفع رسماً سنوياً لشركة Digimarc .
ملاحظة / هناك إصدار صغير من خدمة Digimarc متوفر مجاناً لكنه يقدم بعض الخيارات فقط .... ربما يمكنك تحميله من موقع الشركة [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
رابعاً / كيف تنشئ صورة شفافية في الفوتوشوب
ملاحظة / لجعل الصورة شفافية لابد من حفظها بإمتداد gif وذلك يعني استخدام 256 لون فقط وتسمى هذه الألوان ( الألوان الآمنة للويب ) ...... ذلك على حساب جودة الصورة
لجعل المساحة التي تريدها شفافية اتبع التالي :
1 / بعد الإنتهاء من التصميم ....اذهب إلى قائمة image واختر الأمر mode
2 /من قائمة mode اختر الأمر indexed color
3 /سيفتح لك مربح حوار
4 /في الخيار palette حدد web ثم اضغط موافق
5 /اختر من قائمة file الأمر export ومنه اختر gif89a export
6 /سيفتح لك مربع حوار حدد من خلاله اللون الذي تريد ان تجعله شفافياً
7 / إذا رغبت ان تجعل أكثر من لون شفافياً فما عليك سوى اختيار أداة اختيار الألوان المصحوب برمز في مربع الحوار الأخير ..
خامساً / كيف تحافظ على أكبر قدر ممكن من جودة الصور الشفافية التي تصمم للويب ...؟؟
اتبع الخطوات التالية :
1 / بعد الإنتهاء من التصميم ....اذهب إلى قائمة image واختر الأمر mode
2 / من قائمة mode اختر الأمر indexed color
3 / سيفتح لك مربح حوار
4 / في الخيار palette حدد web
5 / في الخيار Dither حدد Diffusion
6 / في الخيار Color Matching حدد Best
7 / انتق الخيار Preserve Exact Color ثم اضغط موافق
8 / اختر من قائمة file الأمر export ومنه اختر gif89a export
9 / سيفتح لك مربع حوار حدد من خلاله اللون الذي تريد ان تجعله شفافياً
10 / إذا رغبت ان تجعل أكثر من لون شفافياً فما عليك سوى اختيار أداة اختيار الألوان المصحوب برمز في مربع الحوار الأخير ..
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-
قائمة View
مفتاح Ctrl تكبير
مفتاح - Ctrl تصغير
مفتاح Ctrl 0 مناسب للشاشة
مفتاح Ctrl Alt O النقاط الحالية
مفتاح Ctrl H اظهار / اخفاء الحدود
مفتاح Ctrl Shift H اظهار / اخفاء التخطيطات
مفتاح Ctrl R اظهار / اخفاء المساطر
مفتاح ; Ctrl اظهار / اخفاء الدلائل
مفتاح ; Ctrl Shift جذب الى الدلائل
مفتاح ; CTRL Alt تأمين الدلائل
مفتاح " Ctrl اظهار / اخفاء الشبكة
مفتاح " Ctrl Shift احياء الشبكة
قائمة Image/Adjust
مفتاح Ctrl L مستويات
مفتاح Ctrl hift L المستويات التلقائية
مفتاح Ctrl M خطوط بيانية
مفتاح Ctrl B ميزان الألوان
مفتاح Ctrl U صبغة واشباع
مفتاح Ctrl Shift U الغاء الاشباع
مفتاح Ctrl I عكس
قائمة Layer
مفتاح Ctrl G تجميع مع السابق
مفتاح Ctrl Shift g ازالة التجميع
مفتاح Ctrl E دمج الى الأسفل
مفتاح Ctrl Shift e دمج مرئي
قائمة Select
مفتاح Ctrl Shift A تحديد الكل
مفتاح Ctrl D الغاء التحديد
مفتاح Ctrl Shift D استعادة التحديد
مفتاح Ctrl Shift I عكس التحديد

مشروع ادارة المحتوى ب PHP

الســـلام عــلــيــكـــم 

اليوم اقدم لكم مشروع ادارة المحتوى  CMS بلغة PHP وقاعدة بيانات MySql منجز من طرف صديقي عماد صلاحي

بصراحة مشروع يستحق المشاهدة . نظرا لاحتوائه على المجموعة من دوال الجميلة و كدى تنسيق بين html و css و javascript...

بالاضافة الى مكتبات Jquery و Ajax

بدون اطالة اتركه لكم لكي تكتشفوه  :

http://www.mediafire.com/?aos132xzzp02aw1

ملاحظة مهمة : 

لتفادي الاخطاء البرمجية التي تظهر في الصفحات استعملو سيرفر محلي XAMPP 

رسم مبياني على ireport

السلام عليكم

في الدرسنا اليوم سوف نتعرف على كيفية انشاء رسوم مبيانية على ireport

فرجة ممتعة

تقنية ( Asynchronous JavaScript And XML ( AJAX

تعريف تقنية AJAX:

AJAX هي ليست لغة برمجة جديدة بل هي بكل بساطه تقنية لإنشاء تطبيقات ويب بأسرع وأفضل وأكثر تفاعلاً

و سبب تسميتها بهذا الاسم هو اختصاراً لـ Asynchronous JavaScript And XML.

وهي مستنده على المعايير القياسية المفتوحة التالية :

• XHTML or (HTML)

• JavaScript

• CSS

• XML

الأجاكس كانت موجودة منذ زمن ولكن لم يعرف أحد أهميتها أو كيفية استخدامها بالشكل الصحيح

حتى قامت شركة Google بتوظيفها في برامجها الجديدة كالـ Gmail و Google maps.

تكون ميزة وقوة الأجاكس في أنها كلما أراد المستخدم أن يطلب معلومة من ال Server-Side

أوعن طريق الخادم يتم ذالك (( من دون الحاجة لإعادة تحميل الصفحات ))

فلغات برمجة الويب تنقسم إلى قسمان Client-Side وهي JavaScript والـ VBScript

وقسم آخر يسمى بالـServer-Side وهي كالـPHP و الـ ASP

لكن الأجاكس لغة Client-Side مع ذالك تقوم بطلب أي معلومة من الـServer-Side

ومن دون الحاجة لطلب أو إعادة تحميل كامل الصفحة.

وفي الشكل الذي الأسفل تتضح طريقة عمل الأجاكس بحيث في المربع المخطط الأول هو من دون إستخدام الأجاكس

وفي المربع والمخطط الثاني يتم إستخدام تقنية الأجاكس كوسيط بين Web Browser

الذي هو Clinet-Side وبين الـ Web Server الذي هو الـ Server-Side .

ويمكن إستخدام AJAX في أي لغة برمجة ومن ضمنها الـ ASP

وهناك موقع خاص من شركة Microsoft عن إستخدام الأجاكس في ASP

وفيه الكثير من المواضيع الخاصة بالأجاكس وهذا هو رابط الموقع :

http://ajax.asp.net

من إيجابيات وسلبيات تقنية الأجاكس AJAX :

الإيجابيات:

• لا تحتاج إلى إعدادات خاصة في السيرفر

يكفي إن يكون المتصفح يدعم تقنية HTTP Requests

• ويساعد في تخفيف الضغط على السيرفر

• سهولة التعامل مع السيرفر، بأن جعل المتصفح يتقاسم معه بعض المعاملات

والتعامل معه من خلال الاستعلامات فقط

• خفة التصفح، بأن يجعل المتصفح لا يعيد تحميل الصفحات من جديد

السلبيات:

• بالضرورة يجب ان يكون المتصفح يدعم JavaScript او VbSript اوJScript ومع هذا يجب

إن يدعم الكائن HTTP Requests

• الملفات المستجلبة (إن صحت التسمية) لن تتعرف عليها محركات البحث، فمثلا عندك

صفحة أخبار، بها عناوين آخر الأخبار، وعند النقر على عنوان يقوم الكود بجلب الموضوع

الخاص به عن طريق أجاكس، فإن محركات البحث لن تتعرف على ذاك الموضوع أو تلك

المواضيع، بل فقط على تلك العناوين الموجودة في الصفحة، وكل ما يظهر في السورس،

ومعلوم أن محركات البحث تتبع الروابط وتستكشف صفحاتها، لكن مع أجاكس لا توجد روابط،

بل استدعاء الكود والكود يجلب الموضوع أو الصفحة أو الكود، إذا على محرك البحث أن

يدخل وسط السورس ويلتوي مع كود أجاكس ليستكشف الرابط المراد جلبه هل هو كود أم صورة

أم صفحة... ، وهذا ستبعد، لكن ليس مستحيل خصوصا مع محرك البحث google .

• قد تشكل تقنية أجاكس ثغرة جديدة على انترنت اكسبلورر والثغرة التي ستشكلها، هي

أن أي صفحة تزورها بها كود أجاكس يمكن ان ترفع من عندك أي ملف إذا عرف امتداده سواء

رضيت أم لم ترضى.

احمي موقعك من الاختراق بتحكم في إخفاء وإظهار أخطاء الاستعلامات

معظم التحذيرات التي تظهرها الاستعلامات قد تشكل خطراً على برامجنا ، فهي تقدم تقريراً واضحا للمتطفلين تساعدهم في التعرف على تركيبة قاعدة البيانات.. ومن ثم محاولة تخريبها..

ومن جهة أخرى فإن هذه التحذيرات تساعد المبرمج على معرفة الخطأ في برنامجه وبالتالي يستطيع تصحيحه..

هذه الدالة تقوم بإظهار أو إخفاء أخطاء الاستعلامات sql حسب الحاجة كما تقوم بإيقاف أو متابعة البرنامج في حالة وجود خطأ حسب الحاجة:

رمز PHP:

$show_errors = 0;  // 1 or 0$exit_if_error = 1;  // 1 or 0
 function error_tip($this)
{   global $show_errors,$exit_if_error;
    echo '<pre>';
    if($show_errors==1)
    {    echo mysql_error(); }
    else{ echo "$this"; }
    echo '</pre>';
    if($exit_if_error==1)
    {     exit;
          # die();
    }
} 

طريقة الاستخدام:

رمز PHP:

$query = mysql_query("SELECT * FROM `table`")or print(error_tip("لا يمكن تنفيذ الاستعلام")); 

الى هنا نصل الى نهاية الموضوع شكرا .

مادا تعرف عن CSS

سنتناول في حديثنا هذا عن تقنية CSS ما هي وكيفية التعامل معها وأختصارتها

سنتحدث عن :


1-ما معنى تقنية  CSS

2-ما هي مميزات و فوائد تقنية CSS
3-مع أي المتصفحات تتوافق
4-كيفية التعامل معها
5-الأكواد وكيفية أختصارها
6-نصائح مهمه حولها

أولا : ما معنى تقنية CSS

هي تقنية أو لغه رائعه يرمز لها CSS و هي إختصار للجملة Cascading Style Sheets والتي معناها باللغة العربية ( صفحات الأنماط الانسيابية ) .

ثانيا : ما هي مميزات و فوائد تقنية CSS

من أهم مميزات وفوائد هذه اللغة أنه بإمكانك فصل أكوادها عن مساحة العمل أو صفحات الأنترنت وأيضاً بإستطاعتك عن طريق هذه اللغة توحيد عدة صفحات على نمط واحد .
وأيضا سهولة التغيير والتعديل سواء كان في محتوى الصفحه أو أكواد اللغه
وأيظا من فوائدها تقليل كمية أستهلاك Bandwidth لا نها ستغنيك عن الكثير من أكواد لغة الـ HTML

ثالثاً : مع أي المتصفحات تتوافق

هذه اللغة تتوافق مع كل المتصفحات بلا شك ، ولكن بعض أكواد اللغه لا تتوافق مع الإصدارات القديمه من المتصفحات ، فمثلا متصفح فايرفوكس معظم أو كل أكواد اللغه تتوافق معه ومثله متصفح كروم
وللأسف متصفح الإكسبلورا لا يتوفق معه إلا القليل من الأكواد ، ولا أعني بالقليل أن هذه اللغه لا تتوفق معه بل أقصد الأكواد التطويريه مثل الحواف الدائريها والظلال وغيره من الاأكواد الرائعه

رابعاً : كيفية التعامل معها

الحديث عن كيفية التعامل معها طويل ، ولكن سأشرحه بإختصار !!

لو أردنا إضافة أكواد اللغه في صفحات مواقعنا
بإمكننا إدراجها داخل هذا الكود بين وسم الفتح والإغلاق "<head>"

رمز PHP:

<style type="text/css">
هنا أكواد الـ CSS
</style> 

ولو أردنا إدرجها من صفحة أنماط CSS خارجيه ، نستخدم هذا الكود

رمز PHP:

<link rel="stylesheet" type="text/css" href="هنا مسار الملف" /> 

مثل

رمز PHP:

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

ولا ننسى أنه إذا اردنا تنسيق عدت صفحات على نمط واحد أن نضيف الكود السابق في كل الصفحات

خامساً : الأكواد وكيفية أختصارها

لو أرنا تنسيق شكلاً ما أو نصاً ما يجب علينا إتباع التالي :
نضيف كلاس أو اي دي لهذا الشكل

• قد يسأل سائل ما هو الكلاس والاي دي وما الفرق بينهما :

الكلاس والاي دي : هما الأختصار الذي من خلاله يعرف المتصفح أن هذا التنسيق لهذه الفقره

الفرق بينهما بإختصار الكلاس بإمكانك أستخدامه بعدة مواضع بنفس الصفحه والاي دي لا يمكنك إستخدامه إلا مره واحده .

• كيفية إضافة كلاس أو أي دي :-

نستطيع إضافتهما على أي شيئ سواء كان جدول أو صوره أو نص .. على جميع الوسوم تقريباً..

فلو كان لدينا نص أوصوره أو اي شيء << أقصد بأي شيء محتوى ما بالصفحه
نستطيع ذالك بإضافة ديف

مثال على الإضافه في ديف

رمز PHP:

<div class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين"></div> 

مثال على الإضافه في صوره

رمز PHP:

<img  class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين" src="مسار الصوره"/> 

مثال على الإضافه في جدول

رمز PHP:

<table class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين" style="width: 100%">
    <tr  class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين">
        <td  class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين">&nbsp;</td>
    </tr>
</table> 

مثال على الإضافه في نص

رمز PHP:

<p  class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين"></p> 

وبنفس الطريقه السابقه نظيف الـ أي دي ،،


الأكواد :

الأكواد تكون على النمط التالي

أكواد CSS

رمز PHP:

.traidnt {
    background:#f0f0f0;
    border: 1px #ccc dotted;
    width:400px;
    color:#555;
    padding:3px;
    margin:auto;
    text-align:center;
} 

بنتج لنا الشكل التالي

صوره من مساحة العمل

اتوقع وصلت الفكره ، لكن لا يغنيك شرحي البسيط عن متابعة دورات عن هذه اللغه الرائعه


الأن وصلنا لنقطه مهمه ، الا وهي أختصار الاأكواد

• أختصار الاكواد

بعيداً عن مواقع إختصار الاكواد دعونا نحاول نحن إختصارها - "لقد شاهدة الكثير من الأعضاء لا يختصر الأكواد وهذا يسبب ثقل بالتصفح بشكل بسيط لكن ستلاحظ فرق إذا كانت الاكواد كثيره "

لدينا كود خلفيه :

رمز PHP:

background: url(image.gif);background-color: #f0f0f0 ;background-repeat: repeat-x;background-position: top left; 

نختصر هذا الكود بالكود التالي

رمز PHP:

background: #f0f0f0 url(example.gif) repeat-x top left; 

ومثله كود الإطار

رمز PHP:

border-color: red;border-width: 1px;border-style: solid; 

نختصره بـ

رمز PHP:

border: 1px solid red; 

وأيظا كود الخط

رمز PHP:

font-family: Arial, Helvetica;font-weight: bold;font-style: italic;font-size: 1em;line-height: 1.5em; 

نختصره بـ

رمز PHP:

font: bold italic 1em/1.5em Arial, Helvetica; 

أعتقد أن الفكره لم تصل
دعوني أشرح قليلاً

لدينا كود التباعد الخارجي

رمز PHP:

margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px; 

بدلا من أن تسخدم
top = أعلى
right = يمين
bottom = أسفل
left = يسار

نوحدها تحت الاسم الاساسي فقط

لو كان لدينا شكل ونريد أن يكون التباعد الخارجي له 10px من كل الجهات نستخدم الكود التالي

رمز PHP:

margin:10px; 

ولو كان لكل جهه مقاس نستخدم الكو التالي

رمز PHP:

margin:10px 10px 10px 10px; 

أعتقد أن الفكره وصلت بشكل بسيط

الان لو كا لدينا عدة أشكال ولها نمط CSS واحد بدلا من كتابتها كالتالي

رمز PHP:

.traidnt {
    background:#f0f0f0;
    border: 1px #ccc dotted;
    width:400px;
    color:#555;
    padding:3px;
    margin:auto;
    text-align:center;
}
.traidnt1 {
    background:#f0f0f0;
    border: 1px #ccc dotted;
    width:400px;
    color:#555;
    padding:3px;
    margin:auto;
    text-align:center;
}
.traidnt2 {
    background:#f0f0f0;
    border: 1px #ccc dotted;
    width:400px;
    color:#555;
    padding:3px;
    margin:auto;
    text-align:center;
}
.traidnt3 {
    background:#f0f0f0;
    border: 1px #ccc dotted;
    width:400px;
    color:#555;
    padding:3px;
    margin:auto;
    text-align:center;
} 

نستطيع كتابتها كالتالي

رمز PHP:

.traidnt ,.traidnt1 ,.traidnt2 ,.traidnt3 {
    background:#f0f0f0;
    border: 1px #ccc dotted;
    width:400px;
    color:#555;
    padding:3px;
    margin:auto;
    text-align:center;
} 

سادساً : نصائح مهمه حولها

1- أختصر أكوادك
2- رتب صفحة الاكواد بحيث يكون كل كود في سطر
3- أستخدم إختصارات الكلاس والـ اي دي بأسماء مفيده
4- ضع تعليقات توضح أن الكود يتبع لأي جزء من الصفحه "لو أراد شخص التعديل يجد السهول والفهم السريع للكود" أكتب التعليقات بين /* */
5- راجع أكوادك قبل أعتماد العمل
6- لا تستعجل بالكتابه
7- أكتب أكواد HTML والأساسيات أولا
8- أستخدم أحد المحرارات للغة الـ css لتساعدك على الاختصار وتصحيح الاكواد
9- أبداء التنسق بالون الابيض والرمادي ثم توجه إلى تنسيقك الخاص

إلى هذا الحد أصل إلى إنهاية الموضوع

أتمنى أن أكون أفدتكم ، وإلى اللقاء في مواضيع قادمه 

 by : D7ooM

  

مثال بسيط لمعرفة عدد متواجدين حاليا PHP & MYSQL

السلام عليكم ورحمة الله وبركاته
إن شاء الله درسنا اليوم سهل جدًا، وهو تعمل ملف متواجدون الآن بإستخدام PHP و MySQL
أولاً سنحتاج إنشاء جدول فى قاعدة البيانات، هذا الجدول يقوم بتحديث نفسه تلقائيًا ، وسوف أشرح كيف يحدث نفسه تلقائيًا

كود:

CREATE TABLE online ( 
id int(11) NOT NULL auto_increment, 
visitor varchar(100) default NULL, 
timevisit int(11) NOT NULL default '0', 
PRIMARY KEY (id) 
) TYPE=MyISAM;  

id هو رقم الزائر وهو مفتاح Primer key ، وهو من النوع integer ويتكرر بإضافة 1 تلقائيًا
visitor هنا يتم تخزين الأى بي أو الهوست
لأن الوقت سنقوم بإدخاله رقم صحيح باستخدام دالة time في الـ PHP

ما معنى يتم تحديثه باستمرار ؟
أي أن حالياً المتواجدون الآن مثلاً 5 .. ستجد الجدول يتكون من 5 سجلات وعند دخول أي مستخدم للصفحة ستجد بأنه أضاف سجل جديد وكذلك عند خروج أي مستخدم من الصفحة يتم حذف السجل الخاص به .

لننشئ ملف وليكن اسمه online.php ونضع الكود التالي :
أولاً بيانات الإتصال والدخول لقاعدة البيانات

كود:

  
 <?php $connect=mysql_connect("localhost","username","password") or die (mysql_error()); 
mysql_select_db("php",$connect) or die (mysql_error());?>       

لآن لننشئ متغير قيمته دالة .. هذه الدالة خاصة بإظهار الـ host الخاص بالمستخدم
والدالة الخاصة بإظهار الهوست هي gethostbyaddr :

كود:

 <?php $host=gethostbyaddr($_SERVER['REMOTE_ADDR']) ;?>       

المتغير REMOTE_ADDR وضعناه في مصفوفة $_SERVER لأن معظم المواقع لا تدعم خاصة الـ register globals

الآن لنحدد الوقت الذي تريد إبقاء المتواجدون الآن بالدالة time ونضعه في متغير وليكن $thime_now

كود:

 <?php $time_now=time()-3600; ?>

الآن نجري إستعلام في قاعدة البيانات بتفريغ ( حذف محتويات ) الجدول بشرط
أن يكون الوقت في الحقل timevisit الموجود في القاعدة أصغر من التوقيت الذي قمت بتحديده أنت بالأعلى

كود:

 <?php mysql_query("delete from online where timevisit<'$time_now'"); ?>       

الآن نجري إستعلام باستخدام الدالة mysql_num_rows ( فائدة هذه الدالة عرض عدد السجلات بالجدول )
وفي الأعلى قلت إن عدد السجلات هو نفسه عدد المتواجدون الآن !
ونريد سجلات حقل id ..

كود:

 <?php  
// هذا الإستعلام بإظهار جميع السجلات  
$query=mysql_query("SELECT id FROM online where visitor='$host'")or die (mysql_error()); 

// هذه الدالة لإظهار عدد السجلات 
$rows=mysql_num_rows($query); 
 ?>       

  عدد المتواجدون الآن ( عدد السجلات ) موجود في المتغير $rows
نضع شرط أنه لو كان عدد المتواجدون الآن أكبر من صفر يقوم بتعديل الوقت الموجود في حقل الوقت ..

كود:

 <?php if ($uexists>0){ 
mysql_query("update online set timevisit='$time_now' where visitor='$host'"); ?>       

وإذا لم يتحقق الشرط ( أي لم يكن هناك متواجدون الآن أنت فقط المتواجد في الصفحة ) يضيف سجل جديد للجدول ببيانات جديدة

كود:

 <?php  
} else { 
mysql_query("insert into online (id,visitor,timevisit) values ('null','$host','$time_now')"); 
} 
 ?>       

وفي الواقع أنه عند دخول مستخدم يضيف سجل جديد له وفي نفس الوقت يقوم بتحديث السجل .
نجري إستعلام لإظهار السجلات :

كود:

 <?php $rs=mysql_query("select * from online"); ?>       

حلقة تكرار لإستخراج البيانات ( التوقيت ) :

كود:

  
 <?php 

while ($ro=mysql_fetch_array($rs)){ 

$t=date('j M Y - H:i',$ro[timevisit]); 
} 

?>       

الآن إظهار عدد المتواجدون الآن ( عدد السجلات ) باستخدام الدالة mysql_num_rows
رمز PHP:

كود:

 <?php  
$e=mysql_query("select id from online") or die(mysql_error()); 
$on=mysql_num_rows($e); 

echo "عدد المتواجدون الآن هو $on بتاريخ $t"; 
?>       

في الأخير، كود الصفحة كاملة:

كود:

  
 <?php $connect=mysql_connect("localhost","username","password") or die (mysql_error()); 
mysql_select_db("online",$connect) or die (mysql_error()); 

$host=gethostbyaddr($_SERVER['REMOTE_ADDR']) ; 

$time_now=time()-3600;  


          
 

mysql_query("delete from online where timevisit<'$time_now'");  

// هذا الإستعلام بإظهار جميع السجلات  
$query=mysql_query("SELECT id FROM online where visitor='$host'")or die (mysql_error()); 

// هذه الدالة لإظهار عدد السجلات 
$rows=mysql_num_rows($query); 

if ($uexists>0){ 
mysql_query("update online set timevisit='$time_now' where visitor='$host'");  
} else { 
mysql_query("insert into online (id,visitor,timevisit) values ('null','$host','$time_now')"); 
} 

$rs=mysql_query("select * from online"); 
while ($ro=mysql_fetch_array($rs)){ 

$t=date('j M Y - H:i',$ro[timevisit]); 
} 

$e=mysql_query("select id from online") or die(mysql_error()); 
$on=mysql_num_rows($e); 

echo "عدد المتواجدون الآن هو $on بتاريخ $t"; 
?>       

JSP & SERVLETS

بسم الله الرحمن الرحيم

يقوم المشروع على استخدام تقنية J2EE لإنشاء مكونات ويب ديناميكية , وذلك من خلال تطبيق الـ Servlets  و الـ Java Server Pages( JSPs) وغيرها .. وفق تقنية دقيقة وذات كفاءة وفعالية.

بيئة الــJ2EE

تعتبر بنية J2EE بنية مختلفة تضم عدة تقنيات منها servlets , Java Server Pages ,

Enterprise Java Bean…

وتتألف بنية J2EE  من خمس طبقات هي:

Client

Presentation

Business

Integration

Resource

تعتبر كل طبقة قسم منطقي يتضمن عدداً من العناصر تساهم في تشكيل النظام الكلي وترتبط كل طبقة مع الطبقات المجاورة ارتباطاً وثيقاً.

طبقة Client : تضم هذه الطبقة العناصر التي تعد زبائن لتطبيق الويب مثل متصفح الإنترنت أو تطبيق آخر يستخدم خدمات تطبيق الويب.

طبقة Presentation: تغلف منطق العرض. ترتبط مع طبقة Client حيث تقبل طلبات الزبائن request وتعالج المسائل المتعلقة بالوثوقية و السماحية وتدير جلسات الزبائن session. وتسلم هذه الطلبات إلى طبقة Business التي تتولى معالجة الطلبات وفق منطق البرنامج. تعود طبقة Presentation  وتأخذ النتائج من طبقة Business ليتم عرضها للزبون

العناصر التي توجد في هذه الطبقة Servlets , Java Server Pages , Filters

طبقة Business: تعتبر هذه الطبقة أساس تطبيق الإنترنت حيث تتضمن منطق عمل المنظومة التي يمثلها هذا التطبيق تتألف هذه الطبقة من عدة حبيبات java  (Java Beans)

طبقة Integration: دور هذه الطبقة مواءمة الأنماط المختلفة من مصادر البيانات الخارجية الموجودة ضمن طبقة Resource  (قاعدة بيانات , ملف , ...) لكي تتمكن عناصر طبقة Business من الاستفادة منها وتستخدم عناصر طبقة Integration  عدة تقنيات مثل JDBC , JNDI ,

J2EE Connector Technology , ….

طبقة Resource: تتضمن هذه الطبقة الموارد الخارجية التي تؤمن البيانات الفعلية للتطبيق كقواعد البيانات databases والملفات files وتقنيات التحقق من بطاقة المال  credit card

مثال  يوضح الطبقات ودور كل منها:

تطبيق لمتجر إلكتروني لبيع الأجهزة المحمولة متاح عبر الشبكة:

يقوم الزبون بالضغط على رابط لعرض المنتجات فيقوم servlet محدد (ضمن طبقة presentation ) بتلقي طلب الزبون يقوم ال servlet باستخدام أغراض من صفوف تشكل أساس التطبيق (ضمن طبقة business ) تحتاج هذه الأغراض لبيانات مخزنة ضمن قاعدة البيانات تؤمن طبقة integration البيانات المطلوبة عبر استخدام تقنية jdbc للاتصال مع قاعدة البيانات الموجودة ضمن طبقة resource

ما المقصود بالـ Servlet   ؟

-         كيان له علاقة بالمخدم ( server).

-         نموذج تصميم جديد من أجل المخدمات .

-         صف جافا جديد .

-         تقنية جديدة.

تظهر أهمية هذه التقنية الجديدة من خلال مساعدتها للمخدم بالقيام بمسؤولياته التي تتلخص فيما يلي :

1.     معالجة طلبات الزبون client request  .

2.     إنشاء رد راجع response  .

 مع كل ما تتضمنه كل مهمة من مراحل العمل وشروط واجبة التحقق , إضافة إلى أن بعضها قد تتعلق طريقة تنفيذها بنوع المخدم .

الطريقة الوحيدة لجعل المخدم بسيط هي تخديم البيانات الساكنة (static) فقط بحيث يكوّد كل شيء ببرنامج وحيد ومقبول , لكن في الوقت نفسه نحن لا نستطيع كتابة برنامج وحيد يعالج المهمات جميعها. وماذا لو أضيفت وظائف جديدة ؟ وماذا لو تغيرت صيغ البيانات؟

من أجل ذلك كله.... التصميم الأفضل من اجل مخدمات الـ HTTP  هو تقسيم الكود إلى قسمين تنفيذيين:

أحدهما يعالج الشبكة والآخر يؤمن منطق التطبيق , ونجعل كلا القسمين يملكان واجهة بينهما . هذا النوع من التقسيم يجعل من الممكن تعديل الكود وفق منطق التطبيق ودون التأثير على نموذج الشبكة .

البعض يحققون هذا التصميم من أجل مخدمات HTTP باستخدام CGI (Common Getway Interface)  لكن ذلك يحوي العديد من العيوب : إن الفكرة الأساسية من مواقع الويب ذات حركة المرور العالية هي النطاق scalability)) ,وكل استدعاء لطلب يشمل إنشاء وهدم عملية جديدة لتنفيذها على سكريبتات CGI , هذا يعني عدم فعالية عال  جداً خاصة إذا كان السكريبت ينجز روتينات التهيئة مثل الاتصال بقاعدة البيانات . وأكثر من ذلك : اتصال ملف الإدخال و الإخراج بالمخدم يسبب زيادة هامة في زمن الاستجابة الكلي .   

لذلك الطريقة الأفضل تقوم على دعم المخدم لنماذج جزئية يمكن تحميلها إلى الذاكرة وتهيئتها فقط حالما يبدأ المخدم بالعمل (start up) , هذه النماذج تدعى بـ server extensions  .

في الجافا ... الـ server extensions  تكتب باستخدام الـ servlet API(Application  Programming Interface)                                       

            و نماذج الـ server extensions  تدعى بـ servlets

ميزات الـ servlet API :

1.     المرونة  Flexibility : في أي وقت نحتاج فيه لإضافة وظيفة جديدة للمخدم , كل ما علينا فعله هو كتابة servlet معين لمجموعة من المتطلبات وربطه بالمخدم دون تعديل على المخدم نفسه

2.     تجزئة (توزيع) المسؤوليات Separation of responsibilities : المخدم الرئيسي (بذلك) يهتم بالاتصال بالشبكة وقسم الاتصالات بينما تفسير الطلبات requests  وإنشاء الرد المناسب لكل طلب فهي مهمة الـ  servlets  .

3.     الاعتماد على الجافا It’s Java : مبرمجو الجافا ليسوا بحاجة لتعلم لغة script  جديدة وبإمكانهم استخدام الميزات غرضية التوجه التي تؤمنها الجافا .

4.     قابلية النقل Portability : بإمكاننا تطوير واختبار servlet ما على container معين وتوزيعه على آخر . الـ servlet API  مستقلة عن خدمات الويب وعن الـ  containers servlet (علماً أن الـ container servlet هو النموذج الذي يخصص لإدارة الـ servlet ويستخدمه مخدم الويب لتحميل وتنفيذ الـ servlet  )

وهكذا فإن الـ servlet  بشكل عام هو قطعة من الكود تربط بالمخدم الموجود لتوسيعه وظيفياً حيث أنها تستخدم لتوليد الخرج المطلوب ديناميكياً وتخديم طلبات الـ HTTP  .

ما هي صفحة الـ JSP  ؟

هي صفحة ويب تحتوي كود جافا مضمن في واسمات الـ HTML , بحيث أن صفحة الـ JSP هي قالب HTML مكوّن من واسمات الـ JSP الفعالةactive  و واسمات الـ HTML الغير فعالة passive , وعند التنفيذ القالب يستخدم لتوليد صفحة  HTMLترسل إلى الزبون .

تشكل الـ  JSP  طبقة التمثيل presentation layer  في بناء الـ(J2EE) : Sun's Java Enterprise Edition .

Servlet  or JSP  ؟

لذلك يفضل استخدام صفحات الـ JSP  للعرض أي visual presentation  .

بينما تستخدم الـ  servlet للتحكم بسير العمل .

ما هو الـ web application ؟

-         تطبيق يتم الوصول إليه من خلال الويب .

-         الفائدة الأساسية لتطبيق الويب هي سهولة وصول المستخدمين إلى التطبيقات , كل ما يحتاجه المستخدم هو مستعرض ويب ليصبح التطبيق منصباً على جهازه .

-         في الواقع , الـ web application يتألف من servlets عديدة و صفحات JSP  و ملفات HTML  وملفات صور وغير ذلك .. كل هذه المكونات تتناسق مع بعضها البعض وتؤمن مجموعة متكاملة لخدمات المستخدمين .

-         يوصَّف تطبيق الويب باستخدام  deployment descriptor   وهو ملف xml يسمى بـ web.xml يحوي وصفاً لكل المكونات الديناميكية الخاصة بتطبيق الويب , كمثال : هذا الملف يحوي المدخل إلى كل استخدامات الـ servlet في تطبيق الويب , كذلك يبين مظاهر السرية في التطبيق .

مخدم التطبيق Application Server  يستخدم الـ deployment descriptor لتهيئة مكونات تطبيق الويب وجعلها متوفرة للزبائن .

-         بشكل مختصر : web application مجموعة من مكونات الويب التي تنجز مهمات محددة وتسمح بتحقيق منطق العمل عبر مستعرضات الإنترنت .

HTTP Protocol :

Hypertext  Transfer Protocol  بروتوكول معتمد على الثنائية request-response)  )

يمتاز بالصفة stateless أي: حالما يرسل المخدم الرد فإنه ينسى ما يعلمه عن الزبون . بمعنى آخر : رد أي طلب لا يعتمد على أي طلبات قام بها الزبون مسبقاً . من وجهة نظر المخدم : أي طلب هو الطلب الأول من الزبون client .