Web Designing: June 2015

My system is running on Window 8.1 64bit OS.

Prior to installing PHONEGAP, install the below softwares:

download and install OS compatible JDK.

Node js 64bit

download relevant msi file from https://nodejs.org/download/ and install.

Apache Ant

download relevant zip file ( apache-ant-1.9.5-bin.zip ) from the end of the link (https://ant.apache.org/bindownload.cgi )

Android SDK (or) Android Studio compatible for your OS(64 bit)

download sdk/android studio bundle.exe(android-studio-bundle-141.1903250-windows) from (https://developer.android.com/sdk/index.html#Other ) / ( https://developer.android.com/sdk/index.html#top / https://developer.android.com/sdk/index.html#top )
(or)
you could download adt_bundle_windows which has teh integrated eclipse IDE from the link below: Here you can download adt bundles 2014-07-02:

windows 32: https://dl.google.com/android/adt/adt-bundle-windows-x86-20140702.zip
windows 64: https://dl.google.com/android/adt/adt-bundle-windows-x86_64-20140702.zip

Note: I downloaded and installed the adt_bundle_windows

Once done with all the installations, Configure all the executable directories in "system environment variable" and add the below variables to the system variables as below:

JAVA_HOME: C:\Program Files\Java\jdk1.7.0_79;
ANT_HOME: D:\softwareDownloads\apache-ant-1.9.5-bin\apache-ant-1.9.5;
ANDROID_HOME: D:\adt-bundle-windows-x86_64-20140702\adt-bundle-windows-x86_64-20140702\sdk

and include the below variables for PATH under "system variables"
PATH:
C:\Program Files\nodejs\;
D:\softwareDownloads\apache-ant-1.9.5-bin\apache-ant-1.9.5\bin;
D:\adt-bundle-windows-x86_64-20140702\adt-bundle-windows-x86_64-20140702\sdk\tools;
D:\adt-bundle-windows-x86_64-20140702\adt-bundle-windows-x86_64-20140702\sdk\platform-tools;C:\Program Files\Java\jdk1.7.0_79\bin;

Next step: Install Cordova from command prompt with the below command

npm install -g cordova

and see it installed as in the screenshot below:

Alternatively, we can also use th command, npm install -g phonegap instead which does the same thing. However, Cordova can be treated as the apache engine which powers phonegap. It is recommended to use 'phonegap' command over 'cordova' as there may be additional tools added to phonegap in later stages. Here's an article that talks about this difference between cordova and phonegap ( http://stackoverflow.com/questions/18174511/is-there-a-difference-between-phonegap-and-cordova-commands )

Once Phonegap installed, Create your first PHONEGAP app:)

Run the below command on your command prompt from the location where you want your first phonegap app to be created: phonegap create MyFirstApp .
This will create a directory named MyFirstApp on the location.
Open the directory to find some sub-directories such as www, etc along with a config.xml file.
The base html(index.html) will be inside the www folder.
Copy and paste the config.xml into the www folder.
Now open and modify the index.html file as per your design. I have modified to the below code:

<!DOCTYPE html>

<html>

<head>

<title>Hello World</title>

<style>

#clickme{

background: #333;

font-size:1.2em;

font-weight:bold;

padding:10px 30px;

margin:10px;

color: #fff;

}

#status{

font-size:2.0em;

font-weight: bold;

margin: 10px;

}

</style>

</head>

<body>

<button id="clickme" onClick="writeStatus()"> Check this out >>

</button>

</div>

function writeStatus(){

var status = document.getElementById("status");

status.innerHTML = "Welcome Bossy!"

}

</script>

</body>

</html>

Open this index.html file in a browser to see if it works :). If everything's fine and working, then move on to the next step.
Now, create a zip file of all the contents withing the www folder.

Once App is ready, Build your PHONEGAP app:)

go to build.phonegap.com.
Sign Up and create your adobe ID if you on't have one, else use your existing ID.
Once signed in, upload the zip files of your PHONEGAP app in here.
Click on ReadyToBuild option. This will build your app into iphone, windows or android compatible app. Download and enjoy ;)

Download and Install XAMPP which acts as a one-stop-shop to install and manage most WebDesinging tools such as:

Servers: apache, MySQL, FileZilla, MessagingMailServer, Tomcat
Program Languages: PHP, Perl, PHPMyAdmin, Webalizer, Fake Sendmail

You could download and install XAMPP appropriate to your OS from(https://www.youtube.com/watch?v=DFmPg_qWxA8),
www.pcmichiana.com >> XAMPP >> installer >> run and setup.

Make a note of where the XAMPP gets installed. It generally is in the location c:/xampp. This is where the webpages get deployed.

Once installed and up, the XAMPP Control panel will display the list of servers installed with it.
1)start apache
2)start MySQL

once both these servers are up displaying also the port numbers, 80 for 1) and 3306 for 2) ;
access the localhost (http://localhost) . This will bring up the main page for XAMPP.

Now, in the webpage, click on English >>
1)phpinfo() : to make sure PHP is installed correctly.
2)phpMyAdmin() : to make sure your database is installed correctly.

If the above 1) and 2) are successful, then there's just one more thing to check for.
create your first webpage(index.html) and place it in a folder named "test" under C:/XAMPP/htdocs. All the webpages needs to placed in this location.
You can now access this webpage as http://localhost/test/index.html.

Web Designing

Friday, June 5, 2015

Installing PHONEGAP for Windows

Wednesday, June 3, 2015

HTML pages and the related CSS

XAMPP setup for website in local