Host your web sites on a vps – Virtual Private Server

Couple of days ago I planned to move wordpress.com to a self hosted wordpress blog. Here I’m not going to explain what are the pros and cons of wordpress.com and wordpress.org. But instead of that I thought it’s better if I shared my experience regarding transfering and hosting my blog.

For a several reasons I decided not to go for a typical web hosting plan available in iPage, hostgator, godaddy, namecheap etc.. Because if I bought a normal web hosting plan. Most of the time I wouldn’t be able to acess the server via ssh or I wouldn’t be able to have controll over the server. That’s means all the facilities will be limited. But considering my budget I won’t be able to go for a dedicated server either. So I decided to go for a VPS.

What is a vps? vps is a short word for virtual private server. Vps can be made by using a vps software like Open Virtuoso, KVM.. on a dedicated server. In other word vps is a virtual computer which has equivalent functionally of a (dedicated server) separate physical computer.

Again we can devide vps into two subcategories (dedicated servers also have these subcategories)

1. Managed vps
2. Unmanaged vps

These managed vps are very expensive, and sometimes they could expensive as much as dedicated servers. Because they comes with more support facilities like a cPanel, secure protechtion from the service provider..etc

But unmanaged vps are not that much of expensive. So what I did is, I went for a unmanaged vps. Since I use to enjoy with making things, and bulding things from the scrach that vps become a little playground to me. So besides hosing my blog and other websites, I benifited that the freedom of using the server. :)

I bought my vps from a company called RamNode . I got a vps with 40GB HDD, 256MB ram, 1 Gbps connection with 1 ip4 ip address and 16 ip6 ip addresses, and 1000 GB monthly bandwidth for $29.84 anually based. That was the chepest vps price that I could found when I was researching on internet about unmanaged vps. I’m really happy about their after servise. And they accept paypal too. If anyone needs the link to ramnode.com here it is

high performance ssd vps

And still there is promotion on RamNode : 15% off for life w/ code ‘rn15off’

After buying a vps from RamNode I setup a operating system as I desired. My choise was CentOS. But there were large number of OS varities in both 32bit and 64bit.

So then my problem was how I manage all my web sites? First I thought I could do it without a web hosting management system. Actually I could do that my manually entering commands to the linux terminal.. But doing it each and every time on simple modification request was not a good idea for me. So I searched for a good web hosting management system. So these are my findings

1. cPanel – a commercial one ( not worth to pay for a cpanel unless you are running a web hosting company)
2. Kloxo – free ( but this one is out dated and not updated since longtime )
3. Ajenti – free ( but I didn’t try this one, and ajenti is a python based software )
4. Zpanel – free ( I used this one and it’s a php based software )

Zpanel has released it’s latest version 10.0.2. So I decided to go with it and it had very cool feature too. If you willing to start a small web hosting company this might be a good solution too. Here is download and installation instructions link forZpanel .

This short blog post containts my experience in web hosting with a vps. If you have any questions about this post please feel free to comment them. An I will try to answer them. And also If you have any experiance regarding vps hosting or dedicated server managing, please share with your knowledge here.

Thank you
Gihan De Silva

Switching to a third party Domain Name System (DNS)?

Hi everyone, today we will discuss on Domain Name Systems and usage of them. First lets see what is DNS? DNS stands for Domain Name System. And DNS is actually a database system that handle IP addresses and related domain names. When we type a web address and hit the Enter key, the ISP(Internet Service Provider) will look up the DNS for requested domain name. Then the DNS will return and direct to the correct IP address. Then we will see the requested web page. :-)

Usually your Internet Service Provider maintains a DNS server for handle the DNS quires, so you don’t have to worry about that. It hold a list of all the IP addresses and domain names within the network, and a cache of IP addresses which recently accessed computers outside the network.  This DNS servers are also responsible for your Internet speed. But sometimes you may realise your Internet speed is not enough. Most of the time this happens not because of your bandwidth but because of your ISP’s slow DNS server. Because some IPS’s don’t pay much attention for expanding DNS server resources.

As clients we can do something to speed up our Internet speed ourself. That is switching to a third party DNS . Here is list of some great DNS servers.

  • Open DNS                                        208.67.222.222       208.67.220.220
  • Google Public DNS                        8.8.8.8                       8.8.4.4
  • BitGravity
  • EdgeCast
  • CDNetworks

As a example lets see how to configure Open DNS for Ubuntu computer.

First  click on  network icon and go to Edit connections

Then you will see a window like this

Select your existing connection or you can create a new one. Then click edit

In the DNS servers field type these two IP addresses   with comma separated.  208.67.222.222     208.67.220.220

And follow the same procedure for other DNS service providers if you are interested. And the related IP addresses to configure are in the above list.

After set up the connection, check whether you actually use the Open DNS. So click on network icon and go to Connection Information.

Now Open firefox and try to load a web page, then you will notice your Internet speed has increased. :D

 

Ok, now it’s all for today and this is the last post for this year and….. this is the last day of 2011. And I wish you ………..

 

Very Happy New year for All

Happy 2012!

Thank you :D

Gihan De Silva

gihansblog.com

Joomla 1.7 installation with XAMPP problem solved

Hi, Recently Joomla 1.7 was released and obviously that is an excellent product. And new features also added. If you need any guide regarding installation these articles may help you , I think.

How to install and configure Joomla 1.6 with XAMPP on Ubuntu 11.04

Though this is Joomla 1.6, there are not different between installation of 1.6 and 1.7, So thought not to add a new post on it.

In Joomla installation on XAMPP some guys are talking Joomla is giving some errors with XAMPP. Actually they are not errors, they are warnings. Is the nature of the software to give warnings. In standalone software solutions we normally do something called “error handling”, right!. We need to care about Errors but we don’t need to care warnings too much. So simply we can ignore them. Now the problem arises, “how to turn off the warnings”, I think now I have entered to our today’s topic :D .

First you need to find php.ini configuration file on your XAMPP installation. It may be located at your

(In windows) C:xamppphpphp.ini

(In Ubuntu Linux) /opt/lampp/etc/php.ini

Then open it on a suitable text editor.

Now find error_reporting on php.ini ( Ctrl+F ) and change it’s value to

E_ALL | E_STRICT = E_ALL & ~E_DEPRECATED

There are three options on error_reporting. By default this value may have E_ALL & ~E_NOTICE or E_ALL | E_STRICT

  • Default Value: E_ALL & ~E_NOTICE
  • Development Value: E_ALL | E_STRICT
  • Production Value: E_ALL & ~E_DEPRECATED

In first two cases, XAMPP will show errors and Warnings. These things are not good when considering Production Level. That means , a live web site should not give errors for user. But it may useful considering development of web site.

And you need to find display_errors on php.ini file and change it’s value to

display_errors = off  to make it clearly work! Now save the work and restart the XAMPP server. Joomla will work without any errors. :D

 

Thank you

Gihan De Silva

gihansblog.com

A shell script for Renaming large number of files in Linux

Hi, today I’m going to Blog about a very simple shell script, that may help you guys a lot.NO big deal, its very simple one. It was very helpful to me, once I had to rename a large number of images of Kim Kardashian.  So then I realise it will very easy doing it with a Shell script rather than manually rename it.#!/bin/bash
#
# Author: Gihan De Silva @  gihansblog.com
# rename script
# rename.sh
clear
x=0
for i in `ls *.jpg`
do
x=`expr $x + 1`
mv $i Kim_Kardashian$x.jpg
done

echo “rename done!”

Code Explanation!

#!/bin/bash 

This is how always a shell script starts.

clear

This line clears all the things already in the terminal window.

x=0

This line define and declare a variable.

for i in `ls *.jpg`

This line starts a loop and, it will list down all the JPEG(jpg) type images.

x=`expr $x + 1`

This line increases the value of x by 1.

mv $i Kim_Kardashian$x.jpg

This line renames all the files according to a sequence like, Kim_Kardashian1.jpg , Kim_Kardashian2.jpg, Kim_Kardashian3.jpg  ……

And you can just make Kim_Kardashian$x.jpg like My_file_name_$x.jpg ,so that’s it.

And to run this shell script, put rename.sh shell script into your file folder (directory) .

Then open Terminal window (Ctrl+T).

Go to your file folder through the terminal.

Then type chmod 755 rename.sh to get the permission.

Then run it by typing ./rename.sh

Now you will see files have renamed :D .

You can DOWNLOAD the shell script from here!

Thank you

Gihan De Silva

How to create a GUI(Graphical User Interface) using C programming Language.. (part 5)

Hi, everyone it’s been a long time., yes, ok now I’m back with some Tech things. As promised , today I’m going to blog about how to create Mini-Calculator with C language GUI. So before get started I thing it’s better to read past articles on this topic, because some guys informed they didn’t get it very clear. I think that happens because they didn’t go through the past articles related to this one before read the fresh one :D .

Mini Calculator v 1.0

So here is related articles …. read them first

1) How to create a GUI(Graphical User Interface) using C programming Language..

2) How to create a GUI(Graphical User Interface) using C programming Language.. (part 2)

3) How to create a GUI(Graphical User Interface) using C programming Language.. (part 3)

4) How to create a GUI(Graphical User Interface) using C programming Language.. (part 4)

Now open Glade Software and create a user interface with these settings.

  • For the main Window

General–> Name= mainWindow
General–>Resizable= No
Common–>Height request = 400
Common–>Width request=250

  • For Display Label

General–>Name=displayLabel

General–>Label=Mini-Calculator v1.0 | gihansblog.com

  • For Text Entry

General–>Name=textEntry

  • For Exit Button

General–>Name=exitButton

General–>Label=Exit

Signals–>Clicked=on_exitButton_clicked

  • For  Button 0 to 9

General–>Name=no1Button

General–>Label=1

Signals–>Clicked=on_no1Button_clicked

General–>Name=no2Button

General–>Label=2

Signals–>Clicked=on_no2Button_clicked ………

  • For + Button

General–>Name=addButton

General–>Label=+

Signals–>Clicked=on_addButton_clicked

  • For – Button

General–>Name=subButton

General–>Label= -

Signals–>Clicked=on_subButton_clicked

  • For x Button

General–>Name=mulButton

General–>Label= x

Signals–>Clicked=on_mulButton_clicked

  • For ÷ Button

General–>Name=divButton

General–>Label=  ÷

Signals–>Clicked=on_divButton_clicked

  • For √ Button

General–>Name=sqrtButton

General–>Label= √

Signals–>Clicked=on_divButton_clicked

After you finish with Glade it should be similar to this..

Mini Calculator v 1.0  Gihan's Blog.comNow open Colde Blocks gtk project. Erase the default contents of main.c . Here I have changed the structure of the project like this ..

1) main.c

2) callbacks.c

3) callbacks.h

main.c contains the main method of programm, and callbacks.c contains the rest of methods and callback.h header file contains functions prototypes of methods that contains callback.c

project_structure_ gihansblog.com

DOWNLOAD  the Source code!

Here I’m not going to explain all the things, because I’ve already explained most of it in previous articles.

Code Explained…

GladeXML *xml;
GtkWidget *textValue;

gdouble display;
gdouble primaryTotal=0;//primary total
gdouble mainTotal=0;

gchar *d_string;

int clickedButton=0;// find the clicked buttton default is zero ’0′.
                    /*
                    Values of ‘clickedButton’
                    ————————
                    plusButton_clicked –>1
                    subButton_clicked  –>2
                    mulButton_clicked  –>3
                    divButton_clicked  –>4
                    */

Mainly in here, what we do with a calculator is do some calculation. For example think we are going to do this operation “1+2″. So first what we do is hit the “1″ button and hit “+” and “2″, then press “=” to get the result on the text entry. In this algorithm , when pressing the “1″ button it gives the “1″ value to the text entry and when “+” button clicked it stores the display value in display variable and get the sum with primaryTotal variable and put it to again primaryTotal . Then we press “2″. So now this also displays on the text entry, then “=” button clicked ,it should chose the correct operation(at this time, it is “+”) in the operation primaryTotal value should do the related operation with display then should put it again into mainTotal. For example in addition it should be

mainTotal=primaryTotal+display;

G_MODULE_EXPORT void on_no1Button_clicked(GtkWidget *widget, gpointer *data)
{
    /* Find the Glade XML tree containing widget. */
    xml = glade_get_widget_tree(GTK_WIDGET( widget ));

    /* Pull the widgets out of the tree */
    textValue= glade_xml_get_widget(xml, “textEntry”);

    gtk_entry_append_text(GTK_ENTRY(textValue),”1″);
}
Here first line gets the widget tree to a GladeXML type variable. Then second line gets the textEntry value to the GtkWidget type variable called textValue. Third line set “1″ to the textEntry object as append action. Like this all 0-9 button code works.

G_MODULE_EXPORT void on_addButton_clicked(GtkWidget *widget, gpointer *data)
{
    /* Find the Glade XML tree containing widget. */
    xml = glade_get_widget_tree(GTK_WIDGET( widget ));

    /* Pull the widgets out of the tree */
    textValue= glade_xml_get_widget(xml, “textEntry”);

    /* Get the string value form the Entry widgets */
    d_string=gtk_entry_get_text(GTK_ENTRY(textValue));

    /* convert it into the double */
    display=atof(d_string);

    /* Add it to the primary total */
    primaryTotal=primaryTotal+display;

    /* Clear the entry*/
    gtk_entry_set_text(GTK_ENTRY(textValue),”");

    /* Set clicked button as 1 ‘plusButton_clicked’ */
    clickedButton=1;
}
In this method first 3 lines are similar to above explanation. In third line I have used atof() function from math.h header. It converts the string value to double. Because we need double values to calculate the maths. Next line gets the sum of primaryTotal and display variables. Then clearing the textEntry field it sets clickedButton variable to 1, to mention that the operation is set to summation. Like wise, value of clickedButton says the operation to do.
Values of ‘clickedButton’
————————
plusButton_clicked –>1
subButton_clicked  –>2
mulButton_clicked  –>3
divButton_clicked  –>4

G_MODULE_EXPORT void on_equalButton_clicked(GtkWidget *widget, gpointer *data)
{
    /* Find the Glade XML tree containing widget. */
    xml = glade_get_widget_tree(GTK_WIDGET( widget ));

    /* Pull the widgets out of the tree */
    textValue= glade_xml_get_widget(xml, “textEntry”);

    /* Read the entry value and copy it to a char* */
    d_string=gtk_entry_get_text(GTK_ENTRY(textValue));

    /* convert the string to double*/
    display=atof(d_string);

    /*Do the oprations according to clicked button*/

        switch(clickedButton)
        {
            case 0 :{
                    break;
                    }

            case 1 :{
                    /* Do Addition*/
                    mainTotal=primaryTotal+display;
                    break;
                    }

            case 2 :{
                    /* Do Substraction*/
                    mainTotal=primaryTotal-display;
                    break;
                    }

            case 3 :{
                    /* Do Multipication*/
                    mainTotal=primaryTotal*display;
                    break;
                    }

            case 4 :{
                    /* Do Division*/
                    mainTotal=primaryTotal/display;
                    break;
                    }

        }// end switch

    /*convert double to string and print the value on entry*/
    gtk_entry_set_text(GTK_ENTRY(textValue),g_strdup_printf(“%f”,mainTotal));

    /* set total to zreo ’0′*/
    primaryTotal=0;

    /* Set clickedButton value back to the default*/
}

In this method the switch structure decides which operation to do. After doing the related calculation in a case, it should display the main in text entry. But double values are not allowed in the text entry widget, so we have to convert it to String (char *) type.

gtk_entry_set_text(GTK_ENTRY(textValue),g_strdup_printf(“%f”,mainTotal)); this line is responsible for that conversion.

Now I think I’ve explained all the main things about the program here.

If you want the calculator look like the first image. You should do it with the Glade designer like this.

Open the Glade designer project and click on a button you want to add an image. Think you want to change the image of “1″ button. Then click on “1” button then go to General tab under Properties check the radio button “Add custom button content“  . Now you see the appearance of the button is changed. Then click on image widget under Displays and Controls, after that click the “1″ Button again.

Find some appropriate button image or draw something like this.

Then go to General tab under Properties and check radio button File Name and set the path for image file. :D then you will see it at the run time.

Ok that’s all for today :D . You can DOWNLOAD my CodeBlock project here!. Good luck.

Thank you

Gihan De Silva

How to create a GUI(Graphical User Interface) using C programming Language.. (part 4)

Hi,  after a long time I was able to find a time to write the blog, because these days I’m very busy with my exam and it will end 29th  September. So until that I doubt I’d be able to write much. So sorry for that my all friends who read this.

Related articles..

1) How to create a GUI(Graphical User Interface) using C programming Language..

2) How to create a GUI(Graphical User Interface) using C programming Language.. (part 2)

3) How to create a GUI(Graphical User Interface) using C programming Language.. (part 3)

And this article focus on  how to use a Text Entry with button action signals.  And the purpose of this program is display the string in the label,which user enter in the text entry.

Contents…

1) Open a Code Blocks projects

2) Open a Glade Project

3) Set properties for the components

4) Code the C Gtk project

5) Run the project

Components

1) Window= mainWindow

2) Label= displayLabel

3) Text Entry= textEntry

4) Button= displayButton

5) Button= exitButton

Set properties

  • For the main Window

General–> Name= mainWindow
General–>Resizable= No
Common–>Height request = 400
Common–>Width request=200

  • For Display Label

General–>Name=displayLabel

General–>Label=Display

  • For Display Button

General–>Name=displayButton

General–>Label=Display

Signals–>Clicked=on_displayButton_clicked

  • For Exit Button

General–>Name=exitButton

General–>Label=Exit

Signals–>Clicked=on_exitButton_clicked

  • For Text Entry

General–>Name=textEntry

Then save it as TextEntry.glade in libglade format in the CodeBlocks project folder.

In this C project I divided the whole project into three files.

1) main.c

2) callback.c

3) callback.h

The source code of main.c 

#include <stdio.h>
#include <gtk/gtk.h>
#include <glade/glade.h>

/*
Author : Gihan De Silva
gihansblog.com

Purpose: This program displays the string in the label,which user enter in the text entry.
*/
GladeXML *xml;
GtkWidget *widget;

int main(int argc, char *argv[])
{

gtk_init(&argc, &argv);

/*import glade file*/
xml = glade_xml_new(“TextEntry.glade”, NULL, NULL);

/* get a widget (useful if you want to change something) */
widget = glade_xml_get_widget(xml, “mainWindow”);

/* connect signal handlers */
glade_xml_signal_autoconnect(xml);

/*show widget*/
gtk_widget_show (widget);

gtk_main();

return 0;
}

The source code of callback.c

#include <stdio.h>
#include <gtk/gtk.h>
#include <glade/glade.h>

GladeXML *xml;
GtkWidget *display;
GtkWidget *textValue;

gchar *d_string;

G_MODULE_EXPORT void on_displayButton_clicked(GtkButton *button,gpointer *data)
{

/* Pull the widgets out of the tree */
display= glade_xml_get_widget(xml, “displayLabel”);

textValue= glade_xml_get_widget(xml, “textEntry”);

/* Get the string value form the Entry widgets */
d_string=gtk_entry_get_text(GTK_ENTRY(textValue));

gtk_label_set_text(GTK_LABEL(display),d_string);
}

G_MODULE_EXPORT void on_exitButton_clicked(GtkButton *button,gpointer *data)
{
gtk_main_quit();
}

The source code of callback.h

G_MODULE_EXPORT void on_displayButton_clicked(GtkButton *button,gpointer *data);
G_MODULE_EXPORT void on_exitButton_clicked(GtkButton *button,gpointer *data);

Now run the gtk project and it will look like this.


And when you hit the Display button, it will display the content in the text entry..

Display Button Code Explained…

Here I’m not going to explain all the code because I already have explained them in previous articles. If you haven’t read previous article, you’d better to read them first. But I’m going to explain the specific things related to this article.

GladeXML *xml;
GtkWidget *display;
GtkWidget *textValue;

gchar *d_string;

G_MODULE_EXPORT void on_displayButton_clicked(GtkButton *button,gpointer *data)
{
/* Pull the widgets out of the tree */
display= glade_xml_get_widget(xml, “displayLabel”);

textValue= glade_xml_get_widget(xml, “textEntry”);

In these two lines, the program will take glade widgets into Gtk widgets.

/* Get the string value form the Entry widgets */
d_string=gtk_entry_get_text(GTK_ENTRY(textValue));

We can’t directly use GtkWidgets to set gtk label, because it needs gchar* type data. So in here we convert to into gchar* .

gtk_label_set_text(GTK_LABEL(display),d_string);

Now with above line we can set it to the label.

}

Ok that’s all for today :D . If you want, you can DOWNLOAD my CodeBlock project here!. In next post I will show you how to create a simple Calculator using Gtk and Glade.

Thank you

Gihan De Silva

How to create a GUI(Graphical User Interface) using C programming Language.. (part 3)

Hi, this is the third part of the How to create a GUI(Graphical User Interface) using C programming Language.. (part 2) post as I promised. In today’s post I’m going to tell you how to create and run Simple hello world GUI program.

And it includes how display a message when click a button.


Ok now open a new glade project and draw a GUI like above image. You have three components one label and two buttons.

Then set properties like this.

  • For the main Window

General–> Name= mainWindow
General–>Resizable= No
Common–>Height request = 400
Common–>Width request=200

  • For Display Label

General–>Name=displayLabel

General–>Label=Display

  • For Display Button

General–>Name=displayButton

General–>Label=Display

Signals–>Clicked=on_displayButton_clicked

  • For Exit Button

General–>Name=exitButton

General–>Label=Exit

Signals–>Clicked=on_exitButton_clicked

Then save it as hello.glade in libglade format.

Now open CodeBlock’s Gtk+ project. When you open a new it will automatically generates some codes, so erase and clear main.c .Then copy paste this code into your main.c .

Then copy your hello.glade file into CodeBlock project folder.

#include <stdio.h>
#include <gtk/gtk.h>
#include <glade/glade.h>

/*
Author : Gihan De Silva
gihansblog.com
*/

GladeXML *xml;
GtkWidget *widget;
GtkWidget *display;

G_MODULE_EXPORT void on_displayButton_clicked(GtkButton *button,gpointer *data)
{
/* Find the Glade XML tree containing widget. */
xml = glade_get_widget_tree(GTK_WIDGET( widget ));

/* Pull the widgets out of the tree */
display= glade_xml_get_widget(xml, “displayLabel”);

gtk_label_set_text(GTK_LABEL(display),”Hello World!n gihansblog.com”);
}

G_MODULE_EXPORT void on_exitButton_clicked(GtkButton *button,gpointer *data)
{
gtk_main_quit();
}

int main(int argc, char *argv[])
{

gtk_init(&argc, &argv);

/*import glade file*/
xml = glade_xml_new(“hello.glade”, NULL, NULL);

/* get a widget (useful if you want to change something) */
widget = glade_xml_get_widget(xml, “mainWindow”);

/* connect signal handlers */
glade_xml_signal_autoconnect(xml);

/*show widget*/
gtk_widget_show (widget);

gtk_main();

return 0;
}

Now run the project. If everything ok it will look like this and will function well :D .

The program in CodeBlocks…

Main Code Explained…

First we should initialise gtk in our code.

gtk_init(&argc, &argv);

Then we have to import our .glade file into our program and convert it into xml file format.

xml = glade_xml_new(“hello.glade”, NULL, NULL);

Now signals of widgets should be functioning with this line.

glade_xml_signal_autoconnect(xml);

And with this line, it will show the GUI at run time.

gtk_widget_show (widget);

Then call gtk main method

gtk_main();

Exit Button Code Explained…

In the exit button we call
gtk_main_quit();

to quit fro the program.

Display Button Code Explained…

Then find the Glade XML tree containing widget.
 xml = glade_get_widget_tree(GTK_WIDGET( widget ));

Now pull the label widgets out of the tree
 display= glade_xml_get_widget(xml, “displayLabel”);

Display the message on the label
gtk_label_set_text(GTK_LABEL(display),”Hello World!n gihansblog.com”);

Ok that’s all for today :D . If you want, you can DOWNLOAD my CodeBlock project here!. In next post I will show you how to add a Text Entry widget to your application.

Thank you

Gihan De Silva

How to create a GUI(Graphical User Interface) using C programming Language.. (part 2)

Hi, this is the second part of the How to create a GUI(Graphical User Interface) using C programming Language..   post. In today’s post I’m going to tell you how to use Glade software to design a GUI for a C program. Now I think you have prepared your development environment :D .First we need to recognise the Glade environment..

  • Open glade, then you will a window like this. In the Top Levels tab of Palette select window and click on Editor.Then you will a Gray colour window on it. In the inspector view you can change the name of the window. To change the size and other properties go to properties.  This is not much smiler to Net-beans IDE, aligning component is much difficult. But this is much easier than hard coding :-) .
  • Now we should add a container for the window to keep the other component on it. In the Containers tab of Palette select one of containers like Vertical Box then click on the Editor’s window.
  • Then It will look like this. But for example if you add a button component to one of this cell, it fills all overt the cell. But if you need you can further divide into more cells adding one or more containers. For example here I will add another table container into middle cell. Then it will look like this.
  • Ok now I’m going to add some component to it. Under Control and Display tab of the palette, find Button and Text Entry widgets(components), so add it the container.

Ok now Save the GUI you designed. In the Save or Save As menu, there are two options to save.

  1. GtkBuilder
  2. Libglade

Choose the File Format Libglade, and save it as hello_world.glade, because in this tutorial I work with libglade. If you just look at your .glade file by opening with Texteditor. You will see XML coding there.. Yes! of course .glade is XML file format. GtkBuilder file type also generates the same .glade file. But when taken in the file structure GtkBuilder and Libglage are different from each other.

Now I think you may wondering how to connect this Button signals(Actions) to a C program ??

Now click on the Button of your GUI, then click Signals tab under the Properties. Then find Clicked and select on_button1_clicked (Button’s name property is ‘button1′ , so the signal name become on_button1_clicked). Now Save changes.

After we set the signals in our GUI in the glade, we can simply call them (as example) like this.

void on_button1_clicked(GtkWidget *widget,gpointer *data){

// your custom code here!

}// end method

Ok in next post we will discuss how run a hello_world GUI program using C :D .

 

Thank you

Gihan De Silva

How to create a GUI(Graphical User Interface) using C programming Language..

How to create a GUI(Graphical User Interface) using C programming Language???  That was a big problem to me when I’m in the University first year. I knew Java GUI Designing, but couldn’t find way to do it in C language. I spent many time to learn that. I think now it’s time to share those knowledge :D . But since there are lot to discuss on that topic, I’m going to spelt the whole tutorial into several posts.  In this post I’ll discuss how to set up the development environment.

Setting up the development environment for C language GUI designing.

Ok let’s begin. First we need to have several tools for that.

1) Code Blocks IDE

2) Glade IDE

3) Gtk+

4) Libglade library

So install those things on your computer. I’ll give a hint to get it much easier. If you are Ubuntu user, go to Ubuntu software center or Synaptic package manager. Find code blocks and install. Then Find for Glade and before install, check all the Add-ons then install. In this way it will automatically install gtk+ and libglade. So you don’t want to worry about that:D.

A screen shot of Code Blocks IDE..

Now you have to configure Compiler and Debugger settings in Codeblocks IDE.

  • Open Code Blocks–> goto Compiler and Debugger settings

  • Select Other options in Compiler settings tab and paste this.

            `pkg-config –cflags gtk+-2.0 gmodule-export-2.0`
            `pkg-config –cflags libglade-2.0`

  • Then select Other linker options in Linker settings tab and paste this.

           `pkg-config –libs gtk+-2.0 gmodule-export-2.0`
           `pkg-config –libs libglade-2.0`

A screen shot of Glade Interface designer…


But you always free to compile your program on the terminal too. If you wish to do so it should be like this.

gcc `pkg-config –cflags libglade-2.0 –libs gtk+-2.0“pkg-config –libs gtk+-2.0 gmodule-export-2.0` main.c

Ok thats all for now . In next post I’ll explain how to Design a GUI using Glade Interface Designer :D .

 

Thank you

Gihan Malan De Silva @ gihansblog.com