الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

كيفية كتابة كود صفحة تصويت - survey

بدأه قهوة المساء في 5 سبتمبر 2011 · 14 رد · 4,863 مشاهدة · في ASP.NET
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

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

اريد تصميم صفحة تصويت او استطلاع وفي حدث حفظ التصويت تحفظ النتائج على شكل ملف اكسل وينرسم شارت

هل من مساعدة

وهل استخدام الاجاكس ممكن يسهل المشروع ؟

انتظركم بارك الله فيكم

1
#2

السلام عليكم ورحمه الله وبركاته

اخي شوف الروابط التاليه

http://www.codeproje...PollSystem.aspx

http://www.4guysfrom...s/082207-1.aspx

http://www.codeproje...ll_Control.aspx

اما بخصوص الاجاكس يمكنك استخامها لعمل Partial Postback, اما حفظه في الاكسل يمكنك ذلك سأتر المحاوله لك اولا

تم تعديل هذه المشاركة بواسطة VB Helper في 5 سبتمبر 2011 في 11:43

.:: Wish to become better and better ::.

#3

السلام عليكم :)

إليك هذا المثال مع ملفات المشروع.. يتحدث عن فكرة استخدام الأكسل مع مشاريع ASP.NET

http://www.beansoftware.com/ASP.NET-Tutorials/Generating-Excel-Reports.aspx

=========

والسلام عليكم ورحمة الله وبركاته :)

تم تعديل هذه المشاركة بواسطة AmeenSnw في 5 سبتمبر 2011 في 12:13

#4

السلام عليكم :)

إذا كنت متحمساً لدي طريقة سهلة (ممتنعة).. وفيها لن نستخدم ملف الأكسل كمخزن للبيانات، وعوضاً عنه سنستخدم ملف أكسس!

وبالنسبة للفكرة العامة ستكون كالتالي:

1. صفحة تصويت للمستخدمين يقومون فيها بالتصويت!

2. صفحة عرض نتائج التصويت بالرسوم البيانية!

أرجوا الاستجابة في أول فرصة حتى أقوم بتجهيز الشرح!

والسلام عليكم ورحمة الله وبركاته!

#5

اشكركم جميعا

نعم اخ امين انا متحمس جدا ولدي الرغبة فعلا في التعلم

لكم مني وافر الدعاء بزيادة العلم والفهم

بورك فيكم

#7

السلام عليكم ورحمه الله وبركاته

اخي اذا كنت تستخدم الفيجوال ستديو 2005 وما فوق يمكنك فتح اي تطبيق ويب من خلال القائمة File ومنه اختر Open Website من ثم قم بتحديد مجلد المشروع, والا فقم بتنصيب الـ IIS وقم بانشاء Virtual Directory للمشروع من ثم قم بفتحه من خلال المستعرض

.:: Wish to become better and better ::.

#8

السلام عليكم :)

اقتباس
انا متحمس جدا ولدي الرغبة فعلا في التعلم

حسناً إذن..

بسم الله نبدأ...

==================================

السؤال: قم بتصميم صفحة تصويت أو استطلاع رأي باستخدام تقنية Asp.net بأقل عدد ممكن من الأسطر البرمجية!

==================================

الحل:

بافتراض أن التصويت سيكون عن مدى تفضيلك لفاكهة التفاح (أحب التفاح، أكره التفاح، لا أحبه ولا أكرهه)..

بافتراض استخدام قاعدة بيانات أكسس وليكن اسمها db.mdb

===================================

المتطلبات:

إنشاء جدول في قاعدة البيانات يستقبل نتائج التصويت وليكن اسمه poll ومحتوياته ستكون كالتالي:

المعرف ID، وهو من نوع ترقيم تلقائي ويجب أن يكون المفتاح الأساسي (حدد عليه وأنقر على أيقونة المفتاح الأصفر من الأدوات ليظهر بجانبه إن لم تكن ظاهرة).

نتيجة التصويت result، وهو من نوع رقم، حيث سنخزن ثلاث قيم بداخله فقط، وهي (1 و2 و3) حيث يعبر كل رقم بالترتيب عن الاجابات (أحب التفاح، أكره التفاح، لا أحبه ولا أكرهه).

=========

طبعاً يمكننا إنشاء جدول آخر مرتبط مع هذا الجدول ليقوم بتفسير معنى الأرقام وتكون أعمدته كالتالي:

الإجابة result، وهي رقم

المعنى meaning، من نوع نص.

ومن ثم نقوم بإدخال القيم الافتراضية فيه كالتالي:

result	meaning
1	أحب التفاح
2	أكره التفاح
3	لا أحبه ولا أكرهه

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

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

ثم نقوم بسحب اسم عمود النتائج result من جدول poll ونفلته فوق اسمه في الجدول المعاني، ستظهر نافذة تأكيد العلاقة فنزيل علامة الصح من خيار التكامل المرجعي ثم أوكي!!

سنجد خيطاً يوصل بين الجدولين من نتائج جدول التصويت إلى نتائج جدول المعاني!

ثم حفظ.. ثم إغلاق!!

وبذلك نكون قد أنتهينا من تصميم قاعدة البيانات!

============================

والآن سنقوم بإنشاء استعلام النتائج الذي سنستخدمه لاحقاً لإنشاء الرسم البياني:

1. من قائمة إنشاء ننقر على تصميم الاستعلام Query Design

2. نقوم بإدراج كلاً من الجدولين poll و meaning وسنلاحظ خيط العلاقة موجود بينهما.

3. ننقر على عمود المعاني من جدول المعاني meaning وبذلك سنجده ظهر في جدول الاستعلام، ثم ننقر مرتين على النتائج result من جدول التصويت poll فسيظهر أيضاً كعمود في جدول الاستعلام

4. نقوم بتفعيل خاصية الإجماليات بالنقر عليها من قائمة التصميم أو بالنقر بالزرار الأيمن للماوس بداخل جدول الاستعلام واختيارها. وبذلك سيتم إظافة سطر جديد في جدول الاستعلام اسمه (الإجمالي: )

5. في سطر الإجمالي نقوم باختيار (تجميع حسب) لعامود المعاني و(Count) لعامود النتائج!

6. نقوم بتجربة الاستعلام لنعرف ما إذا كان يعمل بكفاءة أم لا عن طريق النقر على زرار التشغيل أو Run

إذا ظهر لنا جدول فيه عامودين الأول يحتوي على المعاني الثلاث والثاني يحتوي على أصفار فكل شيء يسير في الاتجاه الصحيح!

في حالة وجود خطأ ما تأكد من أن نص الاستعلام هو كالتالي:

SELECT meaning.meaning, Count(poll.result) AS [result]
FROM poll INNER JOIN meaning ON poll.result = meaning.result
GROUP BY meaning.meaning;

حيث ستجد هذا الاستعلام عندما تنقر على أيقونة SQL الموجودة أسفل الصفحة في شريط المعلومات.

وبهذا نكون قد انتهينا من تجهيز استعلام النتائج، نقوم بحفظه ولنسمه results

=====================

حسناً إذن..

والخطوة التالية هل فتح الفجوال ستوديو، ثم سنقوم بإنشاء موقع جديد من نوع Asp.net Freamwork 4

وذلك لأنه يحتوي على أداة ثورية جديدة بداخل قسم البيانات Data في صندوق الأدوات اسمها Chart ستختصر علينا عملية تصميم الرسوم البيانية!

=====================

يااااااااه.. لقد تعبت.. :)

يتبع في التعليق القادم إن شاء الله!

مرفق مع الشرح نموذج قاعدة البيانات الذي تم تصميم حتى الآن!

والسلام عليكم ورحمة الله وبركاته :)

db.zip

2
#9

تم تطبيق الشرح

اشكرك ع الشرح المفصل الوافي

وسأعود لاحقا للمقارنة المرفق بالذي عملته

جزيل الشكر .. زادك الله من علمه وفضله

#10

السلام عليكم :)

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

المهم..

لنكمل ما بدأناه سابقاً..

حسناً.. أين وصلنا؟

نعم.. إنشاء موقع عن طريق الفجوال ستوديو (أنا أستخدم طبعاً الإصدار 2010) حيث يحتوي على خيار استخدام Freamwork الإصدار الرابع والذي يتيح لنا استخدام أداة المخططات..

المهم

1. بعد فتح البرنامج نقوم بإنشاء موقع جديد ولتكن لغة البرمجة التي سنستخدمها هي الفجوال بيسك والموقع فارغ ASP.Net Empty WebSite ولا ننسى تحديد الفريم ورك 4 من القائمة في أعلى النافذة.. وكذلك المسار المناسب الذي سيتم حفظ ملفات الموقع بداخله.

2. نقوم بإدراج قاعدة البيانات السابقة إلى الموقع (بطريقة السحب والإفلات أو بطريقة Shift+Alt+A ثم نحدد الملف)

2. نقوم بإنشاء الصفحة الأولى وهي الرئيسية Default.aspx ونقوم بإضافة أداة من نوع FormView وليكن اسمها poll1

3. نقوم في الفورم فيو بالنقر على سهم المهام السريعة ونختار Configure DataSource

4. ستظهر لنا نافذة تريد مسار قاعدة البيانات، ننقر على استعراض Browse ونحدد قاعدة البيانات من مسارها في الموقع. ثم ننقر على التالي Next

5. ستظهر لنا نافذة تحتوي على خيارين وأسماء جداول قاعدة البيانات سنقوم باختيار الخيار الأول Specify a custom SQL statement or .... ثم ننقر على التالي.

6. ستظهر لنا الآن نافذة فيها العديد من التبويبات سنحدد على تبويب الإدراج INSTER وسنكتب بداخله الاستعلام التالي:

INSERT INTO [poll] ([result]) VALUES (?)

وهو ما يمكن أن يعني (قم بتسجيل قيمة النتيجة في قاعدة البيانات من متغير سنقوم بتحديده لاحقاً).. ننقر على التالي.. ثم Finish

7. نذهب إلى خصائص الفورم فيو ونقوم بتعديل الخاصية DefaultMode لتحمل القيمة Inster وهو ما يمكن أن يعني أن الفورم سيظهر في وضع إدخال البيانات، وتلقائياً سيقوم بعرض نص result ومربع نص بجانبه.

8. الآن نقوم بالنقر على الفورم فيو بالزرار الأيمن للموس، ومن القائمة سنجد خيار التحرير للقالب Edit Template ومنه نختار قالب الإدراج InsertItemTemplate

9. سيقوم البرنامج الآن بفتح قالب الإدراج للتحرير ومنه سنقوم بتغيير النص إلى مثلاً: قم بالتصويت على التالي.. هل تحب فاكهة التفاح؟

أما بالنسبة لمربع النص فسنقوم بحذفه وإدراج قائمة منسدلة DropDownList بدلاً منه..

10. ننقر على سهم المهام السريعة الخاص بالقائمة ونختار Chose Data Source

11. ستظهر لنا نافذة نقوم فيها بتحديد مصدر الخيارات الخاصة بالاستفتاء، وهي الخيارات الموجودة في قاعدة البيانات، سنقوم باختيار New Data Source من القائمة الأولى، تظهر نافذة نوع قاعدة البيانات، نختار Access Database ونضع لها اسماً فريداً ليكن AccessDataSource7 حتى لا يكون هناك تعارض مع الفورم فيو. ثم ننقر على التالي.. نحدد مسار قاعدة البيانات.. ثم التالي.. من قائمة التي أمامنا الآن نختار Specify columns.... ونحدد الأسم الخاص بجدول المعاني meaning بحيث يظهر نموذج الاستعلام في أسفل النافذة كما الآتي:

SELECT * FROM [meaning]

وهو ما يمكن أن يعني (استرجع جميع محتويات الأعمدة الموجودة في جدول المعاني).

ثم ننقر على التالي.. ثم اختبار test.. إذا ظهرت المعاني في جدول يبين النتيجة result والمعنى meaning وفيها نفس بيانات الجدول (1،2،3/ أحب التفاح، أكره التفاح، لا أحبه ولا أكرهه) فنحن في الطريق الصحيح.. ثم ننقر على إنهاء.

12. الآن سنعود إلى نافذة اختيار مصدر البيانات وسنقوم بتحديد المعنى ليظهر في القائمة display والنتيجة لتظهر كقيمة value.. ثم ننقر على OK.

13. الآن نقوم بربط الإجابات في القائمة المنسدلة ليتم إدخالها إلى قاعدة البيانات عن طريق النقر على سهم المهام السريعة للقائمة ومن ثم نختار Edit DataBindings وهي تعني تحرير ربط البيانات.

14. ستظهر نافذة فيها قائمة على الشمال نحدد على SelectedValue (إن لم تكن موجودة ننقر على Show all properties)، ومن الخيار Field binding نحدد في Bound to جدول النتائج result.. ويجب هنا أن لا ننسى تفعيل علامة الصح بجانب Two-way databinding وهي التي ستقوم بإرسال البيانات إلى قاعدة البيانات وتعريف القائمة في استعلام الإدراج تلقائياً.. ثم ننقر على OK.

15. الآن انتهينا من القائمة.. نقوم بتغيير خاصية النص لزرار الإدراج لتصبح (تصويت) بالعربية، ومن ثم نقوم بحذف زرار الإلغاء Cancel لأنه لا يوجد له فائدة هنا..

حسناً إذن.. الآن نكون قد انتهينا من الفورم فيو..

وفي الغالب ستكون شفرتها المصدرية شبيهه بالتالي:

<asp:FormView ID="FormView1" runat="server" DataKeyNames="ID" DataSourceID="AccessDataSource1"
    DefaultMode="Insert">
    <InsertItemTemplate>
        <p dir="rtl">
            قم بالتصويت على التالي..<br />
             هل تحب فاكهة التفاح؟<br />
            <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="AccessDataSourc7"
                DataTextField="meaning" DataValueField="result" SelectedValue='<%# Bind("result") %>'>
            </asp:DropDownList>
        </p>
        <asp:AccessDataSource ID="AccessDataSourc7" runat="server" DataFile="~/db.mdb" SelectCommand="SELECT * FROM [meaning]">
        </asp:AccessDataSource>
        <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"
            Text="تصويت" />
         
    </InsertItemTemplate>
</asp:FormView>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/db.mdb" InsertCommand="INSERT INTO [poll] ([result]) VALUES (?)">
    <InsertParameters>
        <asp:Parameter Name="result" Type="Int32" />
    </InsertParameters>
</asp:AccessDataSource>

والآن نحفظ الصفحة.. ثم نقوم بمعاينتها للتأكد من أن كل شيء يسير بشكل جيد..

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

حسناً إذن...

===================

الآن انتهينا من عملية التصويت.. سنقوم بإنشاء صفحة جديدة تقوم بعرض النتائج بشكل بياني..

ولكن للتسهيل سأقوم بإدراج أداة المخطط من صندوق الأدوات (تبويب Data) إلى نفس الصفحة مباشرة.. بحيث نستطيع أن نرى النتيجة وهي تتحدث مباشرة أمام أعيننا..

حسناً إذن..

1. ندرج الأداة Chart من صندوق الأدوات ToolBox

2. من قائمة المهام السريعة نختار Chose Data Source

3. نحدد على New Data Sourse ومن ثم نحدد نوع قاعدة البانات أكسس ونعطيها أسما فريداً ليكن ADS9.. ثم ننقر على أوكي

4. نحدد مسار قاعدة البيانات. ثم التالي.

5. نحدد من قائمة الأسماء اسم جدول النتائج results بحيث يكون نص الاستعلام في أسفل النافذة كالتالي:

SELECT * FROM [results]

ثم ننقر على التالي.

6. نستطيع هنا اختبار النتائج بالنقر على test، فإن ظهرت لنا النتائج حيث نجد بجانب كل إجابة عدد التكرارات التي قمنا بإدخالها مسبقاً وقت المعاينة قد ظهرت.. فنحن إذن في الطريق الصحيح. ننقر على إنهاء Finish.

7. نعود إلى الصفحة وبالنقر على سهم المهام السريعة للمخطط نحدد القالب المناسب لعرض هذا النوع من البيانات من الخيار نوع المخطط Chart Type وفي الغالب نوع الأعمدة columns هو الأنسب في هذه الحالة وبعض المنتديات تفضل نوع الصفوف Bar الأفقية.

8. نحدد قيمة محور السينات X ليأخذ المعاني meaning وقيمة محور الصادات Y ليأخذ النتيجة result

9. نحفظ الصفحة ومن ثم نقوم بمعاينتها.. سنلاحظ أن الأعمدة تزداد بعد كل تصويت جديد مباشرة.

10. وهو المطلوب إثباته!

====================

تلميحات فيما يتعلق بتنسيق المخطط:

من قائمة الخصائص هناك الخيار Series يمكن بواسطته إظهار الأرقام فوق الأعمدة بواسطة الخيار IsValueShown as Label = True

كذلك بالنسبة للألوان المحتملة..

ومن قائمة الخصائص هناك الخيار ChartArea يمكن بواسطته تحويل المخطط من ثنائي الأبعاد إلى مخطط ثلاثي الأبعاد

كذلك هناك خصائص خاصة بالصورة Image مثل حجم المخطط ونوع الصورة التي سيتم اخراجها (JPG أو Png... الخ)

والعديد من الخصائص الأخرى التي تساعد في التحكم بالمخطط..

حسناً إذن...

مرفق مع هذا الرد نسخة من الموقع الذي قمت بعمله خلال عملية الشرح!

====================

هناك طبعاً بعض الإضافات التي يمكن للشخص أن يضيفها والتي تخص جانب الحماية والأمان.

سنجعل هذه الإضافات لمن يحب المشاركة معنا في إثراء هذا الموضوع من الأعضاء أو المشرفين.

====================

مع تمنياتي للجميع بالتوفيق

والسلام عليكم ورحمة الله وبركاته :)

poll_trys.zip

تم تعديل هذه المشاركة بواسطة AmeenSnw في 5 أكتوبر 2011 في 19:58

2
#11

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

تم تطبيق الشرح بالخطوات ، ولك وافر الشكر على الخطوات التفصيلية ( مرفق برنت سكرين للتطبيق )

لدي سؤال بسيط على المرفق : جعلت الشارت pie ومكتوب على كل جزء احب واكره ولا احب ولا اكره ولكن كيف اجعل النسب ( الارقام ) تظهر بالاضافة الى النص

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

post-219487-049843400 1323988107_thumb.j

المرفقات
test_poll.jpg
#12

السلام عليكم :)

قهوة المساء كتب:

لدي سؤال بسيط على المرفق : جعلت الشارت pie ومكتوب على كل جزء احب واكره ولا احب ولا اكره ولكن كيف اجعل النسب ( الارقام ) تظهر بالاضافة الى النص

جرب تنقر على المخطط ومن الخصائص هناك الخيار Series

ستجد فيه الكثير من الخيارات.. وأعتقد أنك ستجد ظالتك فيه!

والسلام عليكم ورحمة الله وبركاته :)

#13

عندي استفسار اخر المعذرة

اذا ابغا اضيف اكثر من سؤال في التصويت

يعني مثلا هل تحب البرتقال

واخر هل تحب المانجو وهكذا

هل جمع النتائج بيكون على البرنامج او الداتابيس او كلاهما

ممكن احد يوضح بارك الله فيكم

#14

السلام عليكم :)

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

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

والسلام عليكم ورحمة الله وبركاته :)

مواضيع مشابهة