Some Theory Part in JAVA

Refer  Introduction to JAVA  

Now , lets look at the "Theory" part of JAVA.Before that , refer The "terms" used in all programming languages also.

Programming in JAVA

This module is covering the following topics :

1. Difference between Applets and Application
2. Java Buzzwords (Java features)
3. Components of JAVA platform
4. JAVA libraries
5. Starting with a JAVA program
6. Java is Object Oriented Programming (OOP) language. What are it's advantages?
7. Data type in JAVA
8. Identifiers in JAVA
9. Some syntax used in JAVA (variables & Literals)
10. Operators in Java
11. Precedence of operators
12. Java keywords
13. Type casting
14. 
    

--------------------------------------------------------------------------------------------------------------

1. Difference between Applets and Application

Java offers two flavours of programming, APPLETS and APPLICATION . (Both are composed of CLASS extension and require JVM or Java Virtual Machine to execute machine independent JAVA BYTECODE ).

In simple terms, an applet runs under the control of a browser,(so that , it can be embedded in HTML and can be downloaded from Internet) , whereas an application runs stand-alone, with the support of a virtual machine.

Applets are the programs written specially for distribution over a network , and can be executed inside a Java-compatible container (modern network) , but Application are system level programs and can be executed from the command line.

2. Java Buzzwords

 They are nothing but some "features" provided by JAVA.

• Simple
• Object Oriented (means, JAVA focuses DESIGN on the data and on the interfaces rather than the functionalists and the tools used to develop them)
• Robust
• Secure
• Architecture Neutral
• Portable
• Interpreted
• Multithreaded
• Dynamic

3. Components of Java Platform

2 platforms (hardware or software environment) are there,

1. JVM (Java Virtual Machine)
2. Java API (Java Application Program Interface)

JVM is an abstract machine .The "bytecode"  into which a JAVA Program is compiled and run in this JVM , and thus it is portable and architecture independent.

The Java API is a large collection of ready made software components , that provide many useful features , such as GUI (Graphical User Interface) widgets.API is grouped into librars(packages) of related components.

4. Java Libraries

The libraries(packages) of JAVA used to develop multi-patform applications.They are,

1. java.lang
2. java.io
3. java.util
4. java.awt
5. java.net

5. Starting with a Java Program

Let us consider a small JAVA program.Refer Introduction to JAVA .

// This is my first Program (This line will be ignored by the compiler) .

              public class firstprogram
                   {
                       public static void main(String args[ ])
                              {
                                  System.out.println("Hai...Welcome...");
                               }
                    }

See this program in detail .

• // This is my first Program Here, this first line  is used for Documentation purpose. It will be ignored by the compiler. This That means , this is used for understanding about a program. For larger programs , this is very helpful to know the purpose of a particular part of code
• class is a "keyword" .Everything should be in a class.
• public is a also a "keyword" which makes this class available and accessible by any one , which means it can be accessed from any package , or any class.
• firstprogram is the name of the public class.
• static is a "keyword" which signifies that this method will be called without creating an object of   firstprogram. And this method will be invoked first and only once by the JVM.
• void is the return type of the main method , which means that , this method is not going to return any value.
• System.out.println is used to print anything on the console.
• in java , the semicolon ; will terminate a program.

How to compile and run a JAVA program ? Click here to read.

6. Java is an OOP . what is it's advatages ?

The main advantage that it allows you to control the complexity. You can create an object which represents some real one, put the logic inside it and hide all the implementation details behind some interface, which is public.

That way, the client has no idea how the object is implemented but deals with public interface to control it. For understanding suggest the program interface of the car:Every vehicles have some implementation details, but all have the common interface, and don't need cleint to be aware of implementation details.

• Java is not source compatible with any other languages,so that JAVA has the freedom to design with a blank state.
• The object model of JAVA is simple and easy to extend , while simple types (such as integers) , are kept as high-performance non-objects.

Advantages are :

• Flexibility
• Modularity
• Reusability

Using OOP methodology , a program need not be redesigned from scratch.Using this concept,software can be developed based on already existing project.

(This is a wide topic , so refer to study yourself).

7. Data type in Java 

A data type in a programming language is a set of data with values having predefined characteristics.Two different categories are there,

• Primitive Type (8 numbers)

1. byte
2. short
3. int
4. long
5. float
6. double
7. char
8. boolean

• Reference Type

8. Identifiers in Java 

Identifiers are the names of ,

• variables (Variable names are case-sensitive)
• methods
• classes
• packages
• interfaces

Identifiers must be composed of ,

• letters
• numbers
• underscore
• dollar sign $

Identifiers may only begin with ,

• a letter
• underscore
• dollar sign $

9. Syntax used in Java 

Variable :

• Syntax to create a character variable is 

Char ch = 'b' ;

This means , the variable ch has been assigned the value of the letter b .
Single quotes aound the letter b ( 'b' ) tells the compiler that , we want the value of b , rather than the letter b.

• Syntax to create an integer variable is 

byte x=10 
short y =15
int p = 20
long q= 25 : etc

• Syntax to create a Boolean variable is 

boolean b=true:

It has only 2 values (true or false)

• Syntax to create a Float variable is 

float f1=3.14:

float f2=1.402e-2   

etc.

Literals :

They are pieces of Java Source Code 

Java has 4 kinds of Literals ,

1. String (Example : "Hellow World") .
2. Character (here, single quotes are used instead of double quotes, example : 'c' )
3. Number (there are 2 types of numeric literals integers & floating point numbers).
4. Boolean (Can have either true or false)

10. Operators in Java 

The are used to build expressions.They are categorized as ,

• Relational and Equality operators ( < , >= etc)
• Assignment Operators 
• Arithmetic
• Bitwise
• Increment and decrement operators
• Logical

(Study this by referring books) .

11. Predecence of Operators in Java 

Precedence of operators : Study from text

12. Java keywords

They are reserved and cannot be used as a variable.There are 45 keywords.

13. Type Casting

int / int = int
doube / double = double
But , what about an int divided by a double or a double divided by an int?

Assigning a value of one type to a variable of another type is known as "Type Casting".

A cast lets the compiler know that you are serious about the conversion you plan to make.
See the example CJ-26 : Accept Radius in meter

=========================================================

Will Continue.....

Back to JAVA

Advanced Designing : page "About us"

Refer  PHP Introduction & SQL - Quick reference

Balance chapter from 

1. PHP : Downloading a template and editing 
2. Editing a PHP Template using Dreamweaver
3. Editing TITLE of a template 
4. Editing other pages of a website from a Template 
5. Introduction to Advanced Designing 

PART - 6  " ABOUT " 

Here , we are explain how to design an about page , in detail.

In the previous chapters , we came to know that , some fields can't edit within the page.  
In Editing other pages of a website from a Template  , we edited almost all the pages .

Now , we are designing with CSS etc (refer PHP Introduction ).

Before starting , open the downloaded folder once again and click the folder named "pages".
There you can see that there are other HTML files like :  about.html , contacts.html ,  demo.html , portfolio.html and  skills.html . See below : 

PICTURE - 1 : Downloaded folder of Template

It's only for your understanding.

Now , before start designing , keep these points in mind.

Open index.html in Dreamweaver , and have a look at "about us" (This "about us" in index.html is connected to "about.html" pages See the pages in above picture).

POINT NO : 1

Picture - 2 : About us have 2 part : icon-user & title 

That is , there is the title "About us" and there is an "icon"  for the user.
When we click "about us" , the corresponding code will display below the design.
Code part in index.html itself also attached above .

POINT NO : 2

The same also connected to another file which is not directly editable from index.html.To find out that destination file , we can use "code navigator" (alt click).

press ALT then click on "about us" (alt click) of index.html. It will display a box which contains the exact line of code and name of the file which is associated with "about us" in index.html .

Picture - 3 : ALT CLICK on about us gives the destination file basic.css

We know that , there is a folder named "styles" in the downloaded template , which contains two CSS files such as "basic" and "mobile" . 

This "basic.css" is the code which links between index.html and "about.html" .

One more important point : 

When we click any of the code in Picture - 3 , it will redirect us to the corresponding CSS file .So editing will be easy . See below :

Picture - 3(1) .Clicking any of the code in picture -3 will redirect you to the given picture .

This means , now you get the design view above , and the corresponding CSS code view in below ( Instead of Picture - 2)  . In index.html , normally there is the corresponding code below the design . This method is more easy to find out the destination file .

POINT NO : 3

Now , again from index.html , click "about us" , when we click the term "About us" , it shows as ,

Picture - 4 : when we click the term "About us",
the text will appear on the right side of index.html .

That is , When we click "about us" , some text part is  displaying on the right side.
When we click on that text area, corresponding code will display below the design part .That will also attached in the above picture. .

POINT NO : 4

Now again , as we did in POINT NO : 2 , ALT CLICK on the text part to get it's destination file.

Means , these text area (picture-4) also connected to another file which is not directly editable from index.html.To find out that destination file , we can use "code navigator" (alt click).

press ALT then click on that text part of picture - 4 . It will display a box which contains the exact line of code and name of the file which is associated with  index.html .See below : 

Picture - 5 :ALT CLICK on the text part to get it's destination file "basic.css"

Combined code as given ,

Picture - 5(1) : Alt click both text together , to get this CSS file

Note that , the difference in the basic.css file for both text part.

Now , we are going to the coding part of the above points

At first click the "About us" menu.Refer picture - 1 .

We already changed "About" to "About us".Now closely observe each code.
You can see that href="pages/about.html which means the link from this page(index.html) goes to about.html.

Where is that page ? It is in the folder named "pages". (href is nothing but a code used to give link).

<a href="pages/about.html" class="menuitem">                    <i class="icon-user"></i>                    <div class="menu-title">About us</div> </a>

In the downloaded folder , when we open the folder named "pages" , you can see the pages as in  picture - 1 .

From index.html , the link goes to about.html page .Now open this page in dreamweaver .
You can see the text that ,

Picture - 6 : about.html ( linked from index.html)

You can see some simple text here .
But , when you open index.html and clicking the term "About us" , it shows like Picture - 4.

The link "About us"  from index.html , connected to the page about.html . And you can see that when the text comes to inde.html , it has some modification. Here comes the importance of Cascadng Style Sheet or simply CSS.refer PHP Introduction to get a small idea about CSS.

That is , When we clicked  the folder r named "styles" in the downloaded template ,you can see 2 files as in  picture - 1 .

1. basic
2. mobile 

Both are CSS files. All the text style,size, color etc are giving in this code part.

Then linking this to index.html

(This is a bit lengthy one , a beginner can't follow
them easily.I will describe them later).

POINT NO : 5

How to find out the code connected from index .html to CSS files ?

Open index.html .

Open basic.css .
You know already that , in  HTML (Refer HTML - An Introduction) after html and body part , coding will start .

Refer Picture - 3 and 3(1) & Point no - 2 .
You can see that ,

• .content
• .menuwrapper
• .content.menuwrapper
• .content.mainmenu

At first ,from basic.css ,  use controlF (find) to find out this code.

Picture - 7 : basic.css 

When we use FIND command to search the word .content , it displays all the word starting with .content.
All the pink colored one is the CSS code for "about us " in index.html.

A little effort needed to study this , but here , I am giving the details related to index.html file only.

Let's have a look at each one of this in detail.

• .content

.content {      max-width: 1200px;      width: 100%;      height: 100%;      position: relative;      margin: 0 auto;     display: table; }

In this portion , the width and height of the content (about us) is specified. 

We can see that , when we open about.html file , all the texts are not in an alignment like index.html.

(See Picture - 6).

No need to tell you about the term width,height etc.But need to understand how this will change the index.html , when we change the values in about.css 

Let's try .

Refer Picture - 4 . Now in the above code , I changed width 1200 to 120 .
That is , max-width: 120px; 

Now save basic.css and goto index.html .
See the index.html file now.

Compare this picture with Picture - 4 .When reduce the width from 1200 to 120 , see the text area also reduced.

Got an idea ?

Now change it back to 1200 . then you will get Picture - 4 again.

As per the points given above , do the rest part of designing by yourself. Refer Picture - 3 and Picture 3(1) & Point no - 2 especially , to get an idea.

Or , Will come here with the remaining part.

----------------------------------------------------------------------------------------------------------------------------

Like this , try to edit "Contacts" ,"Skills" and "Portfolio" also.

You may notice that , there is a S like symbol , and while we click that symbol in the center , we can change it.

Will Continue.....

Back to Creating a PHP web site - Starting from scratch.

Introduction to Advanced Designing

Refer ,

• PHP-WAMP Sever
• PHP - Introduction
• PHP-Database connection and
• Creating a PHP web site - Starting from scratch (This is important for creating a website).
• SQL - Quick reference (For understanding database concept)

-------------------------------------------------------------------------------

Balance chapter from 

1. PHP : Downloading a template and editing 
2. Editing a PHP Template using Dreamweaver
3. Editing TITLE of a template 
4. Editing other pages of a website from a Template . 

Hope you know the 2 STEPS A & B for editing purpose . Or , just go through Editing TITLE of a template once again .

PART - 5

Two important points you have to keep in mind.
1. Sometimes , we can directly edit the code by clicking the design part.
2. But sometimes , we cant edit the design directly.

We can see that , there are 4 menus as "About" , "Contacts" ,"Skills" and "Portfolio" .And a Photo while we click the symbol in the center. And I created a new menu "My Blog" in the previous chapter . Refer Editing other pages of a website from a Template .

In the previous chapter , we came to know that , some fields can't edit within the page. Here we are going to discuss about designing the pages , from other files.

You can see that , the downloaded template contains other files as given below :

Refer PHP : Downloading a template and editing .

• First one is FONT . whatever font we are using in this particular template , they are included in this file.
• All the images we used in the website template is saved in the file named "img".
• "js" means "Java Script" .Scripting is an important part in advanced designing . We will discuss this later . Refer PHP Introduction .
• All the pages are saved here. When we open the folder named "pages" , you can see that ,

• Another folder "Styles" also contains CSS (Cascading Style Sheet) documents , which will also very important in webdesigning, We will discuss a little  about it in the coming chapters.Refer PHP Introduction .

Now , we are going to design by changing codes from this files. Refer Editing other pages of a website from a Template once again before proceeding.

Next go to : Advanced Designing : page "About us"

 

Back to Creating a PHP web site - Starting from scratch.

Editing other pages of a website from a Template (TIP-2)

Refer ,

• PHP-WAMP Sever
• PHP - Introduction
• PHP-Database connection and
• Creating a PHP web site - Starting from scratch (This is important for creating a website).
• SQL - Quick reference (For understanding database concept)

-------------------------------------------------------------------------------

Balance chapter from 

1. PHP : Downloading a template and editing 
2. Editing a PHP Template using Dreamweaver 
3. Editing TITLE of a template .

Hope you know the 2 STEPS A & B for editing purpose . Or , just go through Editing TITLE of a template once again .

That is , 

• STEP : A -  Open the page in Dreamweaver , to make changes in the code
• STEP : B - Now open the template (From the folder softdreambuilder) in WAMP server.(Whenever any changes u made in code, click"refresh" to view that change.

 ------------------------------------------------------------------------------------------------------------

PART - 4

Two important points you have to keep in mind. 1.      Sometimes , we can directly edit the code by clicking the design part. 2.     But sometimes , we cant edit the design directly.

I am describing this two types here. But the second one goes to the advanced section (Creating a PHP web site - Starting from scratch)

We can see that , there are 4 menus as "About" , "Contacts" ,"Skills" and "Portfolio" .And a Photo while we clicke the symbol in the centre.

We are going to redesign each one of them.

When we clcik "Add menu item" from the pop-up menu on the right side,we can add new menu items.

Now , we are going to each menu items and it editing.

1. " ABOUT " 

In the previous chapters , we downloaded a theme , change the title of the site we are going to redesign .

And selected the term " About" to make changes.

But note that , when we try to change the title of the page (Editing TITLE of a template) , we can type in the code directly , as shown below : 

But , at the same time , when we clicked the "About" page icon , we can't see any portion , which is directly editable . Just like you changed the "Title" , here , you cant change the name "About" icon .Isn't it ?

Instead , you can see , "<i class="icon-user"></i>" ( This will be describe in Introduction to Advanced Designing ).

TIP : 2 

See , I selected the "About" page icon in design view , then the corresponding code is highlighted below (line number 89).And you can understand that ,the icon cant change.

Yet , you can change the "About" field only ". click "about" and be sure that , you are clicking the term "about" only , not the details of the icon.See below : 

If you want to change this to "About us"  , change in the code as given below,

Then ,from Editing TITLE of a template  ,

• STEP : B - Now open the template (From the folder softdreambuilder) in WAMP server.(Whenever any changes u made in code, click"refresh" to view that change.

And note the output as, 

"About" is changed to "About us". 

Contents displayed in "About us" 

When we click "About us" , you can see that some default text is displaying in the right side. Click that one to get  it's code .

From the above code (line number 142,143 and 144) , you can understand that , there is no provision for changing that texts , this also  will be describe in Introduction to Advanced Designing). Remember the "Title" we edited. 

2. " CONTACTS " 

Like the "About" field, next click "Contact" from the design part of Dreamweaver , and see the corresponding code part is displaying (line number 94 to 97).

And , you can see that it also not editable (But , only the "Contact" can change to "Contact me" etc , if you want.

And at the same time , as described above, some default text is displaying in the right side of the design.

What will happen , if we click that portion ?

It is also not editable ..... !!!

Click each one separately (Contact , name, email , message and sent etc ) on the text portion which is displayed when clicking "Contacts" .And find the corresponding code part separately.

And note the difference , if there are any.

3. " SKILLS " 

Do the same as described above.

4. " PORTFOLIO " 

Do the same as described above.

5. " ADD MENU ITEM" 

Here , you can see , when clicking the PLUS (+) symbol on the left of the design portion , will open a new menu item also. 

We can change the "Add menu item" texts only , and note that , the new item name is "Other" by default. 

Too see that , go to WAMP server ,select the "index" page from our folder, and click to add a new menu item ,so that you can see the new menu icon named "other" will be there.

But where to rename this newly created menu ?

This also comes to the advanced part  Introduction to Advanced Designing .

6. " PHOTO" 

You can see the code as ,

"<img class="photo" alt="photo" src="img/photo.jpg">" , when we click on the centre portion to display the photo .

Here also , you can understand that , we cant edit or change the photo from the corresponding code .

But , how to change this pic ?

This also comes to the advanced part Introduction to Advanced Designing.

7. All menu items together  

When we selected the menu " Number 1: About"  , the corresponding code displayed in line number 89, as given below:

Crossly observe the code . You can see there a sentence like ,

"!-- ========  Copy this block for add new menu item: ======== -->"

It means , all the above menus like about us, Contact,Skills,Portfolio etc contains here.

Selecting All menus by clicking TAGS

Below the page , you can see some TAGS (like body,div, content,menuwrapper , mainmenu,menu-items etc) . 

You know already that , in  HTML (Refer HTML - An Introduction) we used tags .

< > is known as TAGS. 

•  <>  is to open the HTML commands . 
• And a slash ( / ) is used to close any commands . 

Select the last one ( <div class="menu-items"> ) , and you can see that the whole menus are selected , as given below :

The selected portion contains all the menus like ,about us, Contact,Skills,Portfolio etc. and after that , you can see , a dummy portion . That code part is creating a new menu.

8. How to create a new menu item  

In the above code , instead of "Demo" , I am giving "My Blog" . Before that note the ! symbol  .Whenever you put that symbol , it will not run by the server. 

Using this symbol " ! "we used to give a comment in the code portion, which is omitted while running the code.

Note that the code is in not in active mode . To remove it from comment section , just delete the  ! symbol . And see below : 

And I changed the menu name to "My Blog".

Click SAVE , Now open the template (From the folder softdreambuilder) in WAMP server .

See , a new menu item is there named "My Blog" , and while clicking it , will go to the blog.

But , where to give the address of the blog  " http://programming-bca-mca.blogspot.in/ " ?

This also comes to the advanced part  Introduction to Advanced Designing

NOTE: 

For a better view , you can select any one of the mode (mobile size, tablet size and desktop size) from the bottom left corner of the page , as given below :

I am giving here the changes we can make in the code , only within the page.

But where to give the link, change the photo etc ?

Ok , lets move to the next chapter ..in which you can understand other portion of the designing.

Goto  Introduction to Advanced Designing 
Back to Creating a PHP web site - Starting from scratch.