How to test that, your website or webpage is mobile friendly or not ?

Mobile is changing the world. Today, everyone has smartphones with them, constantly communicating and looking for information. In many countries, the number of smartphones has surpassed the number of personal computers; having a mobile-friendly website has become a critical part of having an online presence.

If you haven't made your website mobile-friendly, you should. The majority of users coming to your site are likely to be using a mobile device.

Why make a website mobile-friendly?

The desktop version of a site might be difficult to view and use on a mobile device. The version that's not mobile-friendly requires the user to pinch or zoom in order to read the content. Users find this a frustrating experience and are likely to abandon the site. Alternatively, the mobile-friendly version is readable and immediately usable.

In the USA, 94% of people with smartphones search for local information on their phones. Interestingly, 77% of mobile searches occur at home or at work, places where desktop computers are likely to be present.

Mobile is critical to your business and will continue to be so – whether you’re blogging about your favorite sports team, working on the website for your community theater, or selling products to potential clients. Make sure visitors can have a good experience on your site when they’re visiting from their mobile devices!

Above ⇧⇧⇧ facts and texts are taken from https://developers.google.com/search/mobile-sites/

Let see, how we can test our website or webpage that, whether it is mobile friendly or not.

This kind of test is very useful for both, developer and owner of any website or webpage. You have read above, why?

So, if you have running website click here to open run the test for your website. You can also open the run test page by typing following url in any browser -

https://search.google.com/test/mobile-friendly?utm_source=support.google.com/webmasters/&utm_medium=referral&utm_campaign=6155685

You will get a page like-

Put your website URL or your webpage URL  in input filed and click on RUN TEST.

You will see all detail of mobile test regarding you website-

According to report, given by Google mobile friendly test, you can optimise your website accordingly.

You can find many more about this at -

https://support.google.com/webmasters/answer/6352293

https://developers.google.com/search/mobile-sites/

Error Loading Project: Cannot load 3 facets Details... Android Studio.

I am very new to Android Studio, and I have just started the Android app development in Android Studio few days back. I was working on Android Studio 2.2.3 and developed some app also.

Today I got notification to update IDE and I update this. Update was successful to Android 3.0 and I imported my settings from previous version. When I try to run my previous app, I got error like -

Error Loading Project: Cannot load 3 facets Details... 

When I click on details, I got -

After Googling on Internet I found solution that- 

• Disable the Firebase Services
• Enable the Android Support Plugin
• Restart Android Studio
• Go to settings and then to Plugins
• Enable Firebase Services plugin
• Restart Android Studio

Solution -

Start Android Studio, Go to File ----> Settings

After click on setting, a setting window will be opened. Click on Plugins in left pane of window, Then in Plugin pane (Centre Pane), check (enable) the Android Support and uncheck the Firebase Services and restart the Android Studio.

Again go to Plugins and enable the Firebase Services and restart the Android Studio.

Doing this you can face following problem in applying these changes-

Enabling these plugins make sure that, no any plugins should be in red colour like below screen shot -

Plugins should be look like -

Hope this will solve your problem of facets.

Reference :-

https://stackoverflow.com/questions/36597007/error-loading-project-cannot-load-3-facets-details/44651387#44651387

Add server in Netbeans

Since NetBeans IDE is already available with Glassfish server and Apache Tomcat server, and you can install both when you install NetBeans. But sometime we don't want to install it, because either we want to use another server rather than both or we would have been already installed this and working on other projects or may of some other reasons.

So, how can we use external web server in NetBeans ?

It is very simple to add server in NetBeans. After installing NetBeans go to menu

Tools ----> Servers

After clicking on Servers a server window will be opened.

Click on Add Server button at bottom left corner, a new add server window will be opened.

Choose the desired server and click on Next. A new Add Server Instance window will be opened.

Here you will have to provide server location 

For example-

In the case of Ubuntu-

 /home/arvind/apache-tomcat-8.0.32

In the case of Windows-

C:\Program Files\Apache Software Foundation\Apache Tomcat 8.0.27

 by clicking Browse button.

 Also enter the user credential if you have created in the web server.

Then click Finish.

You can also add server from services window available in left pane of IDE.

Right click on Servers and then select Add server and follow the instruction given above from Add Server Instance Window.

How to paste Netbeans IDE code on blogger post as it is shown on IDE (Coloured)?

Posting programing codes or snippets on Google Blogger is not much readable, it does not provides coloured text as we see in any IDE. So, how can we paste code example on Google Blogger?

I don't and any gadget or other website link to do so. I just want to use only Google Blogger and my IDE where I execute my program.

After Googling on net, I find some suggestion to use tools available in Internet which are based on JavaScript or some other. I also found that some are suggesting to host code on Github gist to share code. But I don't want anything, in between my running code and my blog. So, I don't prefer to use this.

Yes, you can use screen shot of your code in blog to looks like any IDE like code, but is inefficient and if some one wants to use your code, he can't. It will also create problem when your code is bigger than your screen.

I don't know that whether such kind of tools are available in blogger or not. But I have used some tricks to paste IDE like code (codes in different colours) on my blogger posts. See how.

I use NetBeans IDE to write my codes. So write you desired programming code on NetBeans IDE, run it and if you want paste it then

Select all code by pressing Ctrl+A or by dragging mouse for some lines.

Then go to File and select print to HTML

A new window will appear, Select Print to Clipboard and other checkbox option, like line numbers in code, then click OK

Now go on blogger site, Edit/New post and click on HTML tab available on left corner of your post editing page

After clicking on HTML tab, you will be entered in HTML mode of your blog writing. If you write code, then you can easily find that where you have to pest your code (which you have print to clipboard previously). 

I have given a example to paste code below Sample text in my blog. See screenshot below-

Now it is done.

Sample-

/home/arvind/NetBeansProjects/WebApplication1/web/index.html

 1 <!DOCTYPE html>
 2 <!--
 3 To change this license header, choose License Headers in Project Properties.
 4 To change this template file, choose Tools | Templates
 5 and open the template in the editor.
 6 -->
 7 <html>
 8     <head>
 9         <title>TODO supply a title</title>
10         <meta charset="UTF-8">
11         <meta name="viewport" content="width=device-width, initial-scale=1.0">
12     </head>
13     <body>
14         <div>TODO write content</div>
15     </body>
16 </html>
17 

How to kill any process in Ubuntu ?

Sometime we stuck on a application when it does not respond and we would being work on multiple applications. So, how to close it?

There can be multiple way to close it. Either we can wait until it responds, or we can close it forcibly. To quit forcefully we have two options.

1. Run a kill command on terminal.
2. Any GUI application to kill any program. (easiest way)

1. Run a kill command on terminal

To kill any program using terminal we should know the exact process name from which it is running. Sometimes it may be ambiguous and mistakenly we might kill another process. So it require some expertise on Ubuntu and may not be suited to new learner. Because some users recognise any program to its icon(logo).

Let see how we can use kill command on terminal to close a application-
First open terminal by pressing Ctrl+Alt+T. It will open terminal window.
Check all running programs/processes by typing-

 ps -A 

It will show all running programs with process IDs. Note down the process ID of program that you want to kill, and Type

kill <processidofprograme>      

Let see by example -

Here I typed ps -A in terminal.
I got the list of all running programs.
I have to close the Thunderbird program which has 19177 process ID.
Then I typed kill 19177 to kill the Thunderbird.
You can also type kill -9 19177 to quit forcibly, if above command does not work.

2.  GUI application to kill any program.

Like Task Manager in Windows OS, There is also an application available in Ubuntu called System Monitor, that provides same facilities as Task Manager in Simple and easy way.

Press Windows key and type System Monitor in filter-

Click on System Monitor package. System Monitor GUI will be opened.

1. Click on Processes.

2. Find your desired processed to be closed, select it. (I have selected Thunderbird)

3. Press End Process button.

4. Confirm box will be appeared, again click on End Process button.

Dynamically fill the values in Selectbox from database in JSP.

When we work on form and websites, it is obvious to populate the data on page dynamically, means data from database. When data come from database, we don't know the number of data fetched from database.

So, we have to populate these data dynamically on page. Sometimes we have to populate these data on various form elements.

Selectbox/Listbox is one of the important element to show data on webpage. Today we will see, How we can populate data in selectbox in JSP?

I assume that you have done database connectivity in Java/JSP.

To insert value in selectbox from database, initialize the select element before the while loop of data fetching, then insert the valued fetched from database in option tag of select element in while loop.

See the code below -

<select name="select">
        <option>Rooms</option>
 <% 
 while(rs.next())
 {%>
 <option>
 <%out.println(rs.getString("room"));%>
 </option> 
 <%}%>
 </select>

Full example code is given below-

 1 <%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" errorPage="" %>
 2  <%
 3        Connection conn = null;
 4  Statement stmt=null;
 5  try
 6  {
 7  Class.forName("com.mysql.jdbc.Driver");
 8  conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/DB","user","pass");
 9  stmt = conn.createStatement();
10  String sql="SELECT * FROM teacher";
11  ResultSet rs = stmt.executeQuery(sql);
12  %>
13  <select name="select">
14         <option>Rooms</option>
15  <% 
16  while(rs.next())
17  {%>
18  <option>
19  <%out.println(rs.getString("room"));%>
20  </option> 
21  <%}%>
22  </select>
23  <%rs.close();
24  stmt.close();
25  conn.close();
26  }
27  catch(Exception e)
28  {
29  out.println(e);
30  }
31  
32 %>

Output-

How to create a database in MySQL or MariaDB using phpMyAdmin ?

"phpMyAdmin is a free software tool written in PHP, intended to handle the administration of MySQL over the Web. phpMyAdmin supports a wide range of operations on MySQL and MariaDB. Frequently used operations (managing databases, tables, columns, relations, indexes, users, permissions, etc) can be performed via the user interface, while you still have the ability to directly execute any SQL statement."
                                                                                                                   From phpMyAdmin website

As all we know that MySQL database comes in command line based to operate it, and does not provide any graphical user interface to handle easily. So phpMyAdmin gives the GUI to operate the database.

Let see how we can create a database in phpMyAdmin. 

Note :- I have used Ubuntu 16.04 OS, MySQL version 5.7.19-0ubuntu0.16.04.1 - (Ubuntu) and phpMyAdmin version 4.5.4.1deb2ubuntu2

Open any browser available in your system. And type

 http://localhost/phpmyadmin

On some systems, URL may very according to, what port it is using. If it is using port 80 just type above URL, otherwise type URL with port, like-

http://localhost:8080/phpmyadmin. If server is using port 8080.

You will see login page. Enter username and password, you have created during installation. Default username is root.

After login you will see phpMyAdmin home page, like-

Click on Databases, write the desired database name and then click create.

Now click on database name in left pane and create table.

This is how you can create database using phpMyAdmin.

You can also use phpMyAdmin for -

• Intuitive web interface
• Support for most MySQL features:
  • browse and drop databases, tables, views, fields and indexes
  • create, copy, drop, rename and alter databases, tables, fields and indexes
  • maintenance server, databases and tables, with proposals on server configuration
  • execute, edit and bookmark any SQL-statement, even batch-queries
  • manage MySQL user accounts and privileges
  • manage stored procedures and triggers
• Import data from CSV and SQL
• Export data to various formats: CSV, SQL, XML, PDF, ISO/IEC 26300 - OpenDocument Text and Spreadsheet, Word, L^AT_EX and others
• Administering multiple servers
• Creating graphics of your database layout in various formats
• Creating complex queries using Query-by-example (QBE)
• Searching globally in a database or a subset of it
• Transforming stored data into any format using a set of predefined functions, like displaying BLOB-data as image or download-link
• And much more...

You can download and know more about phpMyAdmin from here.

Create beautiful charts on your websites.

A chart is a graphical representation of your data and it is also called 'Graph'. Whenever you want to present your data in visuals you require any chart tool. Creating graph in any spreadsheet is easy, but creating it on website is something difficult for dynamic data.

Most of the website or previously flash are used for creating chart on website, which makes site slow and overhead on server.

Presently you can find many chart creating tools based on JQuery, JavaScript and CSS.

Today I am going to tell you about a JavaScript based tool RGraph, which has a wide appeal and can represent many types of data quickly and efficiently. RGraph is free to use and uses the MIT license.  It has more than 50-60 charts it can be used on HTML5 canvas and SVG.

The size of the JavaScript files and the code to make a chart is small and can be further reduced with minification and compression and so offers significant speed boosts to a website.

Now let see how it can be used on website with some example:-

Before use it, first download library from here.

After downloading, extract the zipped folder. 

You will get a web page named as default.html in the extracted folder. Open this file in your favourite browser.

When page will be opened in the browser, you will get home page for RGraph.

Click on link Go to the demos (local) » 

After clicking on link you will get the all list of possible charts in RGraph. Click on your desired chart. You will get the design, code and required file to draw that chart.

How to use ?

After extracting the zipped folder, you have downloaded, you can rename it or use as it is. Put this folder in your root/home directory of your project/website.

From the list of chart you have seen, select the desired chart and click on it. It will get a page showing code and where should it be used.

See the required JavaScript file required to draw desired chart. Put that code in your header tag with full path.

<script src="RGraph/libraries/RGraph.common.core.js"></script>

<script src="RGraph/libraries/RGraph.bar.js"></script>

Now draw the chart at your required position on website. Put the following code at desired position in your coding :-

<canvas id="cvs" width="650" height="300">
    [No canvas support]
</canvas>

You can adjust the size of chart by changing the width and height of canvas.

Now put the following JavaScript code anywhere in your page that draws the chart.

<script>
    var gutterLeft   = 120,
        gutterRight  = 25,
        gutterTop    = 45,
        gutterBottom = 125,
             hmargin = 15,
                ymax = 35,
        
        data = [

            // If you don't need a third dataset take out this FIRST
            // dataset and replace it with the word: null

            // null, // [12,16,10,12,13,15,16]
            [5,16,10,12,13,15,16],

            [20,21,24,23,18,19,20],
            [35,34,32,28,26,35,34]
        ],
        
        colors = [
            'Gradient(#696:#0f0:#0f0)',
            'Gradient(#966:#f00:#f00)',
            'Gradient(#669:blue:blue)'
        ],
        
        labels = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];


    var bar = new RGraph.Bar({
        id: 'cvs',
        data: data[2],
        options: {
            textAccessible: true,
            variant: '3d',
            variantThreedYaxis: false,
            variantThreedXaxis: false,
            strokestyle: 'rgba(0,0,0,0)',
            colors: [colors[2]],
            shadow: true,
            shadowOffsetx: 10,
            //backgroundGrid: false,
            backgroundGridColor: '#ccc',
            backgroundGridAutofitNumhlines: 5,
            backgroundGridAutofitNumvlines: 14,
            scaleZerostart: true,
            axisColor: '#ddd',
            ylabels: false,
            gutterBottom: gutterBottom,
            gutterTop: gutterTop,
            gutterLeft: gutterLeft,
            gutterRight: gutterRight,
            hmargin: hmargin,
            ymax: ymax,
            noaxes: true
        }
    }).draw();

    var bar2 = new RGraph.Bar({
        id: 'cvs',
        data: data[1],
        options: {
            textAccessible: true,
            variant: '3d',
            variantThreedYaxis: false,
            variantThreedXaxis: false,
            strokestyle: 'rgba(0,0,0,0)',
            colors: [colors[1]],                
            shadow: true,
            shadowOffsetx: 10,
            shadowColor: 'rgba(0,0,0,0.5)',
            backgroundGrid: false,
            axisColor: '#ddd',
            ylabels: !data[0] ? true : false,
            labels: !data[0] ? labels : [],
            gutterBottom: gutterBottom - 10,
            gutterTop: gutterTop + 10,
            gutterLeft: gutterLeft - 20,
            gutterRight: gutterRight + 20,
            hmargin: hmargin,
            ymax: ymax,
            noaxes: true
        }
    }).draw();


    if (data[0]) {
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: data[0],
            options: {
                textAccessible: true,
                variant: '3d',
                variantThreedYaxis: false,
                variantThreedXaxis: false,
                strokestyle: 'rgba(0,0,0,0)',
                colors: [colors[0]],
                labels: labels,
                shadow: true,
                shadowOffsetx: 10,
                shadowColor: 'rgba(0,0,0,0.5)',
                backgroundGrid: false,
                axisColor: '#ddd',
                unitsPost: 'km',
                gutterTop: gutterTop + 20,
                gutterBottom: gutterBottom - 20,
                gutterLeft: gutterLeft - 40,
                gutterRight: gutterRight + 40,
                hmargin: hmargin,
                ymax: ymax,
                noaxes: true,
                scaleZerostart: true
            }
        }).draw();
    }
</script>

After that you will get the result on your webpage like -

You can use the dynamic values also in data and labels as a variable to show the graph
based on database values or any dynamic values.

Like above example you can get many type of chart and graphs using RGraph.

For more information and update, please visit RGraph website.

Java program to turn on a PC from remote location

Is this possible to turn on a remote PC using a Java program ? Of course it is possible.
As we know that remote PC can be turned on. But it require some tools/softwares and configuration in both PCs.

Let see what is required for this ?

Note:- I have tested it on Windows XP, Windows 7 professional and Windows 10 edu. machine as a target (client) and Ubuntu 16.04 and Ubuntu 14.04 as source (server).

To turn on a PC from remote, we require it to configure to Wake on LAN (WOL). So, how to configure Wake on LAN, please read this post.

After configuring target PC, You also require some tools on source PC. So, for required tools and information on source machine, please read this post.

Now, after preparing both machine, you require obviously  Java on source machine to run a Java program. Its version should be 7 or higher. It may also run on lower Java version, but I have not tested on lower versions.

Here is the Java code :-

import java.io.*;

String mac="MAC address of traget machine";
String com="wakeonlan";
String command=com+" " +mac;

 try {
        Process process = Runtime.getRuntime().exec(command);
        System.out.println("the output stream is "+process.getOutputStream());
        BufferedReader reader=new BufferedReader( new                         InputStreamReader(process.getInputStream()));
        String s; 
        while ((s = reader.readLine()) != null){
            System.out.println("The inout stream is " + s);
        }                   
    } 
catch (IOException e) {
        e.printStackTrace();
    }

If everything will be configured properly, you turn on remote PC using above Java code.