Laravel: Admin Theme ง่ายๆ ด้วย CoreUI

งานส่วนใหญ่ที่ได้มาก็จะเป็นแนวพวก Web Application ที่ใช้จัดการข้อมูลหรือเพื่อ Support Business Process ซึ่งระบบประเภทนี้จะไม่ได้เน้นเรื่องาน graphic สวยงามเท่าไหร่ แต่จะเน้นพวก ux/ui มากกว่า ซึ่ง ux เราก็ต้องมาออกแบบกันอีกที แต่เรื่อง ui หรือ layout ของเว็บสามารถหาพวก theme/template ที่มีอยู่แล้วมาช่วยได้ ซึ่งเท่าที่ลองใช้ CoreUI มาก็ถือว่าดีมากเลยครับ ที่สำคัญฟรีด้วย (มีแบบเสียเงินถ้าต้องการ Plugin เพิ่ม) เรามาดูวิธีการติดตั้ง เพื่อให้ใช้กับ Laraval กันดีกว่าครับ

ติดต้ัง

เนื่องด้วย Laraval มาพร้อมกับ LaraveMix และ CoreUI ก็มี npm package มาให้ผมเลยขอติดตั้งผ่าน npm package ครับ

npm install @coreui/coreui

หรือถ้าใช้ yarn ก็

yarn add @coreui/coreui

Config

หลังจากติดตั้งเสร็จก็จะต้องเข้าไปแก้ไฟล์ resources/sass/app.scss โดยการเพิ่ม

@import '~@coreui/coreui/scss/coreui';

ไว้ใต้ import bootstrap และสามารถลบ ตัว bootstrap เดิมได้เลยครับเนื่องด้วย coreui มาพร้อมกับ bootstrap อยู่แล้วครับ

import CoreUI : resources/sass/app.scss

และอีกทีนึงที่เราต้องแก้ไขคือ resources/js/bootstrap.js โดยการเพิ่ม

require('@coreui/coreui');

ไว้ใต้ require(‘bootstrap’);

require coreui : resources/js/bootstrap.js

และทำการรัน npm dev เพื่อ compile ไฟล์ scss ที่ได้แก้ไข

* สำหรับครั้งแรกที่ใช้งานถ้ามี error ให้ลองสั่ง npm install ก่อนครับ

* Update 09/01/2019 ผมเจอ Error `Can’t resolve ‘perfect-scrollbar`

แก้ไขโดยการลง package perfect-scrollbar เพิ่มครับ

yarn add perfect-scrollbar

Layout

หลังจากผ่านขั้นตอนติดตั้งและ compile LaravelMix เสร็จก็พร้อมใช้งานแล้วครับ ซึ่งผมได้เตรียม layout พื้นฐานที่ต้องใช้งานมาให้แล้วครับ

สามารถเอาไปใช้เป็น layout หลัก แลัวให้ view หน้าอื่น extend มาใช้ต่อได้เลยครับ สำหรับการปรับแต่ง หรือเรียกใช้ ui ต่างๆ ที่ทาง coreui จัดเตรียมมาสามารถเข้าไปดูได้ที่ https://coreui.io/docs/getting-started/introduction/ ครับ