My Basic Solution For Cross Domain XMLHTTPRequest

As I told in my last post, I was working on the problem of cross domain XMLHTTPrequest and now I have a solution. I think it is easy to use and really basic implementation. Here the solution.

First we have a php that takes the content of the specified URL.
(I am using this to use the googleMAP reverse geocoding.)


//proxy.php

$content= file_get_contents("http://maps.google.com/maps/api/geocode/xml?latlng=36.9125,30.6897222&sensor;=true");
echo $content;
?>

Then we have a basic XMLHTTPRequest JavaScript;












//-->


This is an example implementation. Maybe you need to change some part of the program but this example is to get the idea behind the solution.

Take Care:)

Share

Today's gain is about XMLHTTPRequest to other server.

Today I was working on parsing a XML document that is coming from one of the Google servers. I wanted to use one of the datum in my map processing program and I was really happy since I could get such info. from Google server. However, suddenly and sadly 🙁 I realized that XMLHTTPRequest the my most trusted tool cannot talk with another server beside mine because of the security reasons. Thus, I started to search about this problem on internet as a Google oriented computer engineer and I found three solution. I will give some little explanations not all implementations. If you wan to get more please ask to internet.

1-)(most common one) The best approach is having a server-side proxy that receives Ajax requests, and in turn, sends HTTP requests to other servers. This should be carefully implemented by sanitizing input and whitelisting the types of requests that are sent, and the servers that are contacted.
2-)If you are using apache server, configure your server to be able to give permission for such connection
3-) What you can do as a third is dynamically create a SCRIPT tag and reference an external address

choose one and search it... good luck 🙂

Share

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

Share

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.













Real Sized View












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 curr
ent 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 !

Share

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);
}

Share

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;




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!

Share

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!!



First tutorial of JavaScript</title><br /><script type="text/javascript"><br /><!-- <br />document.writeln(" <h1> Hello World, This is Eren Golge! </h1>");<br />//--><br /></script><br />


download the example page

Share