Logo Logo Nue Package
Getting Started Introduction
Getting Started Gulp
Getting Started Customization
Getting Started Credits
Getting Started Changelog
Design & Graphics Bootstrap Icons
Design & Graphics Illustrations
Components Accordion
Components Alerts
Components Avatars
Components Badge
Components Breadcrumb
Components Buttons
Components Button group
Components Cards
Components Collapse
Components Column divider
Components Devices
Components Divider
Components Dropdowns
Components Icons
Components List Group
Components Lists
Components Legend Indicator
Components Modal
Components Offcanvas
Components Page Header
Components Pagination
Components Popovers
Components Progress
Components Profile
Components Shapes
Components Sliding Image
Components Spinners
Components Steps
Components Tab
Components Toasts
Components Tooltips
Components Typography
Navbars Navbar
Navbars Navs
Navbars Mega Menu
Navbars Navbar Vertical Aside
Navbars Scrollspy
Tables Tables
Tables Datatables
Tables Sticky Header
Basic forms Basic forms
Basic forms Checks and switches
Basic forms Input group
Utilities Backgrounds
Utilities Borders
Utilities Colors
Utilities Links
Utilities Position
Utilities Rotations
Utilities Shadows
Utilities Sizing
Utilities Spacing
Utilities Z-index
Utilities Opacity
Advanced forms Advanced select
Advanced forms Datepicker
Advanced forms Date Range Picker
Advanced forms Calendar (Fullcalendar)
Advanced forms File attachments
Advanced forms Drag’ n’ drop file uploads
Advanced forms WYSIWYG Editor
Advanced forms Quantity counter
Advanced forms Copy to Clipboard
Advanced forms Input mask
Advanced forms Step forms (Wizards)
Advanced forms Wizards
Advanced forms Add field
Advanced forms Toggle password
Advanced forms Count characters
Advanced forms Form Search
Advanced forms Toggle switch
Advanced forms Google reCAPTCHA
Others Chart.js
Others Counter
Others Circles.js (Pie Chart)
Others Fullscreen Lightbox
Others Leaflet
Others JSVectorMap
Others SortableJS
Others Sticky block
Others Go To

No Results

  • Preview Demo
Logo Nµe
  • Nue
  • UI (HTML)
  • Getting Started
  • Introduction
  • Installation
  • Configuration
  • Changelog
  • Development
  • Features
  • Content (Layout)
  • Users (Auth)
  • Menu Management
  • Notifications
  • Access Control
  • Permission
  • Pages
  • Routes
  • Middleware
  • Console Commands
  • Nue
  • Install
  • Auth
  • Uninstall
  • Create User
  • Change Password
  • Extend
  • Import
  • Extensions
  • Development
  • Backup
  • Lock-Screen
  • Env-Manager

Extensions Development

Jadikan module "berulang"mu menjadi package.

Nue Package bisa membantu kamu untuk membuat package kamu sendiri untuk menunjang pekerjaanmu. Saat ini, beberapa contoh extensions yang bisa kamu gunakan ada di https://github.com/nue-extensions.

Di halaman dokumentasi ini, saya akan mencoba mempraktekkan langkah demi langkah membuat sebuah extension sampai bisa dipublikasi dan digunakan oleh semua orang. Hasil dari contoh ini bisa dilihat di phpinfo.


Buat Extensions Baru

Untuk memulai membuat extensions baru, kamu cukup menggunakan perintah melalui terminal:

    
      php artisan nue:extend nue-extensions/phpinfo --namespace=Nue\\PHPInfo
    
  

PENJELASAN:

  1. nue-extensions/phpinfo adalah nama package.
  2. Nue\\PHPInfo adalah namespace package. Ingat! Backlashnya ada 2.

Setelah menjalankan perintah ini, nue akan men-generate direktori nue-extensions/phpinfo, berikut struktur file yang dibuat:

    
      The extension scaffolding generated successfully. 

      /.../app/Nue/Extensions/nue-extensions/phpinfo
          ├── LICENSE
          ├── README.md
          ├── composer.json
          ├── resources
          │   └── views
          │       └── index.blade.php
          ├── routes
          │   └── web.php
          └── src
              ├── PHPInfo.php
              └── Http
              │   └── Controllers
              │       └── PHPInfoController.php
              └── Models
              └── Providers
                  └── PHPInfoServiceProvider.php
    
  

PENJELASAN RINGKAS:

  1. resources adalah tempat kamu meletakkan file view.
  2. src utamanya adalah wadah kamu meletakkan logika program.
  3. routes/web.php digunakan untuk menyimpan routing url kamu, dan
  4. database untuk menempatkan file migrasi database dan seeder.


Register Extensions

Setelah extensions dibuat, selanjutnya coba untuk menghubungkannya dengan project kamu dengan menginstall extensions selayaknya menginstall package lainnya. Buka file composer.json project kamu lalu tambahkan baris berikut:

    
      "repositories": [
          {
              "type": "path",
              "url": "app/Nue/Extensions/nue-extensions/phpinfo"
          }
      ]
    
  

Kemudian eksekusi perintah berikut untuk menyelesaikan proses.

    
      composer require nue-extensions/phpinfo
    
  

Pastikan extensions kamu telah terhubung dengan membuka http://localhost/nue/phpinfo.


Write code

Secara umum, extensions yang akan coba saya buat hanya menampilkan sebuah halaman yang menyajikan semua informasi PHP yang berasal dari fungsi phpinfo(). Dengan kata lain, saya hanya butuh satu route dan sebuah view tanpa memiliki database.

Selanjutnya saya akan coba menghapus beberapa direktori dan file yang tidak saya butuhkan sehingga struktur direktorinya menjadi sebagai berikut:

    
      ├── LICENSE
      ├── README.md
      ├── composer.json
      ├── resources
      │   └── views
      │       └── index.blade.php
      ├── routes
      │   └── web.php
      └── src
          ├── NuePHPInfo.php
          └── Http
          │   └── Controllers
          │       └── PHPInfoController.php
          └── Providers
              └── PHPInfoServiceProvider.php
    
  

Routing

Berikut isi dari file route yang di generate oleh Nue, tidak ada yang perlu diubah dari ini.

    
      <?php

      Route::group([
        'namespace' => 'Nue\PHPInfo\Http\Controllers', 
        'prefix' => 'nue'
      ], function() {

        Route::get('phpinfo', 'PHPInfoController@index');

      });
    
  

Pada prosesnya, URL dari extensions ini akan menuju ke Nue\PHPInfo\Http\Controllers\PHPInfoController dengan method index.


Logic Program

Saya tambahin logic untuk meng-collect phpinfo di src/PHPInfo.php.

    
      <?php

      namespace Nue\PHPInfo;

      use Novay\Nue\Extension;

      class PHPInfo extends Extension
      {
          public $views = __DIR__.'/../resources/views';

          public static function toCollection()
          {
              $what = static::config('what', INFO_ALL);

              ob_start();

              phpinfo($what);

              $phpinfo = ['phpinfo' => collect()];

              if (preg_match_all('#(?:<h2>(?:<a name=".*?">)?(.*?)(?:</a>)?</h2>)|(?:<tr(?: class=".*?")?><t[hd](?: class=".*?")?>(.*?)\s*</t[hd]>(?:<t[hd](?: class=".*?")?>(.*?)\s*</t[hd]>(?:<t[hd](?: class=".*?")?>(.*?)\s*</t[hd]>)?)?</tr>)#s', ob_get_clean(), $matches, PREG_SET_ORDER)) {

                  collect($matches)->each(function ($match) use (&$phpinfo) {
                      if (strlen($match[1])) {
                          $phpinfo[$match[1]] = collect();

                      } elseif (isset($match[3])) {
                          $keys = array_keys($phpinfo);

                          $phpinfo[end($keys)][$match[2]] = isset($match[4]) ? collect([$match[3], $match[4]]) : $match[3];
                      } else {
                          $keys = array_keys($phpinfo);

                          $phpinfo[end($keys)][] = $match[2];
                      }
                  });
              }

              ob_end_clean();

              return collect($phpinfo);
          }
      }
    
  

Controllers

Saya coba panggil logic toCollection() dan mengirimnya ke view melalui controller.

    
      <?php

      namespace Nue\PHPInfo\Http\Controllers;

      use Illuminate\Routing\Controller;
      use Nue\PHPInfo\PHPInfo;

      class PHPInfoController extends Controller
      {
        ...
        public function index()
        {
            $info = PHPInfo::toCollection();

            return view('nue-phpinfo::index', compact('info'));
        }
      }
    
  

Views

Sederhananya, saya hanya nge-looping isi dari phpinfo ke dalam table.


Modifikasi file composer.json & README.md

Setelah extentions kamu selesai, kamu bisa mengubah isi dari file composer.json dan mengubah isi seperti description, keywords, license dan authors dengan informasi pribadi kamu. Jangan lupa juga untuk memperbarui file README.md yang mungkin bisa kamu isi dengan dokumentasi atau informasi apapun yang berhubungan dengan package-mu.


Remote installation

Apabila package sudah selesai dan ingin agar bisa digunakan oleh seluruh orang, kamu bisa melanjutkan langkah-langkah berikut.


Unggah ke Github

Login ke akun Github kamu, buat repository, dan ikuti perintah berikut untuk nge-push source code kamu ke Github.

    
      git init
      git remote add origin https://github.com/<your-name>/<your-repository>.git
      git add .
      git commit -am "Initial commit."
      git push origin master
    
  

Release version

Selanjutnya rilis versi dari package kamu dengan perintah berikut:

    
      git tag 0.0.1 && git push --tags
    
  

Sebenarnya lebih mudah nge-rilis manual lewat website Github langsung.


Submit ke Packagist.org

Langkah selanjutnya adalah mendaftarkan project kamu ke Packagist.org. Kalau kamu belum memiliki akun, cukup daftar menggunakan akun Github kamu, lalu buka menu Submit dan masukkan URL lengkap repository github kamu, lalu submit.

After the submission is complete, you can install your extension via composer.


Kunjungi https://github.com/nue-extensions untuk melihat contoh-contoh implementasi extensions yang sudah rilis.