coreui free laravel admin template

قالب إدارة Laravel Bootstrap المجاني لـ CoreUI

من الغريب لماذا قررت إنشاء CoreUI؟ يرجى قراءة هذا المقال: جاك لجميع المهن، سيد لا شيء. لماذا تمتص قوالب إدارة Bootstrap.

تقدم CoreUI 6 إصدارات: Bootstrap وAngular وLaravel وReact.js وVue.js وVue.js + Laravel.

من المفترض أن تكون CoreUI هي التي ستغير قواعد اللعبة في تجربة المستخدم. الكود النقي والشفاف يخلو من المكونات الزائدة، لذا فإن التطبيق خفيف بما يكفي لتقديم تجربة مستخدم مثالية. وهذا يعني أيضًا الأجهزة المحمولة، حيث يكون التنقل سهلاً وبديهيًا تمامًا كما هو الحال على سطح المكتب أو الكمبيوتر المحمول. تتيح لك واجهة برمجة تطبيقات CoreUI Layout API تخصيص مشروعك لأي جهاز تقريبًا - سواء كان جهازًا محمولاً أو ويب أو WebApp - حيث يغطي CoreUI كل هذه الأجهزة!

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

• الإصدارات

• كور يو آي برو

• قوالب الإدارة المبنية على CoreUI Pro

• تثبيت

• الاستخدام

• سمات

• المبدعين

• مجتمع

• المشاريع المجتمعية

• رخصة

• دعم تطوير CoreUI

الإصدارات

تم إنشاء CoreUI استنادًا إلى Bootstrap 4 ويدعم أطر العمل الشائعة.

• قالب إدارة Bootstrap المجاني لـ CoreUI

• قالب إدارة Angular مجاني لـ CoreUI

• قالب إدارة Laravel المجاني لـ CoreUI

• قالب إدارة React.js المجاني لـ CoreUI

• قالب إدارة Vue.js المجاني لـ CoreUI

• CoreUI مجاني Vue.js + قالب إدارة Laravel

كور يو آي برو

• قالب إدارة CoreUI Pro Bootstrap

• قالب إدارة CoreUI Pro Angular

• قالب إدارة CoreUI Pro Laravel

• قالب إدارة رد فعل CoreUI Pro

• قالب إدارة CoreUI Pro Vue

• قالب إدارة CoreUI Pro Vue + Laravel

قوالب الإدارة المبنية على CoreUI Pro

الموضوع الافتراضي	موضوع تراث	تخطيط الظلام

تثبيت

 # استنساخ الريبو$ git clone https://github.com/coreui/coreui-free-laravel-admin-template.git my-project# انتقل إلى دليل التطبيق$ cd my-project# تثبيت تبعيات التطبيق $ Composer install# install تبعيات التطبيق تثبيت $ npm

إذا اخترت استخدام SQLite

 # إنشاء قاعدة بيانات $ المس قاعدة البيانات/database.sqlite

انسخ الملف ".env.example"، وقم بتغيير اسمه إلى ".env". ثم في الملف ".env" استبدل تكوين قاعدة البيانات هذا:

• DB_CONNECTION=mysql

• DB_HOST=127.0.0.1

• DB_PORT=3306

• DB_DATABASE=laravel

• DB_USERNAME=root

• DB_PASSWORD=

إلى هذا:

• DB_CONNECTION=sqlite

• DB_DATABASE=/path_to_your_project/database/database.sqlite

إذا اخترت استخدام PostgreSQL

1. قم بتثبيت PostgreSQL

2. إنشاء مستخدم

 $ sudo -u postgres createuser --interactive
أدخل اسم الدور المراد إضافته: laravel
يجب أن يكون الدور الجديد هو المستخدم المتميز (y/n) n
هل يُسمح للدور الجديد بإنشاء قاعدة بيانات (y/n) n
هل يُسمح للدور الجديد بإنشاء المزيد من الأدوار الجديدة (ص / ن) ن

3. تعيين كلمة مرور المستخدم

 $ sudo -u postgres psql
postgres= تغيير laravel المستخدم بكلمة مرور مشفرة 'password';postgres= q

4. إنشاء قاعدة بيانات

 $ sudo -u postgres createb laravel

5. انسخ الملف ".env.example"، وقم بتغيير اسمه إلى ".env". ثم في الملف ".env" استبدل تكوين قاعدة البيانات هذا:

• DB_CONNECTION=mysql

• DB_HOST=127.0.0.1

• DB_PORT=3306

• DB_DATABASE=laravel

• DB_USERNAME=root

• DB_PASSWORD=

إلى هذا:

• DB_CONNECTION=pgsql

• DB_HOST=127.0.0.1

• DB_PORT=5432

• DB_DATABASE=laravel

• DB_USERNAME=laravel

• DB_PASSWORD=كلمة المرور

إذا اخترت استخدام MySQL

انسخ الملف ".env.example"، وقم بتغيير اسمه إلى ".env". ثم في الملف ".env" أكمل تكوين قاعدة البيانات هذه:

• DB_CONNECTION=mysql

• DB_HOST=127.0.0.1

• DB_PORT=3306

• DB_DATABASE=laravel

• DB_USERNAME=root

• DB_PASSWORD=

قم بتعيين APP_URL

إذا كان عنوان url لمشروعك يشبه: example.com/sub-folder، فانتقل إلى my-project/.env وقم بتعديل هذا السطر:

• APP_URL =

لجعلها تبدو مثل هذا:

• APP_URL = http://example.com/sub-folder

الخطوة التالية

 # في دليل التطبيق الخاص بك # إنشاء laravel APP_KEY$ php artisan key: إنشاء # تشغيل ترحيل قاعدة البيانات وseed$ php artisan migrate: تحديث --seed# إنشاء خلط $ npm run dev # وتكرار إنشاء خلط $ npm run dev

الاستخدام

 # بدء تشغيل الخادم المحلي $ php artisan server # test$ php sales/bin/phpunit

افتح متصفحك بالعنوان: localhost:8000
انقر على "تسجيل الدخول" في قائمة الشريط الجانبي وقم بتسجيل الدخول باستخدام بيانات الاعتماد:

• البريد الإلكتروني: [email protected]

• كلمة المرور: كلمة المرور

هذا المستخدم لديه الأدوار: المستخدم والمسؤول

---

كيفية إضافة رابط إلى الشريط الجانبي:

تعليمات لقالب إدارة CoreUI Free Laravel فقط. تحتوي إصدارات Pro وVue.js على تعليمات منفصلة.

لإضافة رابط إلى الشريط الجانبي - قم بتعديل ملف البذور:

my-project/database/seeds/MenusTableSeeder.php

في وظيفة run() - أضف insertLink() :

 $id = $this->insertLink( $rolesString, $visibleName, $href, $iconString);

• $rolesString - سلسلة تحتوي على قائمة بأدوار المستخدم، وسيكون عنصر القائمة هذا متاحًا، على سبيل المثال. "guest,user,admin"

• $visibleName - تسمية توضيحية لسلسلة مرئية في الشريط الجانبي

• $href - href، على سبيل المثال. /homepage أو http://example.com

• $iconString - سلسلة تحتوي على اسم رمز CoreUI صالح (حالة الكباب)، على سبيل المثال. cil-speedometer أو cil-pencil

لإضافة عنوان إلى الشريط الجانبي - استخدم الوظيفة insertTitle() :

 $id = $this->insertTitle( $rolesString, $title );

• $rolesString - سلسلة تحتوي على قائمة بأدوار المستخدم، وسيكون عنصر القائمة هذا متاحًا، على سبيل المثال. "guest,user,admin"

• $title - تسمية توضيحية لسلسلة مرئية في الشريط الجانبي

لإضافة قائمة منسدلة إلى الشريط الجانبي - استخدم الدالة beginDropdown() :

 $id = $this->beginDropdown( $rolesString, $visibleName, $iconString);

• $rolesString - سلسلة تحتوي على قائمة بأدوار المستخدم، وسيكون عنصر القائمة هذا متاحًا، على سبيل المثال. "guest,user,admin"

• $visibleName - تسمية توضيحية لسلسلة مرئية في الشريط الجانبي

• $iconString - سلسلة تحتوي على اسم رمز CoreUI صالح (حالة الكباب). على سبيل المثال: cil-speedometer أو cil-pencil

لإنهاء قسم القائمة المنسدلة - استخدم الدالة endDropdown() .

لإضافة رابط إلى وظيفة استدعاء القائمة المنسدلة ، insertLink() بين استدعاءات الوظائف beginDropdown() و endDropdown() . مثال:

 $id = $this->beginDropdown('guest,user,admin', 'بعض القائمة المنسدلة', 'cil-puzzle');$id = $this->insertLink('guest,user,admin', 'اسم القائمة المنسدلة' , 'http://example.com');$this->endDropdown();

هام - في نهاية الدالة run() ، قم باستدعاء الدالة joinAllByTransaction() :

 $this->joinAllByTransaction();

بمجرد الانتهاء من تحرير ملف البذور، قم بتشغيل :

 $ php artisan migrate:refresh --seed# يعمل هذا الأمر أيضًا على التراجع عن قاعدة البيانات وترحيلها مرة أخرى.

سمات

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

• ملحوظات

• المستخدمين

• إدارة القوائم

• إدارة عناصر القائمة

• إدارة الدور

• إدارة وسائل الإعلام

• خبز

• قوالب البريد الإلكتروني

ملحوظات

إنه مثال لعرض البيانات في جدول ترقيم الصفحات ووظيفة CRUD.

المستخدمين

إنه مثال بسيط لكيفية إدارة المستخدمين المسجلين.

إدارة القائمة

إنه نظام يسمح لك بإنشاء قائمة جديدة وتعديل القوائم الموجودة. لوضع قائمة جديدة باسم "جديد" في أي طريقة عرض استخدم هذا الرمز:

        <?phpuse the AppMenuBuilderFreelyPositionedMenus;if(isset($appMenus['new'])){
                FreelyPositionedMenus::render( $appMenus['new'] , '', 'your-css-class-of-ul-element');
            }؟>

إدارة عناصر القائمة

يسمح لك بإضافة وتحرير وحذف عناصر القائمة. لإضافة عنصر قائمة جديد إلى القائمة، يجب عليك:

• تحديد القائمة التي تريد إضافة العنصر إليها،

• حدد أدوار المستخدمين الذين سيكون العنصر مرئيًا لهم

• اسم العنصر

• اكتب (للاختيار: الرابط والعنوان والقائمة المنسدلة)

• Href، العنوان الذي سيتم الرجوع إليه العنصر،

• الأصل (لدمج العنصر داخل القائمة المنسدلة)

• أيقونات كوروي

إدارة الدور

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

إدارة وسائل الإعلام

يسمح بـ:

• إنشاء مجلدات الوسائط الافتراضية.

• إرسال الوسائط إلى التطبيقات.

• نقل الوسائط بين المجلدات،

• قطع الصور،

نظام الخبز

BREAD تعني: تصفح، قراءة، تحرير، إضافة، حذف. يتيح لك نظام BREAD الخاص بنا إمكانية إنشاء خبز بسيط لأي جدول من قاعدة البيانات بسهولة وسرعة. لإنشاء خبز جديد فقط أدخل اسم الجدول من قاعدة البيانات. ثم أدخل اسمًا للنموذج. أدخل عدد الصفوف في جدول التصفح. اختر ما إذا كنت تريد أن يحتوي جدول التصفح على أزرار: "إظهار"، "تحرير"، "إضافة"، "حذف". قم بتعيين الأدوار للمستخدمين الذين سيكونون قادرين على استخدام الخبز الجاهز. ثم أكمل كل عمود من الجدول على حدة:

• اسم العمود المرئي للمستخدم،

• نوع الإدخال للعمود، والخطوة الأخيرة هي تحديد خانات الاختيار المناسبة:

• التصفح (يسمح بعرض العمود في جدول البيانات)،

• قراءة (يسمح لك بعرض العمود في طريقة عرض العرض،)

• تحرير (تمكين تحرير العمود)

• إضافة (يسمح لك بإكمال بيانات العمود عند إضافة سجل. مطلوب إذا لم يكن العمود خاليًا). من الممكن أيضًا التعامل مع العلاقات مع جدول آخر. إذا كان العمود مفتاحًا خارجيًا، فيجب تحديده: في الحقل "اسم جدول العلاقات الاختياري" - اسم الجدول الذي يشير إليه المفتاح الخارجي، في الحقل "اسم العمود الاختياري في جدول العلاقات - للطباعة" - اسم العمود الموجود في جدول العلاقة المراد عرضه. أخيرًا، حدد أحد "نوعي الحقول" المرتبطين بالعلاقة: "تحديد العلاقة" أو "راديو العلاقة".

قوالب البريد الإلكتروني

إنه مثال لإدارة قوالب البريد الإلكتروني. يسمح لك بإنشاء وتحرير وحذف القوالب. كما يسمح لك بإرسال بريد إلكتروني إلى عنوان محدد.

المبدعين

لوكاس هولتشيك

• https://twitter.com/lukaszholeczek

• https://github.com/mrholek

أندريه كوبانسكي

• https://github.com/xidedix

مارسين ميشاليك

• https://github.com/rakieta2015

مجتمع

احصل على تحديثات حول تطوير CoreUI وتحدث مع مشرفي المشروع وأعضاء المجتمع.

• اتبعcore_ui على تويتر.

• اقرأ واشترك في مدونة CoreUI.

أيقونات CoreUI (+500 أيقونة مجانية) - مجموعة أيقونات مجانية مصممة بشكل مميز مع علامات بتنسيق SVG وWebfont والتنسيقات النقطية.

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

معاينة أيقونات CoreUI والمستندات

https://coreui.io/icons/

حقوق الطبع والنشر والترخيص

حقوق الطبع والنشر لعام 2020 محفوظة لشركة CreativeLabs Łukasz Holeczek. تم إصدار الكود بموجب ترخيص MIT. هناك قيد واحد فقط وهو أنه لا يمكنك إعادة توزيع CoreUI كمخزون. لا يمكنك القيام بذلك إذا قمت بتعديل CoreUI. واجهنا في الماضي بعض المشكلات مع الأشخاص الذين حاولوا بيع قوالب تعتمد على CoreUI.

دعم تطوير CoreUI

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

اعتبارًا من الآن، أقوم باستكشاف إمكانية العمل على CoreUI بدوام كامل - إذا كنت شركة تقوم ببناء منتجات أساسية باستخدام CoreUI، فأنا أيضًا منفتح على المحادثات المتعلقة بترتيبات الرعاية/الاستشارات المخصصة. تواصل معنا على تويتر.