Membuat Dependent Dropdown dengan select2 di Yii2 Framework


 

 

salam coding kawan

pada artikel sebelumnya kita telah mempelajari bagaimana membuat select2 pada framework Yii versi 2. kali ini kita akan membahas bagaimana membuat dependent dropdwon pada select2. Dependent dropdown sering digunakan untuk mencari data pada dropdown bertingkat, contoh saat kita ingin mencari data kelurahan kita harus memilih provinsinya, kabupatennnya lau kita bisa mendapatkan data kelurahan yang kita inginkan.berikut struktur database punya saya, bisa anda sesuaikan dengan kebutuhan anda.

tabel provinsi

1. tabel provinsi

CREATE TABLE `tbl_provinsi` (
  `id` int(11) UNSIGNED NOT NULL,
  `provinsi` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `p_bsni` char(5) COLLATE utf8mb4_unicode_ci DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
ALTER TABLE `tbl_provinsi` ADD PRIMARY KEY (`id`); 


2. tabel kabupaten

CREATE TABLE `tbl_kabkot` (
 `id` int(11) UNSIGNED NOT NULL,
 `provinsi_id` int(11) UNSIGNED NOT NULL,
 `kabupaten_kota` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `ibukota` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `k_bsni` char(3) COLLATE utf8mb4_unicode_ci DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

 ALTER TABLE `tbl_kabkot`
 MODIFY `id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=502;
 

 ALTER TABLE `tbl_kabkot`
 ADD PRIMARY KEY (`id`),
 ADD KEY `kabkot` (`kabupaten_kota`) USING BTREE,
 ADD KEY `fk_provs_kabkots_idx` (`provinsi_id`),
 ADD KEY `kbsni` (`k_bsni`) USING BTREE;  


3. tabel kecamatan

CREATE TABLE `tbl_kecamatan` (
 `id` int(11) UNSIGNED NOT NULL,
 `kabkot_id` int(11) UNSIGNED NOT NULL,
 `kecamatan` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

ALTER TABLE `tbl_kecamatan`
 MODIFY `id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6993;

ALTER TABLE `tbl_kecamatan`
 ADD PRIMARY KEY (`id`),
 ADD KEY `fk_kabkots_kecs_idx` (`kabkot_id`),
 ADD KEY `kecamatan` (`kecamatan`) USING BTREE;

 

setelah membuat databasenya,  langsung saya kita implementasikan pada koding. buka terminal atau CMD kawan-kawan lalu arahkan pada direktory project yii2 kalian. ketik atau copas coding dibawah ini

php composer.phar require kartik-v/yii2-widget-depdrop "@dev"

kemdian buka file _form pada folder view yang ingin anda buat select2, sisipkan kode berikut pada bagian atas.

use  backend\models\Kabkot;
use  backend\models\Provinsi;
use  backend\models\Kecamatan;
use kartik\depdrop\DepDrop;
use kartik\select2\Select2;
use yii\helpers\Url;

keterangan : baris pertama sampai  ketiga adalah mengambil data model pada provinsi, kabkot, dan kecamatan. kemudia diikuti Depdrop yang baru saja kita install via composer dan select2 yang sudah kita instal pada artikel sebelumnya.

kemudian rubah field provinsi anda seperti dibawah ini

<?=
        $form->field($model, 'provinsi')->widget(Select2::classname(), [
            'data' => ArrayHelper::map(Provinsi::find()->all(), 'id', 'provinsi'),
            'options'=>['placeholder'=>Yii::t('app','Select Company')],
            'pluginOptions' => [
                'allowClear' => true,
            ],
        ]);
    ?>

 

pada field kabkot ubah seperti koding dibawah ini

  <?=
          $form->field($model, 'destination')->widget(DepDrop::classname(), [
          'type'=>DepDrop::TYPE_SELECT2,
          'data'=>[],
          'options'=>['id'=>'retailland-destination', 'placeholder'=>'Select ...'],
          'select2Options'=>[],
          'pluginOptions'=>[
            'depends'=>['retailland-provinsi'],
            'url'=>Url::to(['/retail-land/get']),
            'placeholder'=>Yii::t('app','Cari Distination'),
          ]
      ]);


     ?>

dan field kecamatan menjadi seprti dibawah ini

	<?=
	          $form->field($model, 'kecamatan')->widget(DepDrop::classname(), [
	          'type'=>DepDrop::TYPE_SELECT2,
	          'data'=>[],
	          'options'=>['id'=>'retailland-kecamatan', 'placeholder'=>'Select ...'],
	          'select2Options'=>[],
	          'pluginOptions'=>[
	            'depends'=>['retailland-destination'],
	            'url'=>Url::to(['/retail-land/get-one']),
	            'placeholder'=>Yii::t('app','Cari Kecamatan'),
	          ]
	      ]);
	     ?>

baik bila itu koding yang kita ubah di bagian view, maka sekarang kita implementasikan pada controllernya.  perhatikan pada koding untuk kolom kabupaten ada url ‘url’=>Url::to([‘/retail-land/get’]), maka kita biat action get pada controller kita, buat seperti koding di bawah ini,

 

 public function actionGet()
    {
           $out = [];
               if (isset($_POST['depdrop_parents'])) {
                   $parents = $_POST['depdrop_parents'];
                   if ($parents != null) {
                         $cat_id = $parents[0];
                     $out = \backend\models\Kabkot::find()
                            ->where(['provinsi_id'=>$cat_id])
                            ->select(['id','kabupaten_kota AS name'])->asArray()->all();


                                return Json::encode(['output'=>$out, 'selected'=>'']);
                   }

               }
               return Json::encode(['output'=>'', 'selected'=>'']);
    }
public function actionGetOne()
    {
           $out = [];
               if (isset($_POST['depdrop_parents'])) {
                   $parents = $_POST['depdrop_parents'];
                   if ($parents != null) {
                         $cat_id = $parents[0];
                     $out = \backend\models\Kecamatan::find()
                            ->where(['kabkot_id'=>$cat_id])
                            ->select(['id','kecamatan AS name'])->asArray()->all();


                                return Json::encode(['output'=>$out, 'selected'=>'']);
                   }

               }
               return Json::encode(['output'=>'', 'selected'=>'']);
    }

baik demikian penjelasan dan implementasi untuk dependent dropdwon pada select2 yii framework. bila ada kebingungan dan pertanyaan anda bisa tulis di kolom komentar di bawah.

 

 

terima kasih

salam coding

 

Membuat Dropdown Select2 pada Framework Yii2


 

salam coding kawan!

MENAMBAH SELECT2 PADA TAG INPUT

pada kesempatan kali ini, saya ingin membagi pengalaman tentang mudahnya membuat dropdown select2 pada Yii2. saya asumsikan kawan-kawan sudah bisa menginstal Yii2, kawan-kawan bisa mencari di google bagaimana cara install Yii2 baik manual atau dengan composer. kawan-kawan bisa melihat refrensi lengkapnya di Yii2.

baik kita akan menggunakan Select2 Yii2 dengan memanfaatkan plugin dari kartik. langkah pertama buka terminal atau CMD anda bila anda menggunakan windows. kebutalan saya menggunakan linux ubuntu jadi pada demo kali ini fokus pada terminal linux.

"kartik-v/yii2-widget-select2": "@dev"

perintah diatas otomatis menambah plugin select2 pada folder vendor anda sekaligus pada composer.json. tunggu sampai proses download plugin selesai. Bila sudah selesai buka salah satu file view yang ingin anda tambahkan select2. pada contoh kali ini saya ingin membuat select2 pada data kabupaten milik saya. tambahkan baris perintah dibawah ini untuk memanggil plugin select2

use kartik\select2\Select2;

kemudian pada tag input anda rubah seperti perintah di bawah ini

  <?= $form->field($model, 'origin')->widget(Select2::classname(), [
           'data' => ArrayHelper::map(Kabkot::find()->all(), 'id', 'kabupaten_kota'),
          'options' => ['placeholder' => 'Cari Origin ...'],
          'pluginOptions' => [
              'allowClear' => true
          ],
          ]); ?>

maka otomatis tag input anda akan berubah seperti contoh dibawah ini

 

mudah kan?

MENAMBAH SELECT2 PADA FILTER CGRIDVIEW

ok kawan-kawan. bila kita tadi mengimplementasikan select2 pada tag input kita, kali ini kita akan implementasikan pada cgridview yii2 agar saat memfilter data kita bisa memanfaatkan select2, seperti pada gambar di bawah ini.

 

 

untuk membuat filter cgridview seperti di atas, buka file index.php pada folder view anda. ubah seperti koding dibawah ini.

<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            [
                'attribute' => 'origin',
                'value' => function($data) {
                    return $data->kabkot->kabupaten_kota;
                },
                'filter' => \kartik\select2\Select2::widget([
                    'model' => $searchModel,
                    'attribute' => 'origin',
                    'data' => ArrayHelper::map(Kabkot::find()->all(), 'id', 'kabupaten_kota')
                ]),
            ],
            [
                'attribute' => 'destination',
                'value' => function($data) {
                    return $data->kabkot2->kabupaten_kota;
                },
                'filter' => \kartik\select2\Select2::widget([
                    'model' => $searchModel,
                    'attribute' => 'destination',
                    'data' => ArrayHelper::map(Kabkot::find()->all(), 'id', 'kabupaten_kota')
                ]),
            ],
            'rate',
            'min_weight',
            'lead_time',
            'status',
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>

perhatikan pada koding di bawah ini

[
'attribute' => 'origin',
'value' => function($data) {
return $data->kabkot->kabupaten_kota;
},
'filter' => \kartik\select2\Select2::widget([
'model' => $searchModel,
'attribute' => 'origin',
'data' => ArrayHelper::map(Kabkot::find()->all(), 'id', 'kabupaten_kota')
]),
],

nilai yang di ambil pada attribute origin berelasi dengan data kabupaten yang tercantum pada code return $data->kabkot->kabupaten_kota; untuk bisa mengambil data berelasi seperti ini pastikan anda sudah mengsetting pada Model anda. buka file Model anda, pada kesempatan kali ini saya menggunakan Model Retail yang berelasi dengan Model Kabupaten. tambahkan function seperti di bawah ini :

public function getTblKecamatans()
    {
        return $this->hasMany(TblKecamatan::className(), ['kabkot_id' => 'id']);
    }

mudah bukan?

baik terima kasih untuk kunjungannya, bila ada kesulitan anda bisa bertanya pada kolom komentar.

 

SALAM CODING!

Membuat Push Notification dengan ajax dan yii


Salam Coding semuannya!

pada kesempatan kali ini saya akan membagikan bagaimana membuat push notification pada website yii dengan menggunakan ajax.
push notification adalah pemberitahuan yang masuk secara instan. contohnya pemberitahuan pada facebook teman-teman, tanpa harus merefresh browser bila ada pemberitahuan baru akan muncul icon merah dipojok kanan.

pada kesempatan kali ini saya akan membagi cara bagaimana membuat push notification pada yii dan ajax.
pertama kita menerapkan metode setInterval pada program javascript kita.

setInterval(function(){

 ambilNotification();

}, 5000);

setInterval() adalah suatu method dari javascript yang melakukan pekerjaan berulang-ulang sesuai dengan interval yang di tentukan, pada metode yang saya gunakan saya menerapkan menggunakan milisecond atau 5000 yang berarti setiap 5 detik akan menjalankan function ambilNotification();

function ambilNotification(view = ''){
             $.ajax({
              url: "<?php echo Yii::app()->createUrl('admin/notif') ?>",
              method:"POST",
              data:{view:view},
              dataType:"json",
              success:function(data){
              if (data.outputnya == null) {
                $('.notif').html("<li><a class='text-bold text-italic'>Tidak Ada Pesan</a></li>");
              }else{
                   $('.notif').html(data.outputnya);
              }

               if(data.totalpesan > 0)
               {
                $('.count-notif').html(data.totalpesan);

               }

              }

             });

}

pada function ambilNotification() diatas saya menerapkan ajax untuk mengambil data notification dari program php di url admin/notif yang berarti kita harus membuat fuction pada controller AdminController.php seperti code dibawah ini.

public function actionnotif(){
		$array=array();
		$rows=array();
                
                //$pesan adalah variabel yang mengambil data dari tabel pesan adakah pesan yang belum dibaca untuk user saat ini?
		$pesan = Pesan::model()->findAll(array(
			'condition'=>'id_user = '.Yii::app()->user->id_user.' and status = "belum dibaca" '
			));
                
                 //$pesan adalah variabel yang mengambil data dari tabel pesan adakah pesan yang belum dibaca untuk user saat ini?
		$totalpesan = Pesan::model()->findAll(array(
			'select'=>'count(id) as id',
			'condition'=>'id_user = '.Yii::app()->user->id_user.' and status = "belum dibaca" '
			));
               
                 //kondisi untuk cek ada variabel pesan ada atau tidak datanya
		if (isset($pesan)) {
                 //bila data pesan ada maka dilakukan perulangan untuk mendapatkan data pesan
			foreach ($pesan as $value) {
				$pengirim = User::model()->findByPk($value->id_pengirim);
				$isi_path = Yii::app()->baseurl .'/images/index.png';
			        $url = Yii::app()->createUrl('profile/read',array('slug'=>Yii::app()->user->slug,'id'=>$value->id));
				
                       $outputnya .= '<li><div class="pull-left">
                         <img width="50px" height="50px" src="'.$isi_path.'"  class="img-circle" alt="User Image">
                         </div><a href="'.$url.'"><h4>
                          '.$pengirim->username.' - '.$value->subject.'
                          </h4>
                          <p>'.$value->pesan.'</p> <small><i class="fa fa-clock-o"></i> '.ModelGlobal::waktu_lalu($value->tgl).'</small></li>';
			}
			$totalpesannya = $totalpesan[0]->id;

			}else{
                            //bila data pesan tidak ada maka maka hanya mengirim variabel yang berisi data kosong
				$outputnya = "<li><a class='text-bold text-italic'>Tidak Ada Pesan</a></li>";
				$totalpesannya = $totalpesan[0]->id;
			}
		       
                          //terakhir kita kembalikan data ke program ajax dengan menerapkan json encode
			echo json_encode(array('outputnya'=>$outputnya,'totalpesan'=>$totalpesannya));

	}

untuk penjelasan function notif sudah saya saya jelaskan di komentar yang ditandai dengan //. bila teman-teman merasa kesulitan membaca koding saya bisa ditanyakan dikolom komentar.
yang terakhir perlu diingat saya menerapkan notif ini pada dropdwon menu pada header bootstrap. seperti gambar dibawah ini

saya menerapkan kode pada tag class “menu notif” seperti koding dibawah ini

  <ul class="dropdown-menu">
              <li>
                <!-- inner menu: contains the actual data -->
                <ul class="menu notif">



                </ul>
              </li>

sehingga pada success ajax saya mengkondisakan data itu ada atau tidak dengan koding seperti di bawah ini :

  if (data.outputnya == null) {
                $('.notif').html("<li><a class='text-bold text-italic'>Tidak Ada Pesan</a></li>");
              }else{
                   $('.notif').html(data.outputnya);
              }

               if(data.totalpesan > 0)
               {
                $('.count-notif').html(data.totalpesan);

               }

              }

maka outputnya akan mendapatkan push notification layaknya facebook atau lainnya.

demian tutoroial push notification dari saya. terima kasih telah membaca.
salam coding!

androidstudio

Mengatasi Error “Error:CreateProcess ….. pada Android Studio


Salam Coding Semuanya!

pada kesempatan kali ini saya akan berbagi pengalaman tentang mengatasi error pada android studio. Mungkin saja teman-teman pernah mengalaminya.

saat instal android studio di windows saya menemukan error berupa ” Error:CreateProcess error=216, This version of %1 is not compatible with the version of Windows you’re running. Check your computer’s system information to see whether you need a x86 (32-bit) or x64 (64-bit) version of the program, and then contact the software publisher” atau seperti gambar di bawah ini :

Android studio 2.2

saat browsing-browsing akhirnya saya menemunakan solusinya.

buka android studio lalu jalankan peritantah ctrl+shift+alt+s
anda akan diarahkan konfigurasi jdk dan jre anda, seperti gambar dibawah ini :

uncecked pilihan “User Embedded JDK(recommended)” lalu cari file jre anda seperti pada gambar dibawah ini :

klik OK

langkah selanjutnya adalah Project select -> gradle script -> klik 2 kali gradle properties

ubah org.gradle.hvmargs = Xmx1546 menjadi org.grable.jvmargs = Xmx768m

demikan pengalaman yang bisa saya bagikan. untuk kritik dan sarannya bisa cantumkan dikomentar.

terima kasih