RSS

برنامج مستعرض الصور MyAlbum2 بإستخدام Asp.Net and Jquery

19 Jun

بسم الله الرحمن الرحيم
في هذا الدرس سوف نستعرض معا مستعرض الصور الإصدار الثاني وهو باستخدام مكتبة (Jquery) مع لغة (Asp.Net) والهدف من المستعرض هو عرض الصور من مصدر بيانات (DataSource) سواء قواعد بيانات مثل (Sql Server) او ملفات (XML)
صورة من مستعرض الصور

مميزات مستعرض الصور
• دعم كامل لمصادر البيانات المختلفة
فيمكنك أن تخزن الصور في قواعد بيانات او تقوم بتخزينها في ملفات (Xml)
• عرض صورة جاري التقدم (Progress Image)
كما ترى في الصورة التي في الأعلى فأن الصورة التي لم تظهر بعد يكون مكانها صورة جاري التحميل (جميل جدا ,صح)
• إستخدام (Linq To Sql) وذلك في إضافة الصور الى قاعدة البيانات وإستعرض الصور من قواعد البيانات
• إستخدام كترول (Asp.net Repeater) والغرض من ذلك انه عن عرض الصفحة فإن الأوسم (Tags) التي سوف تظهر هي عبارة عن (Div)
• (Custom Paging) بإستخدام (Linq) والمقصود هنا التنقل المخصص بين الصفحات من الخلف الى الأمام أو من ألامام إلى الخلف وهذا يتم عن طرق الشفرة(Code) لأن (Asp.net Repeater) لا تدعم التنقل الإفتراضي (Default Paging).
طبعا مستعرض الصور يستخدم مكتبة (Jquery) وذلك لعمل التأثيرات مثل الظهور (Fade out) والإختفاء (Fade In) مع إمكانية تحديد السرعة للظهور والإختفاء
كان غرضي من المشروع او المعرض الخاص بالصور هو أن أجمع أكثر من فائدة في نفس الوقت فأردت أن أريك القوة الحقيقة لمكتبة (Jquery) وايضا القوة الحقيقة لتطبيق لغة الإستعلام المدمجة (LINQ) وكيف قامت في الحقيقة بتبسيط الأشياء لنا . لنبدء بالشرح على بركة الله.
أولا الفصائل (Classes)
طبعا برنامج مستعرض الصور يحتوي على فصيلة واحدة إسمها (ImageManger) وجميع محتوياتها ساكنة (static) أي بمعنى أنه لاداعي لإنشاء كائن (New Object) من هذه الفصيلة والغرض من هذه الفصيلة هو عرض البيانات (Select statement) ومعالجة التنقل بين الصفحات بناء على حجم او عدد الصور في الصفحة الواحدة أنظر الصورة التالية


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

protected void Page_Load(object sender, EventArgs e)
{
     if (!IsPostBack)
      {
        //Start From 1 Thats mean the first page
        ViewState["Counter"] = 1;
      //Get the number of pages and save it in the ViewState
      ViewState["ImageRow"] = ImageManager.GetRowNumber();
     //Get the number of images (5,6,...) As you want
      Repeater1.DataSource = ImageManager.GetImages();
     Repeater1.DataBind();
  }
}

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

 protected void Forward_Click(object sender, EventArgs e)
    {
        //Enable Backword button
        Backward.Enabled = true;
        //Increase the number of page based on the current number
        //number of rows that will be skipped
        int Row_Index = ImageManager.IncreaseRows((int)ViewState["Counter"]);
        //Check if this page is last page or not
        if ((int)ViewState["Counter"] < (int)ViewState["ImageRow"])
        {
            //Get the number of images based on the page
            SetSource(ImageManager.GetImages(Row_Index));
            //Save the current page in the ViewState counter
            ViewState["Counter"] = ImageManager.IncreaseValue((int)ViewState["Counter"]);
            //Check if we are in the last page then disable the foreword control
            if (ImageManager.IsLast((int)ViewState["Counter"],(int) ViewState["ImageRow"]))
            {
                Forward.Enabled = false;
            }
        }

    }

ثانيا عند الى الانتقال الى الخلف نقوم بنفس الخطوات السابقة ولكن نتحقق اذا كان في الصفحة الاولى اما لا كما هو موضح في التالي

protected void Backword_Click(object sender, EventArgs e)
    {
        //Enable the ForeWord button
        Forward.Enabled = true;
        //number of rows that will be skipped
        int Row_Index = ImageManager.DecreaseRows((int)ViewState["Counter"]);
        //check if this page is the first page or not
        if ((int)ViewState["Counter"] > 0)
        {
            //decrease the number of pages
            ViewState["Counter"] = ImageManager.DecreasValue((int)ViewState["Counter"] );
            //number of skipped row ,this number will be use in skip method
            int SkipRows = ImageManager.SkippedRow(Row_Index);
            SetSource(ImageManager.GetImages(SkipRows));
            //Check if we are in the first page then disable the foreword control
            if (ImageManager.IsFirst((int)ViewState["Counter"]))
            {
                SkipRows = 0;
                Backward.Enabled = false;
            }

        }
    }

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

في الختام
اريد في ختام هذا الموضوع ان اوضح لكم الغرض الاساسي من هذا المستعرض حيث انني اجد في الكثير من المنتديات من
يريد طريقة عمل مستعرض للصور لذلك قررت بعد التوكل على الله أن اقوم ببناء هذا البرنامج البسيط واردت ان اجمع فيها
أكثر من فائدة مثل Jquery,Linq To Sql وأردتها ان تكون باسلوب ممتع
لذلك اعتذر ان وجود احدا من كم خطا في ماكتبته واتمنى ان يصحح لي  واتمنى أن يكون نقاشنا بناء حتى نتعلم سويا ونكون قادرين على الانتاج وبناء مجتمع عربي تقني قادر على المنافسة
والله الموفق
رابط التحميل MyAlbum2.0

 
9 Comments

Posted by on June 19, 2010 in ASP.NET

 

Tags: , , , , , ,

9 responses to “برنامج مستعرض الصور MyAlbum2 بإستخدام Asp.Net and Jquery

  1. a7md09

    September 12, 2010 at 11:46 pm

    شكراً لك أخي

     
  2. thamer

    November 14, 2010 at 11:42 pm

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

    هل من الممكن فعل هذا ؟

     
  3. محمد

    February 28, 2011 at 12:15 pm

    جميل

     
  4. motasem

    May 30, 2011 at 9:16 pm

    اغلبك كيف بقدر اضييف تعليق على الصور

     
    • Ahmed Naji

      May 31, 2011 at 5:48 am

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

       
  5. motasem

    May 31, 2011 at 8:22 am

    اخ احمد … شكرا بس في سؤال ثاني … في طريقة عشان اعرض الصور مثل قوقل و اضيف الها تعليق …

     
  6. Ahmed Naji

    June 1, 2011 at 10:19 am

    ااتمنى ان الموضوع اللي في الرابط الى في الاسفل يساعدك
    http://weblogs.asp.net/scottgu/archive/2007/08/10/the-asp-listview-control-part-1-building-a-product-listing-page-with-clean-css-ui.aspx
    تحياتي

     
  7. Rabindranath Senapati

    May 4, 2012 at 6:20 am

    Great job.

    Can you send me the source code by mail id r_senapati@yahoo.com ?

     
  8. ziad

    November 29, 2012 at 6:45 am

    سلام عليكم ورحمة الله
    اشكرك كثيرا
    مش قادر احمل الملافات
    اذا ما فيها غلبة تبعثلي رابط
    jquerey

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: