Yii2 Tips 18 : Menambahkan jQuery Colorbox

Posted on January 3, 2018 by admin

Di tips berikut kita akan menambahkan jQuery colorbox untuk keperluan menampilkan gambar. Ketika gambar di klik, maka akan muncul pop up di halaman tersebut. Berikut langkah-langkahnya : 1. Buat ColorboxAsset.php di dalam folder Asset

<?php

namespace common\assets;

use Yii;
use yii\web\AssetBundle;

class ColorboxAsset extends AssetBundle
{
	public $sourcePath = '@common/themes/edu/assets/js/colorbox';

	public $css = [
		'example1/colorbox.css'
	];

	

	public $depends = [
		'yii\web\JqueryAsset'
	];

	public function init()
	{
		parent::init();

		
		$getLang = explode('-',Yii::$app->language);
		$lang = 'id';

		$this->js = [
			YII_DEBUG?'jquery.colorbox-min.js':'jquery.colorbox-min.js',
			"i18n/jquery.colorbox-{$lang}.js",
		];
	}
}

<?php

namespace common\assets;

use Yii;

use yii\web\AssetBundle;

class ColorboxAsset extends AssetBundle

{

public $sourcePath = '@common/themes/edu/assets/js/colorbox';

public $css = [

'example1/colorbox.css'

];

public $depends = [

'yii\web\JqueryAsset'

];

public function init()

{

parent::init();

$getLang = explode('-',Yii::$app->language);

$lang = 'id';

$this->js = [

YII_DEBUG?'jquery.colorbox-min.js':'jquery.colorbox-min.js',

"i18n/jquery.colorbox-{$lang}.js",

];

}

2. Download jQuery Colorbox dan letakkan di dalam folder js 3. Buka file main.php yang berada di dalam layout dan Read more about Yii2 Tips 18 : Menambahkan jQuery Colorbox[…]

Yii2 Tips 17 : Mengganti Favicon Default Yii2

Posted on January 3, 2018 by admin

Mengganti favicon default Yii2 langkah-langkahnya sebagai berikut : 1. Siapkan favicon dan taruh di folder image 2. Modifikasi main.php yang berada di direktori layouts Tambahkan url ke directoryasset

$directoryAsset = Yii::$app->assetManager->getPublishedUrl('@common/themes/fpl/assets');

1	$directoryAsset = Yii::$app->assetManager->getPublishedUrl('@common/themes/fpl/assets');

Letakkan link di antara <head> dan </head>

<link rel="shortcut icon" href="<?=$directoryAsset?>/image/soccerball.png" type="image/x-icon">
    <link rel="icon" href="<?=$directoryAsset?>/image/soccerball.png" type="image/x-icon">

1 2	<link rel="shortcut icon" href="<?=$directoryAsset?>/image/soccerball.png" type="image/x-icon"> <link rel="icon" href="<?=$directoryAsset?>/image/soccerball.png" type="image/x-icon">

Sekarang favicon default Yii2 sudah berubah.

Yii2 Tips 16 : Membuat API Sederhana

Posted on January 3, 2018 by admin

Membuat API sederhana di Yii2 sangat mudah, di kasus ini kita akan mengambil data dari database dan menampilkannya di browser dalam bentuk JSON. API sederhana ini tidak menggunakan autentikasi, sehingga bisa langsung diambil oleh aplikasi lain. Langkah 1 : Menyiapkan Tabel Tabel berisi dua kolom, yaitu id dan score dari pemain. Langkah 2 : Buat Read more about Yii2 Tips 16 : Membuat API Sederhana[…]

Yii2 Tips 15 : Menyisipkan Kode Javascript / jQuery pada Form View

Posted on January 3, 2018 by admin

Di tips 14 kita sudah berhasil menyisipkan CSS, di tips ini kita akan menyisipkan kode Javascript/JQuery. Caranya mirip, kita hanya tinggal menyisipkan kode JS di bagian bawah form :

<?php $this->registerJS("
/* Isi kode JS disini */
"); ?>

<?php $this->registerJS("

/* Isi kode JS disini */

"); ?>

Ini form yang kita buat :

<h3>
	Tips JS pada form yii2
</h3>
<p id="par1">Paragraf ini akan hilang saat tombol di klik</p>
<button class="btn btn-success">Klik Saya</button>
<?php $this->registerJs("
	$(document).ready(function(){
		$('button').click(function(){
			$('#par1').toggle();
		})
	});
"); ?>

<h3>

Tips JS pada form yii2

</h3>

<p id="par1">Paragraf ini akan hilang saat tombol di klik</p>

<?php $this->registerJs("

$(document).ready(function(){

$('button').click(function(){

$('#par1').toggle();

})

});

"); ?>

Ketika di klik, paragraf akan hilang, dan ketika di klik lagi, paragraf akan muncul kembali.

Yii2 Tips 14 : Menyisipkan Kode CSS pada Form View

Posted on January 3, 2018 by admin

Tips kali ini akan menunjukkan cara untuk menyisipkan kode CSS pada form view di Yii2. Caranya cukup mudah, yaitu hanya memasukkan kode berikut di bagian bawah form :

<?php $this->registerCss("
/* Isi kode CSS disini */
"); ?>

<?php $this->registerCss("

/* Isi kode CSS disini */

"); ?>

Misalnya kita akan membuat halaman dengan dua paragraf, paragraf pertama akan berwarna merah dan paragraf kedua berwarna hijau. Kodenya seperti berikut :

<h3>
	Tips CSS pada form yii2
</h3>
<p id="par1">Ini paragraf pertama akan berwarna merah</p>
<p id="par2">Ini paragraf kedua akan berwarna hijau</p>
<?php $this->registerCss("
#par1 {
	color:red;
}
#par2{
	color:green;
}
"); ?>

<h3>

Tips CSS pada form yii2

</h3>

<p id="par1">Ini paragraf pertama akan berwarna merah</p>

<p id="par2">Ini paragraf kedua akan berwarna hijau</p>

<?php $this->registerCss("

#par1 {

color:red;

}

#par2{

color:green;

}

"); ?>

Saat dijalankan di Read more about Yii2 Tips 14 : Menyisipkan Kode CSS pada Form View[…]

indocoder.com

Tag: yii2 tips

Yii2 Tips 18 : Menambahkan jQuery Colorbox

Yii2 Tips 17 : Mengganti Favicon Default Yii2

Yii2 Tips 16 : Membuat API Sederhana

Yii2 Tips 15 : Menyisipkan Kode Javascript / jQuery pada Form View

Yii2 Tips 14 : Menyisipkan Kode CSS pada Form View