KLiK SocialMediaWebsite - KLiK SocialMediaWebsite

KLiK SocialMediaWebsite

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

velopment Release

تنزيل

Project Abandoned . تم التخلي عن هذا المشروع وقد يكون قديمًا بالمعايير الحالية وفيما يتعلق بالأمن والميزات وما إلى ذلك .. قد أجدد هذا المشروع في المستقبل ولكن لا يوجد أي تطور آخر مخطط له في الوقت الحالي.

KLIK هو نظام تجمع المعلومات القائم على PHP (أو ببساطة موقع ويب لوسائل التواصل الاجتماعي) ، يتكون من نظام تسجيل الدخول/التسجيل الكامل ، نظام ملف تعريف المستخدم ، غرفة الدردشة ، نظام المنتدى ونظام إدارة المدونة/الاقتراع/الأحداث.

جدول المحتويات

تثبيت
- متطلبات
- خطوات التثبيت
- ابدء
سمات
عناصر
- اللغات
- بيئة التنمية
- قاعدة البيانات
- DBMS
- API
- الأطر والمكتبات
- التقنيات
- الإضافات الخارجية
تفاصيل
ملفات التطبيق
التحسينات المستقبلية
الفريق

تثبيت

متطلبات

PHP
خادم Apache
قاعدة بيانات MySQL
SQL
phpmyadmin

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

خطوات التثبيت

استيراد ملف klik_database.sql في المجلد includes في phpmyadmin. ليست هناك حاجة لأي تغيير في ملف .sql. سيؤدي ذلك إلى إنشاء قاعدة البيانات المطلوبة للتطبيق للعمل.
قم بتحرير ملف dbh.inc.php في المجلد includes إنشاء اتصال قاعدة البيانات. قم بتغيير كلمة المرور واسم المستخدم إلى تلك المستخدمة في التثبيت الحالي لـ phpMyAdmin . ليست هناك حاجة لتغيير أي شيء آخر.

 $ serverName = " localhost " ;
$ dBUsername = " root " ;
$ dBPassword = " examplePassword " ;
$ dBName = " klik_database " ;

$ conn = mysqli_connect ( $ serverName , $ dBUsername , $ dBPassword , $ dBName , 3307 );

if (! $ conn )
{
    die ( " Connection failed: " . mysqli_connect_error ());
}

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

قم بتحرير ملف email-server.php في المجلد includes وتغيير المتغيرات وفقًا لذلك:

$SMTPuser : عنوان البريد الإلكتروني على gmail
$SMTPpwd : كلمة مرور عنوان البريد الإلكتروني
SMTPtitle : اسم الشركة الافتراضية
Domain : مجال موقع الويب ، مثل المضيف المحلي على الخادم المحلي أو إذا كان على مجال مباشر ، شيء مثل www.hypotheticationwebsite.com

 $ SMTPuser = ' [email protected] ' ;   
$ SMTPpwd = ' some-example-password ' ;
$ SMTPtitle = " KLiK inc. " ;
$ Domain = ' localhost ' ;

هذه الخطوة هي أساسًا لإعداد حساب بريد إلكتروني لتمكين نظام contact password reset system ، وكلها تتطلب البريد.

في المرحلة الحالية من التطبيق ، يتم دعم حسابات Gmail فقط.

ابدء

يحتوي ملف قاعدة البيانات بالفعل على الكثير من البيانات والمستخدمين. معظم المستخدمين في قاعدة البيانات لديهم نفس كلمة المرور مثل أسماء المستخدمين الخاصة بهم باستثناء عدد قليل. لا يمكن الاشتراك كمسؤول من خلال التطبيق ، لأننا قررنا أنه كان ضعفًا قابلاً للاستغلال. لذلك ، سيتعين عليك إنشاء حساب والذهاب يدويًا إلى جدول users في قاعدة البيانات لتغيير مستخدم هذا الحساب إلى 1 من 0 .

0 المستوى يعني المستخدم العادي والمستوى 1 يعني المسؤول

هناك طريقة بسيطة للوصول إلى جميع حسابات العينة دون حذفها ، وبالتالي فقدان جميع بيانات العينة هو تغيير email يدويًا من داخل PhpmyAdmin إلى عنوان بريد إلكتروني صالح. ثم حاول تسجيل الدخول باستخدام هذا الحساب باستخدام كلمة مرور خاطئة ، واستخدم forgot password? link لإعادة تعيين كلمة مرور الحسابات. يمكن تغيير بريد إلكتروني الحساب بأمان مرة أخرى إلى أي شيء تافهة لاحقًا.

سمات

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

عناصر

اللغات

 PHP 5.6.40
SQL 14.0
JavaScript ES 6
HTML5
CSS3

بيئة التنمية

 WampServer Stack 3.0.6
Windows 10

قاعدة البيانات

 MySQL Database 8.0.13

DBMS

 phpMyAdmin 4.8.3

API

 MySQLi APIs

الأطر والمكتبات

 JQuery v3.3.1
BootStrap v4.2.1

التقنيات

 AJAX

الإضافات الخارجية

 [PHPMailer 6.0.6](https://github.com/PHPMailer/PHPMailer)

تم استخدام هذا لإنشاء mail server على Windows localhost ، لأنه على عكس Linux ، لا يوجد جهاز مثبت بالفعل في Windows. تم استخدام هذا البرنامج المساعد لإرسال واستلام رسائل البريد الإلكتروني على مضيف محلي ، وليس هناك حاجة إليه في مجال مباشر

تفاصيل

تفاصيل الميزات المهمة للتطبيق

لوحة معلومات التطبيق

توفر لوحة القيادة واجهة مركزية لمعظم ميزات التطبيق. توفر User profile card في الزاوية اليسرى العلوية من الشاشة ملخص ملف تعريف ، بالإضافة إلى رابط إلى ملف التعريف وصفحة تحرير الملف الشخصي. يوفر زر المبدع في الزاوية اليمنى العليا رابطًا بارزًا لصفحة الفريق ، والذي يعرض KLiK Creators .

توفر واجهة TAB 4 في المركز إمكانية الوصول إلى latest ، أو آخر Forums Blogs Polls Events التي تم إنشاؤها مؤخرًا. تُظهر المكونات الخصائص الفردية للعناصر المعنية ، مثل upvotes الكلية للمنتدى ، likes مدونة ، votes لاستطلاع الاستطلاع والأيام days remaining للأحداث. يوجد زران أخريان ، ينتقلان إلى KLiK Forums (الواجهة المركزية للمنتديات) KLiK Hub (الواجهة المركزية لنظام إدارة المدونة والاستطلاع وإدارة الأحداث).

أنظمة الإدارة

Forum System :
- إنشاء المنتدى
- الرد / نشر الرسائل في منتدى
- فئات المنتدى
- قدرة المسؤول على إنشاء فئات المنتدى
- نظام UPVOTE/ Downvote على ردود المنتدى (لا يوجد تكرار للتصويت وما إلى ذلك ممكن)
- القدرة على حذف ردود المنتدى الخاصة بك (يمكن للمسؤول حذف أي)
Blog Management System :
- إنشاء المدونة
- اختيار صورة غلاف المدونة الاختيارية (هناك صورة افتراضية)
- Like النظام على المدونات (يمكن للمستخدمين إما مثل المدونة أو إزالة ما شابه)
- حذف المدونات الخاصة (يمكن للمسؤول إزالة أي)
Event Management System :
- نظام إنشاء الأحداث
- اختيار صورة غلاف الحدث الاختياري (هناك صورة افتراضية)
- عنوان الحدث
- معلومات الحدث (اختياري)
- تحديد تاريخ الحدث
- العد التنازلي في الوقت الفعلي في صفحة الحدث
- وضع العلامات التلقائية على أنها كاملة في تاريخ الحدث
Poll Management System :
- خلق الاقتراع
- التصويت على الاستطلاع
- تغيير / عرض التصويت الحالي
- استطلاعات قفل / مفتوحة (لا يمكن تغيير التصويت في صناديق الاقتراع المقفلة)
- عرض النتائج [إجمالي مستخدمي التصويت ، لا. من المستخدمين الذين يصوتون لكل خيار]
- فصل صفحة لعرض كل خيار استطلاع مع كل مستخدم صوت لصالحها

تسجيل الدخول/التسجيل ومصادقة المستخدم

يدعم KLIK نظام تسجيل الدخول/التسجيل ونظام المستخدم الكامل. عند بدء التشغيل ، يعرض التطبيق خيارات لتسجيل الدخول أو التسجيل أو الاتصال بمدير موقع الويب عبر البريد الإلكتروني. يمكن لكل مستخدم إنشاء اسم مستخدم فريد لا يمكن تغييره لاحقًا. يتم hashed passwords المستخدم قبل التخزين في قاعدة البيانات ، لذا حتى لم يتمكن المدراء من الوصول إلى كلمات المرور الأصلية أيضًا. تتضمن معلومات المستخدم الإضافية Full Name ، email ، Profile Image ، Profile Headline ، Gender والسيرة Bio .

يوجد أيضًا Password Recovery System يمكّن المستخدم من إعادة تعيين كلمات المرور الخاصة بهم بطريقة آمنة. يقوم التطبيق بإنشاء روابط رمزية مشفرة مؤقتة مع وقت انتهاء صلاحية معين والذي عند استخدامه من قبل المستخدم يطالب بتغيير كلمة المرور. نظرًا لأن هذا يتطلب أيضًا كلمة المرور الحالية ، فإن العملية آمنة ولديها فرص أقل للاستغلال.

يستخدم التطبيق العديد من أساليب المصادقة للتسجيل وتسجيل الدخول. إنه يتحقق من empty fields ، wrong username ، wrong password ، SQL errors ، server errors وفي حالة التسجيل ، corrupted image أو أخطاء wrong image type

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

لدى Klik User profile system كامل. يتم تعيين ملف تعريف لكل مستخدم على التسجيل ، حيث يمكن للمستخدم إنشاء منتديات ومدونات وأحداث وما إلى ذلك والتفاعل مع ميزات التطبيق. يعد الاسم الكامل للمستخدم ، والخطوط والسيرة الذاتية ، وكذلك صورة الملف الشخصي اختياريًا ، مما يعني أنه يمكن لأي شخص الاشتراك دون تعيينها. في هذه الحالة ، سيتم تعيين صورة للمستخدم الافتراضية وسيكون العنوان الرئيسي والسيوي والاسم الكامل فارغًا.

يمكن الوصول إلى user profile من خلال الخيار في قائمة الإعدادات الموجودة على شريط التنقل ، أو أكثر بكل بساطة ، من خلال النقر فوق صورة المستخدم على بطاقة ملف تعريف المستخدم ، والتي تكون موجودة في الزاوية اليسرى العليا من شاشة التطبيق على معظم الصفحات. تعرض صفحة الملف الشخصي معلومات المستخدم الأساسية مثل اسم المستخدم ، والاسم الكامل ، والجنس ، والعنوان الرئيسي والسيرة الحيوية. بصرف النظر عن ذلك ، فإنه يعرض Forums Blogs المختلفة التي أنشأها المستخدم إلى جانب Polls التي شارك فيها. إذا لم يكن المستخدم قد فعل أيًا من هذا أو جديد ، فإن الصفحة تعرض قطة بونغو لطيفة مع تعليق "فارغ" لتذكيرك بأنك بحاجة إلى أن تكون أكثر نشاطًا :)

يوجد أيضًا Profile Editing System يسمح للمستخدم بتحرير معلومات ملفه الشخصي. يمكن الوصول إليه من خلال الخيار المعني في قائمة الإعدادات في شريط التنقل أو ببساطة النقر على أيقونة القلم القلم بجوار صورة ملف تعريف المستخدم على بطاقة الملف الشخصي. يسمح النظام للمستخدم بتغيير معظم معلوماته باستثناء اسم المستخدم ، والذي لا يمكن تغييره. جميع الحقول لديها بالفعل المعلومات الحالية ، لذلك لا يتعين على المستخدم كتابة كل شيء مرة أخرى إذا كان يرغب فقط في تحرير المعلومات الحالية قليلاً. يمكن أيضًا تغيير كلمة المرور ، ومع ذلك ، فقط من خلال توفير كلمة المرور الحالية للاحتفاظ بواجهة أكثر أمانًا.

غرفة الدردشة / صندوق الوارد

لدى Klik أيضًا صندوق دردش ، يستخدم PHP & AJAX للدردشة في الوقت الفعلي مع المستخدمين الآخرين. القسم الموجود على اليسار هو قائمة بجميع المستخدمين الموجودين حاليًا على موقع الويب ، في حين أن شاشة الدردشة الصحيحة هي لعرض الرسائل الصادرة والرسائل الصادرة. يمكن للمستخدم الوصول إلى دردشة مع مستخدم معين من خلال النقر عليه/في قائمة المستخدمين ، والتي ستسترجع جميع رسائل الدردشة من قاعدة البيانات. يتم تصميم الرسائل المناسبة والرسائل الصادرة بشكل مختلف من أجل الحفاظ على قابلية القراءة. تتم الدردشة في الوقت الفعلي ، دون الحاجة إلى تحديث الصفحة بشكل مستمر.

التحسينات المحتملة :

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

حماية

Password hashing قبل التخزين في قاعدة البيانات.
يتم إعادة تعيين كلمة المرور من خلال encrypted tokens التي تم إنشاؤها بشكل فردي المرسلة عبر البريد الإلكتروني كنموذج من الرابط. الرموز لديها تاريخ انتهاء صلاحية معين لا يمكن استخدامه بعد ذلك.
تصفية المعلومات التي تم الحصول عليها من أساليب $_GET و $_POST لمنع header injection .
تنفيذ MySQLi Prepared Statements لأمن قاعدة البيانات المتقدمة .
مثال:

 $ sql = " select uidUsers from users where uidUsers=?; " ;
        $ stmt = mysqli_stmt_init ( $ conn );
        if (! mysqli_stmt_prepare ( $ stmt , $ sql ))
        {
            header ( " Location: ../signup.php?error=sqlerror " );
            exit ();
        }
        else
        {
            mysqli_stmt_bind_param ( $ stmt , " s " , $ userName );
            mysqli_stmt_execute ( $ stmt );
            mysqli_stmt_store_result ( $ stmt );
       }

ملفات التطبيق

قائمة بجميع ميزات التطبيق الرئيسية والملفات الواجهة الأمامية والخلفية.

ميزة	الملفات الأمامية	الملفات الخلفية
لوحة القيادة	`index.php (Main Dashboard)` ، `Forum.php` ، `Hub.php`	ن/أ
نظام المنتدى	`categories.php` `create-category` `topics.php` `create-topic.php` `posts.php`	`create-category.inc.php` ، `create-topic.inc.php` ، `delete-category.php` ، `delete-forum.php` ، `delete-post.php`
نظام المدونة	`blog-page.php` ، `blogs.php` ، `create-blog`	`blog-vote.inc.php` ، `create-blog.inc.php`
نظام الأحداث	`event-page.php` ، `events.php` ، `create-event.php`	`create-event.inc.php`
نظام الاستطلاع	`poll.php` ، `polls.php` ، `poll-voters.php`	`create-poll.inc.php` ، `delete-poll.inc.php` ، `poll.class.php` ، `post-vote.inc.php`
غرفة الدردشة	`message.php`	`post_message_ajax.php` ، `get_message_ajax.php` ، `script.js`
الاشتراك/ تسجيل الدخول	`signup.php` ، `login.php`	`signup.inc.php` ، `login.inc.php` ، `logout.inc.php`
نظام الملف الشخصي	`profile.php` ، `edit-profile.php`	`profileUpdate.inc.php`
إعادة تعيين كلمة المرور	`reset-pwd.php` ، `create-new-pwd.php`	`reset-request.inc.php`
تحميل الصورة	ن/أ	`upload.inc.php`
معرض الخالق	`team.php` ، `KLiK_anas-imran.php` ، `KLiK_anas-kamal.php` ، `KLiK_saad.php` ، `KLiK_ubaid.php`	ن/أ
العثور على المستخدمين	`users-view.php`	ن/أ

ملاحظة: توجد ملفات واجهة المستخدم الرسومية في root directory ، backend files موجودة في includes . وبالمثل ، فإن جميع ملفات CSS و JS موجودة في أدلة css & js الخاصة بهم. فقط ملفات المبدع في _KLiK Creators folder لديها ملفات CSS الخاصة بهم. ملفات هيكلة HTML الرئيسية هي HTML-head.php و HTML-footer.php ، والتي تتواجد أيضًا في المجلد يتضمن