Setting Menu pada Laravel + Admin LTE

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Pada artikel kali ini kita akan belajar memodifikasi menu aplikasi Laravel yang sudah kita sambungkan dengan template Admin LTE 3.2.

Dalam artikel kali ini saya ingin mengulas bagaimana cara menginstall Admin LTE 3 ke dalam projek Laravel 10 yang notabene sudah menggunakan Vite untuk melakukan proses Mixing asset - asset yang berjalan di atasnya. Termasuk nanti asset milik Admin LTE 3.

Pastikan tutorial sebelumnya yaitu Install Admin LTE 3 pada Laravel 10 sudah sukses kalian lakukan. Kalau belum silakan dipraktekkan dengan mengikuti tutorial dengan klik LINK ini.

Berikut langkah - langkah Setting Side Menu Aplikasi Laravel 10 :

1. Buka projek Laravel kalian menggunakan editor Visual Studio Code.
2. Buka Dokumentasi Admin LTE milik Jeroennoten dengan klik LINK ini.
3. Setelah dokumentasi terbuka silakan scroll ke bawah untuk mencari menu Documentation kemudian klik link Instalation Guide.
4. Setelah halaman Instalation Guide terbuka silakan perhatikan Right Menu cari link tentang Menu Config kemudian klik.
5. Diperlihatkan contoh script menu standar dari Admin LTE 3 seperti di bawah ini :

   
   'menu' => [
       'MAIN NAVIGATION',
       [
           'text' => 'Blog',
           'url' => 'admin/blog',
       ],
       [
           'text' => 'Pages',
           'url' => 'admin/pages',
           'icon' => 'fas fa-fw fa-file',
       ],
       [
           'text' => 'Show my website',
           'url' => '/',
           'target' => '_blank',
       ],
       [
           'header' => 'ACCOUNT SETTINGS',
       ],
       [
           'text' => 'Profile',
           'route' => 'admin.profile',
           'icon' => 'fas fa-fw fa-user',
       ],
       [
           'text' => 'Change Password',
           'route' => 'admin.password',
           'icon' => 'fas fa-fw fa-lock',
       ],
   ],
   
   
   

6. Untuk membuka setting menu seperti di atas pada projek laravel kita silakan kalian buka file adminlte.php yang berada di dalam folder config.
7. Kalian akan menemui struktur menu seperti di bawah ini :

       
       	'menu' => [
           // Navbar items:
           [
               'type'         => 'navbar-search',
               'text'         => 'search',
               'topnav_right' => true,
           ],
           [
               'type'         => 'fullscreen-widget',
               'topnav_right' => true,
           ],
   
           // Sidebar items:
           [
               'type' => 'sidebar-menu-search',
               'text' => 'search',
           ],
           [
               'text' => 'blog',
               'url'  => 'admin/blog',
               'can'  => 'manage-blog',
           ],
           [
               'text'        => 'pages',
               'url'         => 'admin/pages',
               'icon'        => 'far fa-fw fa-file',
               'label'       => 4,
               'label_color' => 'success',
           ],
           ['header' => 'account_settings'],
           [
               'text' => 'profile',
               'url'  => 'admin/settings',
               'icon' => 'fas fa-fw fa-user',
           ],
           [
               'text' => 'change_password',
               'url'  => 'admin/settings',
               'icon' => 'fas fa-fw fa-lock',
           ],
           [
               'text'    => 'multilevel',
               'icon'    => 'fas fa-fw fa-share',
               'submenu' => [
                   [
                       'text' => 'level_one',
                       'url'  => '#',
                   ],
                   [
                       'text'    => 'level_one',
                       'url'     => '#',
                       'submenu' => [
                           [
                               'text' => 'level_two',
                               'url'  => '#',
                           ],
                           [
                               'text'    => 'level_two',
                               'url'     => '#',
                               'submenu' => [
                                   [
                                       'text' => 'level_three',
                                       'url'  => '#',
                                   ],
                                   [
                                       'text' => 'level_three',
                                       'url'  => '#',
                                   ],
                               ],
                           ],
                       ],
                   ],
                   [
                       'text' => 'level_one',
                       'url'  => '#',
                   ],
               ],
           ],
           ['header' => 'labels'],
           [
               'text'       => 'important',
               'icon_color' => 'red',
               'url'        => '#',
           ],
           [
               'text'       => 'warning',
               'icon_color' => 'yellow',
               'url'        => '#',
           ],
           [
               'text'       => 'information',
               'icon_color' => 'cyan',
               'url'        => '#',
           ],
       ],
       
   

8. Jika di lihat di browser akan muncul tampilan menu seperti ini :
   
   
   
9. Silakan edit struktur menu di atas sesuai kebutuhan menu yang ada di aplikasi kalian. Misal menu di atas diedit seperti di bawah ini :

      
    'menu' => [
        ['header' => 'ACCOUNT SETTING'],
       
        [
            'text'    => 'ACCOUNT SETTING',
            'icon'    => 'fas fa-fw fa-share',
            'submenu' => [
                [
                    'text' => 'profile',
                    'url'  => 'admin/settings',
                    'icon' => 'fas fa-fw fa-user',
                ],
                [
                    'text' => 'change_password',
                    'url'  => 'admin/settings',
                    'icon' => 'fas fa-fw fa-lock',
                ],
            ],
        ],
        [
            'text'    => 'MASTER DATA',
            'icon'    => 'fas fa-fw fa-share',
            'submenu' => [
                [
                    'text' => 'Produk',
                    'url'  => 'produk',
                ],
                [
                    'text' => 'Supplier',
                    'url'  => 'supplier',
                ],
                [
                    'text' => 'Customer',
                    'url'  => 'customer',
                ],
            ],
        ],
        [
            'text'    => 'TRANSAKSI',
            'icon'    => 'fas fa-fw fa-share',
            'submenu' => [
                [
                    'text' => 'Pembelian',
                    'url'  => 'pembelian',
                ],
                [
                    'text' => 'Penjualan',
                    'url'  => 'penjualan',
                ],
            ],
        ],
        [
            'text'    => 'KEUANGAN',
            'icon'    => 'fas fa-fw fa-share',
            'submenu' => [
                [
                    'text' => 'Pengeluaran',
                    'url'  => 'pengeluaran',
                ],
                [
                    'text' => 'Pemasukan',
                    'url'  => 'pemasukan',
                ],
            ],
        ],
    ],
    
    


Catatan :
• header - menunjukkan kelompok menu
• text - menunjukkan nama menu
• icon - jenis icon yang akan digunakan menu (diambil dari FONTAWESOME)
• url - alamat route dari menu - cek di file route untuk setiap nama route yang akan dituliskan.
• submenu - menunjukkan submenu
10. Sehingga saat ditampilkan di browser akan muncul sepert ini :
    
    
    
    
    
    
    
    
    
    

Semoga Artikel ini bermanfaat !!!

Read More

Membuat Logo dari Gambar Hewan

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Pada kesempatan kali ini saya ingin membahas bagaimana cara memanfaatkan tool yang dimiliki Adobe Photoshop CS6 untuk membuat sebuah logo yang di dalamnya melibatkan gambar Hewan.

Tool yang akan kita gunakan dalam tutorial kali ini adalah Move Tool, Ellipse Tool, Pen Tool, Text Tool serta Paint Bucket Tool. Dengan harapan walaupun kita tidak terlalu dalam menguasai Adobe Photoshop namun dengan pengetahuan dasar mengenai beberapa tool di atas kita sudah bisa membuat logo untuk tujuan khusus.

Point utamanya dalam proses pembuatan logo ini adalah proses seleksi gambar yang akan digunakan di dalam logo.

Berikut langkah - langkah membuat logo menggunakan Adobe Photoshop CS 6:

1. Buka aplikasi Adobe Photoshop kalian.
2. Klik tab File di pojok kiri atas, lalu pilih New. atau kalian juga bisa dengan menekan Ctrl + N.
3. Pada jendela dialogbox yang muncul isikan nilai seperti nama projek, serta ukuran layer projek seperti di bawah ini :
   
   
4. Klik Move Tool, kemudin aktifkan/berikan centang Auto Select dan Show Transform Controls,
5. Download gambar misalkan gambar burung kemudian open di dalam photoshop
6. Buat seleksi di sekeliling gambar burung yang akan digunakan utk logo mengunakan Pen Tool seperti di bawah ini :
   
7. Saat seleksi yang telah dibuat diberikan warna hitam hasilnya seperti berikut :
   
   
   
8. Buat layer baru kemudian silakan buat seleksi - seleksi untuk memberikan efek gelap terang pada siluet gambar burung yang telah jadi sebelumnya:
9. 
   

Semoga artikel ini bermanfaat.

Read More

Cara Membuat Logo TV 77 Menggunakan Adobe Photoshop CS6

Assalamu alaikum Wr. Wb 

Salam Pinter Bareng Komputer, ...zero bit...

Pada kesempatan kali ini saya ingin membahas bagaimana cara memanfaatkan tool yang dimiliki Adobe Photoshop CS6 untuk membuat sebuah logo TV77.

Tool yang akan kita gunakan dalam tutorial kali ini adalah Move Tool, Marquee Tool, Text Tool serta Paint Bucket Tool. Dengan harapan walaupun kita tidak terlalu dalam menguasai Adobe Photoshop namun dengan pengetahuan dasar mengenai beberapa tool di atas kita sudah bisa membuat logo untuk tujuan khusus.

Berikut langkah - langkah membuat logo TV7 menggunakan Adobe Photoshop CS6:

1. Buka aplikasi Adobe Photoshop kalian.
2. Klik tab File di pojok kiri atas, lalu pilih New. atau kalian juga bisa dengan menekan Ctrl + N.
3. Pada jendela dialogbox yang muncul isikan nilai seperti nama projek, serta ukuran layer projek seperti di bawah ini :
   
   
4. Pastikan Ruler muncul di area kerja kalian kemudian buat garis - garis bantuan pada layer untuk membantu menentukan titik tengah halaman seperti di bawah ini : 
   
5. Buat Layer Baru dengan menekan CTRL + SHIFT + N, beri nama Ellips1. Kemudian buat bentuk ellips menggunakan marquee tool, dan berikan warna merah.

   

   
   
6. Duplicate layer Ellips1 dengan menekan tombol CTRL + J, dan berikan nama Ellips2.
7. Sorot layer Ellips2 kemudian seleksi ulang object Ellips2 berikan warna Hitam kemudian posisikan seleksinya seperti gambar di bawah ini menggunakan Move Tool.
   
   
   
8. Hidden layer Ellips2 kemudian sorot layer Ellips1 kembali dan tekan tombol Delete untuk menghapus area layer Ellips1, sehingga membentuk objek seperti di bawah ini: 
   
9. Hilangkan seleksi dengan menekan tombol CTRL + D.
10. Delete layer Ellips2, kemudian Duplicate layer Ellips1 dengan menekan tombol CTRL + J dan beri nama layernya Ellips3 dan posisikan objectnya seperti tampilan di bawah ini menggunakan Move Tool. Lakukan juga proses transform untuk mengubah ukuran sehingga diperoleh tampilan yang bagus.
    
11. Gunakan transform rotate untuk membuat objek sedikit miring ke kanan.
    
    
    
12. Buat tulisan TV dengan Font : NO LOGOS. Kemudian berikan style Italic dan warna merah.
13. Buat lagi angka 77 dengan Font: NO LOGOS dan berikan warna merah.
14. Selanjutnya, posisikan kedua tulisan seperti berikut, sesuaikan ukuran font dari kedua kata di atas sehingga menghasilkan tampilan seperti di bawah ini :
    
    
    
15. Pembuatan logo TV 77 selesai, agar logo saat disimpan ke dalam file PNG memiliki background transparan maka matikan tanda mata pada layer terbawah di dalam design logo kalian.
16. Simpan projek design dengan menekan tombol CTRL + S. Kemudian berikan nama filenya : logo_tv77.psd. File ini merupakan file project photoshop sehingga kedepannya kita dapat mengedit ulang isi file ini untuk memperbaiki design yang salah.

Semoga artikel ini bermanfaat.

Read More

Cara Membuat Logo Tim Bola Basket dengan Adobe Photoshop CS 6

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Pada kesempatan kali ini saya ingin membahas bagaimana cara memanfaatkan tool yang dimiliki Adobe Photoshop CS6 untuk membuat sebuah logo Tim Basket Ball.

Tool yang akan kita gunakan dalam tutorial kali ini adalah Move Tool, Ellipse Tool, Pen Tool, Text Tool serta Paint Bucket Tool. Dengan harapan walaupun kita tidak terlalu dalam menguasai Adobe Photoshop namun dengan pengetahuan dasar mengenai beberapa tool di atas kita sudah bisa membuat logo untuk tujuan khusus.

Berikut langkah - langkah membuat logo Tim Bola Basket menggunakan Adobe Photoshop CS 6:

1. Buka aplikasi Adobe Photoshop kalian.
2. Klik tab File di pojok kiri atas, lalu pilih New. atau kalian juga bisa dengan menekan Ctrl + N.
3. Pada jendela dialogbox yang muncul isikan nilai seperti nama projek, serta ukuran layer projek seperti di bawah ini :
   
   
   
4. Klik Move Tool, kemudin aktifkan/berikan centang Auto Select dan Show Transform Controls, 
   
   
   
5. Pastikan Ruler muncul di area kerja kalian kemudian buat garis - garis bantuan pada layer untuk membantu menentukan titik tengah halaman seperti di bawah ini :
   
   
   
6. Gunakan Ellipse Tool untuk membuat bentuk lingkaran seperti gambar di bawah ini, dengan cara klik ellipse tool - arahkan cursor ke tengah area - tekan tombol Shift + Alt bersamaan kemudian drag mouse keluar untuk membuat lingkaran dengan pusat tengah - tengah area.
   
   
   
7. Berikan background warna putih pada lingkaran yang paling dalam menggunakan Paint Bucket Tool dengan cara seleksi lingkaran terdalam menggunakan Move Tool - atur warna foreground color ke warna putih - kemudian tuangkan ke permukaannya lingkaran yang terdalam menggunakan Paint Bucket Tool.
8. Tambahkan garis - garis lengkung juga seperti di bawah ini dengan cara buat titik di batas tepi lingkaran menggunakan Pen Tool maka akan menciptakan garis lurus - ganti ke Convert Point Tool - klik dan tahan di salah satu ujung kemudian geser untuk membentuk garis lengkung.
   
   
   
9. Klik Text Tool kemudian tulis 2 kata yaitu kata BASKETBALL TEAM dan kata WEARNES MALANG, kemudian atur tampilannya melengkung seperti gambar di bawah ini menggunakan style Arc:
   
   
   
10. Agar logo saat disimpan ke dalam file PNG memiliki background transparan maka matikan tanda mata pada layer terbawah di dalam design logo kalian.
    
    
    
11. Simpan projek design dengan menekan tombol CTRL + S. Kemudian berikan nama filenya : logoku.psd. File ini merupakan file project photoshop sehingga kedepannya kita dapat mengedit ulang isi file ini untuk memperbaiki design yang salah.
    
    
    
12. Kemudian untuk menghasilkan file PNG yang siap digunakan silakan Save As file projek dan arahkan extensi filenya ke PNG.
    
    
    
13. Hasil konversi file ini sudah dapat digunakan untuk logo di file - file lain sepert file word, excel, powerpoint maupun access, dengan background yang transparan.
14. Berikut ini logo digunakan di dalam file word dengan background diberikan warna biru, terlihat logo bisa transparan :
    
    
    

Semoga artikel ini bermanfaat.

Read More

Mengintegrasikan Vue JS 3 ke dalam Laravel 10

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Apa itu VUE JS?

Baru baru ini, telah muncul Vue JS versi 3 dengan kode nama ONE PIECE. Vue JS merupakan frontend javascript framework untuk membangun website dan user interfaces (UI). Vue berjalan di sisi client (Client-Side) dan umum digunakan untuk membuat Single-Page-Application (SPA). Vue mudah diintegrasikan dengan project yang sudah ada dengan menggunakan CDN. Selain itu, Anda juga dapat dengan mudah membuat full-stack aplikasi dengan membuat API di sisi server (Server-Side).

Kenapa Menggunakan Vue Js?

1. Mudah membuat frontend aplikasi dan website dinamis
2. Mudah di pelajari
3. Sangat cepat dan ringan</p>
4. Menggunakan Virtual DOM (Document Object Model)
5. Sangat Populer
6. Mudah diintegrasikan dengan project yang sudah ada menggunakan CDN

Vue 3 dan Laravel ?

Laravel dan Vue.js adalah dua kerangka kerja kuat yang biasa digunakan dalam pengembangan web. Laravel menyediakan solusi backend yang komprehensif, sementara Vue.js menawarkan cara yang fleksibel dan efisien untuk membangun komponen frontend interaktif. Meskipun Laravel menawarkan opsi alternatif seperti Inertia.js dan Livewire untuk antarmuka dinamis, ada situasi di mana pengembang lebih memilih untuk mengintegrasikan Vue.js langsung ke dalam aplikasi Laravel mereka, khususnya untuk proyek yang sudah ada atau proyek pemula.

Tutorial ini dirancang khusus untuk pemula yang memulai proyek semacam itu dan ingin mempelajari cara mengintegrasikan komponen Vue.js ke dalam aplikasi Laravel dengan lancar. Dengan mengikuti langkah-langkah yang diuraikan dalam tutorial ini, Anda akan memperoleh keterampilan berharga dalam menggabungkan komponen Vue.js ke dalam proyek Laravel Anda, meskipun komponen tersebut awalnya dibuat tanpa Vue.js. Mari selami dan temukan bagaimana Anda dapat meningkatkan keterampilan pengembangan Laravel Anda dengan memanfaatkan kekuatan Vue.js!

Berikut langkah - langkah mengintegrasikan / menginstall Vue.js versi 3 ke dalam Laravel 10 :

1. Pastikan Anda sudah menginstall Laravel 10 dengan benar dan berjalan lancar.
2. Buka projek Laravel dengan editor VSCode kemudian buka terminal di dalam VSCode.
3. Ketikkan perintah di bawah ini untuk melakukan instalasi Vue.js dan Vue Loader.

 npm instal vue@latest vue-loader@next  

4. Buka file package.json untuk melakukan perubahanVite dan Laravel-Vite-Plugin seperti di bawah ini :

 "devDependencies": {  
     "@popperjs/core": "^2.11.6",  
     "axios": "^1.6.1",  
     "bootstrap": "^5.2.3",  
     "laravel-vite-plugin": "^1.0.1",  
     "sass": "^1.56.1",  
     "vite": "^5.0.11"  
   },  

Keterangan:


Vite adalah tool builder front-end generasi terbaru, dan Laravel menyediakan plugin Vue untuk mengintegrasikannya dengan aplikasi Laravel Anda yang telah menggunakan Vite.

5. Lanjutkan dengan menjalankan perintah berikut ini untuk melakukan instalasi @vitejs/plugin-vue:

 npm i @vitejs/plugin-vue  

6. Selanjutnya, jalankan perintah berikut ini agar proses update berjalan :

 npm update  

 npm install  

7. Buka file vite.config.js kemudian lakukan modifikasi script seperti di bawah ini :

 import { defineConfig } from 'vite';  
 import laravel from 'laravel-vite-plugin';  
 import vue from '@vitejs/plugin-vue';  
 export default defineConfig({  
   plugins: [  
     vue({  
       template: {  
         transformAssetUrls: {  
           base: null,  
           includeAbsolute: false,  
         },  
       },  
     }),  
     laravel({  
       input: [  
         'resources/css/app.css',  
         'resources/js/app.js',  
       ],  
       refresh: true,  
     }),  
   ],  
   resolve: {  
     alias: {  
       '@': '/resources/js',  
       'vue': 'vue/dist/vue.esm-bundler.js'  
     },  
   },  
 });  

8. Buka file app.js yang berada di dalam subfolder resources/js/app.js, kemudian silakan lakukan editing script seperti di bawah ini:

 import './bootstrap';  
 import { createApp } from 'vue';  
 const app = createApp({});  
 app.mount("#app");  

9. Buka file Layout Utama projek Laravel Anda (jika Anda mengikuti semua tutorial Laravel di blog ini dari awal maka file Layout Utama terletak di dalam file master.blade.php yang berada di dalam subfolder resources/vendor/adminlte/master.blade.php), kemudian lakukan editing script seperti di bawah ini:

   <!-- script tambahan -->  
   @vite(['resources/css/app.css', 'resources/js/app.js'])  
 </head>  
 <body id="app" class="@yield('classes_body')" @yield('body_data')>  

10. Silakan projek Laravel kalian jalankan, jika tidak ada trouble yang muncul artinya proses integrasi Vue.js ke dalam projek Laravel sukses.

Semoga artikel ini bermanfaat.

Read More

Admin LTE 3 pada Laravel 10

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Admin LTE merupakan salah satu template tampilan yang paling banyak digunakan oleh programmer web saat membuat aplikasi berbasis web yang dikhususkan untuk admin atau istilahnya adalah CMS (Content Management System). Kalian dapat langsung mendatangi situs resmi Admin LTE dengan mengklik LINK INI. Sampai saat artikel ini dibuat versi Admin LTE yang telah dirilis adalah versi 3.2.

Dalam artikel kali ini saya ingin mengulas bagaimana cara menginstall Admin LTE 3 ke dalam projek Laravel 10 yang notabene sudah menggunakan Vite untuk melakukan proses Mixing asset - asset yang berjalan di atasnya. Termasuk nanti asset milik Admin LTE 3.

Ada beberapa cara untuk melakukan proses instalasi Admin LTE 3 ke dalam projek Laravel 10, yaitu :

1. Download packet Admin LTE 3 secara mandiri, kemudian copas semua file yang dibutuhkan untuk menjalankan Admin LTE 3 di dalam projek Laravel 10 kita satu persatu secara manual dan kita hubungkan satu persatu sehingga Admin LTE 3 bisa berjalan dengan normal secara manual. Cara pertama ini butuh pengetahuan mengenai yang baik mengenai struktur projek Laravel. Karena kalau tidak maka Admin LTE 3 tidak akan bisa jalan dengan normal bahkan dapat mempengaruhi projek Laravel yang telah jadi sebelumnya.
2. Download paket Admin LTE 3 dan langsung install ke dalam projek Laravel kita secara otomatis menggunakan bantuan COMPOSER. Catatannya: jika ingin menggunakan cara kedua ini pastikan kita terhubung dengan jaringan internet secara stabil, kemudian pastikan juga aplikasi COMPOSER sudah terinstall ke dalam komputer kita.

Pada artikel ini kita akan mempraktekkan cara yang kedua. Untuk paket Admin LTE yang akan kita gunakan adalah paket yang telah tersedia di GITHUB milik akun jeroennoten. Alasannya, tutorialnya penggunaan paketnya lengkap dan mudah untuk kita pelajari, paket ini juga telah mensupport Laravel 7 ke atas dan saya rasa cukup komplet untuk digunakan tanpa harus mendownload lagi satu - satu paket tambahan yang dibutuhkan saat menggunakan Admin LTE. 

Berikut langkah - langkah pemasangan Admin LTE 3 ke dalam projek Laravel 10 :

1. Backup terlebih dahulu projek Laravel kalian sebelum melakukan instalasi Admin LTE. Asumsinya, jika proses gagal maka kita masih tetap memiliki projek Laravel yang clean dan dapat digunakan lagi untuk percobaan instalasi berikutnya.
2. Pastikan aplikasi composer sudah terinstall ke dalam komputer dan berjalan dengan normal. Kalau belum terinstal maka lakukan instalasi terlebih dahulu aplikasi nodejs. Silakan download DISINI. Catatan: untuk mengetahui apakah sudah ada aplikasi composer atau belum di dalam komputer kita caranya sudah pernah saya bahas di dalam artikel mengenai cara instalasi Laravel 10, silakan bisa dibaca lagi DISINI.
3. Buka projek Laravel menggunakan VSCode.
4. Ketikkan perintah berikut:

     composer require jeroennoten/laravel-adminlte  
   

5. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    composer require Laravel/ui  
   

6. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    php artisan ui:controller  
   

7. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    php artisan ui:auth  
   

   Catatan : Setiap pertanyaan untuk replace pastikan kalian jawab YES agar file – file halaman seperti Login, Register, dsb yang telah dibuat sebelumnya digantikan dengan file – file baru berbasis Admin LTE.
8. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    php artisan adminlte:install --interactive  
   

   Catatan : Setiap pertanyaan pastikan kalian jawab YES.
9. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    php artisan adminlte:plugins install
   

   Catatan : Setiap pertanyaan pastikan kalian jawab YES.
10. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

     php artisan adminlte:install --only=main_views
    

    Catatan : Setiap pertanyaan pastikan kalian jawab YES.
11. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

     php artisan adminlte:install --only=auth_views
    

    Catatan : Setiap pertanyaan pastikan kalian jawab YES.
12. Untuk memastikan semua terinstall dengan baik silakan jalankan perintah berikut :

 npm update  

 npm install  

Catatan : Pastikan tidak terjadi error saat menjalankan perintah di atas.
13. Jalankan perintah di bawah ini untuk melihat hasil tampilan yang terbaru:

 npm run dev  

14. Buka jendela terminal baru kemudian jalankan perintah di bawah ini:

 php artisan serve  

15. Untuk hasilnya dapat dilihat pada tampilan halaman login, register dan reset password yang sekarang sudah berubah.

    

    Login Page Admin LTE3

    

    Register Page Admin LTE3

    

    Reset Password Admin LTE3

Semoga artikel ini bermanfaat.

Read More

Laravel Auth Scaffolding

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Laravel UI menyediakan fitur otentikasi sederhana termasuk login, registrasi, reset password, verifikasi email, dan konfirmasi password menggunakan bootstrap, react, dan vue. Fitur tersebut dinamakan Laravel UI.

Di dalam artikel ini kita akan belajar menggunakan Laravel UI berbasis Bootstrap 5. Untuk menggunakan Laravel UI Bootstrap langkah - langkah sebagai berikut :

1. Buka projek Laravel menggunakan VSCode.
2. Buka jendela terminal kemudian ketikkan perintah berikut ini :

 composer require laravel/ui  

Keterangan:
Perintah ini akan menambahkan library UI ke dalam perintah artisan miliknya Laravel 10.
3. Setelah proses instalasi UI selesai, lanjutkan dengan mengetikkan perintah :

 php artisan ui bootstrap --auth  

Keterangan:
Perintah di atas akan menambahkan ke dalam projek Laravel banyak hal meliputi View dan Controller yang khusus untuk menangani proses Login, Register, reset password, verifikasi email, serta konfirmasi password.
4. Selanjutnya ketikkan perintah berikut ini untuk menyatukan semua script:
5. Setelah proses instalasi sukses maka dapat dicek saat projek kita jalankan di browser maka akan muncul menu login serta register otomatis di dashboard awal aplikasi.

   

   tampilan dashboard hasil Laravel Auth Scaffolding

6. Apabila menu Log In dan Register kita klik maka akan dimunculkan halaman Login dan Register yang siap digunakan. Untuk mencoba boleh diawali dengan proses register terlebih dahulu baru gunakan hasil register tadi untuk login.

   

   Halaman Login hasil Scaffolding

   

   Halaman Register hasil Scaffolding
   



Halaman Reset Password hasil Scaffolding


7. Jika kita coba melakukan registrasi user baru maka setelah proses registrasi sukses maka kita akan langsung dibawa ke halaman dashboard admin aplikasi yang tampilannya seperti di bawah ini:

   

   halaman dashboard admin aplikasi

8. Langkah selanjutnya dengan pengetahuan kita mengenai CSS, Bootstrap 5 maka kita akan dapat memperbaiki tampilan halaman - halaman tersebut sesuai keinginan kita masing - masing. Namun yang utama di sini, kita diberikan bantuan untuk membuat halaman - hamalan tersebut dan hebatnya halaman - halaman tersebut langsung berfungsi dan dapat digunakan untuk proses.

Semoga artikel ini bermanfaat.

Read More

Hapus Data Produk

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Dalam tutorial kali ini kita akan membahas 3 hal yaitu :

1. Hapus Data Produk versi Temporary (Soft Deletes)
2. Restore Data Produk
3. Hapus Data Produk versi Permanent.

Selalu saya ingatkan bahwa proses mempasifkan maupun menghapus data dari database harus dilakukan secara hati - hati karena DBMS seperti MySQL tidak memiliki menu UNDO, sehingga jika data sudah terlanjur dihapus permanent maka tidak akan dapat dikembalikan lagi. 

Oleh karena itu, Laravel memberikan konsep SOFTDELETE yang telah kita bahas librarynya di awal yaitu saat membahas pembuatan Model dan Tabel (silakan baca lagi DI SINI). Library SoftDeletes WAJIB ditambahkan dan dipanggil terlebih dahulu untuk dapat menggunakan konsep penghapusan temporary.

Langkah - langkah untuk mempasifkan, merestore dan menghapus permanent data produk adalah sebagai berikut :

1. Buka projek Laravel dengan VSCode.
2. Buka file index.blade.php yang berada di dalam subfolder produk.
3. Tambahkan script berikut ini :

 <!doctype html>  
 <html lang="en">  
  <head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1">  
   <title>Data Produk</title>  
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">  
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />  
 </head>  
  <body>  
   <div class="container">  
     <div class="row">  
       <div class="col">  
         <a href="{{url('produk/create')}}" class="btn btn-sm btn-primary mt-4 mb-2">  
           <i class="fa fa-plus" aria-hidden="true"></i> Tambah Data Produk Baru   
         </a>  
         <div class="card">  
           <div class="card-header text-white bg-primary">  
             Data Produk Aktif  
           </div>  
           <div class="card-body">  
             <table class="table table-sm table-bordered table-condensed table-striped">  
               <thead>  
                 <tr>  
                   <th style="width: 10%;">Aksi</th>  
                   <th>#</th>  
                   <th>Nama Produk</th>  
                   <th style="width: 50%;">Deskripsi</th>  
                   <th style="text-align: right;">Harga</th>  
                 </tr>  
               </thead>  
               <tbody>  
                 @foreach ($dtprodukaktif as $da)  
                   <tr>  
                     <td>  
                       <a href="{{ url('/produk') }}/{{ $da->id }}/edit" class="btn btn-sm btn-success" title="Edit">  
                         <i class="fa fa-pencil" aria-hidden="true"></i>  
                       </a>  
                       <button class="btn btn-sm btn-warning" title="Pasifkan" onclick="openPRD('{{ $da->id }}','pasif')">  
                         <i class="fa fa-ban" aria-hidden="true"></i>  
                       </button>  
                     </td>  
                     <td>{{ $da->id }}</td>  
                     <td style="font-size: 10pt;">  
                       {{ $da->namaproduk }}  
                     </td>  
                     <td style="font-size: 10pt;">{{ $da->deskripsi }}</td>  
                     <td style="text-align: right; font-size: 10pt;">  
                       Rp. {{ number_format($da->harga, 0, ',', '.') }}  
                     </td>  
                   </tr>  
                   <form id="pasifForm{{ $da->id }}" method="post" action="{{ url('/produk') }}">  
                     @csrf  
                     @method('delete')  
                     <input type="hidden" name="id" value="{{ $da->id }}" />  
                     <input type="hidden" name="aksi" value="pasif" />  
                   </form>  
                 @endforeach  
               </tbody>  
             </table>  
           </div>  
         </div>  
       </div>  
     </div>  
     <div class="row">  
       <div class="col">  
         <div class="card mt-4">  
           <div class="card-header text-white bg-danger">  
             Data Produk Pasif  
           </div>  
           <div class="card-body">  
             <table class="table table-sm table-bordered table-condensed table-striped">  
               <thead>  
                 <tr>  
                   <th style="width: 10%;">Aksi</th>  
                   <th style="text-align: right;">#</th>  
                   <th>Nama Produk</th>  
                   <th style="width: 50%;">Deskripsi</th>  
                   <th style="text-align: right;">Harga</th>  
                 </tr>  
               </thead>  
               <tbody>  
                 @foreach ($dtprodukpasif as $da)  
                 <tr>  
                   <td>  
                     <button class="btn btn-sm btn-warning" title="Restore" onclick="openPRD('{{ $da->id }}','restore')">  
                       <i class="fa fa-undo" aria-hidden="true"></i>  
                     </button>  
                     <button class="btn btn-sm btn-danger" title="Delete" onclick="openPRD('{{ $da->id }}','delete')">  
                       <i class="fa fa-trash" aria-hidden="true"></i>  
                     </button>  
                   </td>  
                   <th style="text-align: right; font-size: 10pt;">  
                     {{ $da->id }}  
                   </th>  
                   <td style="font-size: 10pt;">  
                     {{ $da->namaproduk }}  
                   </td>  
                   <td style="font-size: 10pt;">{{ $da->deskripsi }}</td>  
                   <td style="text-align: right; font-size: 10pt;">  
                     Rp. {{ number_format($da->harga, 0, ',', '.') }}  
                   </td>  
                 </tr>  
                   <form id="restoreForm{{ $da->id }}" method="post" action="{{ url('/produk') }}">  
                     @csrf  
                     @method('delete')  
                     <input type="hidden" name="id" value="{{ $da->id }}" />  
                     <input type="hidden" name="aksi" value="restore" />  
                   </form>  
                   <form id="deleteForm{{ $da->id }}" method="post" action="{{ url('/produk') }}">  
                     @csrf  
                     @method('delete')  
                     <input type="hidden" name="id" value="{{ $da->id }}" />  
                     <input type="hidden" name="aksi" value="delete" />  
                   </form>  
                 @endforeach  
               </tbody>  
             </table>  
           </div>  
         </div>  
       </div>  
     </div>  
   </div>  
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>  
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>  
   <script>  
     @if(session()->has('pesansukses'))  
       var msg = @json(session()->pull('pesansukses'));  
       Swal.fire({  
         title: "Konfirmasi",  
         text: msg,  
         icon: "success"  
       });  
     @endif  
     @if(session()->has('pesansalah'))  
       var msg = @json(session()->pull('pesansalah'));  
       Swal.fire({  
         title: "Konfirmasi",  
         text: msg,  
         icon: "success"  
       });  
     @endif  
     function openPRD(id, aksi) {  
       Swal.fire({  
       title: aksi.toUpperCase(),  
       text: "Apakah Proses ini ingin dilanjutkan?",  
       icon: "question",  
       showCancelButton: true,  
       confirmButtonColor: "#3085d6",  
       cancelButtonColor: "#d33",  
       confirmButtonText: "Ya",  
       cancelButtonText: "No",  
       }).then((result) => {  
         if (result.isConfirmed) {  
           switch (aksi) {  
             case 'pasif':  
               document.getElementById('pasifForm' + id).submit();  
               break;  
             case 'restore':  
               document.getElementById('restoreForm' + id).submit();  
             break;  
             case 'delete':  
               document.getElementById('deleteForm' + id).submit();  
             break;  
           }  
         }  
       });  
     }  
   </script>  
 </body>  
 </html>  

4. Selanjutnya buka file ProdukController.php dan lakukan editing script di dalam function Destroy seperti di bawah ini :

   //function utk menghapus data produk sesuai id  
   public function destroy(Request $request){  
     DB::beginTransaction();  
     try  
     {  
       $id = $request->id;  
       if($request->aksi == 'pasif')  
       {  
         Produk::where('id','=',$id)->delete();  
         DB::commit();  
         return redirect('produk')->with('pesansukses', 'Data Sukses Dipasifkan');  
       }  
       elseif($request->aksi == 'restore')  
       {  
         Produk::onlyTrashed()->where('id','=',$id)->restore();  
         DB::commit();  
         return redirect('produk')->with('pesansukses', 'Data Sukses Direstore');  
       }  
       elseif($request->aksi == 'delete')  
       {  
         Produk::where('id','=',$id)->forceDelete();  
         DB::commit();  
         return redirect('produk')->with('pesansukses', 'Data Sukses Dihapus');  
       }  
     }  
     catch(\Exception $e)  
     {  
       DB::rollback();  
       return redirect()->back()->withInput()->with('pesansalah', 'Data Gagal Dihapus');  
     }  
   }  

5. Buka file routes web.php kemudian tambahkan routes seperti di bawah ini:

 Route::get('/produk', [ProdukController::class, 'index']);  
 Route::get('/produk/create', [ProdukController::class, 'create']);  
 Route::post('/produk', [ProdukController::class, 'store']);  
 Route::get('/produk/{id}/edit', [ProdukController::class, 'edit']);  
 Route::put('/produk/{id}', [ProdukController::class, 'update']);  
 Route::delete('/produk', [ProdukController::class, 'destroy']);  

6. Saat dijalankan di browser untuk setiap proses PRD (Pasif - Restore - Delete) maka akan tampil seperti berikut :

   

   Tampilan data saat akan dipasifkan (tombol pasif diklik)

   
   

   

   Tampilan messagebox saat proses pasif sukses

   
   
7. Untuk proses restore dan delete permanent tampilan nya tidak jauh berbeda.

Semoga artikel ini bermanfaat

Read More