تجهيز بيئة العمل لاستخدام SASS و Compass

April 26, 2015

sass-logo

باستخدم CSS في التصميم منذ سنين ولا اجد صعوبة في ذلك الى ان بدأت في العمل في مشاريع كبيرة ومن هنا اتت بعض المشاكل ومنها الـ Maintainability او قابلية التعديل كان هناك صعوبة شديدة في ده والوصول اصلا للجزء المطلوب تعديله وكمان كان فيه Boilerplate Code كتير جدا بيتكرر زي مثلا انك تعمل اي حاجة في الCSS3 ولكل Browser طريقة في عملها او Prefix فبتكتب نفس ال 4 سطور مثلا كل مرة تطبق transform مثلا وغيرها .. الى ان عرفت مجموعة من التكنولوجيز الجديدة اللى قررت استعملها بمجرد ما لاقيتها بتحل مجموعة المشاكل اللى كانت بتواجهني اللى منهم SASS موضوع كلامنا انهاردة وازاى نجهز ال Environment بتاعتنا لاستخدامها ، خلونا نتابع خطوات التجهيز.

اولا تنزيل SASS وعمل setup ليها فهتدخل على السايت بتاع Sass من هنا وبعدين على حسب نظام التشغيل بتاعك هتسطب الSass فمثلا انا هاوجه كلامى حالا لمستخدمي ويندوز هتنزل الـ Ruby Installer من هنا وبعدين بعد التسطيب مباشرة تقدر تفتح فولدر تسميه مثلا SCSS وتعمل فيه ملف تسميه  مثلا Style.scss وتكتب فيه اكواد ال SCSS زي مانت عاوز وبعدين تفتح CMD في الPath بتاع الفولدر ده وتكتب فيها الCommand التالى:

scss Style.scss Style.css

والامر اللى فات ده بيقول لل SASS انه يترجم الكود اللى في ملف Style.scss الى CSS عادي في ملف Style.css ، ده ابسط امر ممكن وسهل جدا اعتقد

طيب دلوقت بقى ممكن نستخدم Frameworks تترجملنا ال SASS ده الى CSS بطريقة بسيطة ؟ ايوة فيه طرق تانية ممكن نستخدمها فيه منها المجانى ومنهم المدفوع خلونا دلوقت اديكم مثال بواحد مجانى اسمه Compass ببساطة هنفتح CMD عادي ونكتب فيها ال Command التالى :

gem install compass

وده هيعمل Setup للـ Compass على طول بعدها نروح الفولدر بتاع الSass اللى عملناه من شوية ونكتب Command جديد في ال CMD عشان نترجمها الى CSS عادي بس قبلها بقى لازم تكتب Configuration عشان الـ Compass يفهم احنا عاوزينه يترجم ايه بالظبط ويحطه فين بالظبظ ، هنعمل file نسميه config.rb وبعدين نكتب فيه التالى:

http_path = “/”
css_dir = “css”
images_dir = “img”
sass_dir = “SCSS”
javascripts_dir = “js”

بعدها ممكن تطلع على الـ ROOT وتكتب في ال CMD امر زي ده:

compass compile

وده هيترجم على طول كل ال SASS code ده الى css ببساطة ، المشكلة الصغيرة بقى هنا انك في كل تغيير هتعمله في ال SASS file هتضطر انك تعمل نفس الـ command ده تاني لكن compass حل المشكلة دي لانك ممكن تكتب الcommand التالى:

compass watch

وتسيبه ومع كل تعديل تعمله في ملف الـ SASS هو اوتوماتيك هيحس بيه ويترجمه في ملف ال CSS على طول من غير اي مجهود

بس كدة كفاية انهاردة بعدين نتكلم على ازاى استخدم SCSS وايه افضل الطرق لاستخدامها كمان والى ان يأتي المقال ده ممكن تقرأ بنفسك كيفية استخدام SCSS من الموقع الرسمي ليه ، سلامات :)

Tags

خمس مواقع ادمنتها مؤخرا

April 21, 2015

العالم في تطور مستمر يعنى اللى كنا نشوفه من سنة ننبهر بيه من تكنولوجيا دلوقت بقى عادى جدا ويمكن اقل من العادي انا فاكر اول ما نزلت الموبايلات التاتش دي من كام سنة كدة بصراحة انا كنت كارهها لانها في بدايتها كانت حساسيتها سيئة جدا بس في الوقت نفسه منبهر جدا لانه كان في حد ذاته انجاز غير مسبوق (عملوا تليفون من غير زراير يا جدعان :D ) المهم يعنى اللى عاوز اقوله انه مجال الويب زي كل حاجة اصبح اكثر تطورا وسريع جدا كمان ومع متطلبات الشخص اليومية بيزيد الطلب لمواقع بافكار جديدة تجذب الناس وتحللهم مشاكل اكتر و في المقال ده انا هاتكلم سريعا عن كام موقع كدة منهم اللى باستعمله من زمان ومنهم اللى عرفته مؤخرا صدفة واصبحت من مدمنيه ، منهم اللى ترفيهي ومنهم اللى في الشغل ومافيهوش هزار … خليني اعرضهم عليكم جايز تفيدكم

1- Nettuts+

موقع تعليمي : في الحقيقة انا من اشد المعجبين بالسايت ده وباسلوبه في التعليم ويمكن جيت في فترة عملت سبسكريب عليه عشان اشوف الكونتينت البريميوم ، اسلوبه سلس جدا ومتجدد تقريبا كل يوم فيه مقال او كل يومين ، الناس اللى بتتكلم فيه Professional اوى وده اللى بيخليني اتردد عليه من وقت لأخر لما اكون باتعلم تكنولوجي جديدة .. انصح بمتابعته ولو عجبكم سجلوا فيه كمان ده تسجيله ب 15$ بس في الشهر وكمان فيه 15 يوم trial جرب ممكن يفيدك :)

2- SitePoint

سايت تعليمي بردو بيعرض شوية tips كويسة جدا خصوصا في الجافاسكريبت والHTML/CSS مش هو السايت الوحيد بس بصراحة حسيت انه يستحق ينضاف لليستة دي

3- Github

 سايت يدرج تحت تعليمي بردو بالنسبالي ، جيت هاب (للناس اللى في المجال بتاعنا و لا قدر الله ماتعرفوش) ده سايت  يعتبر افضل موقع بيقدم خدمة ال Code Sharing بين افراد الفريق الواحد ، تقدر تدخل تعمل عليه Repository مجانا وترفع عليه شغلك باستخدام Git Commands وتبدأ تشير وتشارك مع اصحابك ، الجميل في الموقع ده انه عليه السورس كود بتاع معظم المشاريع الاوبن سورس الجامدة اوى زي NodeJS و JQuery وغيرهم .. افتح الكود وشوف وشارك كما في تعديل الفيرجن الجاية ، اتعلمت كتير من ال Best Practices اللى عم بيكتبوا بيها كودهم وانصحك تجرب هتتعلم كتير من قراءة كود مكتوب باحترافية.

4- CodeFights

بافتح الاكونت بتاعي على Linkedin كالعادة كل صباح ، لاقيت واحد صاحبي عامل شير للسايت ده في الاول مانتبهتش ليه بس قولت ادخل ابص عليه كدة ، فبصراحة عجبني جدا .. فكرة السايت ده انك تعمل اكونت وتدخل زي الالعاب الاونلاين بالظبط وهو تقريبا لعبة يعنى وتحدد لغة البرمجة المفضلة ليك وتدخل Fight مع اى حد بيكون الFight ده عبارة عن 3 جولات وكل جولة 3 دقايق بيجيلك سؤال باللغة بتاعتك وبيجيله نفس السؤال باللغة اللى هو مختارها وبيكون فيه Algorithm هو كاتبهولك وفيه غلطة في سطر كود واحد من المكتوب مطلوب تصلحها واللى يجاوب الاول بياخد سكور اعلى مش بس كدة انت ممكن تدعو واحد صاحبك يلاعبك عليه … في الحقيقة لاقيته سايت ممتع جدا وبدل ما تضيع وقت وانت بتفك شوية في اي لعبة عبيطة زي Candy crush ولا Dark Fighter اعتقد انه الافضل انك تلعب وترفه وانت بتشغل دماغك بردو في البرمجة. استمتع:)

5- SoundCloud

ايوة انا عارف انه مش من نفس الكاتيجوري السابقة لكن في الحقيقة اصبحت انا و ساوند كلاود اصدقاء جدا من وقت ماتعرفت عليه :D ، لك ان تتخيل انه الiPhone بتاعي مش عليه ولا Sound Track واحد لاني تقريبا معتمد في المزيكا بشكل كامل على السايت ده وطبعا الابليكاشن بتاعه على الموبايل ، سايت اكثر من رائع وبيعجبني الابديتس اللى بيعملوها في ال Front-end بتاعته اول باول تقريبا كدة عندهم Contineous Integration كل يوم .. اصبح بالنسبالى ادمااان ويمكن فعلا انا منبهر كمان بتطوير السايت ده اكتر كمان من السيرفيس اللى بيقدمها ;) استمتع

طبعا دول مش كل حاجة فيه بقى انى اتشيك الاكونتات بتاعتي على Twitter وعلى Facebook بس ده مش دايما يعنى وطبعا Google مافيش يوم بيعدى من غيره واهم اهم حاجة طبعا بافتحها كل يوم وكل 5 دقايق تقريبا ويمكن ناس كتير تعرف عني ده هو Gmail بتاعى ده البريماري ميل عندي واهم حاجة تقريبا في وجودي على الانترنت ، وغيرهم بقى من المواقع اللى اتعودنا عليهم كلنا ، حبيت اشير معاكم انا بقيت معتم بايه الايام دي واتمنى تشاركوني باهتماماتكم من مواقع تانية نلفت لبعض انتباهنا ليها في التعليقات … سلامات :)

Tags

ازاى الاقي شغلانه الاحلام ؟

March 24, 2015

اول مابتتخرج من الكلية بتلاقي نفسك مٌفعم بالحيوية ونفسك تقلب الدنيا ، خلصت ايام المذاكرة والمحاضرات والسكاشن ونقل الشيت من اصحابك والكلام اللى كلنا عارفينه ده :D كانت ايام حلوة طبعا مافيش كلام لكن مش ده اللى بيأكل عيش في الحقيقة خصوصا في مصر بلدنا العزيز ، طيب ايه بقى اللى بيأكل عيش وازاى اوصله ؟؟؟؟ انا أقولك … اهلا بيك في العالم الجديد ، الخلاط اللى بننضرب كلنا فيه واللى مش بيخرج سليم منه الا اللى فاهم كويس اوى ازاى يشتغل وفين يشتغل وعامل حسابه للضربات اللى هيلاقيها من اللى جوة الخلاط ومن ناس تانية كمان زيه بالظبط لانه للاسف كله بيتسابق عشان يوصل لزروة الخلاط … في المقال ده هنتكلم بشكل سريع كدة ومختصر عن ازاى تلاقي الشغلانة اللى تقبل يضيع فيها شوية من عمرك وانت على الاقل مرتاح الضمير.

10 حاجات ممكن تساعدك تلاقي الشغلانة اللى تحبها

job-search

1 – اعمل اكونت على موقع لينكدان

من اهم الحاجات اللى مبسوط انى عملتها بدري في الكاريير بتاعى هو انى عملت اكونت على لينكدان وبدأت ازود عليه اى خبره اوصلها اول باول وعن تجربة انا جالى من عليه اكتر من 3 شغلانات فري لانس وشغلين فول تايم بيني وبينكم المفروض كنت اكتب عنوان الفقرة دي “ظبط السي في بتاعك” بس الحقيقة انه في مجالنا وحسب اعتقادي السي في اصبح ورقة لا قيمة لها قصاد الامكانيات الحقيقية للشخص ده، بجد عمرك ما هتندم انك عملت اكونت عليه بل هتحس فعلا ان ده هيساعدك كتير اوى وهتفتكر المقال ده.. بعد ماتعمل الاكونت ضيف كل الخبرات اللى توصلتلها في يوم واطلب من اصحابك يعملولك Endorsement ومن اي حد كان مديرك او صاحبك يعملك Recommendation ، ده كله بيخليك تكون من اول اقتراحات الموقع لاى حد بيدور على ناس يشغلها في المجال بتاعك.

2 – دور على صفحة Careers في مواقع الشركات الكبيرة

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

3 – ادخل في عمل تطوعى

عن قناعة شديدة عندي تجربة العمل التطوعى تجربة هايلة جدا بتنمي خبراتك وعلاقاتك وكمان بتساعدك تجرب حاجات صعب تجربها في بيزينيس حقيقي او بمعنى اصح صاحب الشغل مش هيسيبك تجرب في فلوسه انما العمل التطوعى بيكون اقل خطورة فممكن تنجز فيه احسن كمان مابتنجز في البيزينيس ، حاجة بتنمي روحك وبتكسبك مهارات وبتخليك تكتشف في نفسك مهارات اكتر، كل ده ممكن يفيدك قبل ماتدخل تجربة العمل الحقيقي وبعدها كمان ، اوعى تبطل تعمل حاجات لغيرك من غير مقابل ، ولو ماجربتش جربها على مسؤليتي :) .

4 – ابني شبكة معارف من الناس الكويسة في المجال

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

5 – ماتتكبرش على حد ابدا مهما كانت معلوماتك

بداية الانهيار ليك في اى شركة انك تبدأ تتكبر بمعلوماتك وتحس انك افضل من زمايلك ، رغم انك ممكن فعلا تكون كدة لكن مين عالم ممكن يكون فيه واحد اقل علما منك والشركة تقرر تمشيك انت لانها لاقت واحد متواضع يعمل الشغل اللى بتعمله رغم انه مش افضل منك ولا حاجة ، فلذلك عاوز اقولك بالبلدي كدة ماتدخلش اي شركة تعمل فيها انت البورم اللى فيهم يعنى ، لانه ده بينقلب عليك كليا. ، واعرف واحد قدم عندنا في الشركة وهو داخل للراجل اللى بيعمله انترفيوقاله طيب كنت بتشتغل ايه بالظبط في ميكروسوفت ؟ قاله كنا بنشتغل في حاجات وبنستخدم تكنولوجيا انتوا اصلا ماسمعتوش عنها ، فاللى بيعمله انترفيو قرر بقى تكون الاسئلة بمستوى راجل بالخبرات العظيمة دي ، اقل ما يقال عن النتيجة انه اللى جاي يقدم ده اتبهدل ولا عرف يجاوب كتير اوى من الاسئلة اللى اتسألها .. و الـ Interviewer ده بيحكيلي طبعا كان امر مثير جدا للضحك ولكن نتعلم منه الدرس بتاع التواضع مهما كان مستواك ولكن مش باقصد تتفه من نفسك بردو.

6 – احضر مؤتمرات في مجالك كتير

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

7 – ارسم لنفسك سلم وظيفي او خطة كاريير

فيه سؤال الى حد ما سخيف بيتكرر في كل الانترفيوهات ، انت شايف نفسك ايه بعد  5 سنين ؟ والرد المحفوظ انا شايف نفسي في مكان احسن من دلوقت او يقول اي بوزيشن معروف ، لكن للاسف في العقل الباطن انت مش مدربه كويس على كدة ، المطلوب فعلا تكون عارف كويس اوى انت هتكون فيه كمان سنة كمان سنتين كمان 5 سنين مش عشان الانترفيو يعنى لا عشانك انت.

8 – ماتتسرعش وتطلب فلوس غير لما تثبت نفسك كويس

كتير مننا بيكون في الاول نفسه في اي شركة تقبله عشان يشبع نفسه بفكرة انه ممكن يتقبل اصلا اول مايحس انه اشتغل وكله تمام يقوم طالب فلوس اكتر ، ماقولتش حاجة ده حقك فعلا لكن ماتجيش بقى لو الشركة رفضت الزيادة في الوقت ده لسبب ما تقوم انت تقصر وتقول لنفسك “على قد فلوسهم” ده بقى قمة الغلط وبالمناسبة سمعت الكلام ده من ناس كتير كانوا زمايلي في شركات قبل كدة ، اثبت نفسك كويس وحتى لو الشركة مازودتكش دور على شغل تانى وانت بتقوم بشغلك كويس جدا بردو.

9 – ماتنتظرش شكر من اى حد على اى مجهود بتبذله

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

10 – اعرف قيمة نفسك كويس

اخر حاجة احب انصحك بيها ، انك تعرف كويس اوى انت مستواك ايه وبقيت عامل ازاى ومن وقت للتاني تعرف انت في انهو مستوى وهل ده الوقت المناسب انك تروح لشركة اكبر ولا لا ، كل ده لابد يكون شاغل ذهنك انك تكون في شغلك قادر على قياس قدراتك بتزيد ولا لا ولو بتزيد ده يمكنك تروح شركة اكبر ولا محتاج وقت ومحتاج تتعلم ايه ، ولازم تقدر نفسك صح لانه لو انت ماقدرتش نفسك صح ماحدش اصلا هيقدرك.

في النهاية ده كانت بس شوية نصايح من وجهة نظري ممكن تساعدك لكن ده مش كل حاجة ، انت ممكن يكون عندك نصايح تانية ممكن تفيد بيها غيرك كتير ، شاركها معانا في التعليقات ، اخر حاجة عاوز اقولها بس ابدأ من اي مستوى وماتقولش لأ انا ماشتغلش في شركة بالمستوى الفلانى اى كدة ، انا شخصيا بدأت في شركة كانت اصلها محل موبايلات :D بحد مش باهزر ، انت محتاج لكل المستويات تشتغل فيها وصدقني ده اللى هيفيدك جدا في مستقبلك القريب بإذن الله .

سلامات :)

Tags

لماذا اكتب مقالات تقنية ؟

March 17, 2015

من ايام ما كنت بأدرس في الكلية وانا كان عندي فضول مبهم ناحية اي تكنولوجي اسمع عنها … كنت احاول اسيرش عليها او اعرف عنها اكتر من حد معروف عنه انه بيعرف التكونوجي دي كويس وبصراحة انا مدين بالفضل لناس كتير اوى انا اتعلمت منهم حاجات كتير جدا … فانا مدين لكل شخص عرفت منه معلومة ومدين لكل واحد ساعده عشان يعرف المعلومة اللى عرفهالى دي ومدين لاهله اللى علموه انه مايبخلش بالعلم على حد ومدين لكل واحد قريتله بوست مفيد في البلوج بتاعته وهكذا ، وبالتالى فانا مدين لناس كتير اوى تقدروا تمشوا على نفس المنظومة دي ال ما شاء الله .. وبالتالى قررت انى ماسيبش المعلومات دي تقف عندي وانى اخلي فيه ناس تانية مدينة بالفضل للناس اللى اتعلمت منهم الحاجات دي :) (الحلزونة – انا عارف).

أكتب مقالك الأول الآن …. لماذا ؟

اكتب مقالك الآن بالعربية

أنا باكتب المقال ده عشان اقدم دعوة لكل الناس اللى بتقرأه انهم يحاولوا يكتبوا اي معلومة عندهم في مقالات تقنية او غيرها ، صدقونى ده بينميكم جدا وبينمي طريقة تفكيركم في انكم تقدروا تشرحوا حاجة وده بيفيد جدا في ال Career بتاعتك انت مش هتفضل طول عمرك دفيلوبر صغير ، انت قدام شوية هتكون Senior وتحتيك ناس Juniors وهتحتاج يكون عندك طريقة واسلوب توصل بيه معلوماتك ، صدقونى انا قابلت ناس كتير اوى عباقرة ولو قولتله على حاجة يعملها بيقدمه بشكل مميز جدا لكن لو طلبت منه يشرحها لحد الحد ده بيفكره مايعرفش اي حاجه لانه مش مرتب افكاره كويس ولا اتعود على كدة اصلا .. اللى بنستفيده اوى في موضوع كتابة المقالات التقنية دي انك بتتعلم كويس اوى ازاى ترتب افكارك، جرب ومش هتخسر حاجة لو كان عندك معلومة وعملت عليها سيرش ومالاقيتهاش بشكل مباشر او مش متظبطه اوى  وبعد تعب انت لاقيتلها حل بمجهودك الجبار ده ، على طول اتفضل اكتبها مقال وانشره على طول ، فلو كنت بتكتب قبل كدة ارجع اكتب تانى ولو ماكنتش بتكتب حاول تكتب مش مشكلة جودة المقال اوى مؤقتا طالما هيوصل المعلومة للى بيقرأه … انا شخصيا باكتب مقالات تقنية من 2009 ويمكن وقتها كان عندي مدونة مجانية على ورد بريس وربنا كرمنى وعرفت اشتري هوست ودومين وعملت المدونة اللى حضرتك شايفها دي.

قم بعمل مدونتك الشخصية:

عمل مدونة شخصية او تقنية عموما امر اصبح في منتهى البساطة ، ففي بداية كتابتي المقالات كما ذكرت بدأت بمدونة مجانية على موقع WordPress تستطيع رؤيتها من هنا ، ايضا يوجد مدونات مجانية اخرى مثل Tumblr او Blogger وغيرهم .. فقط فكر في الامر وجربه مجانا واذا وجدت انه بامكانك فعل ذلك بشكل جيد قم بشراء Domain خاص بك وهوست وقم بعمل موقعك الشخصي ، ومن السهل ايضا استخدام اى CMS تراها مناسبة لك مثل WordPress CMS او Joomla او Drupal اي منهم تراه مناسب لك ابحث عنه على جوجل وجربه الأن .. ولكنى شخصيا افضل WordPress.

شارك في مجلات ومواقع تقنية:

من الممكن ان ترفض دعوتى بعمل مدونتك الشخصية عزيزي القارئ  قد يكون بحجة الخوف او بحجة انك لا تملك الوقت لتتابع مدونتك بشكل دوري مثلا او لا تملك الخبرة لذلك ، ولكن اقول لك هذا طبيعي عند كثيرا من الناس فلا تقلق ، يمكنك ان تشارك آخرين في مجلات او مواقع تقنية قوية وتتعلم منهم وتكتب وتحسن طريقتك في الكتابة من خلال المشاركة معهم هناك الكثير وعليك ان تبحث عنهم ففريق ديف ميكس على سبيل المثال لديه مدونته الشخصية والتى نستغلها دائما في كتابة المقالات التقنية جميعنا رغم ان معظمنا لديه مدونته الشخصية ، جرب التواصل مع الفريق من خلال هذا العنوان الالكتروني [ bloggers@devmix.org ]  وقل انك تود المشاركة في كتابة مقالات واذا كنت كاتب جيد من قبل يستحب ان ترسل مجموعة من المقالات التى كتبتها ، فقط لنقيس مستوى جودتها .. جرب ولا تتردد.

أكتب باللغة العربية:

هل تعلم قدر المحتوى العربي على الانترنت ؟ بالتأكيد سوف تندهش من النسبة الموجودة عليك فقط تمعن النظر في هذا الانفوجرافيك ، ان المحتوى العربي يملك فقط 3% من جملة محتوى الانترنت ، حاول دائما وإبدا كتابة مقالاتك قدر الامكان باللغة العربية لاستهداف المجتمع التقني العربي ، فالانترنت مليئ بالمقالات الانجليزية وكتابة مقالك يثري المحتوى الانجليزية في حين انه وللآسف الشديد هناك طلبة بالكليات المختصة بالتكنولوجيا حتى ولكن لغتهم الانجليزية غير جيدة حتى الآن فلا يقرأون المقالات الانجليزية المفيدة ، فإذا كنت لغتك الانجليزية قوية وتستطيع ترجمة مقال تراه جيد الى العربية فلا بأس في ذلك ، قم بفعلها طبعا بعد استإذان صاحب العمل فانا لي تجربة في عملية الترجمه تستطيع رؤيتها من هنا (مقال لكركفورد عملاق الجافاسكريبت) … ولكن رجاءا الا تفهموا الترجمه او الكتابة بالعربي خطأ انا اقصد كتابة المقال دون ترجمه الالفاظ التقنية مثل بعض الناس يكتبون الدوال والتى يقصدون بها Methods او يكتبون مثلا كود المصدر على Source Code  طيب ما حضرتك كتبت كود عادي اهو خايف تكتب سورس يقولوا عليك حاجة .. ده بقى اللى مش تمام اكتب المقال عربي ولكن احتفظ بالالفاظ التقنية زي ماهى .. ماتبوظش دماغ اللى بيقرأ ابوس ايدك.

الخلاصة:

كتابة مقالات تفيد بيها غيرك هو اضعف الايمان عشان تكون مؤثر في المجتمع اللى انت فيه لو تقدر تكبر الموضوع شوية وتنزل تعمل sessions احسن ، ويا سلام لو تعمل Workshop او Free Course بجانب المقالات ده هيفيد كل اللى اصغر منك جدا وهيفيدك انت كمان ، واوعى تعمل ده فقط من اجل الشهرة لانه ده ممكن يصيبك بحاجة تخليك ماتستمرش اول ماتحس انك بقيت معروف شوية ، بالتأكيد ده هيكسبك شوية شهرة كدة لكن نصيحتى ليك ركز على الفايدة الاعم ليك وللناس اللى هيكونوا متلهفين على المقال الجديد اللى انت هتنزله ، لو اقتنعت بكل اللى مكتوب في المقال ده اعمل بيه وبلغ اصحابك نفسي نحس كلنا اننا بندفع المجتمع التقنى العربي بشكل كويس وبنفيد غيرنا ، ناهيك عن انه كل واحد هيقرألك معلومة مفيدة هيكون مدين لك بالفضل في المعلومة دي ويوصلها لغيره وتدور العجلة وربنا هيجازيك خير على كل ده باذن الله.

كفاية كدة انهاردة .. سلامات :D

سلسلة تعلم كوداجنيتر – الدرس 9 – Pagination

February 15, 2013
السلام عليكم ورحمة الله وبركاته … اهلا بيكم فى حلقة جديدة من سلسلة تعلم الكود اجنيتر .. انهاردة هنتعلم مع بعض حاجة بسيطة اوى وسريعة بس مهمة جدا وهى الـ Pagination وللتوضيح هو انك تكون بتعرض مثلا داتا من الداتابيز كتير شوية يعنى 1000 record على سبيل المثال وماينفعش ان اليوزر بتاعك يفضل يعمل scroll لحد ما يوصل للنهاية مثلا فالمفروض انك تخلي الابليكاشن بتاعك يعرضله مثلا كل 50 فى مرة فى 20 صفحات وهكذا وبدون اي مجهود منك .. هو ده اللى هنعمله انهاردة ان شاء الله مع بعض .. درس سريع ومفيد ان شاء الله.
-
عن الـ Pagination library:
زي ماتعودنا دايما هاتكلم فى الاول عن المكتبة اللى هنستعملها وطريقة استعمالها سريعا وهى مكتبة pagination وتقدر توصل للتوتوريالز بتاعتها من عى الموقع من هنا ، فهي ببساطة بتديها شوية configurations بسيطة اوى ، هنستعين طبعا الـ database فانصحك بمراجعة الجزء الثالث و الرابع قبل البدأ هنا ، تعالوا نشوف الكود اللى انا جايبه من التوتوريالز وبعدين نشرح :

 

تعالوا بقى نفسر سطر بسطر ، اول سطر ده هو استدعاء الـ library نفسها زي ماحنا عارفين على طول ، اما السطر الثاني والثالث والرابع دول واضح انهم سطور فى array احنا عملناها اسمها config كتبنا فيها شوية حاجات اولا فى اول سطر base_url هو الـ index بتاعى وبيشاور على url معين اليو ار ال ده هو full url لو لاحظنا فيه اسم الكونترولر test وبعده اسمه الـ function بتاعتى واسمها page ودي اللى بيتم فيها الـ pagination نفسه وفيها الكود الحالى اللى بنشرحه ده ، اما السطر التاني والاندكس بتاعه total_rows هو العدد الكامل للـ records اللى انت عاوز تقسمهم على pages وطبعا هنا هو كاتب عددهم مباشر كدة انما احنا المفروض نجيب العدد من الداتابيز ، اما السطر التالت والاندكس فيه per_page هو عدد الـ records اللى المفروض تتعرض فى الصفحة الواحده ، وبعدها بنعمل intialization فى السطر اللى بعده وبنباصي الـ configurations اللى عملناها معاه ، دلوقت الـ pagination تمام وشغال معايا ممكن بقى اعرض اللينكات اللى بيتعمل بيها pagination زي ماعملنا فى السطر اللى بعده باستدعاء ()create_links وهيظهرلي الصورة اللى معروضة فوق دي واللى الديفولت بتاعها تظهر 3 لينكات بس …. ده كان تفسير سريع كدة للمكتبة ماشية ازاى لكن فى الحقيقة احنا بنعرض فى view عادي جدا زي ما هانشوف فى المثال بتاعنا كمان شوية.

 

-

 

عن الـ Table library:

 

طبعا انا ماتكلمتش عن الـ table library قبل كدة لكن هاتكلم عنها انهاردة لاننا هنستعملها كدة بشكل بسيط لانها هتسرع علينا كتير اوى ، هي ببساطة class بيعمل generation لجدول بناء على array of data احنا بنبعتهاله ، وتقدر تقرأ عنه اكتر من الـ documentation بتاعته من هنا ، طريقة استدعاءه عادية جدا واهم فانكشن واللى هنستعملها انهاردة ان شاء الله كالتالى :

-
عن الـ URI library:
بردو فى المقال بتاع انهاردة هنحتاج نتعامل مع الـ uri library واللى بتسهل علينا نتعامل مع الـ uri بتاعنا ، مبدأيا يعنى ايه uri ؟ ده ببساطة اختصار لـ Uniform Resource Indentifier هو الموضوع يحتاج لكلام كتير فى الحقيقة :D عشان نبين الفرق بين الـ uri و الـ url ولكن ببساطة شديدة ممكن ناخد مثال يوضح عندنا احنا بنستخدم الـ uri ازاى عندنا فى الكوداجنيتر :

http://example.com/index.php/news/local/metro/crime_is_up

لو اعتبرنا ان ده ال_ url بتاعنا الكود التالى ده يبين لنا كل سطر والنتيجة بتاعته قصاده :

تمام واعتقد المثال وضح احنا هنستعملها ازاى كويس ، مع العلم بانه فى الكوداجنيتر ، بيكون تقسيم الـ uri على اساس اول مقطر هو اسم الـ controller وتانى مقطع هو اسم function موجودة داخل الكونترولر ده اما من اول المقطع التالت واللى بعده كلهم بيكونوا عبارة عن parameters للفانكشن دي، او احيانا مش بيكونوا براميترز للفانكشن دي وبيكونوا باراميترز لفانكشنز تانية فى الـ background زي ماهانشوف فى مثالنا كمان شوية.

 

-

 

مثال بسيط على الـ Pagination:

 

نبدأ مثالنا كالعادة باننا نجيب نسخة جديدة للكوداجنيتر من موقعها الرسمي ، ونفكها فى الـ root بتاعنا وانا هاسمي المثال بتاعنا ci_pagination ، سميه انت اي اسم زي ماتحب عادي ، وعملت انا داتابيز اسمها cipagination عندي ممكن انتوا تعملوا اى داتابيز عندكم وعملت جدول اسمه articles وحطيت فيه 100 ريكورد كدة بشكل مبدأى عشان نعمل بيهم تيست ، يبقى دلوقت نعمل الاول شوية configurations ، اولا نفتح ملف autoload.php اللى فى فولدر config ونعدل ونضيف التالى :

ثم نفتح طبعا ملف database.php اللى فى نفس الفولدر ونحط فيها بيانات الداتابيز بتاعتنا :

دلوقت احنا جاهزين نبدأ المثال البسيط اوى ده ، هنروح نعمل ملف فى الـ controllers فولدر ونسميه مثلا data.php فى المسار التالى :

 

www/ci_pagination/application/controllers/data.php

 

وده اللى هنعمل فيه الكونفيجراشنز كلها ونستدعى المكتبة ومنه هننادي على الـ view اللى هيعرضلنا شغلنا ، نفتحه ونكتب فيه الكود التالى:

زي ماحنا شايفين كدة دي الاكواد اللى فى الكونترولر ، سهلة جدا وبسيطة اولا استدعاء المكتبة وده شرحناه وقولنا ازاى ، هنا حطيت الـ base_url بتاعى انا و هنا الموضوع مش مستاهل اننا نعمل model نحط فيه كود الداتابيز لانها اكواد بسيطة اوى فاستعملت الـ active record لو تفتكروا اللى شرحناه فى الجزء الرابع من السلسلة عشان اجيب عدد الـ records الموجودة فى الـ table بتاعى فى الداتابيز ، وحطيته فى total_rows وخليته يعرض 10 فى المرة بردو ، وعملت initialize عادي جدا ، بعدها بقى حطيت الـ records نفسها بقى فى array وبعتها مع استدعاء الـ view بتاعى عشان اتعامل مع الداتا هناك ولكن هنا بقى مش جيبنا الـ data وبس لا احنا كمان بعتنا limitations 2 بارامترز تانيين غير اسم الـ table الاولانى هو العدد اللى يجيبه من الداتابيز فى المرة والتانى بقى هو العدد اللى يبدأ من عنده يجيب العشر records دول زي ماهنشوف ويبعتهم للـ view .
دلوقت بقى تعالوا نعمل data_view.php اللى اتكلمنا عنه فوق فى المسار التالى :

www/ci_pagination/application/views/data_view.php

وهنحط فيه الكود البسيط اوى ده:

هنا ماعملناش اي حاجة غير اننا استعملنا الـ function اللى اسمها generate اللى فى الـ table library زي ماتكلمنا عليها فى الاول واديناها الـ records اللى بعتناها من الـ controller ، ده يظهرلنا الداتا اللى جايالنا من الداتابيز على شكل table بشكل سريع جدا ومن غير مجهود :) ، كوداجنيتر بتسهل عليك حاجات كتير ، اما السطر التانى فهو بيظهر الـ links اللى جربناها شرح الـ library فى الاول فالمفروض مثلا النتيجة تكون فى البراوزر لما نكتب الـ uri التالى:

 

http://localhost/ci_pagination/index.php/data/index/

 

جرب تضغط على اللينكات وتروح على اي صفحة منهم هتلاقيها شغالة وزي الفل ، لو لاحظت الـ heading بتاع الـ table جابه من اسماء الـ columns اللى فى لداتابيز انما احنا ممكن تغيره بشكل اظرف من كدة عن طريق فانكشن مدعمانا بيها table library اسمها set_heading باستعملها كدة:

هنحط السطر ده قبل ما نعمل echo للـ generate وهنشوف النتيجة دلوقت ، طبعا كدة احنا نفذنا ووصلنا للى احنا عاوزينه لكن احنا شايفين الشكل مش ظريف ومطلوب شوية css وسهل اى حد يعملها بس المفروض هنزود شوية حاجات فى الـ confignurations قبل ما نعمل intialization عشان نقدر نتحكم فى الديزاين بتاع الـ pagination زي:

ده مثلا بيحدد الـ tag اللى يتحط فيه الـ pagination links كلها ، فتحة التاج وقفلته ، وفيه غيرها كتير ممكن تشوفوها بنفسكم فى الـ documentation ، دلوقت احنا نقدر نعمله select بسهولة من الـ css ، مش هاطول عليكم بس ده css هيخلي الشكل كويس كله ان شاء الله ممكن تنزلوا الـ css file من هنا :) :
اتمنى يكون كان مقال مفيد ليكوا بالتوفيق للجميع ومنتظر آرائكم ومقترحاتكم :)

Tags

سلسلة تعلم كوداجنيتر – الدرس 8 – File Uploading

February 13, 2013
السلام عليكم .. اهلا بيكم فى حلقة جديدة من سلسلة كوداجنيتر بالعربي ، اولا اعتزر عن فترة انقطاعى عن الكتابة فى الفترة اللى فاتت وان شاء الله احاول المواظبة من الان ، فى مقال انهاردة هنتكلم فى موضوع مهم لحد كبير وهنعمل مثال بسيط اوى مع بعض ان شاء الله، لكن قبل مابدأ احب اطلب رجاء بسيط ، اتمنى اعرف اراءكم فى السلسة من خلال كومنتاتكم ومقترحاتكم هتفيد جدا واكون شاكر جدا لذلك ، موضوع مقال انهاردة معتمد على library اسمها File Uploading ، وهى library كل وظيفتها انها تسهل عملية الـ upload للملفات عن طريق شوية حاجات شبه جاهزة وانت بتزودها فقط بمجموعة entries ، وزى ماتعودنا هنعمل مقدمة كدة للـ Library قبل المثال.
-
مقدمة عن الـ File Uploading Library:
فى الـ library دي مش بس هنستعملها بشكل مستقل ، لا احنا لازم نستعملها داخل form فنتعرض للـ form helper اللى شوفناه قبل كدة فى الجزء 5 والجزء 6 من السلسلة ، تمام كل اللى هنعمله هو اننا نستدعى الـ library دي بالطريقة اللى اتعودنا عليها ولكن هنا يلزمنا نزود شوية configurations نبعتلهم مع استدعاء الـ library زي كدة:

زي ماحنا شايفين قدرنا نحدد نوع الملف اللى مسموح برفعه عن طريق الـ MIME type ، ونحدد مكان الفولدر اللى هيتم رفع الملفات فيه وممكن نضيف غيرهم كتير .

 

فيه فانكشن اساسية هي اللى بتقوم بعملية الـ upload كلها بناء على الـ preferences اللى بعتها مع الـ library ، الفانكشن دي اسمها do_upload بتتوقع بشكل افتراضي انه يكون الـ file field اللى بتضغط عليه عشان تضيف الفيلز اسمه userfile ولكن من الممكن اننا نخليه زي ماحنا عاوزين باننا نبعته كـ parameter فى الفانكشن دي.

 

-

 

مثال بسيط لرفع صورة:

 

دلوقت تعالوا نعمل مثال بسيط اوى يبين بقى استخدام المكتبة دي ، وهو عبارة عن فورمة بسيطة اوى من النوع multipart (راجع form helper) وهنضيف فيها input من النوع file ، طبعا في الـ form helper ممكن نعمل كل ده بالبي اتش بي ببساطة شديدة زي ماهنشوف دلوقت، هنفترض مبدأيا انه مشروع  جديد اسمه ci_fileupload زي مانا مسميه عندي:

 

اولا ملف الـ view

 

وده زي ماحنا عارفين عبارة عن الملف اللى بيكون فيه الـ Html بتاعنا اللى بيظهر للمستخدم ، وهيكون فيه بس الفورمة اللى قولنا عليها فيها input من نوع file وزرار submit ، وهنخلى الـ name بتاع الـ input file element بالاسم الافتراضي بشكل مبدأي userfile عشان نشتغل بفانكشن الـ do_upload على طول ، نروح نعمل ملف نسميه upload_view.php فى المسار التالى:

 

www/ci_fileupload/application/views/upload_view.php

 

فيكون الكود جواه كالتالى:

طبعا الكود واضح جدا ولكن عشان توضحه اكتر تعالوا نعمل الـ Controller عشان نقدر نشوف الكلام ده قدامنا عادى
ثانيا ملف الـ controller
ببساطة هنروح نعمل ملف ونسميه upload.php فى المسار التالى:

www/ci_fileupload/application/controllers/upload.php

وهنكتب جواه الاكواد التالية واللى بتظهر الملف بتاع الـ view اللى لسة عاملينه:

دلوقت تقدر تعمل run للمشروع من المسار ده :

 

http://localhost/ci_fileupload/index.php/upload

 

ممكن نعمل view-source للصفحة دي فى المتصفح بتاعك ولاحظ وجود enctype فى الفورمة واللى اتعملت اوتوماتيك من كوداجنيتر بمجرد عمل فورمة من النوع multipart واللازمة عشان نعمل fileupload فى الـ php عموما مش بس فى الكوداجنيتر … هنلاحظ ان الـ action احنا كتبناها فى الـ php بتاعنا upload على اسم الـ controller اللى عملناه ولكن فى الـ view-source يظهر كالتالى :

 

http://localhost/ci_fileupload/index.php/upload

 

اما عن الـ file element فهو مكتوب بوضوح بالـ HTML ومكتوب كل الـ attributes بتاعته.

 

ثالثا ملف الـ model

 

نيجي بقى لاهم جزء وهو الشغل مع الـ library نفسها وانا قررت تكون فى الـ model برغم اننا مش بنتعامل مع داتابيز هنا ، ولكن عشان الكود بتاعنا يكون clear فى الـ controller ، المهم دلوقت اننا هنروح نعمل ملف جديد اسمه upload_model.php فى المسار التالى:

 

www/ci_fileupload/application/models/upload_model.php

 

هنكتب الكود المطلوب على بعضه وبعدين نفسره اجزاء …

طبعا عندنا الـ class ده بيحتوى على constructor وفانكشن اسمها upload_now فى الـ constructor اولا كل اللى بيعمله انه بيضيف قيمة لـ glabal variable اسمه files_path وطبعا لازم اذا كتبنا constructor فى اى وقت نستدعى الـ constructor بتاع الـ parent بتاعه اللى هو class الـ CI_Model ، اما عن سطر:

اولا APPPATH ده global constant موجود فى الكوداجنيتر بيشاور على فولدر الـ application ، انا مثلا عملت فولدر اسمه images وحطيته جنب فولدر Application على الروت بتاع المشروع كله فاضطريت لكتابة ( .. ) عشان يطلع من الفولدر لل، level الاعلى ، فنوصل للـ root folder ، فهنلاقي ان APPPATH/../images مايعتبرش فى الحقيقة بالنسبة للـ php مسار حقيقي، والـ php بيدعمنا بفانكشن خاصة بيه اسمها realpath بتاخد الانواع دي من الباثات وترجعلنا الـ path الحقيقي عشان نستعمله فى حفظ الملفات على السيرفر بسهولة.

 

نيجي للفانكشن التانية upload_now وهى زي ماحنا شايفين كل اللى بتعمله انها بتستدعى الـ upload library بعد ماتحطلها preferences ، وبعدها بتستدعلى الفانكشن do_upload اللى اتكلمنا عليها فى الاول ضمن مكتبة upload. دلوقت احنا جاهزين اننا نستعمل الـ model ده ونستعمل الـ upload_now بسهولة لرفع ملف ، ولكن هنحتاج نرجع تانى على الـ controller ونعمل test اذا كان اليوزر ضغط على زرار الـ submit اولا فلو ضغط يبقى الـ []POST_$ حصل فيها assign للـ upload اللى هو اسم الـ submit button، فلو ضغط يبقى نروح نستدعى الـ model ونستدعلى فانكشن upload_now بسهولة.

 

تبقى المحتويات الحالية للـ controller المفروض تكون:

ودلوقت بقى المفرض انك تجرب تروح على المسار التالى وتعمل upload بنفسك:

http://localhost/ci_fileupload/index.php/upload

لو روحت على مسار فولدر الصور اللى عملته المفروض تلاقي الصورة اللى رفعتها هناك :) …. اتمنى يكون الدرس كان مفيد ، وقدر يضيف لحضراتكم حاجة .. بالتوفيق … واتمنى الاقي فيدباك منكم :)

Tags

سلسلة تعلم كوداجنيتر – الدرس 7 – Email

January 16, 2013
السلام عليكم ورحمة الله وبركاته .. اهلا بيكم فى حلقة جديدة من سلسلة تعلم الـ CodeIgniter بالعربي .. انهاردة هنتكلم عن library جديدة (class جديد) ، بعد ماعرفنا ازاى نعمل login و registration فى المقالات اللى فاتت. انهاردة هنعرف ازاى نبعت email بشكل automatic وده بيفيدنا فى ايه؟ مثلا لو حد سجل جديد ولازم يحصل Activation بيتبعتله ميل ، لو فيه Notifications معينة نحب نبعتها لليوزر بتاعنا من وقت للتانى بردو هنحتاج نستعمل الـ library بتاعة انهاردة وهى الـ Email Library واستعمالات تانية كتير لو حابب تكتشفها بنفسك او تشوف امكانيات الـ library دى قبل ما تقرأ المقال ممكن تقرأ من Email Library .. انهاردة هنتكلم فى مثال بسيط اوى عن امكانيات الـ library دي وازاى نستخدمها.
-
طريقة استخدام الـ Email Library:
قبل البدء فى عمل مثال على المشروع انهاردة وزي كل مقال هنشرح الـ Email Library ، اولا هي library سهلة جدا وبسيطة .. ليها مجموعة Configurations ونعملها ونبعتها اثناء استدعاء الـ Library كالمثال التالى :

وبعدها بتدعم الـ Email Class بشوية معلومات زي مثلا الايميل من مين والى مين وعنوان الرسالة ايه ومحتواها وهكذا .. زي المثال التالى :

اول function اللى هى from بتاخد 2 برامتر .. الاول ده بيكون الايميل اللى بيبعت وده اللى كتبناه فوق فى الـ config وكتبنا الباص بتاعه والبارامتر التاني بيكون فيه اسم اللى بيبعت على هيئة text عادي جدا، subject بيكون فيها عنوان الايميل المرسل ، اما message فمن اسمها بيكون فيها الـ message نفسها او الرسالة ، نيجي بقى على function غاية فى الاهمية وهى set_newline وهى فانكشن لازم منها ووظيفتها ببساطة تحديد كيفية التعامل مع الـ <br> لان التاج ده كحالة خاصة يتم ترجمته على الـ OSs المختلفة بشكل مختلف فمثلا على الماك بيترجم r وعلى اللينكس n اما على الويندوز فاحيانا بيتطلب rn لترجمة سطر جديد ، وفى النهاية فانكشن الـ send بتقوم بعملية الارسال بناء على الـ data المعطاه ، يلا ننفذ بقى مثال للموضوع ده.
-
يؤخذ فى الاعتبار اولا:
اذا كنت بتستخدم ويندوز او اى كان هتضطر تروح ملف الـ php.ini وتبحث عن سطر اسمه

extension=php_openssl.dll;

وتعمله uncomment بانك تشيل من قدامه الـ ; ده ليه ؟ لاننا فى المثال بتاعنا هنستعمل الـ gmail كهوست وده بيستعمل الـ ssl server ، فلازم يكون مدعوم عندك على السيرفر بتاعك ، وبدون تفعيله مش هتتم العملية كلها.
-
مثال على استخدام الـ Email library:
هتروح نعمل مشروع جديد باننا نجيب فولدر للكوداجنيتر جديد ومبدأيا هنحتاج نروح على فولدر config وندخل فى ملف routes.php ونروح نعدل السطر ده كالتالى:

ونروح بقى مباشرة على الـ editior بتاعنا ونعمل ملف جديد فى فولدر الـ controllers ونسميه email.php عشان يكون الكونترولر اللى لسة مخلينه الـ default controller وهيكون فى المسار التالى:

 

wamp/email/application/controllers/email.php

 

وبعدها نكتب جواه مباشرة فى المثال بتاعنا الكود التالى واللى هيكون فى الـ index function لاننا مش هنعمل UI هنا ومش محتاجين فى المثال البسيط اوى ده :

زي ماحنا شايفين عملنا فى الاول array من الـ configuration فيها البروتوكول هو smtp والهوست هو الجي ميل ورقم البورت اخترته 465 او اى كان ممكن 25 زي ماتحب وبعدين الـ smtp_user والـ smtp_pass دول الخاصين بيك او بالميل اللى هيبعت اوتوماتيك يعنى ، فى الحالة بتاعتنا دي انا باستخدم الجي ميل الخاص بيا medhatdawoud@gmail.com والباص بتاعى اللى مش ضروري تعرفوه على فكرة يعنى :D ، وبعدها باعمل load للـ email library مع ارسال الـ config array مع الاستدعاء زي ماشوفنا، وطبعا حددنا كيفية التعامل مع السطر الجديد set_newline وحددت ان المرسل هو نفس الميل اللى حطيته فى الـ config ، والمرسل اليه هو نفس الميل كمثال يعنى مع العلم انه ممكن يكون اى ميل تانى عادي يعنى ، وحطيت subject مبدأى كدة ونص بسيط للرسالة ، ثم استدعيت ()send واللى بدورها بتقوم بالارسال ثم فى النهاية كتبت سطر بيستدعى فانكشن اسمها print_debugger ودي لو حصل اي فضل فى الارسال هتبينلك مجموعة رسايل debug فيها تفاصيل الارسال والمشكلات اللى واجهت السيرفر فى الارسال يعنى. تمام لو انت عملت كل حاجة زي مامكتوب بالظبط وجيت تجرب هتروح على البراوزر وتكتب بس فيه:

localhost/email

وده لاننا خلينا الـ default controller هو الكونترولر بتاعنا ، هيتنفذ الكود اوتوماتيك لو ماطلعش ايرور.
لونلاحظ الحاجات اللى متحددة فى الصورة هنلاقى الـsubject و الـ from او فى نفس الوقت بيكون اسمها reply_to زي ماهنشوف والـ message نفسها طبعا ، ولو شوفنا تفاصيل الرسالة هتلاقيها فيها تفاصيل اكتر.
هنلاقى دلوقت from او reply-to كمان و to اللى هو مرسل اليه اللى هو انا بردو، والتاريخ والعنوان و كمان mailed-by اللى هو الهوست اللى حددناه لو فاكرينه ، طبعا فيه استخدامات وامكانيات تانية للـ library دي لكن انا مش حابب اطول اكتر من كدة باقى الاستخدامات محتاجة نعرف الـlibrary اللى فى المقال الجاى ان شاء الله وبعدها نرجع نعمل مثال فيه ui كويس يبين الدنيا كلها .. اتمنى يكون المقال كان وافي لاستخدام الـ library دي..  انا هنا فى انتظار اي استفسار او حل اى مشكلة واجهتكم فى التطبيق ان شاء الله .. بالتوفيق :)

Tags

سلسلة تعلم كوداجنيتر – الدرس 6 -Authorization

January 6, 2013
السلام عليكم ورحمة الله وبركاته .. اتمنى تكونوا جميعا بخير .. فى المقال ده هنكمل اللى بدأناه فى المقال السابق .. لذلك يتوجب عليك المرور اولا على المقال السابق اولا وتطبيق المثال البسيط اللى فيه وبعيدين تعالى فورا هنا نكمل مع بعض :) ..
اهلا بيكم مرة تانية فى سلسلة مقالات تعلم الـ CodeIgniter framework ، طبعا ده الجزء السادس من السلسلة وانهاردة هنكمل زي ما قولت فى المقال السابق بردو الـ Membership Project اللى بدأناه وكنا وقفنا اخر حاجة على عمل الـ Registration وتم الحمدلله .. تعالوا انهاردة نعمل الـ Login form بس قبل ما نبدأ فى الـ login عاوز انبه اننا هنشتغل انهاردة ان شاء الله فى كذا حاجة مهمين اوى وجداد علينا فى الشرح زي ماهنشوف دلوقت :
-
اولا الـ session library :
استخدام اى library فى الكوداجنيتر سهل جدا ، فمثلا عشان نستخدم الـ session library هنكتب :

ولكن فى الكوداجنيتر عشان نستخدم الـ session لازم نحدد encryption key وده فايدته عمل تشفير للبيانات اللى بتحملها الـ session كنوع من انواع الـ security واللى موجود فى config.php فى المسار التالى:

www/Membership/application/config/config.php

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

ونعدله ونحطله قيمة encryption string مناسب .. ممكن تكتب اي حاجة بس اعتقد واحد من الـ bloggers على wordpress اسمه jeffrey barke كتب سكريبت بيعمل generation لكود طويل وممتاز تقدر توصله من هنا وهو بالمناسبة بيتغير لكود جديد مع كل refresh هتاخده كوبي اى كان وتحطه مكان السطر اللى فوق ده فى ملف config.php اللى حددناه (بالمناسبة ممكن تكتب اى حاجة : ممكن اسمك مثلا).
عشان نحط قيمة فى الـ session ببساطة بنستعمل الكود التالى (مثال) :

وعشان نستعمل القيمة اللى عيناها قبل دة فى session فى اى مكان فى السايت نستعمل الكود التالى (مثال) :

وببساطة عشان ندمر الـ session او ننهيها والقيم اللى فيها تروح بنستعمل الكود التالى (مثال) :

كدة احنا عرفنا الاساسيات اللى محتاجينها فى درس انهاردة ان شاء الله واللى هنحتاجها كتير فيما بعد بالنسبة للـ Session Library ولو عاوز تقرأ اكتر عنها وده طبعا مطلوب جدا ادخل على الـ user guide اللى عندك او اوصل لها مباشر من الـ documentation اون لاين هنا Session Library.
-
ثانيا الـ Autoload:
طبعا فى الجزء الخامس اللى هو المقال اللى فات على طول احنا استعملنا مجموعة Libraries ومجموعة Helpers وكنا بنستدعيهم وقت اللزوم فاستعملنا مثلا فى الـ helpers المجموعة دي (url , form , html) وبالنسبة للـ libraries استعملنا المجموعة دي (database , form_validation) وانهاردة هنستعمل كمان الـ session library زي ماتفقنا ، الكوداجنيتر مدعمانا بملف فى الـ config فولدر اسمه autoload وده بنستعمله فى اننا نستدعى فيه الـ helpers و الـ libraries والـ packages وغيرها لكن الفرق انها بيحصلها load اوتوماتيك اول ما الـ application بيرن على طول من غير ماتعملها load كل ماتحتاجها فى كل مكان ، فلو فيه library او helper بتستعمله على مستوى السايت كله فى اماكن مختلفة وبشكل كبير يبقى الاحسن انك تعمله بدلا من load فى المكان تعمله autoload فى الملف ده .. بيكون فى الميار التالى:

www/membership/application/config/autoload.php

نروح نفتحه وهنلاقي ملخصه فى النهاية على الكام سطر دول والباقي comments :

واضح من كل واحدة طبعا بتعمل ايه ، فى المقال اللى فات كنا حطينا database فى الـ array بتاعة الـ libraries وانهاردة هنحط جنبها على طول الـ session ، اما بالنسبة للـ helpers هنحط فى الـ array الحاجات اللى ممكن نحتاجها على مستوى السايت عموما زي html helper والـ url helper وكمان الـ form helper فيبقى القيم او اللى هتتغير فى السطور التالية دي بس بنفس الشكل كدة:

اما باقى السطور هتكون زي ماهى فى مشروعنا بتاع انهاردة ان شاء الله .. دلوقت تقريبا احنا جاهزين نبدأ مع بعض نكمل مشروع المقال الاخير بجزئية الـ login form ان شاء الله المثال يكون بسيط اوى ونستفيد منه
-
انشاء الـ Login :
هنبدأ بردوا المرة دي من الـ view عشان نعمل الفورمة اللى هيدخل الـ user فيها الـ username والـ password ويعمل login .. اولا هنروح نعمل ملف جديد فى الـ view وهيكون اسمه login_view.php ويكون فى المسار التالى:

www/Membership/application/views/login_view.php

نفتحه ونحط فيه اكواد بسيطة اوى هنمشي بالشكل ده دلوقت لحد ما هنعرف مع بعض طريقة احسن لعمل الـ site structure فيما بعد ان شاء الله وطبعا معتمد على نفس ملف الـ css اللى استعملناه المقال اللى فات بما ان ده نفس المشروع فلازم تكون طبقت اللى فات عشان تربطه بده :) .. هيكون فى الملف ده الكود التالى :

هنلاحظ انه الكود متشابه تقريبا مع كود الـ registration فى المقال اللى فات باختلاف اننا شلنا بقى موضوع load لكل helper لواحده ده وعملنالهم autoload فى الـ autoload.php .. وعملنا فورمة بتودى على controller اسمه login وجواه function اسمها submit .. كدة الـ view بتاعنا جاهز بس لازم زي ماتفقنا نعمل الاول الـ controller عشان نظهر من خلاله الـ view ده.
-
انشاء الـ controller:
هنروح لفولدر controllers ونعمل ملف جديد اسمه login.php عشان يكون فى المسار ده:

www/Membership/application/controllers/login.php

ونحط فيه اكواد اساسية كدة للتيست بس زي index function عشان نظهر من خلالها الـ view بشكل مبدأى فيكون الكود كالتالى:

دلوقت نروح على الـbrowser بتاعنا ونحط فيه المسار التالى:

http://localhost/membership/index.php/login

لو ظهرت عندك زي مافى الصورة كدة يبقى انت شغال تمام لحد دلوقت .. اما لو ضطت على زرار الـ login هيظهرلك ان الصفحة دي مش موجودة وده طبعا لان دالة submit اللى فى الـ login controller لسة ماتعملتش ، نروح الاول نعمل كود التعامل مع الداتابيز ونرجع نعمل الدالة دي.
-
انشاء الـ Model :
احنا ممكن نستعمل نفس الموديل عادي جدا لكن هنمشيها فى مثال انهاردة بموديل جديد لحد مانعمل مشروع كامل ان شاء الله وساعتها هتفرق معانا ، طيب نروح دلوقت فى فولدر Models ونعمل ملف جديد باسم login_model.php مثلا فهيكون فى المسار التالى:

www/Membership/application/models/login_model.php

وهيكون بيحتوى على function واحدة بنتأكد منها اذا كان اليوزر والباص اللى دخلهم اليوزر مطابقين للى فى الداتابيز ولا لا وهنسميها مثلا validate فيكون الكود كالتالى:

طيب لو جينا نشرح الدالة دي بتعمل ايه هنلاقيها بتعمل query فى الداتابيز فى جدول members على الـ record اللى فيه بيكون الـ username بيساوى القيمة اللى اتبعتت من الفورمة وفى نفس الوقت قيمة الـ password فى الداتابيز بتساوى قيمة الباص المبعوتى من الفورمة بس حطينا القيمة فى فانكشن md5 زي ماحنا كنا مسجلين الباص فى الـ registration للتشفير ، وعملنا get فلو كان الناتج عدد سطور 1 يبقى لاقاه فعلا ويبقى اليوزر ده مسجل ويرجع true ولو مالاقاهوش يبقى مش هيرجع حاجة … دلوقت التصميم جاهز والكود اللى بيختبر بردو جاهو مش ناقص غير نقطة تواصل بينهم عشان الـ functionality تكمل ، وده هيكون فى الـ controller زي ماحنا عارفين فى دالة الـ submit ..نروح مرة تانية لملف login.php اللى فى فولدر controllers و نضيف الدالة دي للكود بعد دالة الـ index بالكود التالى:

دلوقت تقريبا كل الـ functionality جاهزة للتجربة ، زي مالاحظنا ده اول استخدام للـ session معانا وعملنا set لمجموعة قيم على بعضها من خلال الـ array اللى اسمها data$ بتسجل اسم الـ user وكمان حالته اذا كان سجل الدخول او لاوبعدين بيعمل redirect لمكان تانى ، مش ناقص غير المكان ده اللى استعملنا للوصول اليه زي ماحنا شايفين function اسمها redirect ودى موجودة فى الـ url helper اللى احنا عملناله autoload فى الاول، هنعمل redirect على controller اسمه site وفي function اسمها membersarea على سبيل المثال .. هنروح طبعا نعمل ملف اسمه site.php فى فولدر controllers وتكون محتوياته كالتالى:

طبعا انا اختصرت الموضوع عشان المقال مايطولش معانا .. باختصار هنا فيه function اسمها membersarea دي اللى لما عملية التسجيل تنجح بيروح عليها اوتوماتيك ، وفيه اكواد تانية بقى بنتأكد من خلالها اذا كان اليوزر الحالى بالفعل سجل وعمل login او لا ومش مسموحله بالوصول للمكان ده الا اذا كان مسجل .. الاكواد ده احنا عملناها فى function اسمها is_logged_in وبتعمل التيست ده وتمر بسلام لو كان فعلا مطابق لما فى الداتابيز ومسجل قبل كدة او تطلع رسالة معينة وتوقف تنفيذ الباقي لو مش مسجل وهى معتمدة فى ده على القيمة اللى فى الـ session باستخدام key اسمه is_logged_in اللى عملناه اول ما اتأكدنا من ان الـ user والـ password موجودين بالفعل .. طيب ممكن اى حد يكون بيلعب ويدخل على الـ controller ده بشكل ما او اي فانكشن تانية ، لو احنا عاوزين موضوع انه يتأكد ان اليوزر مسجل متعممة على الـ controller كله مش هاستدعى الفانكشن is_logged_in فى كل function تانية بقى ، انا هاستعمل special function معروفة باسم constructor ودي اول function بتتنفذ اوتوماتيك اول ما الـ controller بيتم استدعاءه ولابد فيها يتم استدعاء الـ constructor الخاص بالـ controller الاب او الـ super الاول وبعده نكتب اي حاجة عاوزينها تشتغل بمجرد استدعاء الـ controller واللى فى حالتنا هنستدعى الـ function بتاعة is_logged_in ، فهيكون المحتوى النهائي للملف :

دلوقت مش ناقص غير الـ view بتاعة الـ members area اللى بيعملها استدعاء دي ، هنروح على فولدر Views ونعمل ملف جديد باسم membersarea_view.php فهيكون فى المسار التالى:

www/Membership/Application/views/membersarea_view.php

وهيكون محتواه ببساطة رسالة فيها ترحيب بالمستخدم بعد ما سجل الدخول ومجموعة الاسرار العظيمة اللى لازم يسجل من اجلها :D .. هيكون المحتوى كالتالى :

لاحظ استخدام الـ session لاستدعاء اسم المستخدم اللى سجل ، وبيقوله ان الكنز هنا :) .. طيب دلوقت اليوزر ده سجل هل ماينفعش انه يعمل logout ؟ .. اعتقد ده ضمن نفس الاسكريبت بتاعنا ، هنزود هنا فى نفس الملف الاول السطر ده:

وبعدها نروح على المسار اللى اللينك مودينا عليه وهو داخل الـ site controller بردو وهنعمل function اسمها logout وهتكون موجودة فى ملف site.php اللى موجود فى فولدر controllers ، والكود بتاعها هيكون كالتالى:

طبعا كل اللى بتعمله الفانكشن دي انها بتدمر الـ session زي ماعرفنا ازاى فى اول المقال وبتعمل redirect على صفحة الـ login عشان اليوزر لو عاوز يدخل من جديد ، وممكن نضيف لينك فى صفحة الـ login بيودى على صفحة الـ registration هتكون اضافة كويسة لو تفضلتم وجربتوها بنفسكم …
طيب نجرب بقى ونعمل login باكاونت احنا مسجلين بيه فى المقال اللى فات او نسجل واحد جديد دلوقت ونعمل login ، انا مثلا هاعمل login باكاونت انا سجلته عندي باسم Med7at.
النتيجة لو طلعت عندك كدة يبقى المشروع كله تمام ان شاء الله …
لحد هنا احنا خلصنا جزء كويس جدا فى الكوداجنيتر وعرفنا helpers و libraries كويسة وممتعة ان شاء الله تكون مفيدة ليكم .. شكرا لقرائتكم واتمنى الاقي تعليقاتكم واتمنى ايضا مشاركتكم فى الاستفتاء على عمل فيديوهات تعليمية ام كتابة مقالات لتحديد ايهم مفيد اكتر لحضراتكم ..

منتظر تعليقاتكم .. بالتوفيق

Tags

سلسلة تعلم كوداجنيتر – الدرس 5 – Registration

January 5, 2013
السلام عليكم .. اهلا بيكم من جديد فى تكملة سلسلة تعلم CodeIgniter ، كنا عملنا قبل كدة 5 مقالات (مقدمة ، الجزء 1 ، الجزء 2 ، الجزء 3 ، الجزء 4)  اتمنى اللى ما كانش متابع معانا قبل كدة وماقرأهومش يحاول يقرأهم الاول عشان مايكونش تايه فى الشرح بتاع المقال ده. انهاردة الجزء الخامس من السلسلة وان شاء الله نكمل مع بعض وتكون الدروس مفيدة. الجزء ده هنتكلم فيه على مثال بسيط اوى على استخدام الـ Active record اللى شرحناها فى الجزء 4 وتطبيق على اللى اتشرح من السلسلة لحد دلوقت مع شوية اضافات مهمة اوى وسهلة لكن غاية فى الاهمية حقيقي ، ده هيكون ملخص فى عمل registration form وهنتعامل مع الداتابيز بشكل بسيط ان شاء الله ونكمل الـ login form فى مقال جاى ان شاء الله.
-
انشاء مشروع جديد:
ده يعتبر اول مشروع نعمله مع بعض له غرض حقيقي وممكن نستعمله فى مشروع حقيقي لينا وطبعا عشان نعمل مشروع جديد codeigniter هنحتاج اننا ننزل اخر فيرجن من الفريمورك موجودة على الموقع الخاص بيها ، ونعملها extract فى مسار الـ root للسيرفر اللى انتوا مشغلينه اي كان ، كمثال عندي انا مشغل Wamp فهافردها فى فولدر www اللى هو الـ root ، بعدها نسمي الفولدر الرئيسي باسم المشروع وليكن Membership ونشيل فولدر user_guide مش محتاجينه ضمن المشروع بس ننقله لمكان تانى ونفتحه فى البراوزر لاننا هنحتاج نرجعله كتير .
دلوقت ممكن نروح للـ browser بتاعنا ونفتح المشروع من خلال:

http://localhost/Membership

-
انشاء database جديدة فى phpMyadmin:
هنفتح phpMyadmin عندنا فى الـ browser ونعمل داتابيز جديدة ونسميها مثلا members_db ومش هنشرح بقى ازاى نعمل table ونحط فيه الـ fields وما الى ذلك اولا لانها حاجات بسيطة واى حد ان شاء الله يقدر يعملها وثانيا لانه مش موضعنا الحالى انا حليت الموضوع ببساطة بان حضراكم بعد ماتعملوا الداتابيز هتنزلوا الملف ده members_db.zip وهتفك الضغط هتلاقي فيه ملف اسمه members_db.sql هتعمله import فى الداتابيز بتاعتك، وهو بيحتوى على جدول واحد اسمه members وبيتكون من الشكل fields:
ومش هنعمل username و password فى المثال ده للتبسيط والتسريع على الناس فهنستخدم اليوزر والباص الديفولت.
-
تهيئة الـ CodeIgniter للعمل مع الداتابيز الجديدة:
زي ما قولت فى الاجزاء اللى فاتت انه عشان نستعمل database مع مشروع codeigniter المفروض نحدد شوية configurations فى ملف database.php الموجود فى المسار ده:

www/Membership/application/config/database.php

ونعمل الـ options دي بالقيم المقابلة ليها فى الكود التالى:

دلوقت الـ codeIgniter جاهز للتعامل مع الداتابيز اللى عملناها :) لسة حاجة واحدة .. لو هنستعمل الداتابيز اكيد فى المشروع كله ومش محتاجين نعمل load للـ Library كل شوية يبقى نروح على ملف autoload.php اللى موجود فى المسار التالى:

 

www/Membership/application/config/autoload.php

 

ونضيف library الـ database كما فى السطر التالى رقم 55 تقريبا فى الملف:

كدة احنا جاهزين تماما والـ configuration بتاعة الداتابيز هتشتغل بمجرد اول run للمشروع على طول اوتوماتيك.
-
البدأ فى انشاء الـ Registration :
عشان نعمل اى functionality فى الـ codeIgniter او اى MVC framework تانية بيحصل تعديلات فى 3 فولدرات رئيسية وهي فولدر الـ Models وفولدر الـ Views وفولدر الـ Controllers ، ودايما بتغير فيهم باستمرار فانصحك باستخدام Editor يخدمك فى التنقل السريع ومرن سواء على ويندوز او لينكس زي Eclipse او Aptana او اى واحد انت شايفه كويس (انا شخصيا انصح بـ Aptana) ، هنبدأ دلوقت شغل فى المشروع:
1 – انشاء الـ View : هنعمل ملف register_view.php فى المسار ده ..

www/Membership/application/views/default_view.php

وهنكتب فيه كود تصميم لصفحة الـ registration زي ده(يستحسن عمل copy عشان الاسماء بتاعة الelements تكون موحدة):

نلاحظ فى السطر الخامس والسادس فيه load لكل من url و html هيلبرز .. ودول ببساطة بيسهلوا عمليات كتير زي مثلا الـ html helper احنا استخدمناه فى عمل link_tag اللى بنربط بيه ملف الـ css بالـ html ، اما استدعاء الـ url helper كان لهدف استخدام دالة base_url واللى بنجيب من خلالها الـ path الخاص بالـ root، طيب هنلاقى ملف الـ css ده فين ؟ .. ببساطة شديدة هنروح نعمل فى فولدر الـ root فولدر وهنسميه webroot ونعمل جواه فولدر نسميه css وجواه ملف style.css ممكن تنزل الملف من هنا هتعمل extract للملف اللى هينزل وتاخد ملف الـ css وتحطه فى المسار ده:

 

www/Membership/webroot/css/style.css

 

دي طريقة سريعة لعمل التصميم لكن عشان نعرضه فى الـ browser محتاجين نروح لمرحلة الـ controller ، بس قبل ما نروح عاوز اقول بردو اننا فى نفس الصفحة عملنا load لهيلبر جديد اسمه form helper وه بيساعدنا فى عمل الـ elements اللى بتكون داخل الـ form فمثلا عشان نعمل input element من النوع text هنكتب ببساطة شديدة :

وده بيتحول فى البراوزر للشكل المعتاد كالتالى:

وتقدر تعرف اكتر بكتير عنها لو دخلت على المانوال البسيط جدا من هنا : form helper حاول بجد تستمتع فى قراءة الـ Manual لانه يعتبر فة نظري ابسط مانوال شوفته لاى technology .

 

2 – انشاء الـ Controller : هنعمل ملف registerme.php فى المسار ده ..

 

www/Membership/application/controllers/registerme.php

 

وده هيحتوى على الكود الاساسي اللى بيتحكم فى كل شئ فى عملية الـ registration ، اول شئ لاحظ واتأكد ان اسم الـ Class يبدأ بحرف capital زي الـ Convention بتاع CodeIgniter ماهو محدد ، وهنعمل function اسمها index ودى طبعا الـ default function لما نستدعى الـ Controller بتاعنا ، زي الكود التالى :

 

طبعا register_view ده ملف الفيو اللى لسة عاملينه ،ونروح دلوقت على البراوزر ونكتب المسار التالى فى الـ address bar :

http://localhost/membership/index.php/registerme

ده هيروح افتراضيا يستدعى الـ function  اللى اسمها index اللى لسة عاملينها فى ملف الـ controller واللى بتستدعى ملف الـ view.
هنسيب الكونترولر شوية وهنرجعله تانى ..
3- انشاء الـ Model : فى جزئية الـ Model طبعا هننشأ ملف جديد اسمه register.php فى المسار التالى ..

www/Membership/application/models/default_model.php

هنكتب فى الملف ده الكود اللى هنتعامل بيه مع الداتابيز .. نشوف الكود بعدين نشرحه:

فى الكود اللى فوق ده عملنا class بتورث من الـ CI_Model الاب اللى موجود فى الـ core الخاص بالفريمورك ، وبعدها كتبنا function كل وظيفتها انها عند استدعائها بتاخد الداتا اللى مبعوتالها فى الـ POST request من الفورمة (واللى هى الـ Default فى الـ form هنا) عن طريق :

والسطر ده يوازى تماما لو كتبنا فى الـ pure php الكود ده [‘POST[‘fname ولكن بطريقة الـ codeIgniter :) ، وبعد ما تاخدهم بتحطهم فى array  زي ماهو واضح فى الكود وكل قيمة مقابلة لاسم معين الاسم ده مطابق لكل field فى الداتابيز بحيث اننا لو استخدمنا db->insert بنديها معطيين الاول هو اسم الجدول وهو فى حالتنا members والثانى هى الarray اللى عملناها بتحتوى على البيانات وفى النهاية بنعمل return للنتيجة بترجع بـ true لو تمت عملية الادخال بنجاح او بـ false لو لم تتم ، والهدف من عمل الرجوع بقيمة ده لاستخدام القيمة فى الـ controller زي ما هنشوف دلوقت ..
عودة للـ controller : نرجع تانى للـ controller ولو لاحظنا فى الـ register_view.php لما عملنا الـ form كتبنا فى البداية :

السطر ده معناه ان الـ Action الخاصة بالفورمة دي بتكون فى المسار ده اللى هو فى حالتنا registerme/submit ، وعندنا فى الكود اجنيتر الـ url بيتقسم بالشكل التالى:

 

http://localhost/membership/controller/function/parameter1/parameter2

 

ومعنى كدة ان الـ submit المفترض تكون function والمفروض نروح نعملها ، نفتح ملف registerme.php اللى هو الـ controller بتاعنا من جديد وهنضيف فيه function باسم submit عشان يكون المحتوى النهائي فيه بالشكل التالى :

شرح دالة submit : فى الـ function دى زي ما الكود موضح كويس ، استعملنا حاجة جديدة علينا وهى form_validation helper وده عبارة عن class بيدعمنا بيه الكوداجنيتر على هيئة helper ووظيفته عمل validation على الـ fields داخل الـ form ، لانه طبعا ماينفعش ندخل اى داتا للداتابيز بدون عمل validation عليها ، فلو شوفنا مثلا طريقة الكتابة هنلاقيها سهلة وبسيطة ، بنعمل load للـ Library دي وبعدها نعمل validation rules واحدة ورا التانية بالشكل الواضح ده فى الكود فوق، بحيث استخدام الـ function اللى اسمها set_rules الموجودة اصلا فى form_validation بتاخد 3 paramters وهم الاول اسم الـ field زي مانت محدده والثاني الاسم الخاص بالفيلد ده اللى عاوزه يظهر للمستخدم العادى انه فاضي (مثال : The First Name field is required) اما اخر parameter ده بيتكتب فيه الـ validation rules وبين كل rule والتانى | ، زي ماهو واضح ، اما الـ rules نفسها فهى سهلة جدا واسمائها بسيطة زي ماهو واضح فلو مثلا عاوزين الـ passwords يكونوا زي بعض نحط فى الـ confirm password فيلد rule بيقول : [‘match[‘pass ، بسيطة جدا .. مش كدة ؟ .. ولو مثلا عاوزين الـ email يكون مكتوب صح.. مش محتاجين نكتب كود فيه regular expression او ما الى ذلك ، كل اللى عليك تكتب rule فى الفيلد بتاع الـ email بيقول : valid_email بس كدة، وغيرها وغيرها .. انصحك تقرأ اكتر عن الـ form_validation فى المانوال اللى كنت نقلته لمكان تانى اول ما بدأنا المشروع ;)
بعد ما بنخلص عمل validation بنعمل run للقوانين دي ، بنطبقها ونعمل test لو كانت النتيجة false معنى كدة ان فيه قانون لم يتم تطبيقه وبالتالى بترجع تانى للـ register_view.php ، وهناك بقى بتظهر الـ errors عن طريق حاجة هنضيفها دلوقت فى نهاية الفورم وقبل سطر ;()form_close مباشرة وهى function بتطبع الـ errors واحدة واحدة ورا بعض وبنحددلها prefix و postfix فى المعطيات بتاعتها ، السطر ده هيكون كالتالى :

طيب نرجع تانى لدالة submit طيب لو نتيجة الـ test طلعت true ؟؟ كدة يبقى اليوزر اتبع كل القاعد اللى كتبناها والداتا سليمة تماما زي ماحنا عاوزينها ، ودلوقت جاهزة عشان تدخل الداتابيز ، وطالما هنتعامل مع الداتابيز يبقى لازم نعمل load للـ model اللى عملناه اللى كان اسمه register.php زي ماهو فى الكود كدة وبعدها هنتيست نتيجة عمل insert زي ما شرحنا فى الـ model لو رجع بـ false يبقى عملية الادخال مانجحتش لسبب او لاخر اما لو رجعت بـ true هنعمل المرد دي load لصفحة view جديدة وهى register_success زي ماهو مكتوب .. طيب نروح بسرعة نعمل الصفحة البسيطة اوى دي فى المسار التالى :

 

www/Membership/Application/views/register_success.php

 

وهيكون محتوياتها بس رسالة نجاح لعملية التسجيل كالتالى مثلا :

دلوقت احنا جاهزين لعمل Test … وده هيكون دوركم بقى .. والنتيجة هتكون فى الكومنتات ليا ان شاء الله … اتمنى يكون كان مقال بسيط ومفهوم .. فى المقال الجاى ان شاء الله هنكمل على الشغل ده فى الـ login form وبعض الاشياء الاخرى فاتمنى ان الجميع يطبق اللى هنا الاول عشان يعرف يشتغل فى اللى جاى بناء على اللى اشتغله هنا :) بالتوفيق ومنتظر تعليقاتكم

Tags

أكثر لغة برمجة فى العالم يُساء فهمها

December 27, 2012
crockfordواحد من أشهر مطوري ومبرمجى العالم ، كرس حياته فى تطوير لغة برمجة وتصحيح اخطاء تصميمها واخترع طريقة لتخزين البيانات تدعى JSON  وغيرها من وسائل تطوير اللغة ، هو امريكي الجنسية ، عمل فى Yahoo! UI و الان يعمل فى PayPal ، انه العالم الشهير Douglas Crockford ، يعتبر كروكفورد من اكثر المطورين فى العالم للغة الـ Javascript ، وله الكثير والكثير من الانجازات فى هذا المجال ، فقد كتب مقال مشهور جدا يحمل عنوان The World’s Most Misunderstood Programming Language وهو عنوان مقال اليوم.
عندما قررت البدء بكتابة اكثر من مقال متقدم فى الجافا سكريبت وجدت انه يجب ان نمر بهذا المقال الرائع الذي يفسر لماذا لغة الجافاسكريبت غير مفهومة بهذا الحد ، وقررت ترجمته لتعم الفائدة ونبدأ بدون عناء باقى السلسلة ان شاء الله فى وجود تصحيح تام للمفاهيم الموجودة لدينا عن اللغة بعد ان ارسلت اليه استأذنه فى ذلك ورد مرحبا بالفكرة :)  .. هى ليست ترجمة حرفية ولكن بعض الوقت هناك ترجمة للمفهوم العام بدون زيادات لغوية .. تعتبر جافا سكريبت اكثر لغة برمجة فى العالم يُساء فهمها .. لماذا ؟ اليكم الترجمة والاسباب حسب المقال الاصلي :
—————————————————————————
الجافاسكريبت (وتسمى ايضا: Mocha ، LiveScript ، وايضا ECMAScript) واحدة من اشهر لغات البرمجة فى العالم ، على الاقل كل كمبيوتر شخصي فى العالم لديه على الاقل مترجم Interpreter للجافاسكريبت نشط للاستخدام . جاءت شهرة جافاسكريبت من دورها فهى تمثل اللغة الـ Scripting لمنظمة WWW. وبالرغم من شهرتها ، القليل يعلم ان جافاسكريبت هي لغة OOP متعددة الاغراض جيدة ومرنة . كيف يكون ذلك سرا ؟ ولماذا هذه اللغة مفهومة بشكل خاطئ ؟؟ هذا يرجع لعدة اسباب وهى كالتالى:
-
الاسم
المقطع الاول Java تعطي احساس للوهلة الاولى ان لغة JavaScript لها علاقة بشكل او باخر بلغى Java ، او انها مندرجة من او فيرجن مختلف من جافا ، على ما يبدو ان الاسم احدث خلافا كبيرا عالميا ، ومن الاختلاف جاء عدم الفهم. فالجافاسكريبت ليست تفسير للجافا ، جافاسكريبت لغة مختلفة تماما.
جافاسكريبت لها تشابه فى الـ Syntax مع جافا ، كما ان جافا لها تشابه مع C ، ولكنها ليست مشتقة من جافا كما ان جافا مشتقة من C ، فهى افضل من Java فى التطبيقات التى وجدت جافا (fka Oak) من اجلها.
جافاسكريبت لم يتم تطويرها فى معامل شركة Sun Microsystems (مكان تطوير جافا). لكن جافاسكريبت تم بناءها و تطويرها فى Netscape. وكان اسمها الاصلي LiveScript وهذا الاسم لم يسبب تداخلا كبيرا. اما المقطع الثانى Script يوضح انها ليست لغة برمجة حقيقية ، ولان الـ scripting language اقل من الـ programming language ، ولكنه حقا امر يميزها. مقارنة بـ C فالجافاسكريبت احسن اداء performance وتعبتر الاحسن فى الديناميكية.
-
لغة Lisp فى ثوب C
طريقة كتابة جافاسكريبت تشبه كثيرا طريقة كتابة C ، كما تحتوى على الـ curly braces ({ }) و جملة for ،الامر الذي يجعل منها تظهر كما لو انها لغة تسلسلية طبيعية. ولكن هذا تصور مختلط حيث ان الجافاسكريبت لديها الكثير والكثير مشترك مع functional languages مثل Lisp اكثر من C او Java ، فهي لديها arrays بدلا من lists ولديها objects بدلا عن property lists. الدوال او الـ functions هى المقام الاول first class. فلا يوجد هنا Classes.
-
تلابس Typecasting
جافاسكريبت تم تصميمها لكى تعمل على Netscape Navigator. نجاحها على متصفح Netscape قادها الى ان اصبحت وحدة اساسية على مستوى كل المتصفحات ، من هنا جاء التلابس. جافاسكريبت تعتبر مثل George Reeves للغات البرمجة. جافاسكريبت مناسبة بشكل كبير لمجموعة كبيرة من التطبيقات الغير متعلقة بالويب.
-
الانتقال للهدف
الاصدارات الاولية لجافاسكريبت كانت ضعيفة نسبيا، فقد افتقرت الى الـ exception handling و inner functions و inheritance. فى شكلها الحالى فهى تعتبر لغة OOP متكاملة، ولكن أراء الكثير فى اللغة معتمد على اصداراتها الغير ناضجة.
لجنة ECMA التى تشرف على اللغة تطور امتدادات التى عقدت النية لتنفيذها والتى سوف تحل واحدة من اكبر مشكلات اللغة. فهناك فعلا الكثير والكثير من الاصدارات ما يجعل هناك تداخل وتلابس.
-
عيوب التصميم
لا يوجد لغة برمجة مثالية، جافاسكريبت لديها ايضا عيوب فى التصميم، مثل عمل overloading لعلامة + لتشمل فى المعنى addition و concatenation بالاكراه، ايضا جملة with عرضة للاخطاء ويجب تجنبها، من الاخطاء ايضا التدقيق الشديد فى قواعد الكلمات المحجوزة reserved word ، دخول الـ semicolon كان خطأ كبير، وهناك خطأ اخر وهو وضع الـ regular expressions بشكل حرفي. كل هذه الاخطاء تقود الى الاخطاء البرمجية، وتضع تصميم اللغة ككل فى علامة استفهام ؟؟ . لحسن الحظ معظم هذه المشاكل تم تخفيفها بواسطة برنامج lint (احد برامج اسهامات دوجلاس). والمفاجئ لجنة ECMAScript ليست مهتمة يتصحيح هذه الاخطاء، بالرغم من كونهم مهتمين اكثر بعمل غيرها.
-
تنفيذ ردئ
بعض الاصدارات الاولية لجافاسكريبت كانت مليئة بالثغرات، وهذا له التأثير السلبي على اللغة، ما يضاعف ذلك ان هذه الاصدارات تم ادراجها فى متصفحات مليئة بالثغرات بشكل مرعب.
-
الكتب الرديئة
تقريبا كل الكتب عن جافاسكريبت تعتبر مخيفة (ساقطة)، فهى بها اخطاء، وامثلة ضعيفة، وتدعم عادات سيئة فى كتابة الاكواد. المميزات المهمة فى اللغة تم شرحها بشكل ضعبف جدا او اهملت تماما. لقد اطلعت على عشرات الكتب لجافاسكريبت، واستطيع فقط ان ارشح واحد JavaScript: The Definitive Guide (5th Edition) كتب بواسطة ديفيد فلانجان (يوجه دوجلاس دعوة للقراء فيقول لو ان احد منكم كتب كتاب فى الجافاسكريبت جيد ان يرسلوه اليه لكي يراجعه).
-
دون المستوى القياسي
المواصفات الرسمية للغة تم نشرها بواسطة ECMA. المواصفات كانت تنم عن جودة ضعيفة جدا، فهى صعبة جدا فى القراءة وصعبة جدا جدا فى الفهم، وهذا ساهم فى الكتب الرديئة والضعيفة لان المؤلفين لم يستطيعوا استخدام الـ document الرسمي لتحسين مستوى فهمهم للغة، يجب على ECMA ولجنة الـ TC39 ان يشعرون بخجل كبير.
-
المبتدؤن
كثيرا ممن يكتبون JavaScript ليسوا مبرمجين. فهم مفتقدين على التدريب والمبادئ لكتابة برنامج جيد. جافاسكريبت لديها قوة جبارة لفعل اشياء مفيدة. على اى حال هذا اعطى للجافاسكريبت سمعة انها للمبتدئين ، وانها غير مناسبة للمبرمجين المحترفين. وهذا ببساطة ليس صحيحا.
-
Object-Oriented
هل الجافاسكريبت object-oriented ؟ فلديها objects والتى من الممكن ان تحتوى على البيانات و methods والتى تتعامل مع هذه البيانات. فالكائن او الـ object يمكن له ان يحتوى object اخر. فهى لا تحتوى على classes، ولكنها تحتوى على constructors والتى تفعل ما يفعله الـ classes، بجانب دورها كحاوية للـ class variables و الـ methods. هى ايضا لا تحتوى على class-oriented inheritance، ولكنها لديها prototype-oriented inheritance.
هناك طريقين لبناء object system، الاول بواسطة الـ inheritance والثاني بواسطة aggregation. فالجافاسكريبت تدعم الاثنين ولكن الطبيعة الديناميكية تساعدها فى الامتياز فى الـ aggregation. هناك جدل حول ان جافاسكريبت ليست فى الحقيقة OOP لانها لا تدعم information hiding. وهذا لان الكائن او الـ object لا يمكنه ان يحوز private variables و private methods . كل الاجزاء public.
ولكن تبين ان الـ objects فى الجافاسكريبت يمكنه ان يحصل على private variables وكذلك private methods بالتأكيد القليل يفهم ذلك لان الجافاسكريبت هى اكثر لغات العالم سوء فى الفهم :) هناك جدل ايضا حول ان جافاسكريبت ليست فى الحقيقة OOP لانها لا تدعم الوراثة inheritance. ولكنها تدعم حاول قراءة هذا المقال لتفهم JavaScript supports not only classical inheritance, but other code reuse patterns as well.
—————————————————————————
اتمنى ان تكون الترجمة مفيدة حقوق النسخ محفوظة لدوجلاس كروكفورد والترجمة لمدحت داود .. يمكنك نقل المقال او نسخه او نشره لتعم الفائدة

Tags