Tutorial Yii2 Bagian 13 : Membuat Bootstrap Style Datepicker

Posted on November 2, 2017November 2, 2017 by admin

Pada bagian ini kita akan menginstall tools dari vendor untuk membuat datepicker. Tools tersebut adalah Yii2 Datepicker widget yang disediakan oleh vendor 2amigos. 1. Install Yii2 datepicker widget dari 2amigos melalui composer :

sudo php composer.phar require 2amigos/yii2-date-picker-widget:~1.0

1	sudo php composer.phar require 2amigos/yii2-date-picker-widget:~1.0

Apabila sobat belum memiliki composer, install dahulu composer di directory advanced melalui perintah berikut :

curl -sS https://getcomposer.org/installer | php

1	curl -sS https://getcomposer.org/installer \| php

2. Tambahkan kolom company_create_date pada Read more about Tutorial Yii2 Bagian 13 : Membuat Bootstrap Style Datepicker[…]

Tutorial Yii2 Bagian 12 : Membuat Module

Posted on November 2, 2017November 2, 2017 by admin

Pada bagian 9 sebelumnya kita telah mempelajari bagaimana membuat CRUD dan Model Generator menggunakan Gii pada Yii2. Kali ini kita akan membuat module dengan module generator yang terdapat pada Yii2. 1. Buka http://localhost/advanced/backend/web/index.php?r=gii dan pilih module generator. Terdapat dua input untuk module Class dan module ID. Kita akan membuat sebuah modul Settings. Isikan Module Class : backend\modules\settings\Settings Read more about Tutorial Yii2 Bagian 12 : Membuat Module[…]

Tutorial Yii2 Bagian 11 : Search dari Tabel yang Berelasi

Posted on November 2, 2017November 2, 2017 by admin

Di bagian 9 kita telah berhasil mengganti angka menjadi tulisan yang lebih dimengerti dari tabel yang saling berelasi. Namun masih terdapat hal yang kurang, yaitu masih belum bisa dilakukan pencarian terhadap nama-nama tersebut. Disini kita akan memperbaikinya. 1. Modifikasi index.php yang berada pada folder /backend/views/branches untuk menambahkan search field.

        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            [
                'attribute'=>'companies_company_id',
                'value'=>'companiesCompany.company_name',
            ],
            //'branch_id',
            'branch_name',
            'branch_address',
            'branch_created_date',
            'branch_status',

'columns' => [

['class' => 'yii\grid\SerialColumn'],

[

'attribute'=>'companies_company_id',

'value'=>'companiesCompany.company_name',

//'branch_id',

'branch_name',

'branch_address',

'branch_created_date',

'branch_status',

Search field tersebut belum bisa berfungsi. 2. Modifikasi model BranchesSearch.php yang berada Read more about Tutorial Yii2 Bagian 11 : Search dari Tabel yang Berelasi[…]

Tutorial jQuery 7 : Selection dan Modifikasi Atribut

Posted on November 2, 2017 by admin

Tutorial selanjutnya adalah melakukan modifikasi atribut. Method yang akan kita bahas di tutorial ini adalah attr(), add(), remove() dan event mouseover dan mouseleave. index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Selection and Attribute Modification</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<h1 id="title">Instruction for Changing Tire</h1>

	<img src="img/contohstempel.png" alt="" id="the_img" width="20%" height="20%" />
	<h3>How to Change Tire</h3>

	<p>We'll go over the steps for changing a tire </p>

	<p class="instruct_title">Incase of flat tire.</p>

	<ul id="steps">
		<li class="important">Park Vehicle Safety</li>
		<li>Retrieve Jack and attach to vehicle frame</li>
		<li>Untighten tire bolts</li>
		<li class="important">Raise vehicle by cranking jack</li>
		<li>Unscrew bolts and attach replacement tire</li>
		<li class="important">Tighten the bolts</li>
		<li>Lower vehicle and tighten bolts completely</li>
	</ul>

	<div id="closing_statement">
		<p>Make sure to put away the tools</p>
	</div>

	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/jquery_custom_code.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Selection and Attribute Modification</title>

</head>

<body>

<h1 id="title">Instruction for Changing Tire</h1>

<h3>How to Change Tire</h3>

<p>We'll go over the steps for changing a tire </p>

<p class="instruct_title">Incase of flat tire.</p>

<li class="important">Park Vehicle Safety</li>

<li>Retrieve Jack and attach to vehicle frame</li>

<li>Untighten tire bolts</li>

<li class="important">Raise vehicle by cranking jack</li>

<li>Unscrew bolts and attach replacement tire</li>

<li class="important">Tighten the bolts</li>

<li>Lower vehicle and tighten bolts completely</li>

</ul>

<p>Make sure to put away the tools</p>

</div>

</body>

</html>

jquery_custom_code.js

$(document).ready(function(){
	// $("p.instruct_title, div#closing_statement, h3").css("color", "red");
	$("p.instruct_title").add("div#closing_statement").add("h3").css("color", "red");

	$("li.important").on("mouseover", function(){
		$(this).attr("id", "big");
		$(this).on("mouseleave", function(){
			$(this).attr("id", "small");
		});
	});

	$("h1#title").on("click", function(){
		$(this).attr("class", "pretty border");
	});

	$("img#the_img").on("click", function(){
		// $(this).attr("width", "40%");
		// $(this).attr("length", "40%");
		// $(this).attr("width", "40%").attr("length", "40%");
		$(this).attr({
			"width" : "40%",
			"length" : "40%"
		});
	});

	$("img#the_img").on("dblclick", function(){
		// $(this).removeAttr("src");
		$(this).remove();
	});


});

$(document).ready(function(){

// $("p.instruct_title, div#closing_statement, h3").css("color", "red");

$("p.instruct_title").add("div#closing_statement").add("h3").css("color", "red");

$("li.important").on("mouseover", function(){

$(this).attr("id", "big");

$(this).on("mouseleave", function(){

$(this).attr("id", "small");

});

$("h1#title").on("click", function(){

$(this).attr("class", "pretty border");

});

$("img#the_img").on("click", function(){

// $(this).attr("width", "40%");

// $(this).attr("length", "40%");

// $(this).attr("width", "40%").attr("length", "40%");

$(this).attr({

"width" : "40%",

"length" : "40%"

});

$("img#the_img").on("dblclick", function(){

// $(this).removeAttr("src");

$(this).remove();

});

style.css

#big {
	font-size: 2em;
	font-weight: bold;
}

#small {
	font-size: 1em;
}
.pretty {
	color: pink;
	font-style: italic;
}

.border {
	border-style: dashed;
	border-color: yellow: 
}

#big {

font-size: 2em;

font-weight: bold;

}

#small {

font-size: 1em;

}

.pretty {

color: pink;

font-style: italic;

}

.border {

border-style: dashed;

border-color: yellow:

}

Result Mari kita bahas satu-satu arti dari kode yang ada di jquery_custom_code.js

$("p.instruct_title, div#closing_statement, h3").css("color", "red");

1	$("p.instruct_title, div#closing_statement, h3").css("color", "red");

Untuk setiap paragraf yang mempunyai class ‘instruct_title’, untuk setiap div yang mempunyai id ‘closing_statement, dan h3, beri warna merah. Read more about Tutorial jQuery 7 : Selection dan Modifikasi Atribut[…]

Tutorial Yii2 Bagian 10 : Membuat DropDownList pada Form

Posted on November 1, 2017November 1, 2017 by admin

Kali ini kita akan membuat DropDownList serta Search yang berdasarkan relationship antar tabel. 1. Modifikasi _form.php yang berada di folder backend/views/branches : Kita akan mengganti baris ini :

<?= $form->field($model, 'companies_company_id')->textInput() ?>

1	<?= $form->field($model, 'companies_company_id')->textInput() ?>

Menjadi

    <?= $form->field($model, 'companies_company_id')->dropDownList(
    	ArrayHelper::map(Companies::find()->all(),'company_id','company_name'),
    	['prompt'=>'Select Company']
    ) ?>

<?= $form->field($model, 'companies_company_id')->dropDownList(

ArrayHelper::map(Companies::find()->all(),'company_id','company_name'),

['prompt'=>'Select Company']

) ?>

Dan jangan lupa untuk menambahkan use di atas dengan ArrayHelper dan Companies Model.

use yii\helpers\ArrayHelper;
use backend\models\Companies;

1 2	use yii\helpers\ArrayHelper; use backend\models\Companies;

Lakukan hal yang sama untuk _form.php pada folder views/departments. Tutorial ini sebagai dokumentasi Read more about Tutorial Yii2 Bagian 10 : Membuat DropDownList pada Form[…]

indocoder.com

indocoder.com

Tutorial Yii2 Bagian 13 : Membuat Bootstrap Style Datepicker

Tutorial Yii2 Bagian 12 : Membuat Module

Tutorial Yii2 Bagian 11 : Search dari Tabel yang Berelasi

Tutorial jQuery 7 : Selection dan Modifikasi Atribut

Tutorial Yii2 Bagian 10 : Membuat DropDownList pada Form