الجزء الثاني من : مشروع قاعدة بيانات الطلاب - تطوير واجهة رسومية للبرنامج

[the.matrix.sdn]

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

مشروع قاعدة بيانات الطلاب : تطبيق لمفاهيم OOP الجزء الثاني

أعزائي المشاغبين و المشاغبات ، ها نحن نلتقي مرة أخرى – بعد طول غياب – في مقال جديد مع اللغة القوية و الممتعة : سي بلس بلس...

في الجزء الأول من هذا المشروع قمنا بإنشاء قاعدة بيانات للطلاب بحيث نتمكن من إدخال بيانات الطلاب و القيام بمختلف العمليات عليها – كالبحث و الحذف و التعديل ..الخ – و حفظ هذه البيانات على القرص، و قد قمنا ببناء هذه المشروع باستخدام المترجم Dev-C++ على الكونسول – أي كانت واجهة البرنامج هي الواجهة التقليدية – دوس – بدون أي رسوميات أو فنيّات .
راجع هذا الرابط للإطلاع على الجزء الأول.

كنت قد وعدت في الجزء الأول من هذا المشروع بأن نقوم بتطويره سويا بحيث نضيف له واجهة رسومية جميلة تجعل التعامل معه أسهل - و بلا شك فإن من أهم صفات المبرمج الناجح هي مقدرته على عمل برامج سهلة و واضحة ..- ، و برغم أن الفترة قد طالت منذ أن قمنا بعمل الجزء الأول من المشروع و بسبب كثرة المشاغل لم أتمكن من القيام بذلك إلا الآن فهيا بنا :


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

تنبيه 2:
حتى تحقق الفائدة المرجوة من هذا المقال لابد أن يكون لديك اطلاع – معرفة – بأساسيات لغة سي بلس بلس و مفاهيم OOP ، بعبارة أخرى : هذا المقال لايتعرض بالشرح التفصيلي لقواعد لغة سي بلس بلس أو لمفاهيم OOP بل هدف هذا المقال هو دراسة كيفية عمل واجهة رسومية – نوافذ - للمشروع المذكور بالأعلى و هو تطبيق عملي لمفاهيم OOP ، يمكنك للإطلاع على أساسيات الـOOP مراجعة هذا المقال هنا... أما قوعد لغة سي بلس بلس فهناك الكثير من الكتب و المقالات التي تشرحها بالتفصيل و هناك الكثير منها على هذا المنتدى المبارك – استعمل لإيجادها خاصية البحث في المنتدى..

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

* اختيار منصة – بيئة – (SDK) التطوير المناسبة :
لدينا عدة خيارات للقيام بتطوير هذا المشورع و جعله ذو واجهة رسومية – نوافذ - نذكر منها :

- استعمال دوال WINAPI مباشرة .
- استعمال فجوال سي بلس بلس MS-VISUAL C++(MFC) و المقدمة من شركة ميكروسوفت.
- استعمال منصة QT ( و تنطق كيوت مثل cute ) و المقدمة من شركة Trolltech.

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

الـWINAPI هي الحل الأمثل للمبرجين المحترفين و الذين يريدون التعامل مع النوافذ و الرسوميات مباشرة و لكنها صعبة و مملة للمبرمجين المبتدئين – من أمثالي J - و هي تحتاج الى وقت وجهد كبير لتعلمها و اتقانها لذلك لن نستخدمها بصورة مباشرة في مشروعنا هذا.
أما فجوال سي بلس بلس : MFC و المقدم من ميكروسوفت فهي جيدة و سهلة إلا أن بها مشاكل لأنصار الكود المصدري المفتوح open source حيث أن ميكروسوفت وفرت أدوات قوية و ممتازة و لكن حجبت الكود المصدرى و المكتبات التي اعتمدت عليها في تطوير هذه الأدوات ، كما أن البرامج التي يتم تطويرها بفجوال سي بلس بلس تكون خاصة بنظام التشغيل وندوز فقط ...
أما QT فهي – في رأيي – من أفضل و أسهل و أقوى منصات تطوير البرمجيات بلغة سي بلس بلس و من أهم مميزاتها :
- تحوي أكثر من 500 مكتبة ! تضم حوالي 9000 دالة .
- السهولة المدهشة في التعامل مع هذه المنصة.
- ملفات المساعدة Help جيدة جدا و مفيدة على شكل صفحات ويب.
- و الأجمل من كل هذا أن لها نسختان هما متساويتان في كل شيء أولاهما تجارية و الأخرى مفتوحة المصدر أي مجانية بشكل كامل و كل الكود المصدرى للمكتبات و الكلاسات المضمنة بها متاح للمبرمج ليعدل فيه و يقوم بتطويره كما يريد ، و بالتالي فهي مناسبة جدا لكل من قد ملّ من الاحتكار الذي تقوم به ميكروسوفت J .
- و أزيدك من الشعر بيتاً : أن هذه المنصة تدعم أكثر من نظام تشغيل cross platform ، بمعنى أن برنامجك الذي قمت بتطويره في QT يمكن أن يعمل في وندوز و لينكس و يونكس و ماكنتوش – بل و حتى أنظمة تشغيل الهاتف الجوال (سيمبيان) و غيرها إعتمادا على القاعدة التي تقول : اكتب الكود مرة واحدة و ترجمه عدة مرات ، فمثلا مشروعنا هذا و بعد أن ننتهي منه سيصبح لدينا برنامج يعمل على الوندوز – نفس هذا البرنامج يمكن أن يعمل على نظام التشغيل لينوكس - و ليس مطلوبا مني سوى اعادة ترجمة الكود – بدون أي تعديل – في Qt المثبت على جهاز يعمل على لينوكس لأحصل على نسخة تنفيذية من البرنامج تعمل على لينوكس ، و هكذا بالنسبة لأنظمة التشغيل الأخرى : لا أحتاج إلا إلى كتابة الكود مرة واحدة فقط ثم أترجمه على مترجم خاص بنظام التشغيل المطلوب . في الواقع هذا أكثر ما أعجبني في هذه المنصة .

ما ذكرت في الأعلى غير ملزم – بمعنى أنه اختيار شخصي و لكل شخص اختيار منصة التطوير التي يجد نفسه فيها – كما يقولون J - .

من البرامج الشهيرة التي تم تطويرها باستخدام هذه المنصة :

Google earth ، متصفح Opera ، واجهة سطح المكتب KDE في نظام لينوكس ، و غيرها...

للفائدة بعض المواقع المفيدة عن ما هي QT باللغتين العربية و الانجليزية:

· موقع الشركة المنتجة : اضغط هنا .
· تعريف مبسط مع الأمثلة :هنا .
· تعريف بالمنصة على موسوعة ويكيبيديا : ar.wikipedia.org/wiki

تحميل و تثبيت QT :

لتحميل QT ، إليك – النسخة الخاصة بوندوز – مقدمة من شركة نوكيا – الاصدار 4.5 و هذه النسخة مفتوحة المصدر على الرابط التالي – بحجم 300 م.ب تقريبا :

اضغط هنا

صورة لواجهة منصة Qt : Qt Creator :

قم بتحميل QT ثم سنتكلم لاحقا عن تثبيتها و اعدادها.

يتبع قريبا – بحول الله و قوته - .

مشاركة هذا الرد في Google Facebook Twitter Digg

أنت معجب بهذا.

[eldoktor007]

بارك الله فيك اخى الكريم

ننتظر المزيد

مشاركة هذا الرد في Google Facebook Twitter Digg

أنت معجب بهذا.

[MustaphaE]

بارك الله فيك.

مشاركة هذا الرد في Google Facebook Twitter Digg

أنت معجب بهذا.

[the.matrix.sdn]

المشاركة الأصلية كتبت بواسطة eldoktor007

بارك الله فيك اخى الكريم

ننتظر المزيد

و فيك أخي الدكتور - شكرا على المرور ..
تحياتي

مشاركة هذا الرد في Google Facebook Twitter Digg

أنت معجب بهذا.

[the.matrix.sdn]

المشاركة الأصلية كتبت بواسطة MustaphaE

بارك الله فيك.

و فيك أخي مصطفى - شكرا على المرور ..
تحياتي

مشاركة هذا الرد في Google Facebook Twitter Digg

أنت معجب بهذا.

[the.matrix.sdn]

بعد أن تقوم بتحميل البرنامج قم بتثبيته على جهازك – لم أضع الصور بغرض الاختصار - ، و من الأفضل أن يتم تثبيته على قسم من أقسام القرص يحتوى على مساحة فارغة مناسبة – 2 ق. ب. أو أكثر إذا أمكن ...
و الآن نحتاج إلى إضافة مسار التثبيت إلى قائمة – متغيرات البيئة – Environment Variable الهدف من ذلك تحديد مكان مترجم QT و بقية الأدوات الخاصة به .. فمثلا إذا كنت قد ثبّت QT على المسار:

E:\Qt\2009.01\qt\bin

لابد من تسجيل هذا المسار على النظام – أنا أستعمل XP – و للقيام بذلك:
اضغط => زر إبدأ –start- => ثم اضغط بالزر الأيمن على رمز جهاز الكمبيوتر – My Computer- ستظهر لك قائمة بها مجموعة من الخيارت اختر منها => خصائص – Properties – ستظهر نافذة خصائص النظام و بها عدة تبويبات اختر منها التبويب => Advanced ، أنظر الصورة:

اضغط على الزر – متغيرات البيئة – Environment Variables ستظهر النافذة التالية :

في القسم الأسفل من النافذة – System variables – ضع المؤشر على المتغير path ثم اضغط الزر Edit لتظهر النافذة التالية :

انتبه و لا تمسح شيئا من الحقلين بالصورة لأن به مسارات برامج أخرى قد يحتاجها النظام ، كل ما عليك عمله هو وضع المؤشر على الحقل الأسفل – Variable value ثم اضغط زر السهم الأيمن على لوحة المفاتيح حتى يتحرك المؤشر إلى أقصى الطرف الأيمن ، ضع فاصلة منقوطة في أقصى اليمين مثل التي بين القوسين ( ;) ثم يمين الفاصلة اكتب مسار التثبيت الذي أشرنا إليه بالأعلى ، أي أنك في أقصى يمين الحقل ستضع التالي :

E:\Qt\2009.01\qt\bin;

و ذلك بدون أن تمسح شيئا من الادخالات الأخرى – مع مراعاة كتابة المسار الفعلي لتثبيت QT على جهازك .
هكذا نكون قد انتهينا بنجاح من تثبيت Qt على وندوز XP و نأتي الآن إلى عملية إعداده للعمل :

Qt يحوي عشرات الأمثلة لتطبيقات تم تطويرها باستخدامه و الغرض من هذه الأمثلة طبعا هو حتى يستفيد منها المبرمجين في معرفة الإمكانات الهائلة التي يوفرها لهم ، يمكنك البدء فورا في استخدام Qt و لكن من الأفضل تجهيز كل هذه الأمثلة من الآن لأنك بلا شك ستحتاج إليها إذا كنت تخطط للإستمرار في استخدامه ، على العموم يأتي مع Qt المترجم مجاني يمكنك استخدامه لإعداد Qt و الأمثلة المضمنة معه ، كما يمكنك استخدام مترجم آخر – إذا أردت - ، بالنسبة لي أنا أستخدم مترجم ms visual c++ 2008 ،.. المهم إذا أردت استخدام المترجم الذي يأتي مع Qt (MinGW) عليك عمل التالي :
اضغط على قائمة ابدأ => ثم من قائمة البرامج => ستجد Qt في قائمة البرامج ، عند وضع المؤشر عليه ستظهر قائمة فرعية => اختر منها موجه الأوامر – Qt Command Prompt - ، ستفتح لك نافذة موجه الأوامر (دوس) اكتب فيها الأوامر التالية :

cd /D E:\Qt\2009.01\qt
Configure
Make

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

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


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


ملاحظة : للأسف ليس لدي الآن رابط تحميل الفجوال سي بلس بلس 2008 و لكن أعتقد أنه متوفر على هذا المنتدى كما يمكن تحميله مجانا من موقع ميكروسوفت على الويب ، و لعلي أقوم بإضافته لاحقا ً ..

المهم .. عليك فتح موجه الأوامر الخاص بفجوال سي بلس بلس 2008 ثم كتابة الأوامر التالية به :

cd /D E:\Qt\2009.01\qt
configure -platform win32-msvc
nmake

ستتم ترجمة كل ملفات و أمثلة Qt باستخدام مترجم فجوال سي بلس بلس و لكن انتبه فقد يستغرق ذلك بعض الوقت – ربما عدة ساعات! .

الآن أنت جاهز للعمل على Qt :
من قائمة ابدأ => قائمة البرامج اختر التبويب الخاص بـQt ثم القائمة الفرعية => اضغط على الأيقونة : QtCreator و ذلك حتى نشغل Qt :

لعمل مشروع جديد :
من قائمة File => اضغط على New :

حدد الخيار Qt Gui Application و ذلك لعمل مشروع لبرنامج ذو واجهة رسومية ثم اضغط ok .

ستظهر النافذة التالية :

قم بكتابة اسم المشروع (و ليكن stDB ) و مكان الحفظ ثم اضغط next :

لا تعدل شيئا في هذه النافذة و التي تحوي الكثير من النماذج المفيدة و التي لن نحتاجها في مشروعنا هذا ، اضغط زر next :

لا تعدل شيئا في هذه النافذة أيضا حيث سيقوم Qt بتوليد كلاس النافذة الرئيسية للبرنامج و التي يمكن التعديل عليها لاحقا ، اضغط next ثم finish.

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

كما ترى في الصورة أعلاه تظهر قائمة المشروع على الناحية اليسرى و بها مجموعة من الملفات الخاصة به ، لفتح أي ملف نقوم بالنقر عليه ليظهر على اليمين . قم الآن بالضغط على قائمة Build في قائمة الأوامر=> ثم Run ، أو Ctr+R و ذلك حتى تتم تجربة و تنفيذ المشروع و قم بمشاهدة الناتج – حتى الآن :

هذه هي أول نافذة في البرنامج قام Qt بتوليد ملفاتها و ما علينا الآن إلا تعديلها و الاضافة لها بكل سهولة - كما سنرى قريبا ...

نتوقف هنا على أن نواصل قريبا بحول الله ...

مشاركة هذا الرد في Google Facebook Twitter Digg

أنت معجب بهذا.

[the.matrix.sdn]

ننتقل إلى الخطوة التالية :
فكرة المشروع في الأصل هي عمل برنامج يضم قاعدة بيانات تقوم بتخزين بيانات الطالب : الرقم و الاسم و الدرجات – لعدد 6 مواد بالإضافة للدرجة النهائية و التقديرو كل ذلك تطبيق عملي لمفاهيم OOP من خلال سي بلس بلس. – راجع الجزء الأول .
و لأن الـOOP – و من خلال السي بلس بلس تحتوي على خاصية أو ميزة مهمة أو وهي إعادة استخدام الكود – Code Reuse – توفيرا للوقت و الجهد ، فنحن في هذا المشروع – الجزء الثاني منه – سنستفيد من الملفات البرمجية و التي قمنا بتطويرها في الجزء الأول – مع إجراء التعديلات اللازمة.
في الجزء الأول من المشروع قمنا بتطوير الكلاسات التالية :

(انظر الجزء الأول.)

الكلاسات:

:StudentClass

يضم بيانات الطالب

:dBaseClass

يقوم بإدارة قاعدة البيانات

RW2FileClass

كتابة البيانات للملف على القرص الصلب

:StudentCount

عداد يحسب الطلاب

:UserInterFace

واجهة البرنامج على الكونسول

قم بنسخ ملفات كل كلاس ( أي ملف الرأس .h و الملف التنفيذي .cpp لكل كلاس ) إلى نفس المجلد الذي يضم مشروعنا stDB) ) ما عدا الكلاس الأخير (UserInterFace) ، لماذا ؟ لأنه يمثل واجهة البرنامج على الكونسول و نحن نريد تطوير واجهة جديدة رسومية للبرنامج لذا فلن نحتاجه هنا.

كما ترى في الصورة قمنا بنسخ 6 ملفات عبارة عن ملفات رأس و ملفات تنفيذ لثلاثة كلاسات .

علينا الآن أن نضيف هذه الملفات إلى مشروعنا على Qt كالتالي:

في الناحية اليسرى من النافذة حيث يظهر اسم المشروع (stDB) قم بالضغط بالزر الأيمن عليه تظهر قائمة اختر منها : Add Existing Files - إضافة ملفات موجودة – كما في الصورة :

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

سنتكلم عن هذه الكلاسات و ما سنعدله عليها لاحقا ...

دعونا الآن نتكلم عن النافذة الرئيسية للبرنامج :
لابد أولا من الاشارة هنا إلى أمر مهم و هو : أن Qt يوفر طريقتين لإنشاء النوافذ الرسومية – (و هذه من مميزات Qt عن غيره من المنصات كفجوال سي بلس بلس) - ، أولاهما : إنشاء النوافذ و التي تحتوى على الأزرار و بطاقات العناوين و مربعات النصوص – و غيرها من الكائنات الرسومية – عمل كل ذلك من خلال الكود و من دون الحاجة لواجهة تصميم رسومية !.
أما الخيار الثاني فهو استخدام واجهة تصميم رسومية رشيقة و أنيقة كما في الصورة بالأسفل .
سنستخدم هنا الطريقة الثانية باعتبارها الأسهل و الأسرع ...
– و يمكنك تصميم النوافذ بصورة مستقلة ثم ادراجها في مشروعك من خلال الأداة اللطيفة : Qt Designer و التي يتم تثبيتها مع Qt...

في نافذة CreatorQt تظهر كل ملفات المشروع على الناحية اليسرى ، منها ملف باسم
mainwindow.ui – و هو من الملفات التي قام Qt بتوليدها عندما قمنا بإنشاء المشروع سابقا - ، قم بالنقر المزدوج على الملف حتى يتم فتحه على الناحية اليمنى:

كما ترى في واجهة التصميم : على الناحية اليسرى تظهر مجموعة كبيرة من الكائنات الرسومية تم تقسيمها إلى مجموعات – يمكن ادراج هذه الكائنات على النافذة عن طريق السحب و الإفلات - ، أما الناحية اليمنى فتظهر بها خصائص النافذة و ما تحويه من كائنات – إن وجدت . أما المنتصف فتظهر به نافذتنا الرئيسية و هي خالية حتى الآن.

نتقدم خطوة أخرى للأمام :
قم بتصميم النافذة الرئيسية مثل الصورة التالية:

سنضع 10 أزرار- Push Button - بالإضافة إلى مجموعة من بطاقات العناوين – Label – و أدوات عرض الأرقام - كما هو في الصورة و ستجد هذه الكائنات الرسومية في الناحية اليسرى من نافذة واجهة التصميم و يمكنك سحبها بالماوس و وضعها على مخطط نافذة البرنامج في الجزء الأوسط ثم تنسيقها – بصورة مشابهة لبقية واجهات التصميم الرسومية مثل فجوال بيسك و غيره ...
و كما ترى يدعم Qt اللغة العربية بصورة جيدة جدا – و يمكنك تصميم واجهة البرنامج مباشرة باللغة العربية – كما فعلنا هنا – كما يمكنك تصميم البرنامج كاملا باللغة الإنجليزية ثم ترجمته إلى اللغة التي تريد و ذلك من خلال الأداة Qt Linguist – و هي أداة يتم تثبيتها مع Qt و تجدها في قائمة ابدأ مع بقية أدوات Qt و لعلنا نتكلم عنها في موضوع مستقل لاحقا ..

نتوقف هنا ، على أن نكمل لاحقا تصميم النافذة الرئيسية للبرنامج ...

مشاركة هذا الرد في Google Facebook Twitter Digg

أنت معجب بهذا.