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

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

كثيرة هي الطلبات من الاخوة والأخوات الذين يسئلون عن معرض صور ولذلك اضع بين يديكم مستعرض الصور البسيط هذا والذي هو باستخدام مكتبة (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 وأردتها ان تكون باسلوب ممتع وايضا ان تفيد الجميع في جميع مشاريعهم وتطبيقاتهم

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

نقطة اخيرة

حاليا في هذه الاثناء اعمل على الاصدار الثالث والذي سوف يكون اكثر من مجرد مستعرض صور ان شاء الله ولكن يبقى السؤال هل تريدون الاصدار الجديد يستخدم Jquery ام Silverlight

والله الموفق

MyAlbum2.0.rar