May 292017
 

Assalamu’alaikum wr wb

Terkadang saat kita membuat aplikasi yang melakukan request ke server dan kita perlu tau apakah proses tersebut sudah selesai atau belum. Banyak cara yang bisa digunakan. tetapi biasanya dilakukan untuk tiap proses yang ada, kali ini kita akan membuat script dengan menggunakan angularjs yang berfungis untuk mendetksi semua proses http sehingga kita cukup buat semua program kita.

Pertama masukkan factory function pada aplikasi kita.

Code :

Lalu tambahkan pada tiap directive yang digunakan misalkan pada controller

 

 

Dengan script di atas kita dapat membuat loading page atau yang lain. silakan kembangkan semoga bermanfaat.

Inspirasi : https://stackoverflow.com/questions/23361883/angular-js-detect-when-all-http-have-finished

Wassalamu’alaikum wr.wb

Sep 212016
 

Add image with tcpdf

Assalamu’alailum wr wb

Terkadang saat kita ingin mencetak report kita memerlukan membuat header dengan logo atau mungkin memasukkan images kedalam body laporan kita. Saat kita menggunakan tcpdf biasanya diakan membutuhkan realpath / path asli lokasi image bukan url. itu yang terkadang menyebabkan gagal saat membuat report.

Bita bisa menggunakan script

Itu juga berlaku untuk css untuk mempercantik laporan kamu.

semoga dapat membantu

Wassalamu’alaikum wr wb

Sep 022016
 

Asalamu’alaikum wr wb

Kita awali pembahasan kali ini dengan materi ringan tentang angularjs saya sudah pernah berbagi tentang angularjs (http://sugik.do-event.com/2013/10/angularjs-bagian-1-basics/) tapi tidak ada salahnya jika sedikit review dan ulas balik tentang framework javascript yang satu ini.

Mengapa Harus AngularJs

HTML ada lah static document yang sering kita gunakan dalam pembuatan website, tetapi dengan adanya AngularJs sebuah halaman website akan dengan mudahnya kita dapat mengulah dan mengembangkannya menjadi sebuah halaman dinamik.

Alternatif

Kenapa tidak yang lain, inilah salah satu kelebihan dan AngularJs dia sangat mudah dan simple dalam pengolahan halaman HTML.

Pengembangan dan perkembangan 

Tidak dapat dipungkiri bahwa sebuah tools digunakan sedangkan pengembang dan perkembangannnya tidak bagus maka kita akan merasa kurang yakin menggunakan nnya. Berbeda dengan AngularJs yang memang sudah dikembangkan oleh google yang kita tau siapa google ? dan didukung oleh komunitas yang pasti tidaklah sedikit.

Dari beberapa alasan diatas maka tidak ada salahnya jika kita mengembangkan aplikasi dengan kerangka dasar menggunakan AngularJs.

Untuk lebih detailnya maka silakan buka halaman websitenya di https://angularjs.org/

Semoga dapat menjadi salah satu pilihan yang membantu. terimakasih

Wassalamu’ alaikum wr wb

Feb 142016
 

php convert base64 to image

Assalamu’alaikum wr wb

Bagaimana cara convert base64 menjadi file gambar, itu yang sering saya pikirkan beberapa hari ini. berikut akan saya bagikan cara convert dengan menggunakan php.

function base64_to_jpeg($base64_string, $output_file) {
        $ifp = fopen($output_file, "wb");
        $data = explode(',', $base64_string);
        if(count($data)>0){
            fwrite($ifp, base64_decode($data[1]));
        }else{
            fwrite($ifp, base64_decode($data[0]));
        }
        fclose($ifp);
        return $output_file;
}

Itu source yang bisa dipakai untuk menggunakannya seperti contoh di abah ini

base64_to_jpeg($_POST[‘string_base64’], ‘file.jpg’ )

Silakan dimanfaatkan sesuai dengan kebutuhan, semoga membantu.

Wassalamu’alaikum wr wb

Jan 222016
 

Text Event Focus AngularJs

Assalamu’alaikum wr wb

Setelah beberapa saat tidak menulis artikel dan kemaren sekedar copas dari website lain, kali ini saya akan berbagi tutorial tentang AngularJs, Bagaimana cara membuat directive pada angularjs yang tujuannya saat kita menekan tombol pada keybord akan membuat text langsung berpindah ke text selanjutnya.

Biasanya perintah ini kalau dalam pemrograman visual kita akan menambahkan event onKeyPress pada object textbox, sekarang kita akan membuat sebuah Text Object pada input text.

Berikut adalah source yang dapat kita pakai.

var doeventInput = angular.module('deFocus', []);
doeventInput.directive('deFocus', function () {
 return {
 restrict: 'A',
 link: function(scope, elem, attrs) {
 var frm = angular.element('.form-horizontal');
 elem.bind('keyup', function (e) {
 var atoms = frm.find('input, select');
 toAtom = null;
 for (var i = atoms.length - 1; i >= 0; i--) {
 if (atoms[i] === e.target) {
 //console.log(elem[0].localName);

 if (e.keyCode === 38 && elem[0].localName != 'select') {
 toAtom = atoms[i - 1];
 break;
 /*} else if (e.keyCode === 40 && elem[0].localName != 'select') {
 toAtom = atoms[i + 1];
 break;*/
 } else if (e.keyCode === 13) { //Enter
 toAtom = atoms[i + 1];
 break;
 } /*else if (e.keyCode === 9) { //Tab
 toAtom = atoms[i + 1];
 break;
 }*/
 }
 }

 if (toAtom) toAtom.focus();
 return false;
 
 });
 }
 }
});

Untuk penggunaaannay yang pertama tambahkan source dalam app kamu

var app = angular.module(‘NamaApp’,[‘deFocus’]);

Untuk menggunakan dalam object input text dapat melihat contoh

<input de-focus required type=”text”   ng-model=”model”>

Selamat mencoba

Wassalamu’alaikum wr wb

Oct 282013
 

AngularJS bagian 1 (Basics)

Assalamu’ alaikum wr wb

Saya kutip dari websit resminya  http://angularjs.org/

<!doctype html>
<html ng-app>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
 </head>
 <body>
 <div>
 <label>Name:</label>
 <input type="text" ng-model="yourName" placeholder="Enter a name here">
 <hr>
 <h1>Hello {{yourName}}!</h1>
 </div>
 </body>
</html>

Vidionya : http://www.youtube.com/watch?v=uFTFsKmkQnQ&feature=player_embedded#t=0

wassalamu’ alaikum wr wb

Oct 202013
 

Angularjs Bagian awal

Assalamu’ alaikum wr wb

AngularJs

AngularJs

Berawal dari mengoprek w2ui akhirnya dengan tidak sengaja saya menemukan AngularJs yang merupakan salah satu produk dari google. Karena salah satu product dari google maka saya berusaha untuk mencari tutorial yang lebih banyak mengenai angularjs ini.

Pada tulisan saya yang pertama ini saya hanya akan memberikan sedikit info tentang angularjs tetapi pada tulisan – tulisan saya selanjutnya kita akan belajar bersama bagaimana cara menggunakan angularjs ini.

Apa perbedaan dengan framework javascript yang lainnya ???

Untuk detailnya bisa anda baca pada website resminya http://www.angularjs.com.

Sekian dulu infonya.

Wassalamu’ alaikum wr wb

Apr 112013
 

Tutorial ExtJs 4 Bagian 1 (Panel and menu)

ExtJs

ExtJs

Assalamu’alaikum wr wb

Lama tidak menggunakan ExtJs sekarang mari kita pelajari kembali penggunaan ExtJs 4 untuk pertama kali mari kita pemanasan dengan memanfaatkan panel dan membuat menu dengan menggunakan ExtJs 4.

Seperti biasa berikut adalah contoh script sederhana yang kita buat. Pertama buatlah file html

<html>
	<head>
		<title>Theme Ext</title>
		<link rel="<a>stylesheet</a>" href="<a href="view-source:http://lokal.com/latihan/theme-ext/assets/css/style.css">assets/css/style.css</a>" type="<a>text/css</a>" />
		<link rel="<a>stylesheet</a>" type="<a>text/css</a>" href="<a href="view-source:http://lokal.com/latihan/theme-ext/assets/css/resources/css/ext-all.css">assets/css/resources/css/ext-all.css</a>"/>

		<!-- Load ExtJs -->
		<script type="<a>text/javascript</a>" src="<a href="view-source:http://lokal.com/latihan/theme-ext/assets/js/extjs/bootstrap.js">assets/js/extjs/bootstrap.js</a>"></script>
		<script type="<a>text/javascript</a>" src="<a href="view-source:http://lokal.com/latihan/theme-ext/assets/js/layout.js">assets/js/layout.js</a>"></script>

	</head>
	<body>
		<div class="<a>container</a>">
			<div class="<a>span-24 header</a>">
				Sugik Puja Kusuma
			</div>
			<div class="<a>span-24</a>" id="<a>main-panel</a>">
			</div>
		</div>
	</body>
</html>

Setlah itu buat file css style.css

.container {width:950px;margin:0 auto;}
.span-24 {width:950px;margin-right:0;}
.header{
	background-color :green;
	font: normal 12px Arial, Helvetica, Sans-serif;
	color : white;
	margin-top : 10px;
	height : 50px;
}

#main-content-body{
	margin : 5px 5px  5px 5px;
}

Langkah terakhir adalam membuat file layout.js

Ext.require([
    'Ext.panel.Panel',
    'Ext.menu.*',
    'Ext.data.*'
]);
Ext.onReady(function(){

	Ext.create('Ext.panel.Panel', {
        title: 'Admin Aplikasi',
        layout: 'border',
        anchor: '100%',
		height : 700,
        tbar  : [
			{
				text : 'Home' ,
				listeners: {
					click : function (){
						window.location = 'http://lokal.com/latihan/theme-ext/';
					}
				}
			},'-',
			{
				text : 'Master' ,
				menu: [
                    {
						text: "Menu Item 1" ,
						listeners: {
							click : function (){
								Ext.get('main-content').load({
									url:'terima.php',
									scripts:true,
									nocache: true,
									params:{
										kode:'123'
									}
								});
							}
						}
					}
                ]
			},
			{
				text : 'Transaksi' ,
				menu: [
                    {
						text: "Menu Item 1"
					}
                ]
			},
			{
				text : 'Laporan' ,
				menu: [
                    { text: "Menu Item 1" }
                ]
			}
        ],
        renderTo: 'main-panel',
		items : [
			{
				region: 'west',
				title: 'Menu',
				width: 200,
				split: true,
				collapsible: true,
				floatable: true
			},
			{
				region: 'center',
				xtype: 'tabpanel',
				items: [{
					title: 'Content',
					id : 'main-content',
					html: 'Hello world 1',
					scripts: true
				}]
			}
		]
    });
});

Oke selesai, semoga bermanfaat

Download Source code

wassalamu’alaikum wr wb

Apr 052013
 

Tutorial Jquery Bagian 2 (Mini Calculator/Kalkulator)

Assalamu’ alaikum wr wb

Pada Tutorial sebelumnya Tutorial Jquery Bagian 1 (Mini Kalkulator) , Kita sudah belajar bagaimana membuat perhitungan sederhana dengan memanfaatkan JQuery dan javascript. Kita akan membuat kalkulator/Calculator seperti pada gambar di bawah ini:

kalkulator-1

Yang pertama kita lakukan adalah membuat desain tampilan seperti diatas. tulis script di bawah dalam tag body.

<div align="center">
 <table border="1">
 <tr>
 <td colspan="4"><input readOnly type="text" class="txtHasil" id="txtHasil" value="" /></td>
 </tr>
 <tr>
 <td> <input type="button" value="0" /> </td>
 <td> <input type="button" value="1" /> </td>
 <td> <input type="button" value="2" /> </td>
 <td> <input type="button" value="+" /> </td>
 </tr>
 <tr>
 <td> <input type="button" value="3" /> </td>
 <td> <input type="button" value="4" /> </td>
 <td> <input type="button" value="5" /> </td>
 <td> <input type="button" value="-" /> </td>
 </tr>
 <tr>
 <td> <input type="button" value="6" /> </td>
 <td> <input type="button" value="7" /> </td>
 <td> <input type="button" value="8" /> </td>
 <td> <input type="button" value="*" /> </td>
 </tr>
 <tr>
 <td> <input type="button" value="9" /> </td>
 <td> <input type="button" value="C" /> </td>
 <td> <input type="button" value="=" /> </td>
 <td> <input type="button" value="/" /> </td>
 </tr>
 </table>
</div>

Kode di atas akan menghasilkan tampilan untuk kalkulator kita, sekarang tinggal kita buat script jquery dan css nya, berikut adalah css desainnya. tulis script di blok tag head.

<style type="text/css">
 input.txtHasil{
 height: 40px;
 width: 100%;
 text-align: right;
 background-color: black;
 font-style: bold;
 color: white;
 font-size: 15px;
 }
 input[type=button]{
 height: 40px;
 width: 40px;
 font-size: 20px;
 }
</style>

Jangan lupa masukkan jquery dalam program kita.

<script type="text/javascript" src="jquery-1.8.2.js"></script>

Yang terakhir adalah source code untuk melakukan proses perhitungan , tulis di bawah load jQuery nya.

<script type="text/javascript">
 $(document).ready(function(){
 $('input[type=button]').click(function(){
 if($(this).val()=='='){
$('#txtHasil').val(eval($('#txtHasil').val()));
 }else if( $(this).val()=='C'){
 $('#txtHasil').val('');
 }else{
$('#txtHasil').val($('#txtHasil').val() + $(this).val());
 }
 });
 });
</script>

Oke selesai sudah program kita semoga dapat membantu.

Akirnya jadi sudah kalkulator kita

Wassalamu’ alaikum wr wb