Stuff I'm Up To

Technical Ramblings

VOF – Accessing H2 from Another System — August 30, 2018

VOF – Accessing H2 from Another System

Following on from Verint Online Forms using H2 seems pretty straight forward locally. It fires up a web server and you can manage the H2 database straight from there.

You need the VOF database details you put into Config.sh then you can start connecting to it from within the browser.

eg.

JDBC URL: jdbc:h2:~/lagan/dform-x.x.x/db/kana-integration/h2

But if you’re running dforms on your virtual box development server you’ll be denied because the setting webAllowOthers is not set.*

This is easily remedied and still secure as your virtual box should be using a “host only network adapter” so only your system can get to it.

Create a file in you home folder and put the following one line into it:

$ vi ~/.h2.server.properties

webAllowOthers=true

That’s all. Once the server runs it will probably add some more to the file, but you should now be able to access the H2 GUI at http://192.168.56.2:8082

The other thing that may be stopping you is by default H2 will look at your systems name and resolve it to an IP. This is the IP that will listen on port 8082. If you’ve setup a virtual box then your /etc/hosts file may contain a line like 127.0.1.1 debian and this will be an inaccessible IP. You’ll need to change this so you have an entry matching your machines DNS name eg.

192.168.56.2    debian debian.domain.local

When you start H2 you should then see it listen on the correct address.

$ sh ./h2.sh
Failed to start a browser to open the URL http://192.168.56.2:8082: Browser detection failed and system property h2.browser not set

Don’t worry about the error. It’s complaining because we’re running a headless non-Windowed server, there is no X11 and there is no browser to launch. The important thing is it’s starting on the right IP address.

Other Useful Options

By default H2 tries to start a browser as shown in the above error message. You can stop this behaviour by passing parameters to the h2.sh call

-web – start a web service
-tcp – start a tcp service
-pg – start a postgres service
-browser – try and start a browser

So if you just want a web service

$ sh ./h2.sh -web

Web Console server running at http://192.168.56.2:8082 (others can connect)

No more error message!

You can chain them too eg. sh ./h2.sh -web -tcp -pg or for a more permanent solution edit the h2.sh file and add -web to the java line:

java -cp "$dir/h2-1.4.197.jar:$H2DRIVERS:$CLASSPATH" org.h2.tools.Console "$@" -web

 

* Yes I know you can set this in the Web GUI. But if you can’t get to the Web GUI (the whole point of this article) you’ll need to set it from the servers command line.

Advertisements
Verint Online Forms —

Verint Online Forms

We’re new to this and trying to integrate a form solution with our Lagan CRM system. We have a corporately installed test and production system for forms, but it get frequent usage by many non-IT related staff, so I thought about deploying our own dev system.

The forms products are pretty much Jetty programs with a database requirement. Looking at the config files for the initial deployment package they are looking for either H2, Oracle or MSSQL. That means our only real dev option is H2.

Step 1 – Install the H2 database

Download the platform independent zip from http://www.h2database.com/html/main.html and extract it into a suitable location.

Make sure you have a $JAVA_HOME environment variable set, and ensure you have a Java JDK (not just a JRE) installed. On my Debian system I set it to the default java instance (which just happens to be Java 10):

$ export JAVA_HOME=/usr/lib/jvm/default-java

Then run the H2 program:

$ cd h2/bin
$ sh ./h2.sh

This fires up a browser session and gives you an icon in the tray if you’re running a windowed environment.

Step 2 – Install dforms

Extract the dfoms zip file.

Edit the config.sh file in dforms-x.x.x/bin as necessary. The only changes I made to this one was the jdbc user and password. I prefer not to use defaults.

Run the program:

$ cd dforms-x.x.x/bin
$ sh ./Run.sh

We then have a running dforms program listening on the default port 9081. You can use your browser to visit it at http://localhost:9081/auth/login and logon using the defaults Admin/Admin credentials.

Step 3 – Install dforms-leadapter

Extract the dfoms-leadapter-x.x.x zip file.

Edit the config.sh file in dforms-leadapter-x.x.x/bin as necessary. I made a few more changes to this one, again the jdbc user and password – it is a different database than the dforms one and there are two of them in this config. But also the flweb_lagan_uri and flweb_user and flweb_password to match our environment.

Run the program:

$ cd dforms-leadapter-x.x.x/bin
$ sh ./Run.sh

We then have a running dforms-leadapter program listening on the default port 9082. You can use your browser to visit it at http://localhost:9082/auth/login and logon using the defaults Admin/Admin credentials.

When is a Question Mark not a ? — August 29, 2018

When is a Question Mark not a ?

That’s a morning of smashing my face on the desk again. I deployed my dev program onto a production system and then started crying as it stopped working as it should.

It seemed that none of my query string parameters were making it through to the controller. I called up some debugging and dumped out my $request and $request->all() etc. and discovered that the parameters although shown in the browser dev window went AWOL between server and controller. On my dev environment it all acted as it should.

So there must be something different. PHP v7.2 on dev and v7.0 or production maybe? No, much simpler than that. None of the Laracasts and Laravel related Googling pulled up any particular clues. It wasn’t until I looked at Nginx and parameters not being passed to PHP that I got a hit.

https://serverfault.com/questions/685525/nginx-php-fpm-query-parameters-wont-be-passed-to-php

The answer was as simple as adding in the $is_args into my Nginx virtual server config.

location / {
  try_files %uri $uri/ /index.php$is_args$query_string;
}

Up until now I guess I’ve been using routing with the parameters as part of the URI. Now I’m using some query string parameters I need to put in the ?, which is the $is_args variable.

So why not a problem in dev? Because I’m not using Nginx, I just use artisan serve to debug my development program.

Postman is Awesome — August 21, 2018

Postman is Awesome

I’m in the process of testing and documenting my API’s and up until yesterday I’d only used postman to test my responses gave me something back. But it’s capable of so much more!

I can use it to generate the documentation for each call I make, publish it online and share it with colleagues.

But I can also use it to carry out unit tests on my API calls. Which is awesome.

Then I find I can use globals and environment variables to migrate my tests and documentation between development and production systems… which is even more awesome.

Continue reading

Postman Makes API Development Simple — August 20, 2018
Laravel and Lagan Web Services – SOAP API — August 17, 2018

Laravel and Lagan Web Services – SOAP API

SOAP is a dirty word to me. But I have a need to interact with our CRM system to import / extract data. My go to platform for most of my PHP work is Laravel. So I looked at interacting with Lagan CRM using SOAP calls from PHP.

I started off accessing the Lagan WSDL pages to see what the capabilities of the API are.

http://[laganserver:8080]/lagan/services/FL?WSDL
http://[laganserver:8080]/lagan/services/FLAuth?WSDL
http://[laganserver:8080]/lagan/schema/FLService.wsdl

Now I can see the self documenting API calls I can make. I just need to create the SOAP envelope to pass data to the service with the call I want to make.

Continue reading

Sudo and Proxy / Environment Settings — August 15, 2018

Sudo and Proxy / Environment Settings

When you run a program using sudo what tends to happen is the sudo/root account fails to do anything useful on the internet. It times out trying to connect to systems to download updates that are required by elevated permissions.

We discovered using sudo composer self-update failed to update the core instance of composer, not because of permissions, but because it could not get to the internet to download it.

Set the environment variables that get persisted within your /etc/sudoers file by running:

$ sudo visudo

Seach for the line

Defaults    env_reset

and change it to

Defaults    env_keep += "ftp_proxy http_proxy https_proxy no_proxy"

Now your proxy will be set within your sudo environment too.

References

Source: https://stackoverflow.com/questions/8633461/how-to-keep-environment-variables-when-using-sudo

Laravel API and Bootstrap Form Validation — August 13, 2018

Laravel API and Bootstrap Form Validation

This caused me some grief today. I spent the day adding validation rules into my Laravel resource controller and rather foolishly set HTML5 validation parameters on my Vue.js / Bootstrap 4 form component.

Why foolishly?

Well if you follow the Bootstrap 4 JavaScript function to call form.checkValidity() you’re actually calling the HTML5 built in function. Not a Bootstrap function as I originally thought.

When Laravel validation failed at the resource controller and it pushes back 422 (Unprocessable Entity) and a json error object:

{"message":"The given data was invalid.","errors":{"name":["The name field is required."]}}

I thought Bootstrap was seeing the Laravel validation errors and flagging up fields as not valid. So I could not understand why one of my fields didn’t show as invalid when according to Laravel it was!

What I was actually doing was HTML5 validation and ignoring my Laravel validation response all together. With the API it’s best NOT to try to use both HTML5 and Laravel validation. You’ll get a confusing UX that uses a mix of browser error messages/popups and Bootstrap CSS error handling.

Make sure you add novalidate to your form tag – this ensures HTML5 browser validation is prevented at the form level.

To resolve the Laravel validation part I just use the Laravel json error object and DON’T USE checkValidity(), my axios .catch(error) processes the Laravel errors by calling showErrors(error.response.data)

 this.axios.post('/api/v1/mycall/',
   this.data
 ).then(() => {
   // That worked out well, do something.
 }).catch(error => {
   this.showErrors(error.response.data)
 })

 showErrors: function (error) {
  Object.keys(error.errors).forEach((field) => {
    let input = document.getElementById(field)
    input.classList.add('is-invalid') // Bootstrap invalid form input
  })
 }

This iterates through the json errors and adds the class is-invalid to the fields that Laravel tells me are invalid. This triggers Bootstraps CSS to show the field with a red border and unhides the form-control subsequent/child div that has a class of invalid-feedback

References

https://getbootstrap.com/docs/4.1/components/forms/#validation

When using Vue.js and Laravels json response the actual usage is closer to the server-side examples:

https://getbootstrap.com/docs/4.1/components/forms/#server-side

Linting — August 6, 2018

Linting

No, this isn’t about taking the fluff from your belly button – but you’re close.

https://eslint.org/

Linting your written code is a method of ensuring that it meets consistent syntax and style guidelines. Eg. ensuring you indent function blocks by 4 spaces and not tabs, placing curly braces {} on new lines, having spaces following function names and parameters etc.

JavaScript, being a dynamic and loosely-typed language, is especially prone to developer error. Without the benefit of a compilation process, JavaScript code is typically executed in order to find syntax or other errors. Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it.

ESLint is a great way of ensuring my (ECMA)JavaScript coding style is consistent and correct. Using it within atom.io is a great way to keep my work tidy. Just add the ESLint package and we’re set to track and tidy my .js files.

But I want the same rules for my .vue files. I found this really handy: https://alligator.io/vuejs/vue-eslint-plugin/

Add the atom package linter-eslint then go to its settings button.

Find the option “List of scopes to run ESLint on…” and add onto it:

text.html.vue

So in my case it becomes:

source.js, source.jsx, source.js.jsx, source.babel, source.js-semantic, text.html.vue

 

Laravel Debug Bar —

Laravel Debug Bar

It’s a good job my job title doesn’t include development. Some things I find out seem a long time after I need then and would be useful in the world of development.

My latest discovery is the Laravel debug bar. https://github.com/barryvdh/laravel-debugbar

Using it means not so many dd() or dump() in my code to find out what Laravel sees. It even allows me to see the actual SQL queries being used.

Selection_073
Laravel Debug Bar

In many ways I wish I’d discovered this sooner.

Installation is very simple, just a composer require and then ensure your .env has the debug option enabled and/or debug bar enabled.

APP_DEBUG=true
DEBUGBAR_ENABLED=true

 

I Hate Internet Explorer — August 1, 2018

I Hate Internet Explorer

I just can’t seem to get it to die! Probably something to do with all those users out there spoiling my day and continuing to use it in Windows 7 – sadly in our corporate environment.

I’ve spent a few days with a problem showing “Syntax Error” in IE11 when my project runs just great in Edge, FireFox and Chrome.

After a lot of digging around in the components I’ve used I narrowed it down to one specific 3rd party component from npmjs. So I took a trawl through into the Github of the project and opened an issue. Turns out I’m not the only one seeing the problem. I guess everyone else is using more sensible browsers.

I got a great reply that pointed me to modifying my webpack config so it transpiled into IE11 compatible code. I’d already used polyfills like es6-promise and es6-object-assign and then babel-polyfill, but this obviously wasn’t enough.

The pointer was aimed at webpack. Now Laravel uses it’s own layer above webpack – Laravel-Mix, but with a bit more Googling I figured out how to add the necessary webpack config into mix to get it transpiling correctly.

Add the targets-webpack-plugin using yarn (or npm) as a “devDependency”

$ yarn add targets-webpack-plugin -D

In my webpack.mix.js file:

const TargetsPlugin = require('targets-webpack-plugin')

...

mix.webpackConfig({
  plugins: [
    new TargetsPlugin({
      browsers: ['last 2 versions', 'chrome >= 41', 'IE 11'],
    }),
  ]
})

Repackage my app with yarn run dev and IE11 is silent!

The internet is full of wonderfully helpful people. To those that post responses, write blogs or any kind of feed – I thank you all.

 

Axios and the X-CSRF-TOKEN —

Axios and the X-CSRF-TOKEN

When using Laravel it adds in some helpful headers to handle axios requests internally. But when it comes to sending requests externally you end up sending them the common headers added by Laravel and any plugins you may have added.

This typically includes the X-CSRF-TOKEN which your site uses to prevent Cross Site Request Forgery. But you don’t really want to send that out to external axios calls and in fact I’ve struggled as the sites I was using axios with returned a browser error because of it not being listed in their allowed headers:

SEC7123: Request header x-csrf-token was not present in the Access-Control-Headers-List.

SCRIPT7002: XMLHttpRequest: Network Error 0x8007005, Access is denied.

In order to resolve this you need to remove the headers from your axios call.

To do this I created a new instance of axios and returned that as my axios function.

let instance = this.$http.get(url, {
  transformRequest: function(data, headers) {
    delete headers.common['X-CSRF-TOKEN']
    delete headers.common['Authorization']
  }
})
return instance

I also added into here the removal of the Authorization header as that too should not go outside, and failed with the same message.