Monday, January 15, 2018

Step By Step : Enable SSL on Amazon EC2 Instance Running Apache Server

Hello,

Recently I configured SSL on Amazon EC2 instance running Apache server. In this blog I am going to explain the procedure step by step.

Step 1 : Generate CSR and submit to CA authority for verification

To generate CSR login to your server with SSH and use following command.

openssl req -new -newkey rsa:2048 -nodes -keyout YourDomain.key -out YourDomain.csr

Once you execute this command it will ask for certain inputs and based on it it will generate csr file. That you have to submit to CA authority and generate

Step 2 : Edit Inbound rules on your EC2 Instance and allow HTTPS

Login to Amazon AWS console and go to EC2 dashboard. Click on instance and edit security rules. Select HTTPs and allow it from anywhere.


Step 3 : Upload your SSL certificate and key file to EC2 using SSH

 You can use SCP command to upload crt file and pem key file to server.

scp -i "YourKey.pem" "Cert.crt" ubuntu@YourIP:/home/ubuntu/Cert.crt
scp -i "YourKey.pem" "Key.key" ubuntu@YourIP:/home/ubuntu/Key.key

Step 4 : Edit Default SSL config file and Add Certificate In File

Go to  cd /etc/apache2/sites-available

Update default-ssl.conf file by using command

sudo nano default-ssl.conf

Add following lines in file

SSLEngine on
SSLCertificateFile      /home/ubuntu/Cert.crt
SSLCertificateKeyFile /home/ubuntu/Key.key

Save the file.

Step 5 : Enable SSL mode in Apache and set config file to default-ssl.conf

Now we have ssl config file set, we have to enable SSL mode in apache and set config file.

Use following command

sudo a2enmod ssl
sudo a2ensite default-ssl.conf
sudo service apache2 reload
sudo service apache2 restart

That's it and now you can access your web app on HTTPS. Hope this helps you.

Sunday, January 14, 2018

jQuery Close Modal Window When User Clicks Outside of It

Recently in my work we faced an issue due to some JavaScript conflict on a page where we have modal popups that were not closing when user clicks outside of it and anywhere on page. Normally it does automatically in jQuery pop up. So here we have to add custom code to handle this situation. In this blog I am going to explain how to do it.

In above picture I explained how to do it. So basic trick is to track click event on entire web page and to check it it's X and Y coordinates are inside the BOX of modal window. If yes then do not close it. But if it's out side of it, close the modal popup. Here is the code for the same.

  var rect = $('.modalSelector')[0].getBoundingClientRect();
  clientX1 = rect.x
  clientX2 = rect.x + rect.width;

  clientY1 = rect.y
  clientY2 = rect.y + rect.height;

  if((e.clientX >= clientX1 && e.clientX <= clientX2) && (e.clientY >= clientY1 && e.clientY <= clientY2)){
    return;
  }

  if($('#modalSelector').hasClass('active')){
    $('#modalSelector').removeClass('active');
    $('. modalSelector').hide();
  }

That's it and it will close if you click anywhere on web page outside of modal popup.

Saturday, December 16, 2017

Android RecyclerView Add Load More Functionality

Hello,

Recently I was working on adding load more functionality on Android RecyclerView. The purpose was to load more data as soon as user scrolls to bottom and there are no records left.

Since we already have used swipe to refresh plugin other load more plugin was not working as the event was not attached and fired. If we remove swipe to remove then it worked but we needed both functionalities. So for that we did simple trick. Here is the code.

testRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);

        if (!recyclerView.canScrollVertically(1)) {
            Toast.makeText(getApplicationContext(),"CALL LOAD MORE FUNCTION TO LOAD MORE DATA",Toast.LENGTH_LONG).show();
        }
    }
});

So trick is very simple, we added on scroll listener to recycler view and just checked it can not scroll any more vertically that means we reached at bottom and form here we can add logic to load more data.

Hope this helps you.