تطبيق الويب Your note ..

**mahioo geek** · 12-02-2011, 01:32 AM

السلام عليكم و رحمة الله و بركاته , كيف حالكم يا جماعة

موضوع اليوم في مجال Web development , فلقد انتهيت من مشروع ويب صغير سميته Your note , و هو عبارة عن تطبيق يقوم بحفظ ملاحظاتك في قاعدة البيانات , و لقد استخدمت في هذا المشروع هذه التقنيات :
HTML5
CSS3
JAVA SCRIPT AND JQUERY
MYSQL
PHP
AJAX
INKSCAPE للشعار
و اخترت خط ubuntu الجميل , أما عن HTML5 و CSS3 فيمكنكم التأكد من أن التطبيق يحترم معاييريهما من خلال الضغط على شعاريهما أسفل اليسار ..
لتثبيت التطبيق على سيرفر معين ينبغي انشاء database و تعديل المطلوب في ملف connect.php في مجلد lib داخل المشروع , وبما أن التطبيق يحفظ الملاحظات فينبغي حمايته بكلمة سر ولذلك وضعت كود php للحماية في ملف index.php في المجلد الرئيسي و لكنه على شكل تعليقات , و لهذا اجعلوه Uncomment و غيروا كلمة السر و اسم المستخدم الإفتراضيين ان اردتم حمايته ..
و الآن مع صورة للتطبيق :

السطرين الموضحين فوق :

كود PHP: .: أنقر هنا لتحديد الكل :.


Export : mysqldump -u root -p note > note.sql 
Import : mysql -u root -p note < note.sql

وضعتهم لأتذكر أوامر BackUp لقاعدة البيانات

وهذا فيديو يشرح البرنامج :

طبعا تريدون التجربة الواقعية :
http://webapp.olympe-network.com/note/
أرجوا ان لا تحذفوا الملاحظات و تضيفوا ملاحظاتكم

لمن يريد الإطلاع على الكود :
http://db.tt/aL48z61
لقد تمت تجربة التطبيق على Firefox و Google chrome ..
و لا تنسوا وضع أراكم لأن الأمر هام لي

**mahioo geek** · 12-02-2011, 03:50 PM

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

**mahioo geek** · 12-02-2011, 04:24 PM

تحديث : نظرا لأن أحدهم يحذف الملاحظات , قمت بحذف زر الحذف في مكان التجربة ولكن يمكنكم مشاهدة طريقة الحذف من الفيديو !!

**sasa1** · 12-02-2011, 06:34 PM

ما شاء الله عمل جميل

إقتراحي أن تحوله لشبكه

1- تعمل نظام أعضاء

2- لوحة تحكم للأدمن وللأعضاء

3- وضع تقويم من أجل تنبيه البريد " مثلا لدي غدا موعد للأسنان تضع خانة للوقت و والتاريخ الذي سيتم إرسال البريد فيه"

**mahioo geek** · 12-02-2011, 07:36 PM

امم هكذا نحوله لمشروع كبير مما يتطلب موقعا .. فكرة ممتازة لكن كيف ليس لدي موقع , ما رأي البقية ..

**mahioo geek** · 12-02-2011, 11:08 PM

أرجوا ممن جرب البرنامج في Explorer أن يخبرني بأداءه , و لا أزال في انتظار Review ..

**أمين روخ** · 12-02-2011, 11:11 PM

السلام عليكم

عمل رائع محيو خاصة وأنك استعملت تقنيات وب متعددة

بالنسبة للإقتراحات فالأولى هو أن تجعلها خدمة متكاملة من إدراة للإعضاء وغيرها، إضافة الوقت للتنبيه عير البريد كما أسفل قبلي، إضافة تصنيفات لأنواع التنبيه، إستعمال حقل متقدم للكتابة (يدعم wysiwyg والعربية وغيره)، إمكانية تحديث الملاحظة بأنها قد انجزت
الكود لم أطلع عليه بعد...

بالتوفيق

**mahioo geek** · 12-02-2011, 11:23 PM

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

عمل رائع محيو خاصة وأنك استعملت تقنيات وب متعددة

نعم هذه التقنيات مذهلة في التطبيقات الديناميكية ..

الكود لم أطلع عليه بعد...

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

**عبدالرحيم الفاخوري** · 13-02-2011, 12:09 AM

اذا استخدمت & لا يظهر النص بعدها. xss ام bug أم شيء آخر ؟

**بـركـات** · 13-02-2011, 12:29 AM

أعجبتني التصميم كثيراً لكن ظل شعار html5 :

أشعر أنه من الأفضل إزالته .. بشكل عام العمل رائع جداً

**mahioo geek** · 13-02-2011, 01:15 AM

أنت مخطئ يا بركات هذا شعار css3 و ليس ظل شعار html5 , اضغط عليه لترى أن البرنامج متطابق مع معايير css3

**mahioo geek** · 13-02-2011, 01:29 AM

اذا استخدمت & لا يظهر النص بعدها. xss ام bug أم شيء آخر ؟

شكرا لك يا عبد الرحيم , انها ثغرة تم اصلاحها

, يمكنك أن تجرب , ومن تعليقاتك يبدوا ان التطبيق راق لك , شكرا ..

**mahioo geek** · 13-02-2011, 01:49 AM

تحديث : صاحب الملاحظة :

Test Note Sat 12th Feb 2011 23:13
I think removing text from inputs directly when setting focus on them is not required, specially in editing a long note (may be selecting text is better?)

معك حق وتم اصلاح الأمر , لا تقلق من حذف الملاحظات و شكرا لك ,,
ان كان لكم آراء فأنا بإنتظارها ..

**عبدالرحيم الفاخوري** · 13-02-2011, 01:59 AM

سأعيد تجربتي، وسأستخدم بعض الرموز المحجوزة بأسلوب بدائيّ للتجربة.
أنا ضد استخدام wysiwyg، فهذا برنامج لكتابة الملاحظات وليس مدوّنة!

**عبدالرحيم الفاخوري** · 13-02-2011, 02:02 AM

علّة bug
زر الإدخال لسطر جديد لا عمل كما يجب. البرنامج يبقي الرموز (أقصد الحروف والأرقام) في نفس السطر.

حل بديل workaround
استخدام سيل من الفراغات spaces لإنهاء السطر وبداية واحد جديد.
هذا الحلّ بدائيّ جدًّا، ولا يعطي نتائج جيّدة دائماً

**mahioo geek** · 13-02-2011, 02:12 AM

أنت قلتها يا عبد الرحيم , لتنفيذ هذه الفكرة ينبغي وجود Wysiwyg , هناك طريقة أخرى و هي كتابة وسم <br> لترك سطر , لكن للحماية حذفت وسوم html .. شكرا لك .. و أنا في انتظار ملاحظات أخرى ..

**عبدالرحيم الفاخوري** · 13-02-2011, 02:18 AM

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

أنت قلتها يا عبد الرحيم , لتنفيذ هذه الفكرة ينبغي وجود Wysiwyg , هناك طريقة أخرى و هي كتابة وسم <br> لترك سطر , لكن للحماية حذفت وسوم html .. شكرا لك ..

هل من طريقة لاستثناء هذا الوسم بالذات؟

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

و أنا في انتظار ملاحظات أخرى ..

ماذا عن انزلاق مربع النص مع الصفحة؟

**عبدالرحيم الفاخوري** · 13-02-2011, 02:30 AM

عند تكبير مربع النص إلى الجانب يغطّي الملاحظات بشكل غير جميل. هل يمكن إزاحة النص مع التحجيم؟
تصبحون على خير

**mahioo geek** · 13-02-2011, 02:39 AM

هل من طريقة لاستثناء هذا الوسم بالذات؟

المفروض توجد طريقة , سأحاول فيما بعد ..

ماذا عن انزلاق مربع النص مع الصفحة؟

فكرة سأرى ما يمكن فعله ..

عند تكبير مربع النص إلى الجانب يغطّي الملاحظات بشكل غير جميل. هل يمكن إزاحة النص مع التحجيم؟

أظنها في Chrome لهذا سأمنع ذلك , فالحقل يحتوي نصوص فقط و لا داعي للتكبير ..
تحديث : تم منع تكبير الحقل

تحديث 2 : تم جعل مربع النص ينزلق ,,
تحديث 3 : تم اصلاح علة أمنية تسمح بإنشاء ملاحظات فارغة ..
تحديث 4 : الآن يا عبد الرحيم يمكنك ضغط زر Enter في مكان كتابة النص و سيم الإنتقال الى سطر جديد تماما مثل محررات wysiwyg ..
في انتظار المزيد من الآراء