coreui free laravel admin template

เทมเพลตผู้ดูแลระบบ Laravel Bootstrap ฟรีของ CoreUI

สงสัยว่าทำไมฉันถึงตัดสินใจสร้าง CoreUI? โปรดอ่านบทความนี้: Jack of all trades, master of none เหตุใดเทมเพลตผู้ดูแลระบบ Bootstrap จึงห่วย

CoreUI มี 6 เวอร์ชัน: Bootstrap, Angular, Laravel, React.js, Vue.js และ Vue.js + Laravel

CoreUI มีไว้เพื่อเป็นตัวเปลี่ยนเกม UX โค้ดที่บริสุทธิ์และโปร่งใสไม่มีส่วนประกอบที่ซ้ำซ้อน ดังนั้นแอปจึงเบาพอที่จะมอบประสบการณ์ผู้ใช้ขั้นสูงสุด นี่หมายถึงอุปกรณ์เคลื่อนที่เช่นกัน ซึ่งการนำทางนั้นง่ายและใช้งานง่ายเหมือนกับบนเดสก์ท็อปหรือแล็ปท็อป CoreUI Layout API ช่วยให้คุณปรับแต่งโปรเจ็กต์ของคุณสำหรับอุปกรณ์เกือบทุกชนิด ไม่ว่าจะเป็นอุปกรณ์เคลื่อนที่ เว็บ หรือ WebApp CoreUI ครอบคลุมทุกอย่าง!

สารบัญ

• รุ่นต่างๆ

• CoreUI Pro

• เทมเพลตผู้ดูแลระบบที่สร้างขึ้นบน CoreUI Pro

• การติดตั้ง

• การใช้งาน

• คุณสมบัติ

• ผู้สร้าง

• ชุมชน

• โครงการชุมชน

• ใบอนุญาต

• รองรับการพัฒนา CoreUI

รุ่นต่างๆ

CoreUI สร้างขึ้นบน Bootstrap 4 และรองรับเฟรมเวิร์กยอดนิยม

• เทมเพลตผู้ดูแลระบบ Bootstrap CoreUI ฟรี

• เทมเพลตผู้ดูแลระบบเชิงมุมฟรี CoreUI

• เทมเพลตผู้ดูแลระบบ Laravel ฟรีของ CoreUI

• เทมเพลตผู้ดูแลระบบ React.js ฟรีของ CoreUI

• เทมเพลตผู้ดูแลระบบ CoreUI ฟรี Vue.js

• CoreUI ฟรี Vue.js + เทมเพลตผู้ดูแลระบบ Laravel

CoreUI Pro

• เทมเพลตผู้ดูแลระบบ Bootstrap CoreUI Pro

• เทมเพลตผู้ดูแลระบบ CoreUI Pro Angular

• เทมเพลตผู้ดูแลระบบ CoreUI Pro Laravel

• เทมเพลตผู้ดูแลระบบ CoreUI Pro React

• เทมเพลตผู้ดูแลระบบ CoreUI Pro Vue

• เทมเพลตผู้ดูแลระบบ CoreUI Pro Vue + Laravel

เทมเพลตผู้ดูแลระบบที่สร้างขึ้นบน CoreUI Pro

ธีมเริ่มต้น	ธีมดั้งเดิม	เค้าโครงสีเข้ม

การติดตั้ง

 # โคลน repo$ git clone https://github.com/coreui/coreui-free-laravel-admin-template.git my-project# ไปที่ไดเร็กทอรีของแอป$ cd my-project# ติดตั้งการพึ่งพาของแอป$ ติดตั้งผู้แต่งเพลง# ติดตั้ง การพึ่งพาของแอป $ npm ติดตั้ง

หากคุณเลือกใช้ SQLite

 # สร้างฐานข้อมูล$ สัมผัสฐานข้อมูล/database.sqlite

คัดลอกไฟล์ ".env.example" และเปลี่ยนชื่อเป็น ".env" จากนั้นในไฟล์ ".env" ให้แทนที่การกำหนดค่าฐานข้อมูลนี้:

• DB_CONNECTION=mysql

• DB_HOST=127.0.0.1

• DB_PORT=3306

• DB_DATABASE=ลาร์ราเวล

• DB_USERNAME=รูท

• DB_รหัสผ่าน=

เพื่อสิ่งนี้:

• DB_CONNECTION=sqlite

• DB_DATABASE=/path_to_your_project/database/database.sqlite

หากคุณเลือกใช้ PostgreSQL

1. ติดตั้ง PostgreSQL

2. สร้างผู้ใช้

 $ sudo -u postgres createuser --interactive
ป้อนชื่อของบทบาทที่จะเพิ่ม: laravel
บทบาทใหม่จะเป็น superuser (y/n) n หรือไม่
บทบาทใหม่จะได้รับอนุญาตให้สร้างฐานข้อมูล (y/n) n
บทบาทใหม่จะได้รับอนุญาตให้สร้างบทบาทใหม่เพิ่มเติมหรือไม่ (มี/ไม่มี) n

3. ตั้งรหัสผ่านผู้ใช้

 $ sudo -u postgres psql
postgres= แก้ไข laravel ผู้ใช้ด้วยรหัสผ่านที่เข้ารหัส 'รหัสผ่าน'; postgres= q

4. สร้างฐานข้อมูล

 $ sudo -u postgres สร้างแล้ว laravel

5. คัดลอกไฟล์ ".env.example" และเปลี่ยนชื่อเป็น ".env" จากนั้นในไฟล์ ".env" ให้แทนที่การกำหนดค่าฐานข้อมูลนี้:

• DB_CONNECTION=mysql

• DB_HOST=127.0.0.1

• DB_PORT=3306

• DB_DATABASE=ลาร์ราเวล

• DB_USERNAME=รูท

• DB_รหัสผ่าน=

เพื่อสิ่งนี้:

• DB_CONNECTION=pgsql

• DB_HOST=127.0.0.1

• DB_PORT=5432

• DB_DATABASE=ลาร์ราเวล

• DB_USERNAME=ลาร์ราเวล

• DB_PASSWORD=รหัสผ่าน

หากคุณเลือกใช้ MySQL

คัดลอกไฟล์ ".env.example" และเปลี่ยนชื่อเป็น ".env" จากนั้นในไฟล์ ".env" ให้กำหนดค่าฐานข้อมูลนี้ให้สมบูรณ์:

• DB_CONNECTION=mysql

• DB_HOST=127.0.0.1

• DB_PORT=3306

• DB_DATABASE=ลาร์ราเวล

• DB_USERNAME=รูท

• DB_รหัสผ่าน=

ตั้งค่า 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 โยกย้าย: รีเฟรช --seed# สร้างการผสม $ npm run dev# และทำซ้ำสร้างการผสม $ npm run dev

การใช้งาน

 # เริ่มต้นเซิร์ฟเวอร์ท้องถิ่น $ php ช่างฝีมือให้บริการ # ทดสอบ $ ผู้ขาย php / bin / phpunit

เปิดเบราว์เซอร์ของคุณด้วยที่อยู่: localhost:8000
คลิก "เข้าสู่ระบบ" บนเมนูแถบด้านข้างและเข้าสู่ระบบด้วยข้อมูลประจำตัว:

• อีเมล์: [email protected]

• รหัสผ่าน: รหัสผ่าน

ผู้ใช้รายนี้มีบทบาท: ผู้ใช้ และ ผู้ดูแลระบบ

---

วิธีเพิ่มลิงค์ไปที่แถบด้านข้าง:

คำแนะนำสำหรับเทมเพลตผู้ดูแลระบบ CoreUI Free Laravel เท่านั้น เวอร์ชัน Pro และ Vue.js มีคำแนะนำแยกกัน

หากต้องการเพิ่ม ลิงก์ ไปยังแถบด้านข้าง - แก้ไขไฟล์ seeds:

my-project/database/seeds/MenusTableSeeder.php

ในฟังก์ชั่น run() - เพิ่ม insertLink() :

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

• $rolesString - สตริงที่มีรายการบทบาทผู้ใช้ องค์ประกอบเมนูนี้จะพร้อมใช้งาน เช่น "guest,user,admin"

• $visibleName - คำบรรยายสตริงที่มองเห็นได้ในแถบด้านข้าง

• $href - a href เช่น /homepage หรือ http://example.com

• $iconString - สตริงที่มีชื่อไอคอน CoreUI ที่ถูกต้อง (kebab-case) เช่น 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 ที่ถูกต้อง (kebab-case) ตัวอย่างเช่น: cil-speedometer หรือ cil-pencil

หากต้องการสิ้นสุดส่วนแบบเลื่อนลง - ใช้ฟังก์ชัน endDropdown()

หากต้องการเพิ่ม ลิงก์ ไปยังฟังก์ชันการโทร แบบเลื่อนลง insertLink() ระหว่างการเรียกใช้ฟังก์ชัน beginDropdown() และ endDropdown() ตัวอย่าง:

 $id = $this->beginDropdown('guest,user,admin', 'Some dropdown', 'cil-puzzle');$id = $this->insertLink('guest,user,admin', 'Dropdown name' , 'http://example.com');$this->endDropdown();

สิ่งสำคัญ - เมื่อสิ้นสุดฟังก์ชัน run() ให้เรียกฟังก์ชัน joinAllByTransaction() :

 $นี่->joinAllByTransaction();

เมื่อแก้ไขไฟล์ seeds เสร็จแล้ว ให้รัน :

 $ php artisan โยกย้าย: รีเฟรช --seed# คำสั่งนี้จะย้อนกลับฐานข้อมูลและย้ายอีกครั้ง

คุณสมบัติ

สารบัญ:

• หมายเหตุ

• ผู้ใช้

• การจัดการเมนู

• จัดการรายการเมนู

• การจัดการบทบาท

• การจัดการสื่อ

• ขนมปัง

• เทมเพลตอีเมล

หมายเหตุ

เป็นตัวอย่างของการนำเสนอข้อมูลในตารางการแบ่งหน้าและฟังก์ชัน CRUD

ผู้ใช้

เป็นตัวอย่างง่ายๆ ของวิธีจัดการผู้ใช้ที่ลงทะเบียน

การจัดการเมนู

เป็นระบบที่ให้คุณสร้างเมนูใหม่และแก้ไขเมนูที่มีอยู่ได้ หากต้องการวางเมนูใหม่ชื่อ "ใหม่" ในมุมมองใด ๆ ให้ใช้รหัสนี้:

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

จัดการรายการเมนู

ช่วยให้คุณสามารถเพิ่ม แก้ไข และลบรายการเมนูได้ ในการเพิ่มรายการเมนูใหม่ให้กับเมนู คุณต้อง:

• ระบุเมนูที่คุณกำลังเพิ่มรายการ

• ระบุบทบาทของผู้ใช้ที่จะมองเห็นรายการนั้น

• ตั้งชื่อรายการ

• พิมพ์ ( เพื่อเลือก: ลิงก์ ชื่อ และดรอปดาวน์)

• Href ที่อยู่สำหรับอ้างอิงรายการ

• ผู้ปกครอง (เพื่อซ้อนรายการภายในดรอปดาวน์)

• ไอคอน CORUI

การจัดการบทบาท

ช่วยให้คุณสร้าง แก้ไข ลบ และจัดลำดับบทบาทผู้ใช้ใหม่ได้ เมื่อผู้ใช้มีมากกว่าหนึ่งบทบาท บทบาทที่มีลำดับชั้นสูงสุดจะถูกใช้เพื่อสร้างเมนูสำหรับเขา

จัดการสื่อ

ช่วยให้:

• สร้างโฟลเดอร์สื่อเสมือน

• ส่งสื่อไปยังแอปพลิเคชัน

• ย้ายสื่อระหว่างโฟลเดอร์

• ตัดภาพ

ระบบขนมปัง

BREAD ย่อมาจาก: เรียกดู อ่าน แก้ไข เพิ่ม ลบ ระบบ BREAD ของเราช่วยให้คุณสร้าง BREAD แบบธรรมดาสำหรับตารางใดๆ จากฐานข้อมูลได้อย่างง่ายดายและรวดเร็ว หากต้องการสร้าง 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 ฉันยังเปิดรับการสนทนาเกี่ยวกับการเตรียมการสนับสนุน / การให้คำปรึกษาแบบกำหนดเองอีกด้วย ติดต่อได้ที่ทวิตเตอร์