Archive for 2016

Validasi Hanya Input Angka (Numeric Only)

Bagaimana cara membuat validasi input hanya boleh memasukkan angka saja atau tidak diijinkan memasukkan huruf?
Berikut contohnya:

Step 1:
Buat function dan taruhlah di external file dengan nama file "custome.js".

function angka_saja(element) {
$("." + element).on('keypress', function (e) {
return e.metaKey || // cmd/ctrl
e.which <= 0 || // arrow keys
e.which === 8 || // delete key
/[0-9]/.test(String.fromCharCode(e.which)); // numbers
});
}

Step 2:
Form input diberi nama class "angka_saja"

<input type="text" name="" class="angka_saja">

Step 3:
Panggil fungsi yang telah kita buat di bawah view/form input atau file template website anda. Pertama harus memasukkan jquery plugin yang bisa kita download di http://jquery.com.

<script src="'jquery-1.12.3.min.js'" type="text/javascript"></script> //http://jquery.com/
<script src="custome.js" type="text/javascript"></script> //isinya function angka_saja
$(document).ready(function () {
angka_saja("angka_saja");
});

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Cara Membuka Textfield Disabled dengan Parameter dengan JavaScript

Add Comment

Contoh HTML-nya:
<input type="checkbox" name="pilih[]" onclick="checkbox(this)" value="1">
<input type="text" name="saldo[]" class="form-control" id="saldo1" disabled="">

<input type="checkbox" name="pilih[]" onclick="checkbox(this)" value="2">
<input type="text" name="saldo[]" class="form-control" id="saldo2" disabled="">

JavaScript-nya:
<script type="text/javascript">
function checkbox(target) {
var x = parseInt(target.value);
if (target.checked) {//centang
$('#saldo' + x).prop('disabled', false);
} else {//tidak centang
$('#saldo' + x).prop('disabled', true);
}
}
</script>

Contoh HTML2:
<input type="checkbox" name="pilih_level5[]" class="pilih_akun">

JavaScript-nya:
<script type="text/javascript">
$(document).on("change", ".pilih_akun", function () {
$('.pilih_akun').each(function (index, value) {
if (this.checked) {
$('.saldo').eq(index).removeAttr("disabled");
} else {
$('.saldo').eq(index).attr("disabled", true);
}
});
});
</script>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Membuat Tabel dengan Accordian Bootstrap

Add Comment

Bagaimana cara membuat accordion di tabel? Berikut ini adalah contohnya:

<table class="table table-bordered table-hover dTable">
<thead>
<tr>
<th class="txt-c" width="20%">NO.AKUN</th>
<th class="txt-c" width="35%">NAMA AKUN</th>
<th class="txt-c" width="30%">KETERANGAN</th>
<th class="txt-c" width="15%">AKSI</th>
</tr>
</thead>
<tbody>
<tr>
<td class="txt-c">1.0.0.00.00</td>
<td class="txt-l">Aset</td>
<td class="txt-l">Keterangan 1</td>
<td class="txt-c">
<?php
echo '<a href="' . site_url('akun/edit') . '"><button type="button" class="btn btn-primary" title="Edit Akun"><i class="fa fa-edit"></i></button></a>
<a href="#"><button type="button" class="btn btn-danger" title="Hapus Akun"><i class="fa fa-remove"></i></button></a>';
?>
</td>
</tr>
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle pointer">
<td class="txt-c">1.1.0.00.00</td>
<td class="txt-l">Aset Lancar</td>
<td class="txt-l">Keterangan 2</td>
<td class="txt-c">
<?php
echo '<a href="' . site_url('akun/edit') . '"><button type="button" class="btn btn-primary" title="Edit Akun"><i class="fa fa-edit"></i></button></a>
<a href="#"><button type="button" class="btn btn-danger" title="Hapus Akun"><i class="fa fa-remove"></i></button></a>';
?>
</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="demo1">
<table class="table table-bordered table-striped" style="width: 100%">
<tr>
<td class="txt-c" width="20%" style="border-left: none !important;">1.1.1.00.00</td>
<td class="txt-l" width="35%">Kas</td>
<td class="txt-l" width="30%">Keterangan 2.1</td>
<td class="txt-c" width="15%" style="border-right: none !important;">
<?php
echo '<a href="' . site_url('akun/edit') . '"><button type="button" class="btn btn-primary" title="Edit Akun"><i class="fa fa-edit"></i></button></a>
<a href="#"><button type="button" class="btn btn-danger" title="Hapus Akun"><i class="fa fa-remove"></i></button></a>';
?>
</td>
</tr>
<tr>
<td class="txt-c" width="20%" style="border-left: none !important;">1.1.2.00.00</td>
<td class="txt-l" width="35%">Investasi Jangka Pendek</td>
<td class="txt-l" width="30%">Keterangan 2.2</td>
<td class="txt-c" width="15%" style="border-right: none !important;">
<?php
echo '<a href="' . site_url('akun/edit') . '"><button type="button" class="btn btn-primary" title="Edit Akun"><i class="fa fa-edit"></i></button></a>
<a href="#"><button type="button" class="btn btn-danger" title="Hapus Akun"><i class="fa fa-remove"></i></button></a>';
?>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Contoh-Contoh Selector dalamJavaScript

Add Comment

JQuery - Membuka Sebuah Halaman dengan Selector

Contoh-contoh selector dalam javascript:

HTML
<tr data-dd="1">
Javascript
$("tr[data-dd='1']");

HTML
<tr RowID="123">
Javascript
$("tr[RowID='" + rowID + "']");

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Bagaimana Cara Menampilkan Multi tootips di Highcharts?

Add Comment

Di bawah ini adalah cara untuk menampilkan multi tootips di Highcharts.

Contoh 1:

tooltip: {

formatter: function() {

var s = [];

$.each(this.points, function(i, point) {

s.push('<span style="color:#D31B22;font-weight:bold;">'+ point.series.name +' : '+

point.y +'<span>');

});

return s.join(' and ');

shared: true

}

Contoh 2:

tooltip: {

shared: false,

formatter: function() {

var text = '';

if(this.series.name == 'MSFT') {

text = this.x + ': ' + this.series.name +

'<br> $' + Highcharts.numberFormat(this.y, 0);

} else {

text = 'In ' + this.x + ' the median value was' + this.median +

'and the total $' + Highcharts.numberFormat(this.y, 0);

}

return text;

}

Sumber: highcharts[dot]com

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Contoh Cara Menambah Element di Javascript Menggunakan appendChild

Add Comment

Contoh cara penggunaan append javascript:

<ul id="daftar">
<li>Teks 1</li>
<li>Teks 2</li>
</ul>

<button onclick="append()">Klik untuk tambah</button>

<script>
function append() {
var selector= document.createElement("LI");
var textselector = document.createTextNode("Teks tambahannya");
selector.appendChild(textselector );
document.getElementById("daftar").appendChild(selector);
}
</script>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Cara Merubah Warna Text di Selectbox atau Dropdown

Add Comment

Contoh cara merubah warna text di selectbox:

.dataTables_length select option {
background: rgba(0,0,0,0.3);
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

.dataTables_length select option[val="1"]{
background: rgba(100,100,100,0.3);
}

Contoh hanya value tertentu saja:

select option {
margin:40px;
background: rgba(0,0,0,0.3);
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

select option[val="1"]{
background: rgba(100,100,100,0.3);
}

select option[val="2"]{
background: rgba(200,200,200,0.3);
}

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Cara Mengatasi Jquery Tidak Selalu Berjalan - Uncaught TypeError: $ is not a function

Add Comment

Jika jquery kita tidak berjalan semestinya, maka web tidak akan terbuka sepenuhnya. Ini bisa dilihat ketika running atau menjalankan link website, kita spek element akan muncul error seperti di bawah ini:

Uncaught TypeError: $ is not a function

Mungkin salah satu penyebabnya adalah jquery tidak terpanggil semestinya, berikut cara mengatasinya:

Setelah jquery dipanggil, di dalam tag <head /> dimasukkan kode di bawah ini:

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

JQuery - Membuka Sebuah Halaman menggunakan Selector

Add Comment

Bagaimana cara membuka sebuah halaman menggunakan selector id atau class? Berikut contohnya:

$(document).ready(function () {

$('#loads').fadeOut(5000, function () {

$("#data").load("<?php echo site_url('dashboard/data_skpd'); ?>" + id, function() {

});

</script>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Membandingkan Dua atau Lebih Array di PHP

Add Comment

Bagaimana cara membandingkan dua array di PHP? Berikut contohnya:

<!DOCTYPE html>

<html>

<body>

<?php

$a1=array("a"=>"nilai satu","b"=>"nilai dua","c"=>"nilai tiga","d"=>"nilai empat");

$a2=array("e"=>"nilai satu","f"=>"nilai dua","g"=>"nilai tiga");

$result=array_diff($a1,$a2);

print_r($result);

</body>

</html>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Show Hidden Div Menggunakan Javascript

Add Comment

#html:
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="panel panel-default">

<div class="panel-heading relative panel-heading2">
<h2 style="text-align: left;">Pemasukan</h2>
<button class="btn btn-xs btn-danger pull-right" title="Informasi" onclick="swap('a1')"><i class="fa fa-exchange fa-fw"></i> </button>
</div>

<div id="chart_a1" class="panel panel-default" style="padding-left: 15px;">
//konten1
</div>

<div id="info_a1" class="panel panel-default hidden">
<blockquote>
<p>Pendapatan</p>
<footer>Merupakan total rencana pendapatan selama setahun</footer><br/>
</blockquote>
</div>
</div>
</div>
</div>

//CSS:
.hidden{display: none;}

//JavaScript:
function swap(name) {
if ($('#info_' + name).hasClass("hidden")) {
$('#info_' + name).removeClass('hidden').addClass('show');
$('#chart_' + name).removeClass('show').addClass('hidden');
}
else if ($('#info_' + name).hasClass("show")) {
$('#info_' + name).removeClass('show').addClass('hidden');
$('#chart_' + name).removeClass('hidden').addClass('show');
}
}

Atau dapat juga menggunakan cara ini:
element.css('display', 'block'); //untuk menampilkan
element.css('display', 'none'); //untuk menyembunyikan

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Cara Membuat Line Chart Menggunakan Highchart Versi 2

Add Comment

Dari pada ribet, saya contohkan bagaimana membuat line chart dengan highchart-nya.

//CSS

//VIEW

//JQUERY & JAVASCRIPT

//progres fisik dan keuangan theme

$(function () {

Highcharts.createElement('link', {

href: '//fonts.googleapis.com/css?family=Unica+One',

rel: 'stylesheet',

type: 'text/css'

}, null, document.getElementsByTagName('head')[0]);

Highcharts.theme = {

colors: ["#2b908f", "#90ee7e"],

chart: {

type: 'areaspline',

backgroundColor: {

linearGradient: {x1: 0, y1: 0, x2: 1, y2: 1},

stops: [

[0, '#395168']

]

plotBorderColor: '#606063'

title: {

style: {

color: '#E0E0E3',

textTransform: 'uppercase',

fontSize: '20px'

}

subtitle: {

style: {

color: '#E0E0E3',

textTransform: 'uppercase'

}

xAxis: {

gridLineColor: '#707073',

labels: {

style: {

color: '#E0E0E3'

}

lineColor: '#707073',

minorGridLineColor: '#505053',

tickColor: '#707073',

title: {

style: {

color: '#A0A0A3'

}

yAxis: {

gridLineColor: '#707073',

labels: {

style: {

color: '#E0E0E3'

}

lineColor: '#707073',

minorGridLineColor: '#505053',

tickColor: '#707073',

tickWidth: 1,

title: {

style: {

color: '#A0A0A3'

}

tooltip: {

valueSuffix: ' %',

backgroundColor: 'rgba(0, 0, 0, 0.85)',

style: {

color: '#F0F0F0'

}

plotOptions: {

series: {

dataLabels: {

color: '#B0B0B3'

marker: {

lineColor: '#333'

}

boxplot: {

fillColor: '#505053'

candlestick: {

lineColor: 'white'

errorbar: {

color: 'white'

areaspline: {

fillOpacity: 0.3

}

legend: {

itemStyle: {

color: '#E0E0E3'

itemHoverStyle: {

color: '#FFF'

itemHiddenStyle: {

color: '#606063'

}

credits: {

enabled: false

title: {

text: '',

style: {

display: 'none'

}

// special colors for some of the

legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',

background2: '#505053',

dataLabelsColor: '#B0B0B3',

textColor: '#C0C0C0',

contrastTextColor: '#F0F0F3',

maskColor: 'rgba(255,255,255,0.3)'

};

Highcharts.setOptions(Highcharts.theme);

//progres fisik

var chart = new Highcharts.Chart({

chart: {

renderTo: 'chart_progres_realisasi_fisik'

legend: {

align: 'left',

verticalAlign: 'top',

x: 150,

y: 100,

floating: true,

borderWidth: 1,

backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'

xAxis: {

categories: [

'Jan',

'Feb',

'Mar',

'Apr',

'Mei',

'Jun',

'Jul',

'Agt',

'Sep',

'Okt',

'Nov',

'Des'

]

yAxis: {

title: {

text: 'Progres (%)'

}

series: [{

data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 100, 100]

}, {

data: [15, 15, 25, 50, 50, 55, 60, 70, 80, 100, 100, 100]

}]

});

</script>

Sumber: highcharts[dot]com

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

PHP Aku

Validasi Hanya Input Angka (Numeric Only)

Cara Membuka Textfield Disabled dengan Parameter dengan JavaScript

Membuat Tabel dengan Accordian Bootstrap

Contoh-Contoh Selector dalamJavaScript

Bagaimana Cara Menampilkan Multi tootips di Highcharts?

Contoh Cara Menambah Element di Javascript Menggunakan appendChild

Cara Merubah Warna Text di Selectbox atau Dropdown

Cara Mengatasi Jquery Tidak Selalu Berjalan - Uncaught TypeError: $ is not a function

JQuery - Membuka Sebuah Halaman menggunakan Selector

Membandingkan Dua atau Lebih Array di PHP

Show Hidden Div Menggunakan Javascript

Cara Membuat Line Chart Menggunakan Highchart Versi 2

Angular

PHP

CSS

Laravel

Belajar Selanjutnya

JavaScript

Append

Dropdown

DataTables