Monday, September 30, 2013

Host website on Linux Server using Git and SSH

1. Open terminal in your local system, and connect to linux server system using SSH.

Syntax: ssh -i <pem_file> <server address>
Example: ssh -i site.pem ubuntu@54.251.245.22

Now you are in linux server. So you can run all usual commands in server. First go to "www" directory in server. Using following command,

Example: $ cd /var/www/

Now by using "ls" command, you can see all folders or sites in side that server.

Example: $ ls

2. Copy your site to server using git clone.

Log in to git site(https://github.com/), and copy HTTP clone URL which is on right bottom of your project listing page. Now run the following command to copy your git repository to server.

git clone https://site.com/dir/project.git <localfolder>

Now your site moved to server. Now you have to implement local virtual host on server. So that your site.com redirect to specific folder on the server.

3. Make local virtual host on server.

Go to sites-available folder on server system, and open default file in a editor

Syntax: $ cd /etc/apache2/sites-available
             $ sudo vim default

On above syntax note we used "sudo" command for avoid unnecessary errors, like editor may throw error as "cannot edit read only file" or "need admin permission".
Now add the following lines on end of the file add save.

<VirtualHost *:80>
DocumentRoot /var/www/yoursitefolder
ServerName sitename.com
ServerAlias www.sitename.com
</VirtualHost>

Note: Press "i" to edit the file, use "<esc>:w" to save file.

Now open hosts file which is on 'etc' folder, and add your site name as explained below.

Syntax: 
             $ cd /etc
             $ sudo vim hosts

             Add follwoing lines, after the line "127.0.0.1 localhost".
             127.0.1.1       sitename.com
             127.0.1.1       www.sitename.com

Now, restart your apache to consider the new changes.
             $ sudo /etc/init.d/apache2 restart

4. Upload your database
Go to www.sitename.com/phpmyadmin or www.servername.com/phpmyadmin
enter username and password, then upload your database.

Thats all..


Monday, September 23, 2013

My seminar about: Learn JavaScript for Beginners

What is JavaScript
JavaScript(also known as JS) is a programming language that can understand by web browsers. That is JS run on browser, there is no need of any additional software. And note even internet connection also not need to run JS.

Why JavaScript
Before going to ask why JavaScript, first thing what will happen on a website which does not has JS code?.. Its going to had no.of static or sleeping pages which are build by HTML and CSS, and there html taking care about what contents are to be display and CSS taking care about how that contents are to be display. And one more person is there that is server language, but he only active at when our website trying to send request to server. This usually happening only on form submit, so we need to wait until our site request to and get response from server. Abort from that our site always sleeping, and we cannot perform any action even a adding two integers. Because our HTML and CSS are not know these. So in this point we need something that should make our website alive without any energy(network). For this JavaScript came. I hope now you may get some undefinable imagine about JS, yess.. thats it. We can define that imagine as JavaScript add behavior to your website where you no need for connect to server. Some of that behaviors are add or alter any HTML elements, styling that elements, making animations, form validations, even can request and response with server with out reloading the page, etc..

Okay now you had some basic idea about why and what is JS. And next you have to know how can write JS.

How to start writing JS
We can write JS in any portion of the HTML page. But writing it on top or bottom of the page is good practice, because by doing this you can separate you HTML and JS codes.

Example 1:
Write something into top of html page, and also make an alert message.

<script type="text/javascript">
document.write("Hello JavaScript World");
alert("Welcome to JavaScript World");
</script>
<html>
    <head>
         <title>Hello JavaScript World</title>
    </head>
    <body>
        <p>This is my first JavaScript Programme</p>
    </body>
</html>
How to RUN: Make a separate folder for our tutorial in any location. And save the above file as hello_world.html in that folder and open it on any browser.
Output: First your html page had line "Hello JavaScript World", then get one alert as "Welcome to JavaScript World", after that alert the page will get a line "This is my first JavaScript Programme".

You can save JS codes in new file with the extension ".js" and can include in on your HTML page.

Example 2:
Integrate Example 1 with external JS file.

First write the following codes in file and save it as hello_world_2.html on our folder.
<script type="text/javascript" src="hello_world_2.js"></script>
<html>
    <head>
         <title>Hello JavaScript World</title>
    </head>
    <body>
        <p>This is my first JavaScript Programme</p>
    </body>
</html>

Now write the following JS codes in new file and save it as hello_world_2.js on our folder.
document.write("Hello JavaScript World");
alert("Welcome to JavaScript World");

Output: Same example 1 output.

Variables in JS
Okay now you got some idea about how to write, save and run JS codes. Next you have to know how write and use variables in JS. Its not a difficult matter, its easier than you used in some basic programming languages such as C, C++. Because you do not need to declare datatype of the variable, its takes that as you defined. That is if you mention a=24 it takes it as number, if you declare a="24" then it take it as string. You have to use "var" keyword on declaration. If you do not assigned any value on the declaration it consider as a undefined.

You can declare variables as following ways,
var a;                           // here a declared as undefined
var a=5;                       // here a declared as number
var a="apple";            // here a declared as string
var a,b,c;                    // here a,b,c are declared as undefined in single line
var a=2,b=3,c=a+b;   // here a,b declared as number and c declared with expression; here c=5;

DOM
I think before you going to write JS codes, you have know about DOM. Because JS fully designed for integrate with DOM. So by learning DOM you can outline what are JS works.

DOM is an abbreviation of Document Object Model. That is when a web page is loaded, the browser creates a Document Object Model of the page. This is constructed as a tree of Objects that is looks like in the below picture.


That is our browser makes every elements in the html page as programmable object model. So our JS can interact with all these objects or elements.

Our JS actions among these objects are below:
1. JS can change all the HTML elements in the page
2. JS can change all the HTML attributes in the page
3. JS can change all the CSS styles in the page
4. JS can react to all the events in the page


So, now we are going to learn about these actions. And before that one more thing we have to do is, to apply these actions first we have to find a element on the page.

Finding HTML Elements
You can find/ get elements on the page Id, Class or TagName.
Find by ID:
var element1=document.getElementById('elemnt_id');

Find by TagName:
var para=document.getElementById('p');    // get all p tags

Note: Finding elements by class name does not work in Internet Explorer 5,6,7, and 8.


Change HTML Element Content
We can change the content of a html element by JS.

Example 3: Change HTML element content
<script type="text/javascript">
var wel_div=document.getElementById("welcome_div");  //get element
wel_div.innerHTML("Welcome to JavaScript");   // change element
</script>
<html>
    <head>
         <title>Welcome to JavaScript</title>
    </head>
    <body>
        <div id="welcome_div">Welcome to HTML</div>
    </body>
</html>
Output: The message "Welcome to JavaScript" will display on the div which having the id "welcome_div".

Change HTML Style
As we said can change the style of a html element by JS.

Example 4: Change HTML element style
<script type="text/javascript">
var wel_div=document.getElementById("welcome_div");  //get element
wel_div.style.color="#2E9AFE";
</script>
<html>
    <head>
         <title>Welcome to JavaScript</title>
    </head>
    <body>
        <div id="welcome_div">Welcome to JavaScript</div>
    </body>
</html>
Output: The message "Welcome to JavaScript" will display as blue color, which is on the id "welcome_div".

Call JS on Event
We can call JS function and make some operation when event is triggered on DOM or html page.

Example 5: Call JS function on a event
<script type="text/javascript">
function my_fun()
{
    var wel_div=document.getElementById("welcome_div");  //get element
    wel_div.innerHTML("Welcome to JavaScript");   // change element
}
</script>
<html>
    <head>
         <title>Welcome to JavaScript</title>
    </head>
    <body>
        <div id="welcome_div">Welcome to HTML</div>
        <button value="Change" onclick="my_fun();" />
    </body>
</html>
Output: The message "Welcome to HTML" is change to "Welcome to JavaScript" when you click on the button.

Some basic things need to know about JavaScript
1. Your JS code can view by users, so do not include any sensitive datas on JS file.
2. User can disable JS on browsers, so make sure your website can run with out JS. Just it add some           extra functionality to site.
3. Its runs on browser, so it can run even you are not connect to internet.
4. JQuery is just a JS file, which has list of functions to minimize our coding stuff and length.

Note: Now I hope you had some basic ideas about JS. Which means you are ready to write JS, but you have to know more about it. This tutorial only made for push you to learn JS. And here I explained just outline of the JS use. You can learn more about JS here: http://www.w3schools.com/js/default.asp
http://javascript.about.com/od/reference/a/javascriptpurpose.htm

Friday, September 20, 2013

Android: Change app background image when orientation change(toggle b/w landscape and portrait) without restarting main class

Avoid main or activity class restart:
To do this note go to bin/res/AndroidManifest.xml, and add the following line under any activity where you want disable activity class refresh when orientation change.

android:configChanges="orientation|screenSize"

Change background Image:
To do this go to src/com.example.<yourproject>/<yourclass>Activity.java, for example src/com.example.firstapp/MainActivity.java, and add following function.

public void onConfigurationChanged(Configuration newConfig)
{
   super.onConfigurationChanged(newConfig);
   View mainLayout = findViewById(R.id.main_layout); // getting the layout

  // Checks the orientation of the screen
  if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE)
  {
    mainLayout.setBackgroundResource(R.drawable.my_bg_land);
  }
  else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT)
  {
     mainLayout.setBackgroundResource(R.drawable.my_bg);
  }
}

Note:
Please note on above code we access layout by its id(main_layout). To use this we have note it on layout xml file(that is xml file for your specific activity which is under res/layout here:res/layout/activity_main.xml)
android:id="@+id/main_layout"


Reference:
Changing background of a layout at run time - http://manijshrestha.wordpress.com/2011/04/05/android-sdk-changing-background-of-a-layout-at-run-time/
Detect orientation change - http://stackoverflow.com/questions/5726657/how-to-detect-orientation-change-in-layout-in-android

Tuesday, September 3, 2013

Is slash required at the end of URL?

Actually what happening?:

When you mentioned forward slash(/) at the end of your URL, the server will consider last word as directory and try to enter that directory and try to run index.html or any other index files. If can not found that directory then server try to find a file with that name.

If you do not mentioned forward slash(/) at the end of your URL, the server will consider last word as file and try to run that file. If that file not found then server try to find a directory with that name and then enter.

What problem arrives here?:

As per above two cases, the server will meet two request on following situations,

1. If we provided forward slash(/) at the end of URL, when we had file at the end.
    Example: http://example.com/product/list.php/
    
    (Here the server first try find a folder with the name "list.php", Once it not found then only its try to find a file with the name "list.php".)

2. If we not provided forward slash(/) at the end of URL, when we had directory at the end.
    Example: http://example.com/product/lists

    (Here the server first try find a file with the name "lists", Once it not found then only its try to find a folder with the name "lists".)

Conclusion:

When you are had folder at the end of URL use forward slash(/), otherwise do not use.

Note: You can speed up access to your home page by including the forward slash(/) on your domain name URL. Example: http://example.com/

Learn JavaScript - String and its methods - 16

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>String and it's methods - JS&l...