How To Show Values On Top Of Line Chart in Chart Js

This afternoon, I just got a comment that made me write this post. By the way thanks to Basati Naveen for the inspiration today. As per the title of this post, I want to modify a little regarding the graphics that I made in the previous post.

In the line chart above, I don’t use the fill attribute. Below is the complete code snippet.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js"></script>
    <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
</head>
<body>
    <div id="container" style="width: 75%;">
        <canvas id="UsersVsMyUsers"></canvas>
    </div>
    
    <script>
        $(function() {
            var color = Chart.helpers.color;
            var UserVsMyAppsData = {
                labels: ['29 Sep 2019','30 Sep 2019','01 Oct 2019','02 Oct 2019','03 Oct 2019','04 Oct 2019','05 Oct 2019'],
                datasets: [{
                    label: 'Users',
                    backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                    borderColor: window.chartColors.red,
                    borderWidth: 1,
                    data: [53,117,79,56,45,89,61],
                    fill: false,
                }, {
                    label: 'My Users',
                    backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                    borderColor: window.chartColors.blue,
                    borderWidth: 1,
                    data: [43,105,76,50,33,97,52],
                    fill: false,
                }]
         
            };
         
            var UserVsMyAppsCtx = document.getElementById('UsersVsMyUsers').getContext('2d');
            var UserVsMyApps = new Chart(UserVsMyAppsCtx, {
                type: 'line',
                data: UserVsMyAppsData,
                options: {
                    responsive: true,
                    legend: {
                        position: 'bottom',
                        display: true,
         
                    },
                    "hover": {
                      "animationDuration": 0
                    },
                    "animation": {
                            "duration": 1,
                            "onComplete": function() {
                            var chartInstance = this.chart,
                              ctx = chartInstance.ctx;
             
                            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'bottom';
             
                            this.data.datasets.forEach(function(dataset, i) {
                              var meta = chartInstance.controller.getDatasetMeta(i);
                              meta.data.forEach(function(bar, index) {
                                var data = dataset.data[index];
                                data = (!meta.hidden ? data : '');
                                ctx.fillText(data, bar._model.x, bar._model.y - 5);
                              });
                            });
                        }
                    },
                    title: {
                        display: false,
                        text: ''
                    },
                }
            });
        });
    </script>
</body>
</html>

If you want to use the fill attribute, you can change the fill to true.

Thank you for reading my post! Happy Coding!

 

PHP Upload File To Remote Server Using CURL

In web-based system development, sometimes we need a feature to upload a file or document in addition to supporting the information processed on the system. This is inseparable from the file upload feature which is implemented into the system. As we know that the file storage can be placed in a special folder inside or under the root folder. But sometimes there are some cases or conditions, where we need to upload the file on another server, for example, a special server for important documents. There are also conditions when the website owner or admin wants to separate static files (images, upload files, other web assets) with the core program so that it does not affect the performance of the core program.

When we find this case, of course, we can use the FTP function in PHP to upload files to the remote server. But sometimes website owners or admins don’t want to open or use multiple ports in cases like this for server security reasons. Here I am trying to describe one of the data transmission techniques using the CURL function available in PHP.

By default, the CURL module package is available in PHP. However, there are several installation program packages that do not include CURL in their PHP packages. Here you don’t need to worry, because you can install it yourself. Previously, make sure that the CURL module package is already installed in your PHP. You can check it on phpinfo.

<?php
// save the file with the name phpinfo.php
phpinfo();
?>

If the curl module is not already activated, you can simply activate it by opening the php.ini configuration file and looking for this line:

; extension = php_curl.dll

Then remove the semicolon sign to be like this:

extension = php_curl.dll

Then save and restart the apache service.

After successfully installing the CURL module, we now try to create a file to send the file. This file will be placed on server A (Example: 192.168.106.11/app). Name it form_upload.php.

<?php
// save the file with the name form_upload.php
function upload_file_remote_server($upload_file, $upload_url, $upload_filename){
	$postfields = array();
	$postfields['nama_file'] = $upload_filename;

	if (isset($upload_file['name'])) {
		
		if (function_exists('curl_file_create')) { // For PHP 5.5+
			$postfields["upload_file"] = curl_file_create(
				$upload_file['tmp_name'],
				$upload_file['type'],
				$upload_file['name']
			);
			
		} else {
			$postfields["upload_file"] = '@' . $upload_file['tmp_name']
												  . ';filename=' . $upload_file['name']
												  . ';type='     . $upload_file['type'];
		}
	}
	
	$ch         = curl_init();
	$headers    = array("Content-Type:multipart/form-data");

	curl_setopt_array($ch, array(
		CURLOPT_POST            => 1,
		CURLOPT_URL             => $upload_url,
		CURLOPT_RETURNTRANSFER  => 1,
		CURLINFO_HEADER_OUT     => 1,
		CURLOPT_HTTPHEADER      => $headers,
		CURLOPT_POSTFIELDS      => $postfields
	));
	
	$result = curl_exec($ch);
	
	if (curl_errno($ch)) {
		$error_msg = curl_error($ch);
		echo $error_msg;
		exit();
	}

	curl_close ($ch);
}

if($_FILES){
	
	$temp 	= explode(".", $_FILES['surat']['name']);
	$surat 	= 'FILE_'.date('YmdHis').end($temp);	
	
	// SAVE TO REMOTE SERVER
	$upload_file    = $_FILES['surat'];
	$upload_url     = "http://192.168.106.13/files/upload_to_server.php";
	$upload_filename= $surat;
	
	upload_file_remote_server($upload_file, $upload_url, $upload_filename);
	
	// SAVE TO LOCAL SERVER
	$destination 	= "./uploads/" . $surat;
	move_uploaded_file($_FILES['surat']['tmp_name'], $destination);
	
	echo 'Uploaded!';
	exit();
}

echo '<form method="POST" action="?" enctype="multipart/form-data">
		<input type="file" name="surat" required>
		<input type="submit" value="Upload" name="upload">
	</form>';
?>

Next, create a file to accept it’s upload parameters. This file is located on server B (Example: 192.168.106.13/files). Name it upload_to_server.php.

<?php
// save the file with the name upload_to_server.php
$path_target 	= '';
$nama_file 		= ($_POST['nama_file'] ? $_POST['nama_file'] : date('YmdHis'));
$upload_file 	= (isset($_FILES['upload_file'])) ? $_FILES['upload_file'] : array();
$count 			= 0;

if (isset($upload_file['name'])) {
	
	if ($upload_file['error'] == 0) {
		$path_target= ($path_target == '' ? '' : $path_target . '/');
		$path 		= "./uploads/".$path_target;
		$name_file 	= $path . $nama_file;
		
		if (@move_uploaded_file($upload_file["tmp_name"], $name_file)) {
			$count++; // TOTAL SUCCESS FILE UPLOADED
		}
	}
}

echo 'Uploaded: '.$count.' file(s)';
?>

The code above is a modification of some of the references that I got. I got it through this link, this, and this. I am very grateful if you can provide the best input if you have a simple way in the case above. Thank you very much for visiting this article.

How to Make an Iframe With The Play Button

Recently I got a simple project to create an iframe that contains a play button. So, when the user clicks the button, the elements in the iframe will run or reload. In my case, the element that is reloaded or executed is a game link.

I got a similar code example from this link. But the difference in the link is to execute a video play button from YouTube to play the movie.

I’m trying to change some code so that it suits my customers’ wishes. The following code that I customize.


<!DOCTYPE html>
<html>
<head>
    <title>.: IFRAME :.</title>
    <style type="text/css">
        .wrapper-video {
            position:relative;
            width:640px;
            height: 426px;
        }
        .wrapper-video img {
            width:640px;
            height: 426px;
            height:auto;
        }
        .wrapper-video iframe {
            display:none;            
            background: #DADADA;
            width:640px;
            height: 426px;
        }
        .play-btn-video {
            position:absolute;
            z-index:666;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%);
            background-color:transparent;
            border:0;
        }
        .play-btn-video:hover {
            cursor:pointer;
        }
        .play-btn-video:focus {
            outline:0;
        }
    </style> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>   
    
    <script>
        $(document).on("click","#play",function() {     
            $('#player').show();
            var url = $(this).data('info');
            $('#player').attr('src', url);
            $('#video-cover').hide();
            $('#play').hide();
        });
    </script>
</head>

<body>
    <div class="wrapper-video">

        <!-- COVER -->
        <img  id="video-cover" src="cover.png" alt="Video title">

        <!-- IFRAME VIDEO -->
        <iframe id="player" width="640" height="426" src="" frameborder="0" allow="autoplay" allowfullscreen></iframe>

        <!-- PLAY BUTTON -->
        <button id="play" class="play-btn-video" data-info="https://staticpff.yggdrasilgaming.com/init/launchClient.html?gameid=7322">
            <svg enable-background="new 0 0 141.73 141.73" height="141.73px" id="Warstwa_1" version="1.1" viewBox="0 0 141.73 141.73" width="141.73px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M101.628,40.092c-8.22-8.22-19.149-12.746-30.774-12.746c-11.624,0-22.553,4.526-30.772,12.746   c-16.968,16.969-16.967,44.578,0.001,61.546c8.22,8.22,19.149,12.747,30.773,12.747s22.553-4.526,30.772-12.746   s12.747-19.148,12.747-30.773S109.848,48.312,101.628,40.092z M100.214,100.225c-7.842,7.842-18.269,12.16-29.358,12.16   s-21.517-4.319-29.359-12.161c-16.188-16.188-16.188-42.529-0.001-58.718c7.842-7.842,18.269-12.16,29.358-12.16   c11.091,0,21.518,4.318,29.36,12.16c7.842,7.843,12.161,18.269,12.161,29.359S108.056,92.382,100.214,100.225z" fill="#ffffff"/><path d="M65.893,55.983c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l13.466,13.466L64.478,84.331   c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293L80.065,71.57   c0.391-0.391,0.391-1.023,0-1.414L65.893,55.983z" fill="#ffffff"/></g></svg>
        </button>
    </div>
</body>
</html>

If you have an alternative or simpler code, don’t hesitate to share it here. I am very grateful if you want to share and take the time to criticize my writing. Bye..bye.

How To Implement Google Translate Into A CMS Website

A few days ago, I got a project from my client. A project CMS Website which is has to feature multilanguage. Long story short when I developed this module. I’m having problems. Namely how to hide Google translate elements that are on top of the page. Alhamdulillah, thank God, finally I found his enlightenment through this blog and some discussions on Stackoverflow.

As a thank you for successfully completing this project. I will share a simple way how to implement the google translate feature into the CMS Website.

You can create a new file named style.css

body{
    margin: 0 auto;
    padding: 0px 10px;
    top: 0px !important;
}

ul.translation-icons{
    margin: 0px;
    padding: 0px;
}
ul.translation-icons li.translate{
    display: inline-block;
    padding: 5px 10px;
}

.goog-te-gadget-icon {
    display:none;
}
.goog-te-gadget-simple a {
    text-decoration: none !important;
}
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

#goog-gt-tt{
    display: none !important;
}
#google_translate_element{
    display: none;
}

You can create a new file named index.html

<!DOCTYPE html>
<html>
<head>
    <title>.: Google Translate Integration :.</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <ul class="translation-icons">
        <li class="translate">
            <a href="#googtrans(en|id)" class="indonesian" data-lang="Indonesian">
                <img src="in.gif"/>&nbsp;IND
            </a>
        </li>
        <li class="translate">
            <a href="#googtrans(id|en)" class="english" data-lang="English">
                <img src="en.gif"/>&nbsp;EN
            </a>
        </li>
    </ul>

    <hr>
    
    <p>Halo Dunia, Saya mau memperkenalkan diri. Nama saya Bramanto.</p>
    
    <div id="google_translate_element"></div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        function googleTranslateElementInit() {
              new google.translate.TranslateElement({
                pageLanguage: 'en', 
                includedLanguages: 'en,id',
                defaultLanguage: 'en',
                multilanguagePage: true,
                layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
                autoDisplay: false
            }, 'google_translate_element');
        }

        (function() {
          var googleTranslateScript = document.createElement('script');
          googleTranslateScript.type = 'text/javascript';
          googleTranslateScript.async = true;
          googleTranslateScript.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
          ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( googleTranslateScript );
        })();

        // CLICK DESKTOP OR TAB DEVICE
        $(document).on("click", "ul.translation-icons li.translate a",function() {
            var lang = $(this).data('lang');
            var $frame = $('.goog-te-menu-frame:first');
            if (!$frame.length) {
                alert("Error: Could not find Google translate frame.");
                return false;
            }
            $('.goog-te-menu-frame:first').contents().find('.goog-te-menu2-item span.text').each(function(){
                if($(this).html() == lang){
                    $(this).click(); 
                }
            });
            
            return false;
        });

        // CLICK MOBILE DEVICE
        $(document).on("touchstart", "ul.translation-icons li.translate a",function() {
            var theLang = jQuery(this).attr('data-lang');
            jQuery('.goog-te-combo').val(theLang);

            window.location = jQuery(this).attr('href');
            location.reload();
        });
    </script>
</body>
</html>

By the way, don’t forget to turn on your internet connection to try this feature.

Content in Indonesian
Content in English

If you have another code reference and of course it has run perfectly. Please comment on this post. I am also always open to criticism and suggestions and discussions related to technology.

Thank you for reading this post.

How to Simple Disable Right Click and Shortcut Developer Console

Hi Folks! Today I would like to share simple code to disable right click and shortcut developer console in web browser. Actually, when we use an application or system in a web browser it is possible that we can see the structure of HTML elements that build the page. But sometimes there are some developers who want to protect HTML elements, one of which is by protecting the right click on the mouse or inspecting elements with shortcuts on the keyboard.

The development of browser technology is very fast, the features in the web browser are actually also equipped with special menus for web developers such as the developer console. This is a way to inspect web elements that we access besides using keyboard shortcuts.

Returning to the title of this post, here is a simple way that you can implement into a system or web application that can at least minimize inspect elements on your web pages.


<script>
    $(document).ready(function() {

        // DISABLE RIGHT CLICK
        $(document).on({
            "contextmenu": function(e) {
                console.log("ctx menu button:", e.which); 
                // Stop the context menu
                e.preventDefault();
            },
            "mousedown": function(e) { 
                console.log("normal mouse down:", e.which); 
            },
            "mouseup": function(e) { 
                console.log("normal mouse up:", e.which); 
            }
        });

        // DISABLE SHORTCUTS
        document.onkeydown = function(e) {
            if(event.keyCode == 123) {
                return false;
            }
            if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) {
                return false;
            }
            if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) {
                return false;
            }
            if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) {
                return false;
            }
            if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) {
                return false;
            }
        }
    }); 
</script>

To use the above code, you need an additional JQuery library. If there are suggestions or comments in this article, don’t hesitate to give feedback. Thank you, Happy Coding!

How to Determine the Minimum, Maximum, Average, Odd Numbers and Even Numbers

Hello everyone, by the way, I want to share the results of my answers related to discussions in the CodeSaya.com forum. It feels incomplete if I do not share on this blog as writing, which of course I think can be useful for blog visitors

By the way, did you all know? What is CodeSaya.com?

CodeSaya.com is the Indonesian language online learning media that provides various kinds of programming classes such as Python, JavaScript, PHP and also Version Control (GIT).

Some time ago, I had time to write answers related to discussion questions with cases like this:

Mau nanya nih saya kan punya kasus diberikan sebuah function numberProcessing(numberArr) yang menerima satu parameter berupa array yang berisikan angka. Tentukan nilai minimum, maksimum, rata-rata (genapkan ke bilangan terdekat), bilangan ganjil dan bilangan genap. klo method saya ngerti tinggal math.min, math.max tapi ini pake loop .

function numberProcessing(numberArr) {
}

console.log(numberProcessing([1, 3, 5, 1, 2, 8, 10, 0, 3]));
// “Min: 0, Max: 10, Mean: 4, Odds: 1-3-5-1-3, Evens: 2-8-10-0”

Here I am trying to help with a simple code and of course with my version:

<script>
    var TempMin = TempMax = TempMean = TempOdds = TempEvens = Content = '';

    function numberProcessing(myNumber){
        var j =0;
        for(var i=0; i<myNumber.length;i++){

            if(j == 0){
                TempMin = myNumber[i];
                TempMax = myNumber[i];
                TempMean = 0;
            }

            // CHECK MIN
            if(myNumber[i] < TempMin){
                TempMin = myNumber[i];
            }

            // CHECK MAX
            if(myNumber[i] > TempMax){
                TempMax = myNumber[i];
            }

            // CHECK AVERAGE
            TempMean += myNumber[i];
            var Mean = parseInt(TempMean / myNumber.length);
            if(Mean % 2 == 1){
                Mean += 1;
            }

            // CHECK ODD && EVEN
            if(myNumber[i] % 2 == 1){
                TempOdds += (TempOdds != '' ? '-' + myNumber[i] : myNumber[i]);
            } else {
                TempEvens += (TempEvens != '' ? '-' + myNumber[i] : myNumber[i]);
            }

            j++;
        }

        Content = 'Min: ' + TempMin + 
                ', Max: ' + TempMax + 
                ', Mean: ' + Mean + 
                ', Odds: ' + TempOdds + 
                ', Evens: ' + TempEvens;

        return Content;
    }

    console.log(numberProcessing([1, 3, 5, 1, 2, 8, 10, 0, 3]));
</script>

If you have another simpler way to write the program code, you can share it via the comments below. See You, Happy Blogging!

Make a Flowchart From a Simple Tic Tac Toe Game

Continuing the previous article, I would like to share writing about flowcharts. This flowchart consists of 6 basic sub processes. Here I call it a function.

For those of you who are looking for references related to Flowcharts from similar games, you can see the picture here.

Flowchart From a Simple Tic Tac Toe Game

This is a Flowchart of a simple game, of course there will be many further developments. So it is likely that the form of the Flowchart will also be extended If there are ideas or objections, immediately let me know as soon as possible. Thanks.

Keep smiling and fighting! Regards

Make a Pseudocode From a Simple Tic Tac Toe Game

Yesterday, I got project from my client. This project reminds me of subjects when I was in college. Yes Right, Algorithms and Programming Courses. This is a project that is quite challenging for me. Because I haven’t talked about this in a long time.

I was asked to create a pseudocode and flowchart from a simple program created by my client. In this post, I will try to write about pseudocode. Because I know, this will be very exciting and also long. For those of you who don’t know what Pseudocode is. You can see the explanation in this link.

Okay, here I will try to share the results of my work. Oh no, the result of my memory after almost 3 years of forgetting about this.

 Title Pseudocode
 Pseudocode Game Tic Tac Sederhana
  
 Declaration
 MATRIX_SIZE: int
 matrix[3][3]: array
 win: char
 splash, init, draw, run, check, finish: void
  
 Implements
 Start
     Function main
         Call splash
         Call init
         Call run
         Call finish
         return (0)
     End Function
  
     Function splash
         Print 'Game Tic Tac Sederhana'
         Print 'Untuk 2 Pemain'
         Print 'Refky Satria'
     End Function
  
     Function init
         i, j:int
         win <- ' '
  
         For i = 1 To MATRIX_SIZE Do
             For j = 1 To MATRIX_SIZE Do
                 matrix[i][j] <- ' '
             End For
         End For
  
     End Function
  
     Function draw
         i, j: int
  
         Print '0 1 2'
         Print '218, 196, 196, 196'
         Print '197, 196, 196, 196'
         Print '197, 196, 196, 196, 191'
  
         j <- 0
         For i = 1 To 5 Do
             If (i % 2 == 0) Then
                 Print j, 179, matrix[j][0]
                 Print 179, matrix[j][1]
                 Print 179, matrix[j][2], 179
             Else 
                 Print '197, 196, 196, 196'
                 Print '197, 196, 196, 196'
                 Print '197, 196, 196, 196, 180'
             End If
         End For
  
         Print '192, 196, 196, 196'
         Print '193, 196, 196, 196'
         Print '193, 196, 196, 196, 217'
  
     End Function
  
     Function run
         p: char
         i, x, y, m: int
  
         p <- 'X'
         i <- 0
         m <- 0
  
         do
             Call draw
  
             If (m == 1) Then
                 Print '! Input tidak valid, ulangi'
             Else
                 Print '\n\n'
             End If
  
             Print '> Posisi p'
             Read x
             Read y
  
             If (x > 2 || x < 0) || (y > 2 || y < 0) Then
                 m <- 1
             Else 
                 If (matrix[x][y] == ' ') Then
  
                     matrix[x][y] <- p
  
                     If (p == 'X') Then
                         p <- 'O'
                     Else 
                         If (p == 'O') Then
                             p <- 'X'
                         End If
                     End If
  
                     If (m == 1) Then
                         m <- 0
                     End If
  
                     win <- Call check
                     i++
                 Else 
                     m <- 1
                 End If
             End If
  
         while((i < 9) && (win == ' '))
  
     End Function    
     Function check
         i: int
  
         For i = 1 To 3 Do
             If (matrix[i][0] == matrix[i][1]) && (matrix[i][0] == matrix[i][2]) Then
                 return (matrix[i][0])
             End If
         End For
  
         For i = 1 To 3 Do
             If (matrix[0][i] == matrix[1][i]) && (matrix[0][i] == matrix[2][i]) Then
                 return (matrix[0][i])
             End If
         End For
  
         If (matrix[0][0] == matrix[1][1]) && (matrix[1][1] == matrix[2][2]) Then
             return (matrix[0][0])
         End If
  
         If (matrix[0][2] == matrix[1][1]) && (matrix[1][1] == matrix[2][0]) Then
             return (matrix[0][2])
         End If
  
     End Function
  
     Function finish
         Call draw
  
         If (win == ' ') Then
             Print 'Seri'
         Else 
             Print 'Menang'
         End if
  
     End Function
  
 End 

I also took some references from various sites, like this. For Pseudocode itself, there is indeed no standard form in the scientific world. I also have not found a reference to the standard form. Of course, the Pseudocode that I wrote is not necessarily true. There might be many improvements in it. Therefore I am very grateful, if you want to give a rebuttal or other opinions regarding the writing of the Pseudocode that I made. So we can both learn better. Regards.

How To Check The Laravel Version

Hi, folks! Today I would share a simple post related to the Laravel Framework. Sometimes in some cases, developers usually forget this simple thing, which is checking the version of their framework when they use plugins or additional libraries.

While using the Laravel Framework, you can use two options, namely by using the command-line interfaces (CLI) or checking a file contained in the project.

I try to use CLI to check the version. Open command prompt (Windows) or terminal (Linux / mac). After that, go to the active directory of your web folder. And then enter the command:

php artisan --version

Checking Version Via The CLI

Now, we try to see the version by accessing the files contained in the folder “your_project/vendor/laravel/framework/src/Illuminate/Foundation/Application.php”. And look at the version on the constant value.

Checking Version Via The File

Now, did you know how to check the version in Laravel Framework? I hope you know this now.

Thank you for reading my post! Happy Coding!

Merger PDF Files Using PDFMerger

Last weekend I got a project from my client. The project is simple enough to create a multiple attachment form with the .pdf extension format, then merge the results of the attachment into a single file that can be downloaded. Previously, I had never handled this simple case. But after implementing it, I managed to make it.

In this case, I use the CodeIgniter Framework Version 3.1.10. Of course, with the addition of a library that is PDFMerger and TCPDF that I get here.

In developing it, of course, there are some obstacles that I face. I get an error like this:

Fatal error: Class ‘PDFMerger’ not found in

This makes me have to search for deeper code related to the library that I use. I tried to find references related to errors that I found. And luckily I got the right solution to this problem.

Multiple uploads with a single form

I also made several forms, which will determine the order in which the files will be the merger.

Uploads with several forms

If you want to see the sample code that I developed, you can see it in this repository.

Thank you for reading my post! Happy Coding!

How to Create Annotation On Chart.js Using the Additional Library

In many cases, sometimes we need a Chart view that can explain in full the information needed. You may often use the threshold as a reference in achieving something.

In this post, I will try to use the threshold in a Chart that serves as a tool in presenting information that is easy to understand.

Like the previous post, I still use Chart.js as the Chart library to present data sets visually. Here I use an additional library called Chart Plugins Annotation. You can download it here.

After successfully downloading it, you can insert it into your project as a library. Then we can add a few lines in javascript to determine the threshold value. In this case, I tried to give a threshold value of 70.

$(function() {
    var color = Chart.helpers.color;
    var UserVsMyAppsData = {
        labels: ['29 Sep 2019','30 Sep 2019','01 Oct 2019','02 Oct 2019','03 Oct 2019','04 Oct 2019','05 Oct 2019'],
        datasets: [{
            label: 'Users',
            backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
            borderColor: window.chartColors.red,
            borderWidth: 1,
            data: [53,117,79,56,45,89,61]
        }, {
            label: 'My Users',
            backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
            borderColor: window.chartColors.blue,
            borderWidth: 1,
            data: [43,105,76,50,33,97,52]
        }]
 
    };
 
    var UserVsMyAppsCtx = document.getElementById('UsersVsMyUsers').getContext('2d');
    var UserVsMyApps = new Chart(UserVsMyAppsCtx, {
        type: 'bar',
        data: UserVsMyAppsData,
        options: {
            responsive: true,
            legend: {
                position: 'bottom',
                display: true,
 
            },
            "hover": {
              "animationDuration": 0
            },
             "animation": {
                "duration": 1,
              "onComplete": function() {
                var chartInstance = this.chart,
                  ctx = chartInstance.ctx;
 
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';
 
                this.data.datasets.forEach(function(dataset, i) {
                  var meta = chartInstance.controller.getDatasetMeta(i);
                  meta.data.forEach(function(bar, index) {
                    var data = dataset.data[index];
                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
                  });
                });
              }
            },
            title: {
                display: false,
                text: ''
            },
            annotation: {
              annotations: [{
                type: 'line',
                mode: 'horizontal',
                scaleID: 'y-axis-0',
                value: 70, // SET THRESHOLD
                borderColor: 'rgb(75, 192, 192)',
                borderWidth: 4,
                label: {
                  enabled: false,
                  content: 'Threshold'
                }
              }]
            }
        }
    });
});

After the line is added, we see in the web browser that the threshold is visible.

Chart with the threshold value

Thank you for reading my post! Happy Coding!

How To Show Values On Top Of Bars in Chart Js

Hi Guys, in this post I would share how to show values on top of bars in Chart.js. My project used library Chart.JS to display a Chart from data sets.

Previously, I have made a Chart in the form of a bar like a picture below. But on that Chart, I don’t know the exact value of each bar. To find out, I have to mouse over the Chart. Of course, this is not effective, if we want to present the Chart to the Client.

Chart without value on the top bar

I’m trying to find a reference on how to display the values in each of the bars above. But I did not find the documentation on the official website. Until finally I found the solution through Stack Overflow, on a similar discussion topic. Then I tried to implement it in my project. And in the end, I can see the value of each bar right above it. By the way, thank you so much for Stack Overflow!

Chart with value on the top bar

Regarding this project, I use Chart.JS version 2.8.0 with Utils. And for those of you who want to see the code snippet, can be seen below.

$(function() {
	var color = Chart.helpers.color;
	var UserVsMyAppsData = {
		labels: ['29 Sep 2019','30 Sep 2019','01 Oct 2019','02 Oct 2019','03 Oct 2019','04 Oct 2019','05 Oct 2019'],
		datasets: [{
			label: 'Users',
			backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
			borderColor: window.chartColors.red,
			borderWidth: 1,
			data: [53,117,79,56,45,89,61]
		}, {
			label: 'My Users',
			backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
			borderColor: window.chartColors.blue,
			borderWidth: 1,
			data: [43,105,76,50,33,97,52]
		}]

	};

	var UserVsMyAppsCtx = document.getElementById('UsersVsMyUsers').getContext('2d');
	var UserVsMyApps = new Chart(UserVsMyAppsCtx, {
		type: 'bar',
		data: UserVsMyAppsData,
		options: {
			responsive: true,
			legend: {
				position: 'bottom',
				display: true,

			},
			"hover": {
		      "animationDuration": 0
		    },
			 "animation": {
			 	"duration": 1,
		      "onComplete": function() {
		        var chartInstance = this.chart,
		          ctx = chartInstance.ctx;

		        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
		        ctx.textAlign = 'center';
		        ctx.textBaseline = 'bottom';

		        this.data.datasets.forEach(function(dataset, i) {
		          var meta = chartInstance.controller.getDatasetMeta(i);
		          meta.data.forEach(function(bar, index) {
		            var data = dataset.data[index];
		            ctx.fillText(data, bar._model.x, bar._model.y - 5);
		          });
		        });
		      }
		    },
			title: {
				display: false,
				text: ''
			},
		}
	});
});

Thank you for reading my post! Happy Coding!

Create your website with WordPress.com
Get started