PHP Timestamp Jakarta

Just for my personal purpose to remind me something easy but easily forgettable as well. Here is how we get timestamp for jakarta.

ini_set('date.timezone', 'Asia/Jakarta');
$ts = date('Y-m-d H:i:s');

Datatable: set title to downloaded File

 Short post, in case I need it later. 

So my problem was, I have several datatables in one page and each datatable has download buttons. Normaly, datatable will use the page's title as the name of the downloaded file. But I have more than one datatables and I want the downloaded file has different name. 

And here is the solution.

$('#zero_configuration_table').DataTable( {
	dom: 'Bfrtip',
	buttons: [
		{extend:'excelHtml5', title: 'Dashboard Tracer Study'},
        {extend:'pdfHtml5', title: 'PDF Dashboard Tracer Study'}
	],
	scrollX:        true,
	scrollCollapse: true,
	paging:         false,
	fixedColumns: false,
	autoWidth: false,
});

Take a look at the buttons, simple right. I can even put different name on each button. With that code, the datatables doesn't do pagination and it is horizontally scrollable.

Datatable : Adding a Row Dynamically and adding its atrribute

Ok, I had a problem to solve the problem I mentioned in the title of this post. 

So, I combined two solution from two sources (Actually I've browsed to several websites and discussions). 

These are my sources: Source 1, Source 2.

I use ajax to retrieve the data and then add them dynamically to the table. Then, I want to align the text to center and add onclick event on each row.

So here is my Table:

<div class="table-responsive">
	<table class="table table-striped table-bordered" 
    	id="transaction_detail" cellspacing="0" width="100%">
		<thead>
			<tr class="text-center align-middle">
				<th>Name</th>
				<th>email</th>
				<th>Phone</th>
				<th>Transactions</th>
				<th>Turnover</th>

			</tr>
		</thead>
		<tbody >

				
		</tbody>
	</table>
</div>

And here is my Ajax:

$.ajax({
  type:"POST",
  url:"/gettransaction",
  data:{customer_id: customerid},
  success:function(data){
	var jsondat = JSON.parse(data)  ;
	
	//clear the table's body
	$("#transaction_detail").DataTable().clear().draw();

	if(jsondat.length > 0){
		for(var i=0; i<jsondat.length; i++){
			
			var rowTab = $("#transaction_detail")
				.DataTable()
				.row
				.add([
				jsondat[i].customer_name,
				jsondat[i].customer_address,
				jsondat[i].customer_phone,
				jsondat[i].number_transaction,
				jsondat[i].turnover
			]);


			//use node() so that row is editable.
			var rowEdit = rowTab.node();

			$(rowEdit).attr("style", 
				"cursor:pointer; text-align:center");
			$(rowEdit).attr('onclick',
            	"showTrans("+jsondat[i].customer_id+")");

			//redraw the table after its modified
			rowTab.draw(false);
		}   

	}
  },
  error: function(){

  }
});

I hope it can help you somehow. cheers!!

datatable: show row per page and export button at the same time

Well this posting is an extra info of my previous posting. After I struggled with an error, now I want to show the page per button and the export button at the same time. 

I found two ways from stackoverflow. 

so here is the first solution:

$(document).ready(function() {
    document.title = 'page Title';
    $('#example').DataTable( {
        dom: 'Bfrtip',
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        buttons: [
            'pageLength',
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ],
    } );
} );

You can delete or comment the second line, it was included in my code since I coded it in a team and the used template seems doesn't have title tag in its header. So, I set it in here. The title of the page will be used as the filename when its downloaded. 

The second solution is:

$(document).ready(function() {
    document.title = 'page Title';
    $('#example').DataTable( {
        dom: 'lBfrtip',
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ],
    } );
} );

Take a look at the 'dom:' attribute. The second solution uses 'lBftrip' whereas the first solution uses 'Bfstrip'. now then take a look closer to the first solution, if we use 'Bfstrip', then we have to add 'pagelength' as a button as well. 

Just try them and see the different. NOTE!!! don't forget to call all the needed css and js scripts. You can find them all here.

Datatable Error : Uncaught TypeError: $(...).DataTable is not a function

 It was really pain in the ass to look for a solution for that error. But, finally I found it.

Here is the solution: Use defer to call the datatable script and its other following scripts. 

I needed to use datatable with export button, I get the examples code from here.

Here was how I called the scripts that gave me that error:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
<script type="text/javascript"  src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js" ></script>
<script type="text/javascript"  src="https://cdn.datatables.net/buttons/2.1.0/js/dataTables.buttons.min.js" ></script>
<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" ></script>
<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" ></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.1.0/js/buttons.html5.min.js" ></script>

And how it was fixed:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
<script type="text/javascript"  src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js" defer></script>
<script type="text/javascript"  src="https://cdn.datatables.net/buttons/2.1.0/js/dataTables.buttons.min.js" defer></script>
<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" defer></script>
<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" defer></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" defer></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.1.0/js/buttons.html5.min.js" defer></script>

I found the solution in this forum and here is the link that explains how defer works.

Get Date of 1 month Ago with PHP

 Hi again, at the first day of the year 2021 I wrote this post since my web app showed error while retrieving data between the date of one month ago until today. 

So here is the way to get date of 1 month Ago.

	
    	$dateHelp = date("Y-m-d");
        $monthAgo = Date("Y-m-d", strtotime($dateHelp."-1 Month"));
    

To get the date of  N months later / ago, just change the text "-1 Month" to "+N Month" to get N months later or "-N Month" to get N months ago.

Here is the source where I read the solution. Source

Save PNG image from HTML5 Canvas (the correct way, proved working!!)

This post is kind of a continuation of my previous post 'Take A Picture From Webcam With HTML5'. I had then an issue how to save the image localy. The image taken from the webcam is saved in base64 encoded data with this format data:image/png;base64,AAAFBfj....[base64 encoded data]


After I googled around, the most solution that I found told me just seperate the base64 data from that format and decode it directly to save the image. Unfortunately, its not that easy!!!

shortly, I'll show you how to do it correctly. This solution is shown here. Thanks mas bro Fazlurr!! you are the best.

again, I developed the application using Codeigniter and the code I show here is the function to save the image localy. This function is called by an AJAX function. 

function saveImage(){
     $img = str_replace('data:image/png;base64,', '', $_POST['data']);
     $img = str_replace(' ', '+', $img);
     $data = base64_decode($img);
     $file = FCPATH.'/image/page/'.$_POST['name'].'.png';
     $success = file_put_contents($file, $data);
     echo $success ? '1' : '0';
}

the AJAX send  two POST data; the image data taken from canva and the name used for this image. Take a look at the third line, this line is the key. Other solutions found in google don't have this line, so most of them failed to save the image correctly. 

Well, the funny thing is that I know it works but I don't know what does that third line do, so dont ask me why this code works...ehehehe....