Coding Together: Haziran 2010

22 Haziran 2010 Salı

A LITTLE MSSQL (TRANSACT SQL)...

I guess I am little out of the purpose of the blog but I am put effort on my internship so I cannot give my all attention to Webing. Also I do not want to stay my blog empty. In that way, I share my today's work. I try to learn SQL in Microsoft way. Here my codes with short explanations just to give little sense about SQL.

SQL is a universal standard language to manage Databases but it has different styles respected to the server systems such as MsSql, MySql ... So now I am talking about "Transact SQL" that work with Microsoft Server system "MSSQL".

FOR MORE INFO.

HERE SOME BASIC EXAMPLE CODES WRITTEN IN THE QUERY FILES



CREATE DATABASE BookDatabase3
GO

DROP DATABASE BookDatabase3 --delete database
GO

USE BookDatabase2; --use database

PRINT 'This is EREN''s experiment on MSSQL';

SELECT (SELECT 448.25); --print on table
GO

SELECT 'Ahmet' AS 'Author Name', '43' AS Age;--AS using to define the column name

DECLARE @Mustafa int, @Ali int, @Ahmet int; --define a variable @ must be added

SELECT @Mustafa = 46;--initialize the variable

SET @Ali = 43;--initialize the variable

DECLARE @IsFamous bit;
SET @IsFamous = 1;
SELECT @IsFamous AS [Is Famuos?];
Go

DECLARE @Distance DEcimal(6,2);
SET  @Distance = 208.12;
SELECT @Distance;
GO

DECLARE @Name char(20);--using string as char array
SET @Name = 'Eren';
SELECT @Name AS 'My Name';
GO


--CREATE TYPE shortString FROM nchar(20); --create your own data type

DECLARE @num1 int, @num2 int;

--CONDTITIONAL STATEMENT
SET @num1 = 20;
SET @num2 = 20;
IF (@num1 = @num2)
 BEGIN
  PRINT 'Numbers are not equal';
  PRINT 'Change the code';
 END 
GO 

 
--SWITCH - CASE of alertnative
DECLARE @num1 int, @num2 int, @Result char(20);
SET @num1 = 20;
SET @num2 = 20;
SET @Result  = CASE @num2
     WHEN 1 THEN 'It is 1'
     WHEN 2 THEN 'It is 2'
     WHEN 3 THEN 'It is 3'
     ELSE 'It is nothing'
      END
PRINT @Result;
Go

--WHILE ITERATION
DECLARE @Number As int
SET @Number = 1
WHILE @Number < 5
    BEGIN
 SELECT @Number AS Number
 SET @Number = @Number + 1
    END
GO

19 Haziran 2010 Cumartesi

New Sliding Image Gallery Experiment with JavaScript.

At this heading I will explain hoe to create such a Sliding Picture Gallery. You need to know some basics of HTML and JavaScript to do this.

Here the link to see the result.

First we start to set the positioning of the necessary divisions on the browser screen. We need to use some CSS to do that. Here The codes. We need basically one container division to include all the others then two "movePart" and "fillingPart" divisions. "movePart" will include the picture and it will be slided. "filingPart" will include two more divisions to be used for arrows to change the images. The divisions for arrows are "leftArrow" and "rightArrow".



#container{
 position:relative;
 width:350px;
 height:345px;
 border:thin solid;
}

#fillingPart{
 position:absolute;
 width:350px;
 height:25px;
 left:0px;
 top:0px;
}

#rightArrow{
 position:absolute;
 width:24px;
 height:25px;
 background-color:#0C9;
 right:0px;
 top:0px;
 cursor:pointer;
 background:url(rightArrow.jpg);
}

#leftArrow{
 position:absolute;
 width:24px;
 height:25px;
 background-color:#0C9;
 left:0px;
 top:0px;
 cursor:pointer;
 background:url(leftArrow.jpg);
}
 
#movePart{
 position:absolute;
 top:25px;
 left:0px;
 width:350px;
 height:320px;
 background:#A6BBCD;
 overflow:hidden;
}

#fullScreenButton{
 cursor:pointer;
}

Now it is time to add HTML components to our design.


<body onload="setImageArray();">
<div id = "container">
 <div id = "fillingPart" align="center">
    
     <div id = "rightArrow" onclick="useSlideForward()">
        
  </div>
        <table id = "panel" border="0">
    <tr>
           <td id = "fullScreenButton" align="center" onclick="fullScreen();" onmouseover="mouseOn();" onmouseout="mouseOff()"><font id="sized">Real Sized View</font></td>
       </tr>
   </table>
        <div id = "leftArrow" onclick="useSlideBackward()">
         
        </div>
        
 </div>
  
    <div id="movePart">
     
 </div>
</div>
</body>

At html part we start with calling the function "setImageArray" which we will see late but basically it sets an array of the images that will be used for gallery. It behaves like a constructor. Then as I defined, we create the structure of the divisions. Also we add event for a click over to arrows' divisions to call the functions that change the images on the screen. I used table for setting the certain center alignment to the "fullScreenButton" between the arrows in the "fillingPart". In addition, it calls "fullScreen" function with mouse click to show the image with real size on a new opened window. We have also "movePart" division that will be filled by JavaScript code at the script field of the code.

Now it is time for the script code.


 var sliderIntervalId = 0;
 var sliderIntervalId2 = 0;
 var sliderHeight = 320;
 var sliding = false;
 var slideSpeed = 10;
 var countImage = 0;
 var numOfImages = 8;
 var forwardOrBack;
 
 function useSlideForward(){
  forwardOrBack = true;
  slide();
 }
 
 function useSlideBackward(){
  forwardOrBack = false;
  slide();
 }
  
 
 function slide(){
  if(sliding)
   return;
  sliding = true;
  if(sliderHeight == 320)
   sliderIntervalId = setInterval('slideUpRun()',30);
  else 
   sliderIntervalId = setInterval('slideDownRun()',30);
 }
 
 function slideUpRun()
 {
  slider = document.getElementById('movePart');
  if(sliderHeight <= 0)
  {
   sliding = false;
   sliderHeight = 0;
   slider.style.height = '0px';
   clearInterval(sliderIntervalId);
   if(forwardOrBack)
    moveForward();
   else
    moveBackward(); 
   slide();
  }
  else
  {
   sliderHeight -= slideSpeed;
   if(sliderHeight < 0)
    sliderHeight = 0;
   slider.style.height = sliderHeight + 'px';
  }
 }
 
 function slideDownRun()
 {
  slider = document.getElementById('movePart');
  if(sliderHeight >= 320)
  {
   sliding = false;
   sliderHeight = 320;
   slider.style.height = '320px';
   clearInterval(sliderIntervalId);
   //change the image
  }
  else
  {
   sliderHeight += slideSpeed;
   if(sliderHeight > 320 )
    sliderHeight = 320;
   slider.style.height = sliderHeight + 'px';
  }
 }
 
 //***********************
 //create the images array
 //***********************
 var images = [];
 
 function setImageArray(){
  var j =0;
  for(var i = 0; i < numOfImages; i++){
   images[i] = new Image();
   images[i].src = "image"+(i+1)+".jpg";
   images[i].width = "350";
   images[i].height = "320";
  }
  document.getElementById("movePart").appendChild(images[0]);
 }
 
 function moveForward(){
  document.getElementById("movePart").removeChild(images[countImage]);
   countImage++;
  if(countImage >= numOfImages)
   countImage = 0;
  document.getElementById('movePart').appendChild(images[countImage]);
 }
 
 function moveBackward(){
  document.getElementById("movePart").removeChild(images[countImage]);
   countImage--;
  if(countImage < 0)
   countImage = 7;
  document.getElementById('movePart').appendChild(images[countImage]);
 }
 
 var windowm;
 
 function fullScreen(){
  windowm = window.open("","Real Sized Image",width = 300, height= 200);
  windowm.document.write("");
  windowm.document.write("
Close");
 } 
 //********************
 //set the color of the text
 //********************
 
 function mouseOn(){
  document.getElementById("sized").style.color = "#999999";
 }
 
 function mouseOff(){
  document.getElementById("sized").style.color = "#000000";
 }

We start by defining some of variables of the script.
slideIntervalId -- to keep the id of the setInterval function of the script.
If you do not know setInterval method here the little tutorial.

sliderHeight -- it defines the height of the "movePart" division and it will be used to limit its motion.
sliding -- it is used to check whether "movePart" is sliding or not.
slideSpeed -- it is used to define the speed of the motion by using it inside the setInterval() function.
countImage -- it defines index of the imagesArray.
numOfImages -- it is number of the images.
forwardOrBack -- it defines which of the arrow is clicked.If it is true "rightArrow" is clicked otherwise "letfArrow"

Now type functions.

First two functions are called by the clicks over the corresponding arrow. Then they define clicked arrow and call the slide function that slides the galley.

"slide" function checks gallery is on the motion or not firstly. If it is not on motion choose the correct sliding function respected to the current situation of the motion.

Then we come to "slideUpRun" that slides the image to up and "slideDownRun" gives the opposite motion. They are called sequentially by "slide" function. Both of them have same basic algorithm in the function declaration. First we create a "slider" object of the "movePart" division. Then we check the sliderHeight to stop the motion ( as example, for slide up funtion if sliderHeight is 0 then stop the motion.).To stop the motion we set the height of the "movePart" division height 320 px. It makes guarantied to set the height to correct number.Moreover we calls the "clearInterval" function to stop the execution of the "setInterval" function correspond to sliderIntervalId.

In slide up and slide down function we gives the motion with the "else" section of the codes. We start this section with the code segment that increase or the decrease the height of the division for each call. Then we check whether our motion id out of the out limit or not. Finally we set the height of the division to our sliderHeight.

We solved the motion problem of our gallery. Now we get into the problem of setting the images and changing the images. First function of this section is "setImageArray"
that sets the image array and put the initial image to the "movePart" division. Then we have changing image functions with basic algorithms. Next function is "fullScreen" that opens new window with current image's real size. Our final functions are "mouseOn" and "mouseOff" functions that chage the color of the "Real Sized View" text on the top of the script.

That's all. For further help you can contact me. Take care !

16 Haziran 2010 Çarşamba

My Projects!!

Google Maps v3 api project is new and I am working on it at the moment.

For the java project, it has some flaws but I have no time to fix it but it will be fixed soon.

Link to my projects page.

Fastest search code in the world!! :) (not related to webbing but?)

This is implementation of the radix sort in binary base with C++ code. You could see the O(1) implementation of radix sort with huge fast difference from other algorithms.

void radixAt(int numberOfItems,int byteNumber, int *temp, int *arr){
int count[256];
int index[256];
for(int i = 0; i<256; i++){//fill all elements of count array with 0
count[i] =0;
}
for(int i = 0; i < numberOfItems; i++){//determine the number of each byte amounth
count[(arr[i] >> (byteNumber*8))&0xff]++;//take byte to controll
}
index[0] = 0;
for(int i = 1; i < 256 ; i++){//for each byte amounth, keep the index space
index[i] = index[i-1] + count[i-1];
}
for(int i = 0; i < numberOfItems ; i++){//fill elements according to their byte to temp array for next call to main array
temp[index[(arr[i]>>(byteNumber*8))&0xff]++] = arr[i];
}
}
void radixSort (int *arr, int *tempArr, int size){
radixAt(size, 0, tempArr, arr);
radixAt(size, 1, arr, tempArr);
radixAt(size, 3, tempArr, arr);
radixAt(size, 4, arr, tempArr);
}

14 Haziran 2010 Pazartesi

Creating Web Page Template By HTML div tag

You need to know CSS and HTML for this topic.

Now it is different piece from JavaScript but it is fundamental side of web page design. Creating a template makes your life easy while you are designing a web page since, you can easily shape your pages by adding some necessaries to template.

Today's most common way to create a template is using div tag. Basically you define a container "division" that is the main division that includes the other container inside it. Then we add others respected to our design to its inside. Do not forget to give id or class name to each division to be specified for CSS. (Like as in the figure.)


Example HTML for such template;
<div class = "container" >
<div class = "left"> </div>
<div class = "right">  </div>
</div>

But it is not enough to have this HTML code, also we need to use some CSS to define our divisions' width and height.


CSS code
.container{
 width: 960px;
 background-color:#FFF;
 height: 500px;
 margin-left:auto;
 margin-right:auto;
}

.left{
 float: left;
 width: 430px;
 height: 490px;
 background-color: #DFDFDF;
 padding: 10px;
 overflow:auto;
}

.right{
 float: left;
 width: 430px;
 height: 490px;
 background-color: #BFBFBF;
 padding: 10px;
 overflow:auto;
}

To see the resulted page click!

13 Haziran 2010 Pazar

Let's start with JavaScript.(click to see all)

JavaScript is a script language to add more professional functionality and appearance to your webpage. Some of people think that JavaScript is related to a application programing language Java but they are not. JavaScript is developed by Netscape and supported by all major browsers today.

And start as all programming exercises with writing a "hello world" script.

Up to line 6 there are usual XHTML beginning tags as you realize.

Real excitement is starting with the line 6 it includes "script" tag that
indicates the beginning of the script then we have " " comment tag for HTML. We have no "//" before "<!--" since it is also single line comment delimiter. Finally close your script.

We add our script to head section of our HTML to be executed before body part of HTML but it is also possible to use your script in body part of your html and we'll see how to use in such way but be patient :).


to copy pase!!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>First tutorial of JavaScript</title>
<script type="text/javascript">
<!-- 
document.writeln(" <h1> Hello World, This is Eren Golge! </h1>");
//-->
</script>
</head>

download the example page