DEV Community: Catur Wicaksono

Simple Encode And Decode With Javascript

Catur Wicaksono — Tue, 14 Feb 2023 01:34:03 +0000

In this short article, we will try to encode and decode a string using JavaScript easily and practically. Sometimes we are faced with conditions for encoding and decoding when coding. Javascript has several methods for doing this, but in this short article, we'll try to do it easily and practically.

Base64

One method that is quite popular for encoding and decoding a string is base64. For those who are familiar with the PHP language, this method seems familiar. The question now is, how to do it using javascript. Here's how to do it:

the method above is how to do encoding and decoding using javascript.

Hex (Alphanumeric)

Using base64, the results that appear may contain special characters, such as the "=" character. If we want the result without using special characters, we can use another method, namely with hex. Here's how to do encoding and decoding using the hex method:

the method above is how to do encoding and decoding using hex in javascript. Using this method, the encoding results will be free of special characters, and produce alphanumeric results.

Epilogue ☕

Thank you for reading this article, I hope this article is useful for you, if you learn something new from this article, please provide feedback on this article, or give us criticism, suggestions so that it can be even better. Maybe you want to buy me a cup of coffee?

What's The Difference Between Tailwindcss and UI Framework (Bootstrap, etc.)

Catur Wicaksono — Sat, 10 Dec 2022 01:30:16 +0000

In this short discussion, we will briefly discuss what Tailwind CSS is and how it is different from the UI kit components framework that we often use, such as Bootstrap, Material UI, and so on. Tailwind is basically the same as a general CSS framework, but this library is built at a lower level than a UI kit framework. With this concept, Tailwind CSS is starting to be very popular among developers, especially front-end developers, because they can develop the appearance of their applications more flexibly according to their wishes.

In contrast to UI kits framework such as Bootstrap, Tailwind CSS does not provide instant components. For example, in Bootstrap to make a button, we only need the btn class and the class to determine the variant of the button we want, for example the primary button, we can use btn-primary, and the element will automatically become a beautiful button element, of course with Bootstrap style. Notice the example below.

The code above will display a display like the following.

Using Bootstrap, we can easily make a button look beautiful, just using a class.

Tailwind can also do the same as Bootstrap above. Because Tailwind is built with a low level concept, it is necessary to unite enough classes to make the button look like what Bootstrap did above. Using Tailwind, we need to assemble a class because in Tailwind there is no instant class that can instantly form a button component instantly. Look at the example in the line of code below.

The code above will display a display like the following.

If we pay attention, Tailwind requires a series of classes to form a button appearance which is quite similar to what Bootstrap does. From the two examples above, we will be able to understand more clearly about Tailwind and Bootstrap.

Which One Is Better

Based on our experience using the Tailwind and UI kit components framework, we can't definitively say which is the better of the two. Both of these libraries have their own advantages and disadvantages. In this case we will discuss Tailwind and Bootstrap which represent UI kits. Using Bootstrap, it is very easy for us to create a component instantly, and it will speed up the work on the front-end of our application, but this sacrifices flexibility. We can't be flexible in making UI components, to be more flexible, we need to do custom CSS outside of the Bootstrap class itself.

Using Tailwind, maybe we need to work more to make a certain component name, but this is precisely what front-end developers like a lot. Front-end developers love the concept of Tailwind because they can get creative with creating their own views. Meanwhile, Tailwind also provides a feature to extract existing classes to combine them into new classes. Take a look at the example below.

The code above will display a display like the following.

The first picture above is that we extracted the component from the Tailwind class by creating a new class. In the second picture we implement our new class as a result of the component extraction in the second button example. In this way, we can almost use Tailwind which is similar to Bootstrap, but more flexible and can be customized easily.

Conclusion and Tips

From our discussion above, at least we can distinguish between Tailwind and the CSS framework with the UI Kit concept. In its use, which one will we choose, depending on our needs. Based on experience in building application front-ends, it is highly recommended to combine the UI framework kit with Tailwind. The UI Kit framework is used to generate components so that we can create views quickly, and Tailwind as a component for customizing our UI components. For example we can use Bootstrap or Material UI (MUI) as a component generator, and Tailwind to do custom views.

Epilogue ☕

React Efficiency with React.memo

Catur Wicaksono — Wed, 07 Dec 2022 08:14:50 +0000

In this article, we will discuss one of the tools provided by React to make our React application lighter and more efficient. We will discuss React.memo, this is different from the useMemo Hook in React. In short, useMemo is used to retain a value to avoid unnecessary re-rendering, for more details about useMemo, you can refer to the following article:

React useMemo

React.memo is different from useMemo, React.memo is useful for maintaining child components to avoid unnecessary re-rendering. For further discussion, we will use a case study example. First, please consider the following code sample.

The sample code above, when we run it, will look like this:

In the simple application above, we have two different components, named ParentComponent and ChildComponent which are in separate files, ChildComponent will be loaded in parentComponent (line 21). Each component has its own state and has a function for setState which is used in the onClick event of each component, in the parentComponent on line 10, and the childComponent on line 9.

If we take a quick look, it seems that there is nothing wrong with the results of the code above, but if we pay closer attention, we will find something wrong. We try to open the console in our browser, for firefox you can press the ctrl + shift + k keys, if successful, a display will appear as follows.

Pay attention to our browser console, there will be written "Parent Component Rendered" and "Child Component Rendered". The log indicates that there is rendering of the ParentComponent and ClientComponent.

If we press the "Increase Parent State Value" button, you will see changes to the parent state value. If we look at the log in our browser console, we will get a log like the following image.

We can note that in the console there are logs "parent function fired", "Parent Component Rendered" and "Child Component Rendered".

“parent function fired” log: indicates that the setStateHandler function in the parent component has been executed.
“Parent Component Rendered” log: indicates that the ParentComponent has been rendered.
“Child Component Rendered” log: indicates that ChildComponent has been rendered.

The thing that needs to be considered is, when we press the "Increase Parent State Value" button, what actually changes is the state in the ParentComponent, under normal conditions, what should be re-rendered is only the ParentComponent, but in the simple application example above, the ClientComponent follows. is re-rendered, while no changes are made to the ClientComponent. Re-rendering this ClientComponent is an unnecessary action.

Treating this re-rendering of ClientComponent may not significantly affect the performance of this simple example application, because not so many resources are used. This will only be felt if the ClientComponent uses a lot of resources, for example making requests to the API and rendering large amounts of data, or doing large amounts of calculations. Unnecessary re-rendering like this must be handled, so that the application will run efficiently and effectively.

Using React Memo

React has provided facilities to deal with problems as described earlier. To solve this problem we can use the memo method in the react library. For implementation using this memo method, we can pay attention to the example below.

We can use the memo method when exporting the component as in the example above at line 26.

After using the memo method, react will retain the ClientComponent, and guard against unnecessary re-renders. As long as there are no changes to the ClientComponent, the ClientComponent will not be rendered again. In our previous simple application, let's pay attention to the console, the following is the display of the browser console in our simple application at the start of the render.

The image above shows that nothing has changed from the previous render, we can still see that we can see the "Parent Component Rendered" and "Child Component Rendered" logs. The log indicates that there is rendering of the ParentComponent and ClientComponent.

We can see the difference, if we press the "Increase Parent State Value" button, and if we look at our browser console, we will find a log like the image below.

If we pay attention, we can no longer find the "Child Component Rendered" log. The results of the log indicate that the ClientComponent has not been rendered again when pressing the "Increase Parent State Value" button. Thus we have succeeded in preventing unnecessary re-rendering of our simple application. With this technique, our application will become more efficient and more effective.

Epilogue ☕

ReactJs using Hook useMemo

Catur Wicaksono — Sun, 06 Nov 2022 00:33:48 +0000

This article will discuss one of the ReactJS Hooks that is quite important for React developers to understand, namely useMemo. The useMemo hook is used to make our code more efficient, but there are still many React developers, especially beginners, who haven't implemented it yet. In simple terms, if we add a value to useMemo, then that value will be remembered and will not be re-rendered in case of re-rendering until certain conditions have been determined when the value must be re-rendered.

We will try to discuss this further by using an example, consider the following code:

in the code example above we try to create a function called expensiveProcessing(line 11), imagine this function performs a very heavy process, but this time, this function only performs simple calculations. In the function, we add console.log() to log in to our browser console later, as a marker that this function is executed and performs calculations. After finishing creating the expensiveProcessing function, then we run and store the return value of the expensiveProcessing function in the value variable (line 16), then display it in the h1 element tag on (line 21).

In the next section, we create a button element (line 22) that executes the stateChangeHandler function (line 7). The stateChangeHandler function is used to increase the state value with a value of 1, using the setState function. The value of the state we display in the button element, so that every time the button is pressed, the sentence in the button will display the number of times the button has been pressed, taken from the state value. From the code example above, if we run it, it will more or less look like this:

The display in our previous sample code involved is quite simple and simple as above, at a glance nothing is wrong, let's take a deeper look at what is wrong with the results of our code above. From the results of running the code above, we open the console in our browser, for those who use firefox can display with the shortcut ctrl + shift + k. To be more clear, let's try to refresh the page. After we successfully refresh we will find a log that reads "expensive Processing function has run" which indicates that the expensiveProcessing function has been run. The display console will more or less look like the following:

note: there may be confused why there are 2x "expensiveProcessing function has run" which indicates the function has been executed twice in every page refresh. This happens because in index.js we run our App component on <React.StrictMode> which causes setState to run twice in development mode. In this case, this is not a problem, we just need to understand the difference

We have successfully run the above simple application and displayed the console in the browser, but so far nothing seems to be wrong. Now it's time to take a closer look at our simple application. If we try to press the "click" button we will again see the log on the console that reads "expensiveProcessing function has run" again. This happens because the expensiveProcessing function is restarted after we press the “click” button, and this means that our function is recalculated.

This process may not be very noticeable to us in this simple application, but it will be very annoying when our application is very complex and related to many resources, and makes our application very heavy. Then we might ask, why did this happen? We can see that the button's click event is handled by the clickHandler function, which does setState. When we setState on our app, our app will re-render. This causes functions that are in the same component and their descendants to be executed again.

The more serious question now is, how to solve this? React seems to have anticipated this, thus providing a useMemo Hook that serves to maintain a value, so that if a value does not change, it will not be reprocessed during a re-render, unless it is needed. This facility will be very useful for us to make our application lighter and more efficient. Next, we will immediately try to practice using it.

Using useMemo

To solve the above problem by using useMemo, we can do it as in the following code sample:

notice in the code sample above, we wrapped the expensiveProcessing function into useMemo, that's all we need to do. The way to use useMemo is no different from using useEffect or useCallback, only includes a callback function in the first parameter, and an array of data in the second parameter, which is useful for marking when the function in useMemo needs to be reprocessed.

After we have successfully implemented useMemo as above, now we try to run the sample code above, in the same way as before, and it will look like in the following image:

At first glance, there is nothing different from the time before we used useMemo before, but let's take a closer look. If we try to press the click button, we will be able to see that the state has changed marked by the number on the button will continue to grow, but pay attention to our console, there are no more logs like before. With no more logs in our console, it indicates that the expensiveProcessing function has been protected from the effects of re-rendering from setState.

The second parameter in useMemo

If we notice, useMemo has two parameters, the first is a callback where we run our function, and the second is to indicate when the function in useMemo should be run again. If we modify our last useMemo to look like this:

so our code will be like this now:

In the example above, we add the state to the array in the second parameter, like this, useMemo will mean, for every state, there is a change, then the function in useMemo will be rerun. If we run our simple example application using the modifications as above, we will find that every time we press the button, we will find a log on our console "expensiveProcessing function has run" which indicates that the expensiveProcessing function is re-run every time the button is pressed.

This happens because we know that every time a button is pressed, the onClick event will run the buttonHandler function which will change the state using setState, it will cause the state value to change, then useMemo will respond. The system is similar when we use useEffect.

Conclusion

The useMemo hook in React is a tool that helps us to make our code even more efficient, by preserving a value in our application so that it is not reprocessed during a re-render of our application. By using useMemo we can also determine when a value needs to be reprocessed, thus making the value more dynamic.

Epilogue ☕

Best Implementation for Form Fields in ReactJS

Catur Wicaksono — Sat, 29 Oct 2022 04:05:32 +0000

This article will discuss the best implementation of creating a form field with React JS. The focus of this discussion is how to overcome the state in our form field. Often React JS programmers make mistakes that they may not even notice, but which affect the performance of our applications.

When creating fields in React JS forms, many recommend adding a listener to each field and setState on each field's onChange event. For example, consider the following line of code:

The picture above is a simple use of setState on the onChange event on the field, we add a function to handle the event on the field.

then in the function, we change the state by using the name property in the field obtained from e.event.name with the value obtained from the field value obtained from e.target.value. For those who don't know, why to use a callback function when using setState, you can read the following article:

Best Implementation of setState in ReactJs

How to use it like this is very common. Let's note once again, using setState on onChange in the field will cause the rendering of elements in every single letter that the user enters into the field.

By far one of the best recommendations for building applications using React Js, we must make our application as efficient as possible by minimizing components to be re-rendered if there is no need to re-render.

Thus, using setState on onChange is not an efficient method, and we need to avoid it. The next question arises, then how to replace this method? In this article we will discuss, there are at least two methods to do it, firstly we can use the useRef, and secondly, we can use debounce or throttle method on our onChange field event. More about debounce can read the following article:

Debounce and Throttle

We will discuss them one by one in the following.

First Method, Using useRef

In this first method, we will solve the above problem by using the useRef hook. From the previous line of code, we change to be like this:

In the example above we use useRef to address our field. The idea is very simple, we just need to make a ref using useRef

then we add the ref that we have made into the appropriate field

then when we will take the value of the field that we have entered the ref in it, we only need to take the properties of the ref as follows

to retrieve the value from the ref we use the method nameRef.current.value. Then it's up to us what we will use it for.

By using this method, looks shorter and easier, compared to the previous method, and is certainly more efficient because it does not involve setState in the process of inputting data into the field, which means there is no re-rendering, and each user types every letter in the field, no no events are triggered.

The second Method, Using Debounce or Throttle

Sometimes we need to monitor changes in our text field to trigger an event, for example when we create an autocomplete field, example on the google.com search page when we type a few letters there, a dropdown will appear that gives us search suggestions, even though we haven't finished in entering words into the field.

To monitor changes in our text field, it is not recommended to do every letter typed, it would be more efficient for us to do it periodically using throttle or after the user has finished typing using debounce, for those who do not understand what debounce and throttle are, can read the article the following first.

Debounce and Throttle

We will try to use the throttle and debounce to solve this problem. To use the throttle or debounce, in this article we will use the lodash library. If we have not added the lodash library to our application, we can add it using the following command:

Once we have successfully added lodash, we are ready to use the throttle or debounce.

Using Throttle

Using throttle, the event function will be executed periodically when the user types letter by letter in our text field. To use the throttle to solve the problem in the previous code sample, consider the following code sample:

in the code example above, it is very similar to using setState in the previous onChange event, only the difference is that we wrap setState in the throttle function callback

and we set the time to 1000 ms or 1 second, we are free to enter any time config (calculated in milliseconds), then we enter the function into the function that will be executed on the onChange event in the field

by configuring 1000 ms or 1 second on the throttle function, it means that the setState function will run for one second as long as the user is still typing something into our field.

By using this method, we will save rendering on our components, and we can run certain functions as long as the user is still typing something into the text field, such as displaying dropdown suggestions or so on.

note: in the code example above, we use useCallback to define the throttle function, this method aims also for efficiency we can just eliminate the use of useCallback in the above method. We will discuss useCallback in the next article.

Using Debounce

Using debounce, the event function is not immediately executed if the user is still typing something into our field. The new event function will respond sometime after the user no longer types anything into our field. To troubleshoot the problem with the previous sample code, consider the following code:

The way to use debounce is very similar to throttle, we just need to wrap the setState function into the callback function debounce like this

then we set the time to 1000 ms or 1 second, we are free to enter any time config (calculated in milliseconds), then we enter the function into the function that will be executed on the onChange event in the field

in the above line of code, we delay our event listener one second after the user no longer types anything into our field, if the user is still typing with a tempo of less than one second, the function on change will still be held.

By using this debounce, we have made our program code much more efficient, and it is no longer a problem if our application has grown quite large and complex.

note: in the code example above, we use useCallback to define the debounce function, this method aims also for efficiency we can just eliminate the use of useCallback in the above method. We will discuss useCallback in the next article.

Epilogue ☕

Best Implementation of setState in ReactJs

Catur Wicaksono — Wed, 26 Oct 2022 03:34:26 +0000

This short article will try to give recommendations for when we will use React Hooks setState in our ReactJs application. For application developers who use ReactJs as an SDK, we will be very familiar with the name React Hooks in this discussion is the setState Hook, moreover, in the latest React version we have been strongly directed to use function components in creating components, then useState will become mandatory for we understand.

This useState React Hook is a mechanism that allows us to manipulate the state of function components, instead of setting the state on class components, which are now deprecated.

Many React developers develop their apps in their own best way. This time we will also discuss one technique in using setState. First, we will create a simple application to increase and decrease a number, as in the following code sample:

The above component is a simple application to increase and decrease the number stored in the state, and manipulated in the increaseNumberHandler function, and the decreaseNumberHandler function, which is called on the onClick event of the button.

In this discussion, it is necessary to pay attention to the function section for state manipulation, one of which is the following increaseNumberHandler function:

The example code above is a way of using useState in general and is still widely practiced by programmers, but it should be noted that this method is not a good implementation, and has many weaknesses. First, how to use useState like this, causes an infinity loop when implemented into useEffect, and this sometimes goes undetected and has the potential to crash our application due to a memory leak. For a more complete discussion of this, can read the following article.

Best Implement setState on useEffect

The second weakness is in this way it will be very inconvenient if we want to process the state in the same function, consider the following code example:

With layman's logic, we assume that the above function will increase the number by a multiple of 2, but if we run the code above, the function will still increase by a multiple of one. This will be quite confusing, and will probably make our program code have to be modified in such a way that it might make our program code inefficient. Guess will try to discuss how to solve it.

Callback Function

One way to do setState is to use the callback function on setState. consider the following code example:

when we use the callback function on setState, the callback function will receive the current state parameter, and return the desired new state value. Next, we will try to use the setState method using this callback, in states with primitive data and also in states with data in the form of objects.

setState With Primitive Data

For an example of using a set state using primitive data, we will try it using the previous code example, because in the previous code example we also use primitive data in the form of integers. To do the same thing in the previous example, we can do it in the following way:

Thus we can solve the problem in the previous session. Because by using a technique like this, we can set any state we want in the same function, but the state will be updated every time we set the state, even though it's in the same function scope, consider the following example:

by using the above technique, the increase Number Handler function will increase the number value to a multiple of two. Here are the changes we have made:

setState With Data Object

The previous example is how to use useState on primitive data, this time we will try to use setState by using object data. To do this, we will first create a simple application that only serves to display the results of input data, as in the following example:

The above component will display a paragraph containing the values of the state name and address which can be manipulated by the nameHandler and addressHandler functions that are called on the onChange event of the input element. In this discussion session, take a look at the functions to manipulate the state, one of which is the nameHandler function:

The above code example is how we try to change the name property on our state object by using the input field value retrieved using e.target.value. This setState method is the most common, namely by copying the value of the object in the current state, using …prevState, then replacing the desired property value with a new value. To change the value of another property, namely address, we can use the same method, only changing the name of the property to be set with the address, accompanied by the value to be replaced, as in the other handler function, the addressHandler function:

Conclusion

To setState on the useState hook in our react app, it's highly recommended to always use the callback function and get used to it. Although it looks a bit longer even to change the state a little, this method can protect us from errors in our system later, which we don't want. To setState using primitive data we can do like the following schema:

To setState using a data object we can do something like the following schema:

Epilogue ☕

Best Implement setState on useEffect

Catur Wicaksono — Fri, 21 Oct 2022 03:32:45 +0000

This time we will discuss the best implementation in using setState in useState in useEffect in React. React developers will often be faced with situations where they have to setState on useEffect, such as when we want to load data from the database and want it to be stored in a state, then we have to retrieve the data in the database and save the query results to the state using useEffect. However, this implementation often creates problems that are sometimes not realized and can have fatal impacts.

Implementation of setState on useEffect

On this occasion, we will discuss states with primitive data values (integers, strings, booleans, etc.) and states with data values in the form of objects.

State with primitive data

In a state that is implemented using primitive data, it's actually not that complicated and has been widely exemplified in various forums and React's own documentation, here's the implementation:

State with a data object

Then for the state that is implemented using object values, it is a little complex but powerful enough for various needs. An example of an initialized state using an object value is as follows:

Case study

In this discussion, we will use states with object values that are more complex than primitive values. Hopefully, if you can understand this case study, you will also be able to understand states with primitive values.

The code above explains that we have a state object with three properties: foo, bar, and baz. To update the state value we can use the set state function as follows:

So, if we implement it in our previous source code, we get the following:

If we apply the code as above, then when we run it, there is nothing strange at first glance, but look at the console log developer tools in our browser (or press the F12 key and then navigate to the console window). Note that the following error will occur:

"Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render."

The error above is caused by the rendering of repeatedly and continuously and indefinitely or an infinity loop. If left unchecked it will eat up memory and will be fatal.

Solution Step 1

The first solution to the error is as explained in the official react hooks effect documentation, that we need to capture the function in the first argument of the array in the second argument, here's an example:

Notice the second argument, the array in the second argument is used to accommodate any variables that are monitored for changes, if the variables contained in the array change then useEffect will re-render the existing function on it.

If we use an IDE such as Visual Studio Code, it will be recommended what variables need to be added to the array, by giving a warning to the array.

OK, let's fix our function above:

This way there will be no more errors like the one above. But notice again, that there is still a warning there (in the developer tools console):
"React Hook useEffect has a missing dependency: 'state'. Either include it or remove the dependency array. You can also do a functional update 'setState(s => ...)' if you only need 'state' in the 'setState' call react-hooks/exhaustive-deps"

This warning appears because we are advised to add a state to the second argument array of useEffect, in this way, useEffect will not re-render its callback function unless there is a change in the state. let's fix our previous code:

This way we have removed the warning on our console. but there will be an error again like before.
"Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render."

Explanation

The error above is an error that occurs because changes and monitoring co-occur, or in the same context, when we use …state then we are making changes to the state, while the state is being monitored for changes by useEffect, so that due to a state change, useEffect re-rendering the callback function, once it is re-rendered, there is another change to the state in the …state section, and it will keep repeating like that, then there will be an infinity loop on useEffect.

Solution Step 2

To solve the above error, we can use a callback to setState in useEffect as described in React's documentation. let's fix our previous code:

Using the callback on setState, the state will no longer be read by useEffect to be monitored for changes, so we no longer need to add state to the array in the second argument. this way there will be no repeated and unlimited rendering, and no warning will appear to add a state to the second argument array in useEffect.

Epilogue ☕

Debounce and Throttle

Catur Wicaksono — Tue, 18 Oct 2022 01:37:26 +0000

This article will briefly discuss two techniques in programming to control the execution of a function, this is often applied in an event handler. The more modern this is, the application is made more interactive with the user, for example, if we have an auto-scroll page, which can load data automatically when the user has reached the bottom of our page. Techniques like this, require a scroll detector in our application, to see if the user has arrived at our final page or not.

For this purpose, we can add an event listener to the scroll event, which calls the function when scrolling occurs on our page. This method is very inefficient, just imagine if in every function in the event listener we perform a fairly heavy action, such as having to re-render the page components, or having retrieve data from the database. In fact, once scrolling on a page, it can trigger many events at once. It could be that for one request there are tens or even hundreds of requests, because of the mouse scroll event.

David Corbacho explained that in 2011 there was an issue on Twitter, when we scrolled through our Twitter feed, the application slowed down and was no longer responsive. John Resig thinks it's not a good idea to put expensive functions into scroll events. So we need a method to solve this kind of problem, and there is a method to hold the execution of a function called debounce and throttle. These two methods are the same, but with different implementations.

Debounce

Debounce is a method or technique used to hold the execution of a function for a certain period on the event listener after the event listener is no longer responding. The simple analogy is, when a bus stops at the bus stop, the bus will wait for five minutes, if there are passengers on the bus, the bus will wait another five minutes, if there are more passengers before five minutes, the bus will wait again. again for five minutes, and so on. After five minutes there are no more passengers, and the new bus will start.

The illustration above, if we implement it into programming, we can see the scheme in the following figure:

In the picture above e represents an event, and the above schematic is made to bounce for five seconds. We can note that no matter how many times the event occurs, as long as it is still under the five-second period, the function will be delayed, until the last event, and will wait until five seconds later, if there are no more events, the new function will be executed.

Throttle

Throttle is a method similar to debounce, except that the throttle does not hold the function on the event listener forever, but the throttle will continue to function at certain intervals as long as the event listener is still responding to an event. If you refer to the previous illustration, when a bus stops at the bus stop and will wait for five minutes, no matter how many people will get on the bus, after five minutes, the bus will start, as well as at the next stop, and so on.

The illustration above, if we implement it into programming, we can see the scheme in the following figure:

In the image above the e represents an event, and the schematic above makes the throttle for five seconds. We can note that no matter how many times the event occurs, as long as it is under a five-second period, the function will still run for five seconds, until the last event, and will wait until five seconds later, if there are no more events, then a new function will run again.

Implementation

Both of these methods will be very efficient if used to handle an event that occurs quickly and tightly, by carrying out the same function. Like handling a scroll event, changing events on a field, and so on.

Epilogue ☕

Tips For Using "Nested If" In Programming

Catur Wicaksono — Mon, 17 Oct 2022 02:48:26 +0000

This time we will discuss simple tips for making programs. We can implement these tips in any programming language, but this short article will demonstrate using the Javascript language. The discussion this time is about nested if in a function.

Sometimes we meet cases that require us to make decisions in decisions, for example, this:

The example above is that we want to return the string "Hallo" if the signedIn variable is true, and the userId variable is not null. It might seem normal at first glance, but it would be terrible if there were so many condition checks, not just the two in the example above. it will look like "callback hell"

the clean way to do it in the code example above is like this

or in the Javascript language you can also use a short way to be like this:

by using this method, there are no longer nested if, and avoid "callback hell". This method can also be done in other programming languages with customized modifications.

Epilogue ☕

MeTalk: Pengalaman Dengan Docker Dan Google Cloud

Catur Wicaksono — Mon, 03 Oct 2022 13:51:44 +0000

Artikel ini adalah sesi berbagi pengalaman dari yang pernah saya alami sebagai developer. Apa yang saya tulis pada artikel ini merupakan opini pribadi.

Dari waktu ke waktu teknologi terus berkembang, begitu juga dengan bahasa pemrograman. Tahun 2022 ini, mulai banyak tren mengembangkan program aplikasi terutama web service dengan menggunakan bahasa yang beraneka ragam. Seperti Node.Js, Python, Go, dan masih banyak yang lain. Baru-baru ini dan masih dikembangkan adalah dengan menggunakan bahasa Dart, meskipun tujuan utama dari bahasa ini pada awal diciptakan adalah untuk pengembangan UI, namun belakangan muncul library-library yang memungkinkan bahasa Dart untuk melakukan manajemen server dan database.

Saya sendiri salah satu yang tertarik untuk menggunakan bahasa-bahasa tersebut untuk membuat REST API. Sebelum sekitar tahun 2019-an, untuk melakukan deployment aplikasi web dengan menggunakan bahasa-bahasa ini, sudah didukung CPanel pada shared Hosting, sehingga tidak begitu sulit, kita hanya perlu sedikit konfigurasi, dan deployment aplikasi kita berhasil.

Sekitar tahun 2018, mulai tren server dengan VPS, dan layanan deployment untuk Node, Typhon, dll. juga sudah mulai dihilangkan dari layana para penyedia hosting. User yang akan melakukan deployment aplikasi-aplikasi tersebut harus menggunakan VPS, yang tentu harganya jauh lebih mahal dari shared hosting pada umumnya. Dengan menggunakan VPS tidak semudah menggunakan shared hosting kita perlu mempersiapkan berbagai hal untuk bisa deploy aplikasi kita dengan menggunakan VPS. Saya salah satu yang cukup direpotkan dengan persiapan penggunaan VPS, meskipun kelebihan yang ditawarkan memang lebih baik daripada shared hosting biasa.

Tertama Kali Mengenal Docker

Waktu pertama kali mengenal Docker, saya sedikit ragu, karena saya berpikir itu hanya menambah pekerjaan saja. Namun, pada suatu waktu ada hal yang mengharuskan saya untuk menggunakan Docker, dan mau tidak mau saya belajar cara menggunakanya. Setelah saya mencoba menggunakan Docker, saya langsung berpikir kalau Docker adalah yang saya cari selama ini.

Selama saya develop aplikasi dengan menggunakan SDK Javascript seperti Node, React, atau Python, Go, dan lain sebagainya, saya selalu mengalami kesulitan dalam hal deployment (tanpa VPS), memang sudah banyak penyedia layanan instan, seperti contohnya Vercel, atau Netlyfy untuk React Js, dan Heroku untuk Node.js, namun harga yang ditawarkan sangatlah mahal, bahkan lebih mahal daripada VPS, karena hanya terbatas untuk deployment aplikasi tertentu, tidak sefleksibel menggunakan VPS.

Dengan menggunakan Docker, ternyata memudahkan kita untuk melakukan deployment hampir dimana saja kita mau. Contoh, saat ini saya berlangganan Google Cloud, dengan menggunakan Google Cloud, proses deployment hanya menggunakan sedikit config dan aplikasi kita dapat ter-deploy dengan sempurna. Kita hanya perlu push image Docker kita ke registry Google Cloud dan dan selebihnya kita serahkan pada Google Cloud. Hal yang paling penting bagi saya adalah, harganya yang menurut saya jauh lebih terjangkau daripada kita menyewa VPS

Untuk rivalnya, Amazon Web Service, saya belum pernah mencobanya, jadi belum bisa berkomentar banyak soal bagaimana kalau menggunakan AWS, namun saya yakin juga akan semudah ini. Mungkin suatu saat nanti saya juga akan menggunakan AWS.

Terima kasih telah membaca cerita singkat ini, semoga bermanfaat, dan memberikan inspirasi baru.

Rest API Menggunakan Dart

Catur Wicaksono — Sat, 01 Oct 2022 13:59:38 +0000

Artikel ini adalah tutorial pembuatan REST API dengan menggunakan bahasa Dart. Tutorial ini akan terasa cukup panjang, dengan membahas pembuatan REST API dengan menggunakan Dart. Dari menerima http request dari client berupa test dan menerima file upload dari client ke aplikasi REST API server Dart kita.

Persiapan

Sebelum lebih jauh, kita akan mempersiapkan terlebih dahulu apa saja yang kita perlukan dalam membuat REST API ini. Pada seri kali ini, kita memerlukan beberapa hal berikut ini:

Visual Studio Code (VSCode). Kita akan menggunakan VSCode untuk code editor kita. karena VSCode sudah menyediakan plug-in yang dapat mempermudah pengerjaan kita nantinya.
Dart SDK. Untuk membuat REST API dengan menggunakan DART, sudah tentu kita memerlukan bahasa Dart itu sendiri terinstall pada perangkat kia.

Intalasi VS Code

Bagi yang belum menginstall aplikasi VSCode pada perangkat masing-masing, dapat mengunjungi halaman website VS Code. Berikut ini tampilan untuk halaman website VSCode.

Pada halaman awal VSCode sudah disediakan link untuk men-download installer, dan VSCode sudah dapat memprediksi operating system yang kita gunakan, sehingga link download installer sudah menyesuaikan operating system yang kita gunakan, di sini saya menggunakan Windows dan pada halaman tersebut sudah disediakan installer VS Code untuk Windows.

Selanjutnya silahkan click link download tersebut, untuk men-download installer-nya. Setelah selesai download, lakukan instalasi seperti biasa.

Instalasi Dart SDK

Setelah melakukan instalasi VSCode, selanjutnya yang kita perlukan adalah Dart SDK, untuk melakukan instalasi Dart SDK, sebenarnya sudah dijelaskan pada halaman website dari Dart, untuk operating system Windows disarankan menggunakan Chocolatey. Bagi yang belum menginstal package manager Chocolatey di perangkat masing-masing, dapat melakukan instalasi sesuai dengan halaman website dari Chocolatey pada panduan instalasinya.

Setelah selesai melakukan instalasi Chocolatey, lakukan instalasi Dart dengan menggunakan perintah berikut ini:

choco install dart-sdk

Untuk update Dart SDK dapat menggunakan perintah berikut ini:

choco upgrade dart-sdk

Apabila tidak ada kesalahan maka sekarang Dart SDK sudah berhasil terinstal pada perangkat kita. untuk memeriksanya, kita dapat mengetikkan perintah berikut ini pada command prompt kita:

dart

Perintah di atas akan memunculkan informasi terkait cara penggunaan Dart pada terminal. Dengan demikian kita sudah mempersiapkan alat yang kita butuhkan untuk membuat REST API dengan menggunakan Dart.

Addons VS Code

Penjelasan sebelumnya kenapa pada tutorial ini menggunakan VSCode adalah, karena VSCode menyediakan Addons yang dapat memudahkan pengerjaan kita dalam menggunakan Dart. Pada tutorial kali ini, kita akan menggunakan salah satu addons Dart pada VSCode.

Tambahkanlah addons tersebut pada aplikasi VSCode masing-masing.

Aplikasi REST API Pertama

Setelah kita selesai melakukan persiapan, kita akan memulai membuat aplikasi REST API pertama kita. Pada VSCode kita, buka command palette dengan menekan ctrl + shift + p, Selanjutnya pada kolom palette ketikan dart, sehingga akan muncul pilihan new project, dan pilih new project.

Setelah memilih new project, akan muncul pilihan lagi dan pilih Server App.

Setelah memilih Server App, akan muncul jendela di mana kita akan menempatkan project kita. Kita bebas untuk menempatkan project kita, pilih saja dimana kita akan menempatkannya. Setelah menentukan direktori untuk project kita, selanjutnya VSCode akan meminta nama project baru kita. Kita bebas menentukan nama project baru kita, pada tutorial kali ini, kita akan menggunakan nama default dari plugin, yaitu dart_application_1. Setelah itu, plugin akan melakukan generate data project baru kita secara otomatis. Setelah selesai, maka aplikasi REST API pertama kita sudah siap untuk digunakan.

Running Aplikasi REST API Pertama Kita

Setelah kita membuat aplikasi pertama kita, kita akan mencoba untuk running aplikasi kita. Kita akan menjalankan aplikasi kita dengan menggunakan terminal command prompt atau powershell di Windows, untuk sistem operasi lain dapat menggunakan terminal pada sistem operasi masing-masing. Pertama kita perlu mengarahkan direktori terminal kita ke direktori project kita, atau cara paling mudah adalah kita membuka terminal melalui VSCode dengan menekan ctrl + shift + c, atau kita juga dapat menggunakan terminal bawaan dari VSCode, untuk menggunakannya, tekan ctrl + j. Untuk menjalankan aplikasi kita, kita perlu menjalankan file utama pada server Dart kita. Pada project default, file utama ada di bin/server.dart. untuk menjalankanya ketikan perintah berikut ini.

dart bin/server.dart

Apabila tidak ada masalah, maka pada terminal kita akan mencetak tulisan 'Server listening on port 8080' yang menandakan server kita telah berjalan di port 8080. Untuk memastikan kalau aplikasi kita berjalan dengan baik, kita dapat mencobanya pada browser kita dengan mengakses halaman localhost:8080. Apabila tidak ada kesalahan, maka alamat tersebut akan memunculkan kalimat 'Hello, World!'.

Review Kode

Kita telah berhasil menjalankan aplikasi REST API pertama kita, selanjutnya kita perlu memahami struktur kode yang baru saja kita jalankan. Pada bundle aplikasi hasil generate dari dart pada langkah awal pada tutorial ini, kita akan banyak bekerja pada direktori bin di mana kita akan menempatkan semua file sistem pada direktori ini. Apabila diperhatikan, pada direktori bin terdapat file server.dart, ini merupakan file utama pada aplikasi kita.

import 'dart:io';

import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart';
import 'package:shelf_router/shelf_router.dart';

// Configure routes.
final _router = Router()
  ..get('/', _rootHandler)
  ..get('/echo/<message>', _echoHandler);

Response _rootHandler(Request req) {
  return Response.ok('Hello, World!\n');
}

Response _echoHandler(Request request) {
  final message = request.params['message'];
  return Response.ok('$message\n');
}

void main(List<String> args) async {
  // Use any available host or container IP (usually `0.0.0.0`).
  final ip = InternetAddress.anyIPv4;

  // Configure a pipeline that logs requests.
  final handler = Pipeline().addMiddleware(logRequests()).addHandler(_router);

  // For running in containers, we respect the PORT environment variable.
  final port = int.parse(Platform.environment['PORT'] ?? '8080');
  final server = await serve(handler, ip, port);
  print('Server listening on port ${server.port}');
}

Baris kode di atas adalah file server.dart hasil generate dari dart. Pada generated awal, kita akan diberikan dua route sampel untuk bisa kita coba, perhatikan baris kode ini:

final _router = Router()
  ..get('/', _rootHandler)
  ..get('/echo/<message>', _echoHandler);

Baris kode di atas menunjukkan bahwa dart membuatkan kita route sampel yaitu '/' dan '/echo/<message>'. Untuk mencobanya, kita gunakan aplikasi Postman, pastikan terlebih dahulu dart server kita berjalan dengan mengetikkan perintah di terminal dart bin/server.dart.

Menjalankan Route '/'

Untuk mencoba route '/', kita dapat mengetikkan url localhost:8080 dengan method request GET.

Maka kita akan mendapatkan hasil kembalian berupa string 'Hallo World'. Hasil kembalian ini kita dapatkan dari fungsi _rootHandler yang di gunakan pada route '/'. sehingga route untuk '/' sebenarnya menjalankan fungsi _rootHandler.

Menjalankan Route '/echo/<message>'

Untuk mencoba route '/echo/', kita dapat mengetikkan url localhost:8080 dengan method request GET.

Maka kita akan mendapatkan hasil kembalian string 'hallo'. Hasil kembalian ini kita dapatkan dari fungsi _echoHandler yang digunakan pada route '/echo/'. sehingga route untuk '/echo/' sebenarnya menjalankan fungsi _echoHandler.

Seperti contoh di atas, pada penulisan route akan seperti ini '/echo/' namun saat pemanggilan, parameter '' kita ganti dengan string 'hallo'. Dalam REST API dengan menggunakan Dart, untuk melewatkan parameter dapat menggunakan notasi <nama> yang disebut dengan notasi diamond.

Kesimpulan

Konsep dasarnya adalah kita membuat sebuah fungsi dengan parameter object Request, untuk handle sebuah route. untuk menambahkan route lagi, kita hanya perlu membuat fungsi lagi untuk menanganinya, kemudian kita daftarkan pada _router. Kita akan mencobanya setelah ini.

Method Request

Sebelumnya kita telah mencoba membuat REST API kita dengan menggunakan metode GET, selanjutnya kita kan akan mencoba membuat metode request POST dan bagaimana menangkap parameternya, kali ini kita akan mencoba membuat route /greeting. Pertama kita perlu membuat sebuah fungsi untuk menangani route /greeting ini.
kita akan membuat sebuah fungsi seperti berikut ini:

Future<Response> _getPostJsonHandler(Request request) async {
  final content = await request.readAsString();
  var queryParams = Uri(query: content).queryParameters;
  return Response.ok(
    json.encode(queryParams),
    headers: {'Content-type': 'application/json'},
  );
}

Fungsi di atas adalah fungsi untuk menampilkan POST body. Selanjutnya, kita perlu membuat route baru pada _router dan mendaftarkan fungsi _getPostJsonHandler. pada fungsi _router kita rubah menjadi seperti berikut ini:

// Configure routes.
final _router = Router()
  ..get('/', _rootHandler)
  ..get('/echo/<message>', _echoHandler)
  ..post('/getpostdata', _getPostJsonHandler);

Setelah menambahkan route, maka kita dapat mencoba testing route baru kita. Untuk mencobanya, kita perlu mematikan server kita terlebih dahulu dan memulainya kembali. Berikut apabila kita coba menggunakan aplikasi Postman.

Pada gambar di atas memperlihatkan bahwa hasil response berupa JSON. Langkah selanjutnya, kita dapat mengkreasikan dengan menimpan data tersebut ke database atau menyesuaikan kebutuhan kita nantinya.

Media Upload

Setelah kita berhasil membuat plikasi REST API dengan menerima parameter berupa string baik dengan GET, POST, atau dengan metode request yang lain, selanjutnya kita akan mencoba untuk menerima parameter berupa file. Untuk melakukan ini, kita memerlukan dependensi dari Dart yaitu mime.

Bagi yang masih bingung untuk instalasinya, cukup ketikkan perintah di bawah ini pada terminal yang mengarah pada project kita.

dart pub add mime

Fungsi Controller

Setelah selesai install dependensi mime, maka kita sudah memiliki semua yang dibutuhkan untuk menerima file. Seperti biasa, hal pertama yang perlu kita lakukan adalah dengan membuat fungsi untuk menangani route nantinya. Pada tutorial ini kita akan membuat fungsi untuk menangani upload seperti berikut ini:

Future<Response> _upload(Request request) async {
  final contentType = request.headers['content-type'];
  if (contentType == null) {
    return Response(400, body: 'content-type tidak ditemukan');
  }

  final mediaType = MediaType.parse(contentType);
  if (mediaType.mimeType != 'multipart/form-data') {
    return Response(400, body: 'content-type tidak valid');
  }

  final boundary = mediaType.parameters['boundary'];
  if (boundary == null) {
    return Response(400, body: 'boundary tidak ditemukan');
  }

  final payload = request.read();
  final parts = MimeMultipartTransformer(boundary).bind(payload).where((part) {
    return part.headers['content-type'] == 'image/png';
  });

  final partsIterator = StreamIterator(parts);

  while (await partsIterator.moveNext()) {
    final part = partsIterator.current;

    final file = File('./uploads/testing.png'); // direktori file upload
    if (await file.exists()) {
      await file.delete();
    }
    final chunksIterator = StreamIterator(part);
    while (await chunksIterator.moveNext()) {
      final chunk = chunksIterator.current;
      await file.writeAsBytes(chunk, mode: FileMode.append);
    }

    return Response.ok('Upload Berhasil');
  }

  return Response.ok(payload);
}

Setelah membuat fungsi untuk menangani file upload seperti di atas, selanjutnya kita buat route untuk mengakses fungsi tersebut, pada variabel _router kita ubah menjadi seperti berikut ini:

final _router = Router()
  ..get('/', _rootHandler)
  ..get('/echo/<message>', _echoHandler)
  ..post('/getpostdata', _getPostJsonHandler)
  ..post('/upload', _upload);

Kita menambahkan router /upload pada variabel _router dengan mengakses fungsi _upload.

Setelah kita mempersiapkan fungsi dan juga route-nya, selanjutnya kita persiapkan direktori untuk menampung file yang akan kita upload, pada tutorial ini kita akan menempatkan semua file upload pada filter uploads pada direktori root. Kita akan membuat folder Uploads pada direktori root kita.

Setelah semua siap, selanjutnya kita dapat mulai mencoba untuk menjalankan sistem upload kita. Seperti biasa kita perlu me-restart server kita, kita matikan server kita, dan kita jalankan lagi. Setelah berhasil me-restart, kita jalankan route upload yang baru saja kita buat. Kali ini, kita akan mencoba menjalankannya dengan menggunakan aplikasi Postman.

Gambar di atas adalah apabila kita mencoba akses route upload kita dengan menggunakan Postman. Untuk membuktikan apakah file sudah benar-benar berpindah, kita dapat memeriksa folder uploads pada direktori root kita. Sampai di sini, file tutorial dapat diambil pada repositori di bawah ini.

Catur Wicaksono / Demo REST API Mengguanakan Dart · GitLab

GitLab.com

gitlab.com

Desain Module

Sesi terakhir pada tutorial kita kali ini adalah untuk membuat aplikasi kita setidaknya mudah untuk di-maintenance. Module aplikasi REST API yang terakhir kita buat, kita akan mencoba memisahkan antara startup file dengan module-module yang lain.

Pertama kita akan memisahkan fungsi _uplaod dan _getPostJsonHandler ke dalam file baru pada folder yang sama, yaitu folder dengan nama file baru user.dart. Selanjutnya, pada file server.dart kita juga akan menghapus fungsi _rootHandler dan _echoHandler beserta route dari fungsi-fungsi tersebut.

Pada file modul user.dart, fungsi _uplaod dan _getPostJsonHandler akan kita sesuaikan supaya dapat di terima pada startup file (server.dart) kita perlu membuat fungsi yang mengembalikan objek router.

class UserApi {
  Router get router {
    final router = Router();



    return router;
  }
}

Pada file user.dart kita akan buat dulu class UserApi, nama kelas ini bebas, dapat disesuaikan sesuai keinginan. pada class UserApi kita membuat sebuah getter yang mengembalikan object Router. Selanjutnya kita akan memindahkan fungsi _uplaod dan _getPostJsonHandler sebelumnya pada blok getter ini. Perhatikan block code berikut ini.

class UserApi {
  Router get router {
    final router = Router();

    router.post('/', (Request request) async {
      return Response.ok(
        headers: {'Content-type': 'application/json'},
        json.encode({
          'code': 200,
          'data': {'name': 'Catur Wicaksono', 'address': 'Jakarta'},
        }),
      );
    });

    router.post('/login', (Request request) async {
      final content = await request.readAsString();
      var queryParams = Uri(query: content).queryParameters;
      return Response.ok(
        headers: {'Content-type': 'application/json'},
        json.encode({
          'code': 200,
          'data': queryParams,
        }),
      );
    });

    router.post('/upload/picture', (Request request) async {
      final contentType = request.headers['content-type'];
      if (contentType == null) {
        return Response(400, body: 'content-type tidak ditemukan');
      }

      final mediaType = MediaType.parse(contentType);
      if (mediaType.mimeType != 'multipart/form-data') {
        return Response(400, body: 'content-type tidak valid');
      }

      final boundary = mediaType.parameters['boundary'];
      if (boundary == null) {
        return Response(400, body: 'boundary tidak ditemukan');
      }

      final payload = request.read();
      final parts =
          MimeMultipartTransformer(boundary).bind(payload).where((part) {
        return part.headers['content-type'] == 'image/png';
      });

      final partsIterator = StreamIterator(parts);

      while (await partsIterator.moveNext()) {
        final part = partsIterator.current;

        final file = File('./uploads/testing.png'); // direktori file upload
        if (await file.exists()) {
          await file.delete();
        }
        final chunksIterator = StreamIterator(part);
        while (await chunksIterator.moveNext()) {
          final chunk = chunksIterator.current;
          await file.writeAsBytes(chunk, mode: FileMode.append);
        }

        return Response.ok('Upload Berhasil');
      }

      return Response.ok(payload);
    });

    return router;
  }
}

Pada baris kode di atas, kita mengimplementasikan fungsi _uplaod dan _getPostJsonHandler sebelumnya, namun dengan cara yang agak berbeda. Perhatikan, nama kedua fungsi menjadi anonymous function yang langsung ditambahkan setelah inisialisasi router. fungsi _uplaod kita tempatkan pada route /upload/picture, dan _getPostJsonHandler pada route /login. Untuk referensi kita akan menambahkan satu route lagi dengam metode get, dengan baris kode seperti di bawah ini.

router.post('/', (Request request) async {
  return Response.ok(
    headers: {'Content-type': 'application/json'},
    json.encode({
      'code': 200,
      'data': {'name': 'Catur Wicaksono', 'address': 'Jakarta'},
    }),
  );
});

Setelah selesai membuat module user, selanjutnya kita gabungkan module user ke startup file kita, server.dart. Pada file server.dart, kita tambahkan module pada variable router sebelumnya seperti berikut ini.

final _router = Router()..mount('/user', UserApi().router);

Untuk menambahkan module, kita gunakan fungsi mount seperti di atas, parameter pertama adalah user, dan parameter kedua adalah object module yang akan ditambahkan.

Dengan demikian cara mengakses route agak sedikit berbeda dari sebelumnya, misal pada module user terdapat route /login, karena module ini ada pada poute /user pada startup file, maka cara mengaksesnya dengan menggunakan router pada startup file terlebih dahulu dan dilanjutkan dengan route module, menjadi /user/login. Kita akan mencobanya dengan menggunakan Postman.

Untuk source code lengkap untuk tutorial ini, dapat diakses pada repository di bawah ini.

Catur Wicaksono / Demo REST API Mengguanakan Dart · GitLab

GitLab.com

gitlab.com

Epilog

Kita cukupkan materi tutorial ini sampai di sini. Sistem yang kita bangun pada tutorial ini masih sangat dasar, sehingga masih perlu banyak pengembangan lagi. Terima kasih telah mengikuti tutorial yang cukup panjang ini.

XAMPP MySQL Shutdown Unexpectedly

Catur Wicaksono — Thu, 29 Sep 2022 05:48:05 +0000

Artikel kali ini, kita akan sedikit membahas mengenai penanganan error pada XAMPP MySQL dengan pesan error shutdown unexpectedly. Developer yang menggunakan XAMPP untuk melakukan running database secara local, cepat atau lambat memiliki potensi error semacam ini pada XAMPP MySQL nya. Sudah banyak artikel yang membahas mengenai permasalahan ini, namun terkadang cara yang menjadi rekomendasi belum efektif maupun efisien. Bahkan, mungkin dapat menimbulkan error lain yang kadang tidak tersadari.

Pada kesempatan kali ini, kita akan mencoba melakukan penanganan error tersebut dengan cara yang cukup aman untuk dilakukan untuk XAMPP MySQL shutdown unexpectedly, tanpa perlu khawatir akan terjadi penurunan stabilitas fungsi XAMPP MySQL itu sendiri. Selanjutnya kita akan melakukan penanganan langkah demi langkah berikut ini.

Error Handling

Error yang terjadi pada artikel ini kurang lebih memiliki tampilan seperti di bawah ini pada XAMPP:

Pemecahan Masalah

Langkah pertama, kita masuk ke direktori XAMPP kita, untuk yang melakukan instalasi normal, biasa terdapat pada drive C:\xampp. Pada direktori tersebut, kita masuk ke direktori mysql.
Pada direktori mysql, lakukan rename pada foler data dengan nama data_backup. Langkah ini untuk melakukan backup data untuk menghindari kesalahan yang tidak diinginkan. Kita dapat memberikan nama dengan nama yang lain, sesuai dengan keinginan kita.
Langkah selanjutnya, kita copy folder backup, dengan nama data. Langkah ini untuk membuat folder data baru dengan menggunakan data-data yang ada di folder backup.
Selanjutnya, kita copy database yang ada di folder data_backup, ke dalam folder data. Database yang perlu dicopy adalah semua folder yang ada pada data_backup, selain folder mysql, performance_schema, phpmyadmin, test. Sehingga hanya database yang benar-benar kita buat saja yang kita pindahkan.
Langkah terakhir, kita copy file ibdata1 yang ada di folder data_backup, kedalam folder data, lakukan replace file.

Sampai sini, seharusnya XAMPP MySQL kita sudah dapat berjalan dengan benar kembali, dan tidak terjadi error. Lakukan running kembali pada XAMPP MySQL kita, dan perhatikan bahwa error sudah tertangani dengan baik.

Apabila semua berjalan dengan benar, maka kurang lebih tampilan XAMPP kita saat running MySQL, seperti gambar di atas.

Daftar Referensi:
https://stackoverflow.com/a/61859561/16632789