Sunday, January 27, 2008

database to array

This is a small idea to fasten your web application, this is a backend process, so we are not concerned with the users internet speed, but the stability of the system relies in the hand of backend server and our scripts, what if we load whole database in n number of arrays, where n is equal to number of tables. Load database to the autoload.php file.
Here is a method to create array of a table from the database.
Create one file application/libraries/MyDbArray.php
Paste the following content to it.
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

class MyDbArray

{

public $CI;

public $db_array=array();

function __construct()

{

$this->CI=& get_instance();

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

$this->db_array=$query->result();

}

}

?>

Controller
<?php

class dbarray extends Controller

{

function __construct()

{

parent::Controller();

$this->load->library('MyDbArray');

}

function index()

{

print_r($this->mydbarray->db_array);

}

}

?>

LAMP

Lately I’ve been using ubuntu 7.10 for all my projects/daily work.
As a web developer i should have LAMP on my machine and now i would guide you through installing it on yours.

This guide is divided into 3 steps: installing/tesing Apache, PHP and finally MySQL.

Lets start with Apache:
1. Open the terminal (we will be using it through most of my guide) from Applications > Accessories > Terminal
2. Install apache2 using apt-get by typing the following

sudo apt-get install apache2

Note that you should know the root password.
Now everything should be downloaded and installed automatically.
To start/stop apache2 write:

sudo /etc/init.d/apache2 start
sudo /etc/init.d/apache2 stop

Your www folder should be in: /var/www/

If everything is OK you should see an ordinary HTML page when you type: http://localhost in your firefox browser

Finished with Apache ? lets conquer PHP:

1. Also in terminal write:

sudo apt-get install php5 libapache2-mod-php5

or any php version you like
2. restart apache

sudo /etc/init.d/apache2 restart

This is it for PHP :D
Wanna test it ? Just create an ordinary PHP page in /var/www/ and run it.
Example:

sudo gedit /var/www/test.php

and write in it: < ?php echo "Hello World"; ?>

Now run it by typing http://localhost/test.php in firefox… You should see your ” Hello World ”

66 % is over, lets continue to installing MySQL:
1. Again and again in terminal execute:

sudo apt-get install mysql-server

2. (optional) If you are running a server you should probably bind your address by editing bind-address in /etc/mysql/my.cnf and replacing its value (127.0.0.1) by your IP address
3. set your root password (although mysql should ask you about that when installing)

mysql> SET PASSWORD FOR ‘root’@'localhost’ = PASSWORD(’xxxxxx’);

4. Try running it

mysql -uroot -pxxx

where xxx is your password.
Note: You can install PHPMyAdmin for a graphical user interface of MySQL by executing

sudo apt-get install libapache2-mod-auth-mysql php5-mysql phpmyadmin

5. restart apache for the last time

sudo /etc/init.d/apache2 restart

Congratulions your LAMP system is installed and running :D
Happy Coding

//Jo

UPDATE:
Due to the large number of people emailing about installing/running phpmyadmin.
Do the following:

sudo apt-get install phpmyadmin

The phpmyadmin configuration file will be installed in: /etc/phpmyadmin
Now you will have to edit the apache config file by typing

sudo vi /etc/apache2/apache2.conf

and include the following line:

Include /etc/phpmyadmin/apache.conf

Restart Apache

sudo /etc/init.d/apache2 restart

Another issue was making mysql run with php5
First install these packages:

sudo apt-get install php5-mysql mysql-client

then edit php.ini and add to it this line : ” extensions=mysql.so” if it isnt already there

sudo vi /etc/php5/apache2/php.ini

Restart Apache

sudo /etc/init.d/apache2 restart

Hope this helps :)

smarty or CI templating

As I am very new to both smarty and template class of CI, so I found both interesting, as smarty is full fledged template engine, it must full fill the transparency between the designer and the programmer, but in terms of the CI template class, its very easy to use as I am very friendly to CI, so found not bit easy to use it. User guide provides full help to use the template class.

I tried to make the job of designer a bit easier so have a look.

As we know we can load model in the Controller, so we can also call the model in the View class too, so starting from the main template we will move to the controller, I know it’s a wrong approach and it disturbs the flow schema, but later we will move as per the flow too.

This is how the template will look like:

{header}

{left_panel}{center_content}{right_panel}

{footer}

now, what is required from the controller

$result[‘left_panel’]=$this->MyModel->func_name();

rather than calling the load view function use:

$this->parser->parse('blog_template', $result); to provide data to the view file, blog_template is the blog_template.php file.

Only drawback according to me in template parsing class of the CI Is that it won’t accept .tpl or any other extention. But smarty will help.

What will model do:

Model will use data loaded from the database and load it into the view file. Seems very confused I will soon add some controller, model and view file in order to explain it more easily.

Saturday, January 26, 2008

Magic of hook in CI

First change config.php in cofig directory

Search for $config['enable_hooks'] = false; make it ‘true’;

Add following in config/hook.php file


$hook['post_controller_constructor'] = array(

'class' => 'getSystem',

'function' => 'check',

'filename' => 'getsystem.php',

'filepath' => 'hooks'


);



For better configuration, try getting help from user_guide.

Create getsystem.php file in application/hooks directory

And paste the following:


<?php

//change the table name

if (!defined('BASEPATH')) exit('No direct script access allowed');

class getSystem

{

function check()

{

$CI =& get_instance();

$CI->db->query(”SELECT * FROM table_name”);

define('MAIL',true);

}

}

?>

try this controller

<?php

class Welcome extends Controller {

function Welcome()

{

parent::Controller();

}

function index()

{

echo MAIL;

$this->load->view('welcome_message');

}

}

?>

Integrating smarty in CI

Create one directory named ‘applications/init’.
create one file named ‘applications/init/init_mysmarty.php’
paste following in it:

if ( ! class_exists('MySmarty'))
{
require_once(APPPATH.'libraries/MySmarty'.EXT);
}

$obj =& get_instance();
$obj->mysmarty = new MySmarty();
$obj->ci_is_loaded[] = 'mysmarty';

?>

create one file named ‘applications/libraries/MySmarty.php’
paste following in the class :

class MySmarty extends Smarty{

function __construct()
{
$this->compile_dir = APPPATH . "views/templates_c";
$this->template_dir = APPPATH . "views/ templates";
log_message('debug', "Smarty Class Initialized");
}
}
?>

paste “applications/libraries/libs” of smarty in libraries of application : refer to MySmarty.php class for the path. Create ‘templates_c’ and ‘templates’ in views directory

Try this controller:

function Blog()
{
parent::Controller();
$this->load->library('mysmarty');
}
function index()
{

$this->mysmarty->assign('title',"Welcome");
$this->mysmarty->assign('content',"Hello!");
$smarty_array =array('one','two','three','four');
$this->mysmarty->assign('forloop',$smarty_array);
$this->mysmarty->display("basic.html");
}
}
?>
basic.html
{$title}{$content}


{section name=i loop=$forloop}
{$forloop[i]}


{/section}

jquery cool sliding menu

first have a look over the cool styling menu which we are going to make from the jquery.

http://www.getintothis.com/pub/projects/rb_menu/

menu.html

   

I also made a new empty javascript file - called menu.js - that will contain the menu code; include this as well.

menu.html

   

Inside my HTML body I created some nest UL’s:

menu.html

   


  • Test 1

    • Sub element 1

    • Sub element 2



I applied some CSS styling to the menu, but I won’t cover it here, since this is a JQuery tutorial - you can find the complete example with styling in the attached zip file.

Now that we have our HTML set up, we can open up menu.js and code the menu behaviours.

menu.js

 1  var obj = null;
2
3 function checkHover() {
4 if (obj) {
5 obj.find('ul').fadeOut('fast');
6 } //if
7 } //checkHover
8
9 $(document).ready(function() {
10 $('#Nav > li').hover(function() {
11 if (obj) {
12 obj.find('ul').fadeOut('fast');
13 obj = null;
14 } //if
15
16 $(this).find('ul').fadeIn('fast');
17 }, function() {
18 obj = $(this);
19 setTimeout(
20 "checkHover()",
21 400);
22 });
23 });

Starting at line 9: $(document).ready(function() { ... }); is similar to your basic window.onload method of attaching handlers, but is a bit more intelligent. This JQuery function checks the document and is run the moment the DOM is ready to be manipulated, this means you don’t have to wait for images to load like window.onload.

In super-summary, the ready function is where the magic starts, and is your entry point to JQuery code.

Line 10 is an example of JQuery’s element selectors. $('#Nav > li') looks for all LI elements that are children of the node with Nav ID. Read about selectors here.

Now that we’ve selected the elements we want, we specify that the hover event will have an anonymous function attached to it as specified. This means that whenever an LI with a parent of ID Nav is hovered over with the mouse, the specified function will execute. The hover event actually takes two parameters, both functions. The first is the method to run when the mouse enters the object, and the second is the method to run with the mouse leaves the object.

Line 11: check if obj exists (if it does, it means that an element is already visible, line 18), if it is set, find the child UL node (find operates in the scope of the object it’s called on, so if obj is an LI in a #Nav node, then find('ul') finds all UL’s inside that LI), and execute a fadeOut on it. fadeOut and fadeIn are built-in JQuery special effects, and take a speed parameter, ‘fast’, ‘normal’ or ’slow’. Once we’ve dealt with the previously shown object, we fadeIn the currently hovered element.

Line 17 shows the second parameter to the hover function - we set obj to the current element, and then use setTimeout to specify that the checkHover function must be executed in 400 milliseconds. The reason I’ve done it this way, is to prevent the menu from instantly disappearing when you mouse-off it - the user has 400 milliseconds before the fadeOut is called on the menu, which gives them time to correct their mouse positioning if they hover off the element for a moment.

Scarily enough, this is all the code needed to get a mostly-functioning pop-up menu! There’s a lot I don’t know about JQuery, so I might’ve messed something up, but at least it works. The example CSS styling only works in Firefox - IE has some issues with it, but since it’s just an example, I can’t be bothered to fix it. Hopefully that’s enough to get you started on with JQuery - unfortunately WordPress isn’t the best platform for code tutorials, and neither am I the best teacher!





my sample code: change the path of


<script src="http://code.jquery.com/jquery-latest.js"></script>

$(document).ready(function() {

//ready function acts as a body on load

$('#navi > li').hover(function(){

$(this).find('ul').fadeIn('fast');

},function(){

$(this).find('ul').fadeOut('fast');

}

)

});

</script>

<style>

#navi

{

cursor:pointer;

}</style>

<ul id="navi">

<li>my

<ul>

<li>a</li>

<li>b </li>

<li>c </li>

<li>d </li>

<li> e</li>

</ul>

</li>

<li>myenu

<ul>

<li> f</li>

<li>g </li>

<li> h</li>

<li> i</li>

<li> j</li>

</ul>

</li>

<li>struc

<ul>

<li> k</li>

<li> l</li>

<li> m</li>

<li> n</li>

<li> o</li>

</ul>

</li>

</ul>

Saturday, January 19, 2008

Initial step for AJAX

Sample code for getting data from a DIV tag and giving the data to a DIV.

Technologies used:
HTML and Javascript

<html>

<head>

<script>

function value_feed()

{

var temp ="hello";

var value1=document.getElementById("value1").innerHTML;

document.getElementById("value1").style.visibility="visible";

document.getElementById("value2").innerHTML='<b>'+'<font color ="red">'+temp+" "+value1+'</b>'+'</font>';

//document.getElementById("value1").style.visibility="hidden";

}

function hi()

{

setTimeout("value_feed()",4000);

}

</script>

</head>

<body onload="hi()">

<div id="value1">hi how r uklashdskljdskld</div>

<div id="value2"> </div>

</body>

</html>