الدرس مفصل الاول في برمجة موقع اجتماعي مثل الفيسبوك

[linnou]

http://www.dzbatna.com/images/icons/icon28.gif ط§ظ„ط¯ط±ط³ ط§ظ„ط§ظˆظ„ ظپظٹ ط¨ط±ظ…ط¬ط© ظ…ظˆظ‚ط¹ ط§ط¬طھظ…ط§ط¹ظٹ ظ…ط«ظ„ ط§ظ„ظپظٹط³ط¨ظˆظƒ (http://www.dzbatna.com/t1981951/)





هذا الدرس مفصل الاول من دورة برمجة موقع اجتماعي مثل الفيسبوك (http://www.dzbatna.com/t1981901/)

اليوم سنشرح طريقة اعداد البرنامج لبدء العمل , ونحضر ملف الاستايل style لنعمل عليه ومن ثم سنقوم ببناء صفحة تسجيل الاعضاء http://www.dzbatna.com/images/smilies/bleh.gif

نفتح برنامج الدريم ويفر ومن ثم نختار new site مثل الصورة

http://www.3nwank.com/sulieman/01.jpg




الان نعمل التالي :
http://www.3nwank.com/sulieman/02.jpg
1- ندخل اسم الموقع
2- نضغط عند رقم اثنين
3- نختار المجلد الذي سنعمل عليه ويكون موجود في ملف www بالسيرفر SERVER المحلي





بعد ذالك نضغط على كلمة servers كما موضح بالصورة
http://www.3nwank.com/sulieman/06.jpg

ثم نضغط على اشارة الزائد +

http://www.3nwank.com/sulieman/07.jpg
ونختار connct using : local/Network



http://www.3nwank.com/sulieman/08.jpg
1) connect using: local/network
2) server name: ضع الاسم الذي تريده
3) server folder : نختار نفس المجلد الذي اخترناه سابقا
4) عنوان الموقع على السيرفر SERVER المحلي
5) ومن ثم نضغط على advanced عند الرقم 5


http://www.3nwank.com/sulieman/09.jpg
نضع اشارة صح بجانب automaticlly upload file to server on save
وبعد ذالك نضغط save


http://www.3nwank.com/sulieman/010.jpg
بعد ذالك نضع صح على Testing
ومن ثم save



هكذا انتهينا من اعداد البرنامج تقريبا
الان جاء دور تحميل ملف الاستايل style , وهو من مدرس مفصلة كليبرز , اراه مناسب لانه خفيف وجميل

تحميل الاستايل style (http://www.3nwank.com/sulieman/usf.zip)




الان نفك الضغط عن الملف وننقل محتوياته الى المجلد الذي اخترناه كي نعمل عليه ( انا انشئت ملف اسمه usf )

http://www.3nwank.com/sulieman/03.jpg
ملف image يوجد به الصور الخاصة بالتصميم
ملف styles ويحتوي على ملفات الـ css الخاصة بالتنسيق واضافة الجمالية
ملف index.html وهو الموقع


http://www.3nwank.com/sulieman/04.jpg
الان نرجع للبرنامج و نضغط على refresh كما توضح الصورة لكي تظهر الملفات التي اضفناها للموقع
الصورة مصغرة أنقر هنا لرؤيتها بحجمها الطبيعي 1600*1200


http://www.3nwank.com/sulieman/05.jpg
الان نضغط على index.html ضغطتين سريعتين كي نفتحها



لقد انتهينا من اعداد البرنامج , الان سوف نقوم يعمل صفحة تسجيل اعضاء جدد


نقوم الان بالدخول الى phpmyadmin الخاصة بالسيرفر SERVER المحلي

http://www.3nwank.com/sulieman/011.jpg
ونقوم بانشاء قاعجة بيانات جديدة , انا اسميتها usf وبعد ذالك نضغط على create


http://www.3nwank.com/sulieman/012.jpg
نبني جدول جديد اسمه users وهو جدول الاعضاء


http://www.3nwank.com/sulieman/013.jpg
هذا هو الجدول الذي بنيته , واضع ولا يتحتاج لشرح طريقة

الان نعود الى واجهة interface البرنامج
http://www.3nwank.com/sulieman/014.jpg
ومن ثم نختار file ومن ثم save us ونسميه signup.php
هكذا اصبح عندنا ملفان الاول index.html والثاني signup.php وهما مثل بعض



http://www.3nwank.com/sulieman/015.jpg
بعد ان قمنا بحفظها نضغط عليها مرتان كيف نفتحها ونعدل عليها



بعدما فتحنا صفحة signup.php نقوم بحذف منها الاشياء التي لا نحتاجها , فنحن نريد ان نبني صفحة للمستخدمين الجدد ولدخولهم , انظروا ماذا سافعل انا
http://www.3nwank.com/sulieman/016.jpg



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

http://www.3nwank.com/sulieman/017.jpg
في خانة ال databases "موجودة على اليمين"



نقوم بالضغط على اشارة الـ+
ونضغط على MySQL conniction مثل الصورة


http://www.3nwank.com/sulieman/018.jpg

1) نضع اسم التصال "يمكن كتابة اي شيء باللغة الانجليزية"
2) نضع هنا localhost
3) اسم المستخدم لقاعدة البانات للسيرفر SERVER المحلي "انا عندي root"
4) كلمة السر لقاعدة البانات "انا ما عندي كلمة سر"
5) نضغط على select ونختار القاعدة اتي انشئناها اليوم
6) ومن ثم اوكي



جاء دور انشاء نموذج تسجيل اعضاء , الان يجب ان نضغط بالفائرة على المكان الذي سندخل اليه النموذج
http://www.3nwank.com/sulieman/019.jpg
1) لذالك يجب ان تضغط داخل الجدول في الجزء الفارغ
2) نضغط على data
3) نختار record insertion form wizard




http://www.3nwank.com/sulieman/020.jpg
connection : وهو الاسم الذي كتبناه في الشابق
tables : تظهر لنا جول الـ users وهو الجدول الذي سنضيف اليه حقول عن طريق هذا النموذج
after insertion , go to : اي بعد ادخال الحقل اذهب الى " تحديد الصفحة التي سنفتحها بع نجاح عملية الادخال
انا كتبت signupsucces.php , سنبنيها لاحقا
الان نختار user_id ونضغط على علامة ناقص - لازالته من النموذج , لا نحتاج له في عملية الادخال لانه AUTO_INCREMENT
اي انه كل مرة يسجل عضو جديد يحصل على id اوتوماتيكي تسلسلي

ثم نضغط على user_firstname ونغير الـ Lable: الى الاسم الاول
ثم نضغط على user_lastname ونغير الـ Lable: الى الاسم الثاني

نعيد الكرة مع كل الحقول
عندما نصل الى user_password
نضغط على display as: ونختار password field

http://www.3nwank.com/sulieman/021.jpg


واخيرا نضغط اوكي

الان ننسق النوذج قليلا
نضغط على رأس النموذج ونختار class ثم tbl
http://www.3nwank.com/sulieman/022.jpg


نعيد العملية مرة اخرة بالجهة الثانية من النموذج ولكن هذه المرة نختار class ثم msg10tion
http://www.3nwank.com/sulieman/023.jpg



الان نضغط على الجدول الخارجي ونضع قيمة border صفر كي لا يظهر البرواز
http://www.3nwank.com/sulieman/024.jpg



الان نضغط ctrl+s للحفظ , ونضغط preview in firefox
http://www.3nwank.com/sulieman/025.jpg



وتظهر لنا نتيجة عملنا , رائع اليس كذالك ؟
http://www.3nwank.com/sulieman/026.jpg



هذا هو درس مفصل اليوم , الموعد القادم غدا انشاء الله http://www.dzbatna.com/images/smilies/shiny01.gif





التعديل الأخير كان بواسطة Sulieman; 10 - 11 - 2014 الساعة 18:12

ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©