Categories
Java

MojoFailureException: Fix Maven’s Compilation Failure:

Today, I faced a compilation failure in Bitbucket pipelines for a simple Java project. The project compiles successfully in the local machine.

The stack trace of the failure was not useful at all:

------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  9.655 s
[INFO] Finished at: 2020-10-14T22:24:42Z
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:testCompile (default-cli) on project automation: Compilation failure -> [Help 1]
org.apache.maven.lifecycle.LifecycleExecutionException: Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:testCompile (default-cli) on project automation: Compilation failure
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute (MojoExecutor.java:215)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute (MojoExecutor.java:156)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute (MojoExecutor.java:148)
    at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject (LifecycleModuleBuilder.java:117)
    at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject (LifecycleModuleBuilder.java:81)
    at org.apache.maven.lifecycle.internal.builder.singlethreaded.SingleThreadedBuilder.build (SingleThreadedBuilder.java:56)
    at org.apache.maven.lifecycle.internal.LifecycleStarter.execute (LifecycleStarter.java:128)
    at org.apache.maven.DefaultMaven.doExecute (DefaultMaven.java:305)
    at org.apache.maven.DefaultMaven.doExecute (DefaultMaven.java:192)
    at org.apache.maven.DefaultMaven.execute (DefaultMaven.java:105)
    at org.apache.maven.cli.MavenCli.execute (MavenCli.java:957)
    at org.apache.maven.cli.MavenCli.doMain (MavenCli.java:289)
    at org.apache.maven.cli.MavenCli.main (MavenCli.java:193)
    at jdk.internal.reflect.NativeMethodAccessorImpl.invoke0 (Native Method)
    at jdk.internal.reflect.NativeMethodAccessorImpl.invoke (NativeMethodAccessorImpl.java:62)
    at jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke (DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke (Method.java:566)
    at org.codehaus.plexus.classworlds.launcher.Launcher.launchEnhanced (Launcher.java:282)
    at org.codehaus.plexus.classworlds.launcher.Launcher.launch (Launcher.java:225)
    at org.codehaus.plexus.classworlds.launcher.Launcher.mainWithExitCode (Launcher.java:406)
    at org.codehaus.plexus.classworlds.launcher.Launcher.main (Launcher.java:347)
Caused by: org.apache.maven.plugin.compiler.CompilationFailureException: Compilation failure
    at org.apache.maven.plugin.compiler.AbstractCompilerMojo.execute (AbstractCompilerMojo.java:1224)
    at org.apache.maven.plugin.compiler.TestCompilerMojo.execute (TestCompilerMojo.java:180)
    at org.apache.maven.plugin.DefaultBuildPluginManager.executeMojo (DefaultBuildPluginManager.java:137)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute (MojoExecutor.java:210)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute (MojoExecutor.java:156)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute (MojoExecutor.java:148)
    at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject (LifecycleModuleBuilder.java:117)
    at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject (LifecycleModuleBuilder.java:81)
    at org.apache.maven.lifecycle.internal.builder.singlethreaded.SingleThreadedBuilder.build (SingleThreadedBuilder.java:56)
    at org.apache.maven.lifecycle.internal.LifecycleStarter.execute (LifecycleStarter.java:128)
    at org.apache.maven.DefaultMaven.doExecute (DefaultMaven.java:305)
    at org.apache.maven.DefaultMaven.doExecute (DefaultMaven.java:192)
    at org.apache.maven.DefaultMaven.execute (DefaultMaven.java:105)
    at org.apache.maven.cli.MavenCli.execute (MavenCli.java:957)
    at org.apache.maven.cli.MavenCli.doMain (MavenCli.java:289)
    at org.apache.maven.cli.MavenCli.main (MavenCli.java:193)
    at jdk.internal.reflect.NativeMethodAccessorImpl.invoke0 (Native Method)
    at jdk.internal.reflect.NativeMethodAccessorImpl.invoke (NativeMethodAccessorImpl.java:62)
    at jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke (DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke (Method.java:566)
    at org.codehaus.plexus.classworlds.launcher.Launcher.launchEnhanced (Launcher.java:282)
    at org.codehaus.plexus.classworlds.launcher.Launcher.launch (Launcher.java:225)
    at org.codehaus.plexus.classworlds.launcher.Launcher.mainWithExitCode (Launcher.java:406)
    at org.codehaus.plexus.classworlds.launcher.Launcher.main (Launcher.java:347)
[ERROR] 
[ERROR] 
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException

The stack trace doesn’t report any file names or lines numbers. This means the compilation error is not with the source code itself.

Reading the help doc gave me some clue about the problem. After spending some time in investigation, I found that this issue occurred because I was using a custom executable for maven-compiler-plugin that includes a environment variable:

<plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.8.1</version>
        <configuration>
          <source>11</source>
          <target>11</target>
          <executable>${env.JAVA_11_HOME}/bin/javac</executable>
          <fork>true</fork>
        </configuration>
</plugin>

Since this environment variable was present in my local system but was not set in Bitbucket pipelines, I was getting the above exception. Setting the environment variable like below in my bitbucket-pipelines.yml file resolved the issue:

image: maven:3.6.3-openjdk-11
pipelines:
  default:
    - step:
        script:
          - JAVA_11_HOME=/usr/local/openjdk-11 mvn -e -X clean compile compiler:testCompile
Categories
Flutter

Introduction to Flutter

HelloWorld! In this article, you will learn about what is Flutter, why Flutter, then a comparison between Flutter with other frameworks, and finally Flutter’s pros and cons.

What is Flutter

Flutter is an SDK for UI development. It is developed by Google to build standard UI & UX for mobile, web & desktop applications from a single code base. Flutter has released its first version in 2017. For now, the Flutter as stable release only for mobile applications, for desktop and web apps are still in the development stage. It’s based on the Dart programming language, which is also developed by Google.

Why Flutter

Using Flutter we can develop a mobile app for both Android and iOS from a single code base, we only have to modify the native code while getting into permissions like for notifications, accessing the file manager, to change logo and splash screen, etc. Apart from those, we can code using Flutter for logics and functionality of the application,

And Flutter has hot reloading it renders the widget at runtime and has restart it will render the app from the root widget, if we change any global variables have to go for restart, not while initialization.

Flutter is based on a Dart programming language so it directly compiles to arm machine code using the Dart compilers. This helps in improve the app performance.

Flutter uses Skia is a 2D graphic engine written in C++ and it’s also developed by Google, which is used to render widgets and draw animations smoothly.

What is widget

In Flutter everything is a widget, widgets are the elements in the screen used to construct the UI. Flutter has a lot of predefined widgets, to build the standard applications. There are two types of widgets,

  • State full widgets and
  • Stateless widgets

Comparison


Frameworks/
Attributes

Flutter ReactNative Xamarin Ionic

Programming language
DartJava scriptC# with .net Javascript
PerformanceAmazingClose to nativeClose to nativeModerate
GUIUsing proprietary widgetsUsing Native UI controllersUsing Native UI controllersUsing HTML, CSS
Community SupportIt’s being popularVery strong supportStrongStrong

Popular apps built

Google Ads, Alibaba, Hamilton

Facebook, Instagram, Airbnb

Storoyo,
World Bank, Insightly, Just giving 

Just Watch, Honeyfi,
Chefsteps
Developed byGoogleFacebookMicrosoftDrifty

Pros

  • Flutter hot reloading helps in rapid prototyping,
  • Reusable widgets,
  • Directly compile to ARM machine code, using Dart compilers helps in to make app performance closer to native,
  • From a single code base able to develop an app for both Android and iOS, helps in code maintenance also reduces the cost of development,
  • Ahead of time compiling etc.

Cons

  • When compared to React Native, Flutter has limited library support,
  • For now, Flutter mobile-only has a stable version, Flutter web in beta, and for a desktop application in alpha release.

Categories
React Native

Learn React Native with a Board Game (Part 1 of 4)

In this tutorial, you’ll be learning about basic concepts, developing an application from scratch, state, props, and components. This tutorial is for both beginners and professionals.

Introduction to React Native

React Native is a JavaScript framework created by Facebook, Inc. It is used to develop mobile applications for Android and iOS. The mobile applications are developed only using JavaScript, and it is supported by both iOS and Android. It uses native components instead of web components as building blocks. We just put those building blocks together using React and JavaScript.

React Native is not used for developing web applications or an HTML application; it is only used to develop real, native mobile applications that are indistinguishable from mobile applications built using Java or C++. The apps developed using React Native does not load on any browsers, they run on a mobile device only.”

Prerequisite

For better understanding, you must have the basic knowledge of HTML and CSS, OOPs concepts, and JavaScript.

Advantages of React Native

  • Cross-Platform: It works for both Android and iOS devices.
  • JavaScript: The knowledge of JavaScript can be used to build native mobile apps.
  • Reloading: Changes made in the code of the app will be visible during development.

Limitations of React Native

  • Updates: Few components of Android and iOS are not supported.
  • Native Components: If the developer wants to create native functionality that is yet to be created, then the developer has to write platform-specific code.

React Native Environment Setup

The instructions and environment setup are quite different for each operating system. Here, we have chosen Windows as our development OS and Android as our target OS.

To set up the React Native environment, you have to download and install NodeJS, React Native CLI, Android Studio, Python, and JDK software.

Steps to Setup React Native CLI Environment

Step 1: Install NodeJS and NPM (Node Package Manager)

Click here to download NodeJS. NPM comes with NodeJS.

To verify whether NodeJS and NPM are installed or not, open the command prompt and type “node -v” and hit enter. This command will give the version of NodeJS installed.

Next, type “npm -v” and hit enter, this command will give you the version of NPM installed.

Note: Before going to the next step, make sure that you have installed Python, JDK, NPM, and NodeJS software on your system.

Step 2: Install React Native CLI

Open the command prompt and run the below code:

npm install -g react-native-cli

This command will install React Native.

To install Expo CLI use the below command.

npm install -g expo-cli

Note: We’ll discuss Expo CLI later in this post.

Download and setup Android studio

Step 1: Download the latest version of Android Studio from “https://developer.android.com/studio.
Step 2: Go to the download folder, double click on the downloaded android studio set (.exe) file. In the Welcome to Andriod Studio Setup Window click Next.

Step 3: Make sure the Android virtual device is checked. Click Next.

Step 4: Choose the destination folder and click Next.


Step 5: Follow the prompts and click install.

Step 6: Let the installation complete and click Next.

Step 7: Click Finish.

Step 8: Click Next, select an installation type and click Next.

Step 9: Select the UI theme and click Next.

Step 10: In the Verify Settings Window, click Finish.

Step 11: In the Downloading components Window, click Finish.

Configuring AVD Manager

Once Android Studio is installed, we’re going to configure the AVD Manager.
Step 1: At the bottom left of the Android Studio Window, you’ll find a configure option, click on it, and select AVD Manager.

Step 2: Click “Create Virtual Device.”

Step 3: Choose a device, click Next.

Step 4: Download any Android version for your Virtual Device. Click download, accept the license agreement. Click Next.

Step 5: Once the Android version is downloaded on a virtual device, click Next.

Step 6: Give a name to the AVD and click Finish.

Step 7: Click on the Play icon under the Actions column to start your AVD.

Hurray! You have completed the React Native Environment Setup. Create a new project and start working.

Expo

In this guide, we’ll teach you how you can create your first app, installing tools, and give you an overview of how to work with Expo tools, limitations, and environment setup.

The easiest way to get started with mobile development is with Expo CLI. Expo is a set of tools built around React Native. Expo allows you to build universal real native apps using JavaScript. To build apps using Expo CLI, all you need is a recent version of NodeJS, Android Studio, and an emulator or phone.

Expo allows you to run an app on a physical device without setting up a development environment. To run the React Native app on your physical device, all you have to do is to install the Expo application from the play store and scan the QR code displayed on Command Line Interface.

Limitations of Expo

  • If your app wants a specific thing, Expo may not support it.
  • Many features of iOS and Android APIs are still not available, for example, Bluetooth is not available.
  • Does not support the background execution of the code.
  • Only minimum versions of iOS and Android are supported.
  • The managed workflow may not be the best option, to keep the size of the app too less.

Advantages

  • Better development experience.
  • Easy to upgrade to newer versions.
  • Easy to deploy the application in Apple or Google store.
  • Setup takes less time.

Difference between Expo CLI and React Native CLI

Expo CLI

  • No access to Native Applications.
  • Expo CLI makes the development process smoother.
  • Bigger App size.
  • Android Studio or Xcode is not required.
  • The code is almost the same for both.

React Native CLI

  • Have access to Native applications.
  • The development process is not smoother.
  • Small App size.
  • Android Studio or Xcode is required.
  • The code is almost the same.

Expo CLI Installation and Setup

Step 1:

npm install -g expo-cli

The above command will install the Expo CLI.

To check the installed version of the Expo CLI, enter the below command in the command prompt and hit enter.

expo -- version

Step 2: Create a new project. Use the below command to create a new project.

expo init my-project

Note: In place of my-project you can give any name.

Step 3: Navigate to the project directory and type the below command to open iOS or Android.

Hit enter after each command.

cd my-project
npm start 

Step 4: Now, the Expo dev tool will automatically get started.

Now, if you wish to connect your physical device, then download the Expo app (Android) or the camera app (iOS) on your physical device and scan the QR code displayed in your CLI.

If you wish to use Android emulator, press a, or w to run on web.

If you press a, then it will start downloading and installing Expo on your AVD.

Hurray! You have completed the Expo Installation, Setup, Creating a new project. You can start working on it now.

Categories
IntelliJ MySQL

IntelliJ – Connect to MySQL running in Vagrant

The Database feature of IntelliJ/PHPStorm is very powerful compared to the MySQL CLI. It allows your edit your data from the UI easily without writing any MySQL commands.

Here is how you can connect your MySQL server running in a vagrant machine to the IntelliJ’s database feature and improve your productivity during development.

Create a new MySQL Data Source with these basic configuration:

Fill the basic details such as the data source name, host, port, user name, password and the database name.

Make sure you add ?useSSL=false to the JDBC URL after the form is filled. MySQL 5.7+ has SSL enabled by default.

Full JDBC url: jdbc:mysql://localhost:3306/development_database?useSSL=false

Now, with this default configuration, the connection will not work because we need to set the SSH configuration to allow IntelliJ to talk to the MySQL server running within the vagrant VM.

Goto the SSH/SSL tab, select ‘Use SSH tunnel’ and fill-in the details like this:

The value for Private key file should be the one from IdentityFile from your project vagrant directory using this command:

~/Dropbox/Projects/myproject
❯ vagrant ssh-config
Host default
  HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile /Users/lrajasekaran/Dropbox/Projects/myproject/.vagrant/machines/default/virtualbox/private_key/private_key
  IdentitiesOnly yes
  LogLevel FATAL

Now click ‘Test Connection’ from this dialog to ensure the SSH connection is working as expected. Once the SSH connection is setup, close this dialog, go to ‘General’ tab and click ‘Test Connection’ to test the actual database connection using the SSH connection made previously. Once this successful, goto ‘Schemas’ tab and select your database name and click ‘Apply’.

Now you can view all your tables from the Database tool window on the right. Right click on any table and click ‘Jump to Editor’ to see the table rows:

Any value can be edited directly from this UI and then saved to the DB by right clicking the row and clicking ‘Submit’

Categories
React

React – Render String with HTML tags as HTML

TRY IT LIVE

Click the button below to see a live example of this example that you can edit and try for yourself.

CODE SANDBOX

There are often times when you have a string with some HTML tags such as strong that you want to render as HTML on the DOM. Most solutions online recommend using dangerouslySetInnerHTML but that is dangerous as the name suggests. The proper way to render HTML from string is to use FormattedMessage from the formatjs library (react-intl version 5).

Here is a code example:

import React from "react";
import "./styles.css";
import { IntlProvider, FormattedMessage } from "react-intl";

export default function App() {
  return (
    <IntlProvider>
      <div className="App" style={{fontSize: 24}}>
        <FormattedMessage
          id="app.greeting"
          description="Bold text example"
          defaultMessage="Look here, I can include HTML tags in plain string and render them as HTML: <b>Bold</b>, <i>Italics</i> and <a>links too</a>."
          values={{
            b: (chunks) => <b>{chunks}</b>,
            i: (chunks) => <i>{chunks}</i>,
            a: (chunks) => (
              <a class="external_link" target="_blank" href="https://jiga.dev/">
                {chunks}
              </a>
            )
          }}
        />
      </div>
    </IntlProvider>
  );
}

This should show an output as:

Play with code sample in this link: https://codesandbox.io/s/react-render-html-from-props-string-c9ogm

You can also pass the defaultMessage and values as prop values from other components.

In the above example, I have used the version 5 from the react-intl library. In the previous versions, the API is a little different. Follow the official documentation for more options such as using child elements.

Categories
PHP

Debug slow PHP applications using IntelliJ or PHPStorm

It is frustrating when your PHP application is really slow and you do not know which part of your code is taking up too much time.

Google considers 2 seconds as the optimal loading time for a fast loading website.

Enabling PHP XDebug Profiler

PHP’s Xdebug extension can be used to profile your web requests and CLI requests and understand why they are slow and which method is causing the bottleneck.

Follow this link to install XDebug on the server on which your PHP application is running: https://xdebug.org/docs/install

Once XDebug is installed successfully, open the xdebug configuration file and add the following line:

xdebug.profiler_enable = 1

Once you add the above line, the configuration file should look like this:

vagrant@dev:/etc/php/7.2/cli/conf.d$ cat 20-xdebug.ini
zend_extension=xdebug.so
xdebug.show_error_trace = 1
xdebug.profiler_enable = 1

The above file only enables the profile for CLI requests. For enabling the profile for web requests, add the same line into the following file:

vagrant@dev:/etc/php/7.2/fpm/conf.d$ cat 20-xdebug.ini
zend_extension=xdebug.so
xdebug.show_error_trace = 1
xdebug.profiler_enable = 1

Once the files are saved, restart the PHP FPM service:

service php7.2-fpm restart

Now you can open your phpinfo file and verify if the profiler is now enabled:

Generating the profile file

You can now open the slow webpage and PHP XDebug will create a profiler in the profiler_output_dir mentioned above (i.e. ./tmp) which can also be customized in the xdebug ini file.

I opened the homepage of my PHP application and found these files in my /tmp directory:

root@dev:/tmp# ls cache* -gGltrh
-rw-r--r-- 1 1.6K Sep 23 10:29 cachegrind.out.3315.01c00e
-rw-r--r-- 1 1.2M Sep 23 10:29 cachegrind.out.3315
-rw-r--r-- 1 2.1M Sep 23 10:31 cachegrind.out.3312
-rw-r--r-- 1 1.8K Sep 23 10:31 cachegrind.out.3312.0df7d7
-rw-r--r-- 1 1.2M Sep 23 10:31 cachegrind.out.3315.05bc8d
-rw-r--r-- 1 1.2M Sep 23 10:31 cachegrind.out.3312.073921
-rw-r--r-- 1 2.0K Sep 23 10:31 cachegrind.out.3312.03dc36

Analyzing the generated files

Once these files are generated, you can open them in IntelliJ or PHPStorm for analysis:

Once you have finished the analysis, make sure to remove or comment the line xdebug.profiler_enable in both your ini files and restart your FPM service. Otherwise the tmp directory will get filled very quickly.

Other Free Tools

Apart from paid tools such as IntelliJ/PHPStorm, there are some free tools to analyze the generated cachegrind files:

Categories
Database MySQL

5 Reasons MySQL Foreign Key constraints fail to create

Finding out why Foreign key creation fail

When MySQL is unable to create a Foreign Key, it throws out this generic error message:

ERROR 1215 (HY000): Cannot add foreign key constraint

– The most useful error message ever.

Fortunately, MySQL has this useful command that can give the actual reason about why it could not create the Foreign Key.

mysql> SHOW ENGINE INNODB STATUS;

That will print out lots of output but the part we are interested in is under the heading ‘LATEST FOREIGN KEY ERROR’:

------------------------
LATEST FOREIGN KEY ERROR
------------------------
2020-08-29 13:40:56 0x7f3cb452e700 Error in foreign key constraint of table test_database/my_table:
there is no index in referenced table which would contain
the columns as the first columns, or the data types in the
referenced table do not match the ones in table. Constraint:
,
CONSTRAINT idx_name FOREIGN KEY (employee_id) REFERENCES employees (id)
The index in the foreign key in table is idx_name
Please refer to http://dev.mysql.com/doc/refman/5.7/en/innodb-foreign-key-constraints.html for correct foreign key definition.

This output could give you some clue about the actual reason why MySQL could not create your Foreign Key

Reason #1 – Missing unique index on the referenced table

This is probably the most common reason why MySQL won’t create your Foreign Key constraint. Let’s look at an example with a new database and new tables:

In the all below examples, we’ll use a simple ‘Employee to Department” relationship:

mysql> CREATE DATABASE foreign_key_1;
Query OK, 1 row affected (0.00 sec)
mysql> USE foreign_key_1;
Database changed

mysql> CREATE TABLE employees(
    ->     id int,
    ->     name varchar(20),
    ->     department_id int
    -> );
Query OK, 0 rows affected (0.08 sec)

mysql> CREATE TABLE departments(
    ->     id int,
    ->     name varchar(20)
    -> );
Query OK, 0 rows affected (0.07 sec)

As you may have noticed, we have not created the table with PRIMARY KEY or unique indexes. Now let’s try to create Foreign Key constraint between employees.department_id column and departments.id column:

mysql> ALTER TABLE employees ADD CONSTRAINT fk_department_id FOREIGN KEY idx_employees_department_id (department_id) REFERENCES departments(id);
ERROR 1215 (HY000): Cannot add foreign key constraint

Let’s look at the detailed error:

mysql> SHOW ENGINE INNODB STATUS;
------------------------
LATEST FOREIGN KEY ERROR
------------------------
2020-08-31 09:25:13 0x7fddc805f700 Error in foreign key constraint of table foreign_key_1/#sql-5ed_49b:
FOREIGN KEY idx_employees_department_id (department_id) REFERENCES departments(id):
Cannot find an index in the referenced table where the
referenced columns appear as the first columns, or column types
in the table and the referenced table do not match for constraint.
Note that the internal storage type of ENUM and SET changed in
tables created with >= InnoDB-4.1.12, and such columns in old tables
cannot be referenced by such columns in new tables.
Please refer to http://dev.mysql.com/doc/refman/5.7/en/innodb-foreign-key-constraints.html for correct foreign key definition.

This is because we don’t have any unique index on the referenced table i.e. departments. We have two ways of fixing this:

Option 1: Primary Keys

Let’s fix this by adding a primary key departments.id

mysql> ALTER TABLE departments ADD PRIMARY KEY (id);
Query OK, 0 rows affected (0.20 sec)
Records: 0  Duplicates: 0  Warnings: 0

mysql> ALTER TABLE employees ADD CONSTRAINT fk_department_id FOREIGN KEY idx_employees_department_id (department_id) REFERENCES departments(id);
Query OK, 0 rows affected (0.19 sec)
Records: 0  Duplicates: 0  Warnings: 0

Option 2: Unique Index

mysql> CREATE UNIQUE INDEX idx_department_id ON departments(id);
Query OK, 0 rows affected (0.13 sec)
Records: 0  Duplicates: 0  Warnings: 0

mysql> ALTER TABLE employees ADD CONSTRAINT fk_department_id FOREIGN KEY idx_employees_department_id (department_id) REFERENCES departments(id);
Query OK, 0 rows affected (0.21 sec)
Records: 0  Duplicates: 0  Warnings: 0

Reason #2 – Different data types on the columns

MySQL requires the columns involved in the foreign key to be of the same data types.

mysql> CREATE DATABASE foreign_key_1;
Query OK, 1 row affected (0.00 sec)

mysql> USE foreign_key_1;
Database changed

mysql> CREATE TABLE employees(
    ->     id int,
    ->     name varchar(20),
    ->     department_id int,
    ->     PRIMARY KEY (id)
    -> );
Query OK, 0 rows affected (0.06 sec)

mysql> CREATE TABLE departments(
    ->     id char(20),
    ->     name varchar(20),
    ->     PRIMARY KEY (id)
    -> );
Query OK, 0 rows affected (0.07 sec)

You may have noticed that employees.department_id is int while departments.id is char(20). Let’s try to create a foreign key now:

mysql> ALTER TABLE employees ADD CONSTRAINT fk_department_id FOREIGN KEY idx_employees_department_id (department_id) REFERENCES departments(id);
ERROR 1215 (HY000): Cannot add foreign key constraint

Let’s fix the type of departments.id and try to create the foreign key again:

mysql> ALTER TABLE departments MODIFY id INT;
Query OK, 0 rows affected (0.18 sec)
Records: 0  Duplicates: 0  Warnings: 0

mysql> ALTER TABLE employees ADD CONSTRAINT fk_department_id FOREIGN KEY idx_employees_department_id (department_id) REFERENCES departments(id);
Query OK, 0 rows affected (0.26 sec)
Records: 0  Duplicates: 0  Warnings: 0

It works now!

Reason #3 – Different collation/charset type on the table

This is a surprising reason and hard to find out. Let’s create two tables with different collation (or also called charset):

Let’s start from scratch to explain this scenario:

mysql> CREATE DATABASE foreign_key_1;                                                                                        Query OK, 1 row affected (0.00 sec)

mysql> USE foreign_key_1;                                                                                                    Database changed

mysql> CREATE TABLE employees(
    ->     id int,
    ->     name varchar(20),
    ->     department_id int,
    ->     PRIMARY KEY (id)
    -> ) ENGINE=InnoDB CHARACTER SET=utf8;
Query OK, 0 rows affected (0.06 sec)

mysql> CREATE TABLE departments(
    ->     id int,
    ->     name varchar(20),
    ->     PRIMARY KEY (id)
    -> ) ENGINE=InnoDB CHARACTER SET=latin1;
Query OK, 0 rows affected (0.08 sec)

You may notice that we are using a different character set (utf8 and latin1` for both these tables. Let’s try to create the foreign key:

mysql> ALTER TABLE employees ADD CONSTRAINT fk_department_id FOREIGN KEY idx_employees_department_id (department_id) REFERENCES departments(id);
ERROR 1215 (HY000): Cannot add foreign key constraint

It failed because of different character sets. Let’s fix that.

mysql> SET foreign_key_checks = 0; ALTER TABLE departments CONVERT TO CHARACTER SET utf8 COLLATE utf8_general_ci; SET foreign_key_checks = 1;
Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected (0.18 sec)
Records: 0  Duplicates: 0  Warnings: 0

Query OK, 0 rows affected (0.00 sec)

mysql> ALTER TABLE employees ADD CONSTRAINT fk_department_id FOREIGN KEY idx_employees_department_id (department_id) REFERENCES departments(id);
Query OK, 0 rows affected (0.20 sec)
Records: 0  Duplicates: 0  Warnings: 0

If you have many tables with a different collation/character set, use this script to generate a list of commands to fix all tables at once:

mysql --database=your_database -B -N -e "SHOW TABLES" | awk '{print "SET foreign_key_checks = 0; ALTER TABLE", $1, "CONVERT TO CHARACTER SET utf8 COLLATE utf8_general_ci; SET foreign_key_checks = 1; "}'

Reason #4 – Different collation types on the columns

This is a rare reason, similar to reason #3 above but at a column level.

Let’s try to reproduce this from scratch:

mysql> CREATE DATABASE foreign_key_1;                                                                                        Query OK, 1 row affected (0.00 sec)

mysql> USE foreign_key_1;                                                                                                    Database changed

mysql> CREATE TABLE employees(
    ->     id int,
    ->     name varchar(20),
    ->     department_id char(26) CHARACTER SET utf8,
    ->     PRIMARY KEY (id)
    -> );
Query OK, 0 rows affected (0.07 sec)

mysql> CREATE TABLE departments(
    ->     id char(26) CHARACTER SET latin1,
    ->     name varchar(20),
    ->     PRIMARY KEY (id)
    -> );
Query OK, 0 rows affected (0.08 sec)

We are using a different character set for employees.department_id and departments.id (utf8 and latin1). Let’s check if the Foreign Key can be created:

mysql> ALTER TABLE employees ADD CONSTRAINT fk_department_id FOREIGN KEY idx_employees_department_id (department_id) REFERENCES departments(id);
ERROR 1215 (HY000): Cannot add foreign key constraint

Nope, as expected. Let’s fix that by changing the character set of departments.id to match with employees.department_id:

mysql> ALTER TABLE departments MODIFY id CHAR(26) CHARACTER SET utf8;
Query OK, 0 rows affected (0.20 sec)
Records: 0  Duplicates: 0  Warnings: 0

mysql> ALTER TABLE employees ADD CONSTRAINT fk_department_id FOREIGN KEY idx_employees_department_id (department_id) REFERENCES departments(id);
Query OK, 0 rows affected (0.20 sec)
Records: 0  Duplicates: 0  Warnings: 0

It works now!

Reason #5 -Inconsistent data

This would be the most obvious reason. A foreign key is to ensure that your data remains consistent between the parent and the child table. So when you are creating the foreign key, the existing data is expected to be already consistent.

Let’s setup some inconsistent data to reproduce this problem:

mysql> CREATE DATABASE foreign_key_1;                                                                                        Query OK, 1 row affected (0.00 sec)

mysql> USE foreign_key_1;                                                                                                    Database changed

mysql> CREATE TABLE employees(
    ->     id int,
    ->     name varchar(20),
    ->     department_id int,
    ->     PRIMARY KEY (id)
    -> );
Query OK, 0 rows affected (0.06 sec)

mysql> CREATE TABLE departments(
    ->     id int,
    ->     name varchar(20),
    ->     PRIMARY KEY (id)
    -> );
Query OK, 0 rows affected (0.08 sec)

Let’s insert a department_id in employees table that will not exist in departments.id:

mysql> INSERT INTO employees VALUES (1, 'Amber', 145);
Query OK, 1 row affected (0.01 sec)

Let’s create a foreign key now and see if it works:

mysql> ALTER TABLE employees ADD CONSTRAINT fk_department_id FOREIGN KEY idx_employees_department_id (department_id) REFERENCES departments(id);

ERROR 1452 (23000): Cannot add or update a child row: a foreign key constraint fails (`foreign_key_1`.`#sql-5ed_49b`, CONSTRAINT `fk_department_id` FOREIGN KEY (`department_id`) REFERENCES `departments` (`id`))

This error message is atleast more useful. We can fix this in two ways. Either by adding the missing department in departments table or by deleting all the employees with the missing department. We’ll do the first option now:

mysql> INSERT INTO departments VALUES (145, 'HR');
Query OK, 1 row affected (0.00 sec)

Let’s try to create the Foreign Key again:

mysql> ALTER TABLE employees ADD CONSTRAINT fk_department_id FOREIGN KEY idx_employees_department_id (department_id) REFERENCES departments(id);
Query OK, 1 row affected (0.24 sec)
Records: 1  Duplicates: 0  Warnings: 0

It worked this time.

So we have seen 5 different ways a Foreign Key creation can fail and possible solutions of how we can fix them. If you have encountered a reason not listed above, add them in the comments.

Categories
jQuery Web Development

jQuery DataTable: Sorting dynamic data

Try this code sample online!

Code samples for the this post is available in GitHub and can be previewed live using the link below.

TRY LIVE

jQuery DataTable is a powerful library to super charge your HTML tables. By default DataTable can sort your data based on the content of the cells. But if you are loading your table data dynamically and want to apply a custom sorting based on the DOM data, you can use DataTable’s custom sorting code:

function applyDomBasedSorting() {
    $.fn.dataTable.ext.order['data-sort'] = function(settings, col) {
        return this.api().column(col, {
            order: 'index'
        }).nodes().map(function(td, i) {
            return $(td).attr('data-sort');
        });
    }
}

data-sort could be anything. You can define your own sorting logic here. In this example, I would like to sort name by their second names. I’m setting this value into the data-sort attribute of the td cells.

Once you have defined your custom sorting logic like above, then you can use that when initializing your data table.

applyDomBasedSorting();
$('#employees').DataTable(
      {
        "columnDefs": [
          { "orderDataType": "data-sort", "targets": [1]}
        ],
      }
  );

GitHub Source code link: https://github.com/jiga-eng/jquery-code-samples/tree/master/datatable-code-samples/sorting

Categories
IntelliJ

Avoiding Wildcard imports in Java/Kotlin with IntelliJ

What is a wildcard import or a star import?

When you want to import multiple classes from the same package like this:

import com.example.exception.CustomerNotFoundExcetpion
import com.example.exception.ProductNotFoundExcetpion
import com.example.exception.ProductOutOfStockException
import com.example.exception.AdressNotFoundException

Java has an option to combine them into a single line using wildcard imports:

import com.example.exception.*

Is it bad?

Performance-wise, no. Using a wildcard import doesn’t actually import all the classes in the package. When your code is compiled, only the classes used from this package are added to the bytecode. So there is zero performance difference between wildcard import and explicit imports.

Then why should we avoid it?

  • Explicit imports clearly states what external classes the current class is directly using, provided that you don’t leave redundant imports in your code.
  • If there are two classes with the same name from different packages, it can introduce collision when using wildcard imports.
  • When multiple people are working in a project, wildcard imports can create confusion as to which classes are actually imported

Many large Java projects that I have worked with, have a checkstyle rule to disallow wildcard imports for the above reason.

Now that we have understood why explicit imports are better than implicit imports, let’s see how we can make IntelliJ always use explicit imports.

By default, IntelliJ will convert implicit imports into wildcard imports when it sees 5 import statements from the same package.

This setting can however by set to a large value like 99 to prevent the automatic wild card imports.

Goto Preferences -> Editor -> Code Style -> Java (or Kotlin) -> Update the following two values to 99:

  • Class count to use import with ‘*’
  • Names count to use static import

Click ‘Apply’ and close the dialog. Now do ‘Optimize Imports’ again to remove the wildcard imports automatically now and in the future.

More ‘Import’ options can be customized with IntelliJ. Follow this link for more customizations: https://www.jetbrains.com/help/idea/creating-and-optimizing-imports.html

The default Sun & Google’s Checkstyle rules also recommend avoiding star import by throwing this exception:

(imports) AvoidStarImport: Using the '.*' form of import should be avoided

To add this rule to your checkstyle configuration, add this line:

<module name="AvoidStarImport"/>
Categories
HTML

First look at HTML

HTML is used to feed the content on the web page or web application.

HTML = content.

HTML is not used for styling the page if you want to style then you need to use CSS.

HTML ≠ style. CSS = style.

HTML Document Structure

All HTML document must start with <html> and end with </html>.

<body> … </body> body tag is where the content is entered and visible in the browser.

<!DOCTYPE HTML>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

If you don’t know how to run this code you can use this link and follow the steps.

HTML Headings :

  • <h1> </h1> tags are used to define the headings.
  • heading tags vary from <h1> to <h6>.
  • <h1> with the larger size and the size reduce when the number increases till <h6>.
<html>
<body>

<h1> This is h1 element </h1>
<h2> This is h2 element </h2>
<h3> This is h3 element </h3>
<h4> This is h4 element </h4>
<h5> This is h5 element </h5>
<h6> This is h6 element </h6>

</body>
</html>

you can copy paste this code and run it using editor.

HTML Paragraph:

<p> tags are used to define the HTML paragraph.

<html>
<body>

<p> This is an paragraph </p>
<p> this is an second paragraph </p>

</body>
</html>

you can copy paste this code and run it using editor.