4moki[dot]com http://4moki.com delicious Internet Wed, 17 Mar 2010 21:38:13 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Jquery ajax tutorial http://4moki.com/jquery-ajax-tutorial/ http://4moki.com/jquery-ajax-tutorial/#comments Wed, 17 Mar 2010 20:36:51 +0000 kirik http://4moki.com/?p=96 In this article I would like to tell about technologies such as ajax.
As a rule I stick to this philosophy – better to see once than to hear 100 times, so basically will practice rather than theory.

At first I will say that ajax is just a technology for exchanging data between the client and the server uses a programming language based on javascript.

This technology allows the HTTP protocol asynchronous, which in turn gives us the opportunity to exchange data without reloading the page.

Ajax tutorial

Jquery ajax tutorial

In that it works this way: we take something (whether the contents of the tag h1) and pass it to the server (eg Apache) through a special object XMLhttpRequest.

The server processes the data (for example script in PHP) and returns the client-side result of their treatment. Further the client script (eg JS) can do anything, for example, insert a new content in the same tag H1.
All told basic idea of technology is written, now proceed to its implementation.
For a basis we take JS freymovrk Jquery, PHP framework Codeigniter.

So, we start by creating an html page, in Codeigniter they are called views. Our html page is called sample_view.php.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Sample ajax tutorial</title>
        <link href="<?php echo base_url();?>css/style.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.4.2.js"></script>
   <script type="text/javascript" src="<?php echo base_url();?>js/admin.js"></script>
      </head>
    <body>
        <div id="text">
            <h1 class="h1"></h1>
            <h2 class="h2"></h2>
        </div>
    </body>
</html>

Everything here is extremely simple. The main thing what to know is the fact that the code framework Jquery better connect the first among all the js scripts. Also we have created a fairly simple layout consisting of several div tags and headers.

Just to show you the code which displays the styles for our page, it has name as you can see style.css

#text{

position: relative;

margin: auto;

padding-top: 10%;

width:60%;

background-color: #eeeddd;

}

#caption{

position: absolute;

top:20px;

width: 100%;

padding-top: 2%;

text-align: center;

background-color: gray;

}

.h1{

text-align: center;

font-size: xx-large;

font-weight: bold;

font-family: Gill, Helvetica, sans-serif;

}

.h2{

text-align: right;

padding-right: 10%;

padding-top: 10%;

font-family: Gill, Helvetica, sans-serif;

}

There is nothing to us interested so you can just take and copy. After all, we are not designers)

Well here we are getting to the most interesting, namely the client script, the name of which I gave very angry – admin.js

$(document).ready(function(){
        setInterval(function(){

         $.ajax({
                type: "POST",
                url: "index.php/sample/update/",
                dataType: "json",
                  beforeSend: function(){
                         $("#text").val('');
	                  $(".h1").hide();
                         $(".h2").hide();
		    }
	           success: function(mes){
  	                  $(".h1").text(mes.text);
       	           $(".h2").text(mes.author);
                         $(".h1").fadeIn(3000);
                         $(".h2").fadeIn(3000);
	                  $(".h1").fadeOut(1000);
       	           $(".h2").fadeOut(1000);
	           }
        });
},5000);
        });

I tried to make the most simple example, what would you till now in this technology.

Thus, our script will work as soon as the page is loaded. And it will run ajax request with an interval of 5000ms. This provides us a function setInterval. Coming attribute ajax request we indicate request type, address of the server on which the script will be executed processing data sent by us (url), the type of data returned by the server (dataType). Further there are 2 functions beforeSend and succes, first is performed before shipment, and second is performed after successful receipt of a response from the server (200 ok). Methods val, hide, text, fadeIn and fadeOut I think speak for themselves.

We still have to work server side. So start with the controller, its name sample.

<?php

class Sample extends Controller {

        function  __construct() {

		parent::Controller();
	}

	function index()
	{
		$this->load->view('sample_view');
	}
         function update()
	{
            $data = $this->sample_model->get_data();
            if(isset($data)){
                foreach ($data as $key => $list){
                $d['text'] = $list['text'];
                $d['id'] = $list['id'];
                $d['author'] = $list['author'];
                }
            echo json_encode($d);
            }
            else{ 

                echo "false";
            }
}
}
?>

Here the method index () loads our html page. And all processing of data is transferred in the method update (). In the variable $ data, we load data from database into an array, and then through the loop forming a new one. The function of json_encode we translate our array in the type of JSON. And in the end send it back to the client side.

Well finally show you the code of our model, its responsibilities is to work with databases (sample_model.php)

	<?php
class Sample_model extends Model{
    //put your code here
    function Sample_model(){
        parent::Model();
    }

    function get_data(){
            $this->db->select('*');
            $this->db->order_by('id', 'random');
            $this->db->limit(1);
            $query = $this->db->get('sample');
            foreach ($query->result_array() as $row) {
                $temp[$row['id']] = array(
                    'id' => $row['id'],
                    'text' => $row['text'],
                    'author' => $row['author']
                );
             }
            $query->free_result();
            return $temp;
    }
}
?>

I think that all people understand easily.

Source code - Jquery ajax tutorial
Demo(please wait 7-10 seconds when page load)- Jquery ajax sample

I think next time to show a more complex example and reveal more of the theory. I want to ask about what you would be interested in reading. So who are interested send questions and suggestions in the comments to this article. And if you enjoyed this article put a link to it on your personal blog or anywhere else. Thank you!

Relates post

  • Ajax login with Jquery and Codeigniter
]]> http://4moki.com/jquery-ajax-tutorial/feed/ 5 Writing for search engine friendly TITLE http://4moki.com/writing-for-search-engine-friendly-title/ http://4moki.com/writing-for-search-engine-friendly-title/#comments Wed, 24 Feb 2010 20:15:52 +0000 kirik http://4moki.com/?p=74 I think those who are familiar with SEO they are well aware that a correctly formatted title is approximately 10% of success in search engine optimization. Therefore, in this article I want to show how to make more correct title for the page.

First, we define a page’s theme, for example, there is we will have text about rent of apartments in New York on the page.

keys

Keys

Go to adwords.google.com and select the most popular searches in the topic. Enter the appropriate key words, namely: rental housing, renting.

Then we expose a region of the United States of America, we establish an exact match and sort by number of local requests.

The figure shows the keywords, a frequency is greater than 10000.

It is better to adhere to the following requirements for the preparation of title:

• Length should not exceed 11 words

• Total number preferably should be less than 60 characters

• At the beginning of Title is better to put the most high-frequencykeywords, as the maximum weight will be exactly the first phrase

• better to separate the keywords by comma

Well, let’s proceed to the formation of our title.

range keys

Keys

1. In the first set «apartments for rent» because it is a very steep keyword, almost all the same 700,000 queries per month.

2. The second place we combine «house rentals» and «house rent» into «house rent and rentals».

3. And then we combine «apartment for rent» and «rooms for rent» into «apartment and rooms for rent».

As a result, we obtain the following: apartments for rent + house rentals + apartment and rooms for rent.

Our title correct with punctuation marks, where needed whatever weight distributed between key words as we need.

In the end we get a suitable user-friendly title for search engines: Apartments for rent: house rentals, apartment and rooms for rent

If a page has a good text, correct titles, then you can count on a good position in SERP. Of course, this is only possible if topic of the site is not too competitive and there are a number of external links (the anchor of external links contain our promoted keywords) on this page.

How to create clickable description I will tell you in the next article.

Random Posts

  • Ajax login with Jquery and Codeigniter
  • Jquery ajax tutorial
]]> http://4moki.com/writing-for-search-engine-friendly-title/feed/ 0 Creating a website from scratch http://4moki.com/creating-a-website-from-scratch/ http://4moki.com/creating-a-website-from-scratch/#comments Thu, 04 Feb 2010 22:57:04 +0000 kirik http://4moki.com/?p=24 In this article I want to start a series of articles devoted to the creation of a site from scratch. I think this cycle will be attractive for beginner web programmers. Although it is possible for more experienced programmers improve their knowledge.

PHP framework - codeiginter

Codeigniter

I kept thinking about what type of site we will develop, just wanted to make a good serious project, but not hello world, because the Internet beaten this kind of materials. I thought and decided that we would be doing online lottery.

Yes exactly, you heard right it was a lottery with news, articles, user registration, payment, etc. So all of whom will be interested to read about it, welcome on my blog.  If you have friends that it might be interesting – share with them the address of my blog. Just wanted to describe what tools we use to develop a web site.

Well, first – we will write on the php the choice fell on it because now it was the most widely spread in the Internet. But we will not write on the bare php, we will use the php framework codeigniter. It is quite easy to learn and understand the framework.

jQuery

jQuery

For the client side we will use the javascript framework Jquery. In my opinion now it is the standard for speed of execution, cross-browser and very easy in use.

As the database we will use the MYSQL. Even may not ask me why MYSQL. Almost I didn’t work with others.

Firebug

Firebug

Of course we will use xHTML and CSS – how do without them.

Since we will work on their local machine, then we need a web server.  I will use Apache in my examples. In general, for ease of setup, we will use the assembly called XAMPP.

I chose the Netbeans as a development environment. It is a very comfortable, good and most importantly free development environment.

Of course we need the browser, how do without it) I’m using Firefox. Just Firefox has a plugin indispensable for the development as firebug and its supplement firephp. On that basis a debugging of the application will be just a fairy tale.

Well, here’s all for today. In the next article we will start with setting up all equipment.

Random Posts

  • Writing for search engine friendly TITLE
  • Ajax login with Jquery and Codeigniter
]]> http://4moki.com/creating-a-website-from-scratch/feed/ 1 Ajax login with Jquery and Codeigniter http://4moki.com/ajax-login-with-jquery-and-codeigniter/ http://4moki.com/ajax-login-with-jquery-and-codeigniter/#comments Fri, 29 Jan 2010 21:34:10 +0000 kirik http://4moki.com/?p=11 Today we will consider creating of authorization on a site by means of Jquery and Condeigniter. Course for our problem Jquery, Jquery UI, and Codeigniter will be required us. I will not to consider their installing in this article, thanks to the Internet there is a lot of similar manuals.

Let’s begin with consideration of the template file (view)

#dialog { font-size: 70%; }

label, input { display:block; }

input.text { margin-bottom:12px; width:95%; padding: .4em; }

fieldset { padding:0; border:0; margin-top:25px; }

h1 { font-size: 1.2em; margin: .6em 0; }

.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }

.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }

-->
<div id="user"></div>
<div id="dialog" title="Create new user">
<p id="validateTips">All form fields are required.</p>

<form>
<fieldset><label for="email">Email</label>

<input id="email" class="text ui-widget-content ui-corner-all" name="email" type="text" />

<label for="password">Password</label>

<input id="password" class="text ui-widget-content ui-corner-all" name="password" type="password" /></fieldset>
</form></div>

Here in the beginning we do a reference which will allude to the method login of controller main. Then a css code follows with a description of how it should looks like the window itself. The following description of fields that will contain the authorization form.

Let’s describe our model users_model.

class Users_model extends Model {

function Users_model() {

parent::Model();

}

function login($mail,$passw) {

$this->db->where('mail',$mail);

$this->db->where('passw',$passw);

$query = $this->db->get('users');

if($query->num_rows == 1){

return true;

}

}

}

In it I will show you a method of login, which actually receives data over a controller and then makes to request to our database. And in the case of successful finding row from the table returns a true (true).

Further we pass to our controller main.

In it we are interested in the method of login, which will take information over the user and then transmit them to the models, listen to the answer. Depending on the correctness of input of email and password is to save in session of user data or to report about error.

function login(){

$query = $this->users_model->login($_POST['email'],$_POST['password']);

if ($query){

$data = array (

'username' => $_POST['email'],

'is_log' => true

);

$this->session->set_userdata($data);

$answ = true;

}

else{

$answ = false;

}

echo $answ;

}

And in conclusion we consider the actual JavaScript code itself.

$(document).ready(function(){

var

email = $("#email"),

password = $("#password"),

allFields = $([]).add(email).add(password),

tips = $("#validateTips");

function updateTips(t) {

tips.text(t).effect("highlight",{},2000);

}

function checkLength(o,n,min,max) {

if ( o.val().length > max || o.val().length < min ) {

o.addClass('ui-state-error');

updateTips("Length of " + n + " must be between "+min+" and "+max+".");

return false;

} else {

return true;

}

}

function checkRegexp(o,regexp,n) {

if ( !( regexp.test( o.val() ) ) ) {

o.addClass('ui-state-error');

updateTips(n);

return false;

} else {

return true;

}

}

function checkLogin(e,p) {

$.ajax({type:"POST",

url:'http://localhost/lottery/index.php/main/login/',

data:"email=" + e.val() +"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;password=" + p.val(),

dataType:"text",

cashe:false,

success:function(msg){

if(!msg){

e.addClass('ui-state-error');

p.addClass('ui-state-error');

updateTips("Login or password is incorrect");

}

else {

updateTips("Logining...");

allFields.val('').removeClass('ui-state-error');

window.location = "http://localhost/lottery/index.php/admin/";

}

}

})

}

$("#dialog").dialog({

bgiframe: true,

autoOpen: false,

height: 'auto',

width : 320,

modal: true,

buttons: {

'Login': function() {

var bValid = true;

allFields.removeClass('ui-state-error');

bValid = bValid &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; checkLength(email,"email",6,80);

bValid = bValid &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; checkLength(password,"password",5,16);

bValid = bValid &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; checkRegexp(email,/^((([a-z]|\d|[!#\$%&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"eg. ui@jquery.com");

bValid = bValid &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9");

if (bValid){

checkLogin(email,password);

}

},

'Cancel': function() {

$(this).dialog('close');

}

},

close: function() {

allFields.val('').removeClass('ui-state-error');

}

});

$('#login').click(function(e) {

e.preventDefault();

$('#dialog').dialog('open');

})

});
Ajax login

Ajax login

The function of updateTips renews the state of informative panel. The function of checkLength checks made email and password on the line for desired length. The function of checkRegexp checks for accordance of the entered information regular expression. The function of checkLogin actually implements the technology of Ajax. Options on the input and the values entered password and email. Then data is sent by the method of POST to our controller of main. Then in the method of success we describe a function which takes an answer over a controller. In the case of success it does redirect on the protected page of site, otherwise a message.

I forgot to mention that for correct work should also put css styles being in the catalogue of Jquery , where your styles are located.

That would be like to complete the description of the solution of the problem. If you have any questions about using Jquery, Jquery UI and Codeigniter ask them in the comments. I will try to answer them.

At the request of Farhad spread source code example - Ajax login with Jquery and Codeigniter

Relates post

  • Jquery ajax tutorial
]]> http://4moki.com/ajax-login-with-jquery-and-codeigniter/feed/ 9