Flexible hovering effect for images

Here we are going to create a flexible hovering effect using CSS3 opacity property.
opacity is a CSS3 property that allows you to specify how opaque a given element
is. Coupled with the RGBA, opacity offers
another method to add transparency to the designs we create
for the web.
One of the ways to use opacity is to create simple and
flexible hover states for hyperlinked graphics, using the variation
in transparency .
We’re going to use the opacity property to not only control
the :hover and :focus treatment, but also to set the initial
level of transparency.

Before we start ,we need the graphics to be used as hyperlinks.

So open your graphics editor and create an icon as fully-white PNG

image with transparent background.

Create an html file and name as hover.html.
Now add your image in your html file with following line of code.

<a href="#"><img src="img/logo.png" alt="My logo" /></a>

Place the image inside a dark background ( here I have used #222 ).

<div id='container'>
<a href="#"><img src="img/logo.png" alt="My logo" /></a>
</div>

Now its time to add some styles.

<style>
#container {
background:#222;
width:100px;
height:100px;
text-align:center;
}
</style>

let’s add the opacity values that will dim the icons in
their default state, brightening them up a bit when hovered or
focused.

#container a img {
opacity: 0.25;
}
#container a:hover img,
#container a:focus img {
opacity: 0.7;
}

Here we’re showing the images at 25% opacity, then bringing
them up to 70% opacity when hovered or focused .
Note that the opacity property doesn’t require vendor prefixes,
and will work in Safari, Chrome, Firefox, and Opera.
IE8 and below don’t support opacity, but there is a hack to achieve this.

The IE opacity hack

Opacity is supported in Internet Explorer 9
Beta, but we can also mimic the same result for older versions
of IE by using the proprietary Microsoft filter property.
use of the filter property can bring increased performance
overhead depending on where or how often it’s used.
It’s a hack—but it provides a means to an end.
Here’s how it works:

#container a img {
border: none;
opacity: 0.25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */
filter: alpha(opacity = 25); /* IE 5-7 hack */
}
#container a:hover img,
#container a:focus img {
opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 hack */
filter: alpha(opacity = 70); /* IE 5-7 hack */
}

The syntax is similar, with a value of opacity passed through
IE’s alpha filter. Note that IE8 ignores the filter property
and requires the vendor-prefixed –ms-filter with some additional
(ugly) values.

Adding a transition to the opacity swap will smooth
out that value change, and provide a bit of animated richness
that’ll tie this whole technique together.
We’ll make the transition rather quick (just 0.2 seconds) and ease it in and
then out again.

#container a img {
opacity: 0.25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */
filter: alpha(opacity = 25); /* IE 5-7 hack */
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
#container a:hover img,
#container a:focus img {
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 hack */
filter: alpha(opacity = 70); /* IE 5-7 hack */
}

With the transition in place, we now have a simple technique
for using opacity to craft a flexible hover experience using a
single set of images.

Download source files from here...

Continue Reading

Glowing text effect using CSS3

We have seen websites containing texts which glows on hovering over it.

In this post,we will take a quick look on how this effect is achieved.

For this technique to see in action, you need a modern browser which supports CSS3.

We will be using CSS3 shadows for this effect.

• Create an html file and name it as glow.html
• Create an anchor with class name glow-text inside a div with id container .

<div id="container">
<a href="#" class="glow-text">I'm glowing</a>
</div>

Now its time to add some styles.

<style>
#container {
 width:300px;
 height:100px;
 background:blue;
 margin:auto;
}
a.glow-text {
 font-size: 3em;
 line-height: 1.4em;
 color: white;
 font-style: italic;
 font-family: Georgia, times, serif;
 color: #fff;
 text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
 text-decoration: none;
  padding: 10px 15px;
 cursor:pointer;
}
a.glow-text:hover {
 text-shadow: 0px 0px 10px #fff;
}
</style>

 What is text-shadow

A CSS2 property (dropped in 2.1 then reintroduced in CSS3)
that adds a shadow to hypertext, with options for the direction,
amount of blur, and color of the shadow.

 text-shadow: 0px 0px 10px #fff;

What is RGBA

Not a CSS property, but rather a new color model introduced
in CSS3, adding the ability to specify a level of opacity along
with an RGB color value.

rgba(0, 0, 0, 0.5) /* black at 50% opacity */

Enjoy using glowing text-effect in your website.

Download glow.html

Continue Reading

Create your own CMS-Part 14

Before creating our blog module,just make sure to do the following modifications.

• In engine.php ,add the following line to start all the enabled modules before the line $theme->load_css();

$module->start_all_enabled_modules();

• Update show_msg function in functions.php in main folder.

/**************************************
showing a message
EG:-  show_msg('TITLE OF YOUR MESSAGE','CONTENT');
******************************************/
function show_msg($title,$msg)
{
echo '<script type="text/javascript" src="'.BASE.'/jquery.js"></script>
 <script type="text/javascript" src="'.BASE.'/jquery.freeow.js"></script>';
echo '<script type="text/javascript">
  (function ($) {
  $(document).ready(function() {

   var title, message, opts, container;
   message="'.$msg.'";
   title="'.$title.'";   
   $("#freeow-tr").freeow(title,message);

  });
}(jQuery));
</script>
';
}

• Add some more function to work with modules and themes.

/***************************
Get the list of modules present in the cms
returns both installed and uninstalled modules
****************************/
function get_modules_list()
{
global $module;
$modules_list=$module->get_modules_list();
return $modules_list;
}
/***************************
Get the list of themes in the cms
****************************/
function get_themes_list()
{
global $theme;
$themes_list=$theme->get_themes_list();
return $themes_list;
}
/************************
checks whether a module is enabled
**************************/
function is_module_enabled($module_name)
{
global $module;
return $module->is_active($module_name);
}

function register_module($name)
{
global $module;
$module->register_module($name);
}
/************************
checks whether a module is installed
**************************/
function is_module_installed($module_name)
{
global $module;
return $module->is_module_installed($module_name);
}
/*************************************
get the details of a module from its
manifest file.
************************************/
function get_module_details($name)
{
$module_details=xml2array(MODULESPATH.'/'.$name.'/manifest.xml');
$module_details['picture']=BASE.'/'.MODULESPATH.'/'.$name.'/pic.png';
return $module_details;
}

The function register module is to add the module to the database.The description and details of a module will be present in the manifest.xml file inside the directory of corresponding module.So we need a function to parse the xml file.

The function will be provided in the upcoming tutorial.

As we are advancing a little bit,the default theme will have to be modified very much.Instead ,You can download the 'fbtheme' for next stage.

Download fbtheme

Continue Reading

Learn CSS transitions in easy way

In this post,we are going to learn a few tips regarding css transitions.Before we start ,take a look at how
W3C explains CSS transitions.

CSS Transitions allow property changes in CSS values to occur
smoothly over a specified duration.

This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes
to the element (including even a change on the element’s class attribute).

Let’s start with a simple example, where we’ll add a transition
to the background color swap of a link. When hovered over,
the link’s background color will change, and we’ll use a transition
to smooth out that change—an effect with a
few simple lines of CSS.The markup is a simple hyperlink, like so:

<a href="#" class="sample">Hover me!</a>

Next, we’ll add a declaration for the normal link state with a
little padding and a light background colour, followed by the
background swap to another colour on hover

a.sample {
padding: 5px 10px;
background: #1991fc;
}
a.sample:hover {
color: #030;
background:  #2fc;
}

Now let’s add a transition to that background color change.
This will smooth out and animate the difference over a specified
period of time

a.sample {
padding: 5px 10px;
background: #1991fc;
text-decoration:none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
a.sample:hover {
color: #030;
background:  #2fc;
}

You’ll notice the three parts of a transition in the declaration:

• transition-property: The property to be transitioned (in this case,
  the background property)
• transition-duration: How long the transition should last (0.3
  seconds)
• transition-timing-function: How fast the transition happens over
  time (ease)

The timing function value allows the speed of the transition
to change over time by defining one of six possibilities: ease,
linear, ease-in, ease-out, ease-in-out, and cubic-bezier
(which allows you to define your own timing curve).

For longer animations, the
timing function you choose becomes more of an important
piece of the puzzle, as there’s time to notice the speed changes
over the length of the animation.
Default value is ease.

DELAYING THE TRANSITION

For example, let’s
say we wanted the background transition to happen half a
second after the link is hovered over. We can do that using the
transition-delay property.

The following example adds the same background switch to
the :focus state. This enables triggering the transition from
either hovering over or focusing the link (via the keyboard, for
example).

a.sample {
padding: 5px 10px;
background: #1991fc;
text-decoration:none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
a.sample:hover,
a.sample:focus {
background:  #2fc;
}

TRANSITIONING MULTIPLE PROPERTIES

Let’s say that along with the background color, we also want
to change the link’s text color and transition that as well. We
can do that by stringing multiple transitions together, separated
by a comma. Each can have their varying duration and
timing functions .
Eg:

-o-transition: background .3s ease, color 0.2s linear;

TRANSITIONING ALL POSSIBLE PROPERTIES

An alternative to listing multiple properties is using the all
value. This will transition all available properties.
Let’s drop all into our simple example instead of listing
background and color separately. They’ll now share the
same duration and timing function.

a.foo {
padding: 5px 10px;
background: #1991fc;
text-decoration:none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.foo:hover,
a.foo:focus {
color: #030;
background:  #2fc;
}

This is a convenient way of catching all the changes that happen
on :hover, :focus, or :active events without having to
list each property you’d like to transition.

Continue Reading

Create your own CMS-Part 13

Now look at the two url given below

• http://localhost/stupid/index.php?module=blogs&sub=editblog&action=save
• http://localhost/stupid/blogs/editblog/save

The second url looks more readable and pretty.We can achieve this by url rewriting using htaccess or using php.In our cms we will be using htaccess.Also we will deny access for direct viewing of files in htaccess file.All the files can only be viewed through index.php or index1.php and soon....

• Create a file in the root directory of your website (in our case 'stupid' directory)
• Name it as '.htaccess'.Edit the file using notepad.

<FilesMatch "\.php$">   
 Order Allow,Deny  
 Deny from all
</FilesMatch>
<FilesMatch "index[0-9]?\.php$">  
 Order Allow,Deny   
 Allow from all
</FilesMatch>
Options +FollowSymlinks
RewriteEngine on
RewriteRule ^([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)\=([a-zA-Z0-9_-]+)$ index.php?module=$1&sub=$2&action=$3&$4=$5
RewriteRule ^([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/$ index.php?module=$1&sub=$2&action=$3
RewriteRule ^([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)\=([a-zA-Z0-9_-]+)$ index.php?module=$1&sub=$2&$3=$4
RewriteRule ^([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/$ index.php?module=$1&sub=$2
RewriteRule ^action\=([A-Za-z0-9\_\-\/]+)$ index.php?u_action=$1
RewriteRule ^([A-Za-z0-9\_\-\/]+)/$ index.php?module=$1

In order to distinguish the action parameter within a module from user actions like login,register etc,the url variable 'action' previously used in actions.php in actions folder will be replaced by 'u_action'.
So kindly replace the first 6 lines in actions.php with the following lines.

global $user;
if(isset($_GET['u_action']))
{
$action=$_GET['u_action'];
switch($action)

Now you can set the action of login form as

<?=BASE?>/action=login

So we are done with url rewriting.In the next post we will be creating a blog module.

Continue Reading

Create your own CMS-Part 12

So far we have coded all the necessary class files.
Here we will create our first module 'home'.Before creating our first module,let us add two more functions in 'functions.php' in 'main' folder.

/***************************
Builds menu (left)
$menu argument must be an array
****************************/
function build_menu($menu)
{
foreach ($menu as $name=>$link)
{
 show_menu($name,BASE.$link);
}
}

build_menu function is used to build a menu for navigation.It accepts an array $menu as parameter with key indicating the name of the menu and value indicating the link.

Now add another function to show the menu.

/***************************
Shows the menu
****************************/
function show_menu($name,$link)
{
echo '<a href="'.$link.'" class="left_menu">'.$name.'</a>';
}

Creating the homepage

The homepage of our site will contain a register form and login form.
Homepage is theme based .
Open the 'default' themes folder and create 'homepage.php'.
Edit this file with your contents.
Homepage should be simple and attractive.
Download the theme with new homepage from the link below as an example.

Download default theme

Creating the first module

Home module doesn't require the necessary files to be valid.
It is valid by default.The home module, we are going to create will have only two files.

• view.php              -      content in app_block area.
• left_menu.php      -      menu for navigation.

Open modules folder.
Create a folder and name it as 'home'.
Create two files as mentioned above.

view.php

You can write whatever here to meet your requirements.

You might love this quote!!!

<div class="content_wrapper">
<h3>
"We've demonstrated a strong track record of being very disciplined with the use of our cash. We don't let it burn a hole in our pocket, we don't allow it to motivate us to do stupid acquisitions. And so I think that we'd like to continue to keep our powder dry, because we do feel that there are one or more strategic opportunities in the future." 
--
</h3>
</div>
<h2>
<a href="http://www.blogger.com/blogger.g?blogID=5175690629178451362">Steve Jobs </a></h2>

left_menu.php

<div id="left_menu">
$menu = array('Photos'=>'/#','Videos'=>'/#');
build_menu($menu);
if(is_admin())
{
echo '<a class="left_menu" href="http://www.blogger.com/'.BASE.'/admin/">Admin</a>';
}

?>

Navigation is created using the two functions we created in the begining of this post.

Download the home module

<<<  PREV  ||  NEXT  >>>

Continue Reading

Create your own CMS-Part 11

Sorry for the delay!
We are getting into advanced features from this post onwards.
In this post we will learn to create a custom module class.So lets begin...

• Before we begin to create the class file , let us see the structure of a module directory.The structure given below is created by taking 'blog' module as reference.

The following files are necessary for a module to be valid.

• 'start.php'
• 'manifest.xml'
• 'install.php'

The module class will contain various methods to control a module.The page to be executed (called as base file) depends on the query string in the url.The structure of our url is

http://localhost/stupid/index.php?module=val1&sub=val2&action=val3

val1 =====> any valid module  eg: blog,photos etc
val2 =====> name of sub module  eg: editblog ,viewblog,deleteblog etc
val3 =====> action filename for actions like save,edit etc

Let us create our modules class

• Open stupid >> include directory.
• Create a file named 'module_class.php'.
• Open the file in an editor and write the following code.

<?php
/*
THE STRUCTURE OF OUR MODULE IS AS FOLLOWS.
FOR BETTER UNDERSTANDING BLOG MODULE IS USED AS
A REFERENCE.
NOTE: FILES WITH PREFIX * ARE ESSENTIALLY REQUIRED.

modules/
blog/
extras/
editblog.php
createblog.php
viewblog.php
actions/
save.php
create.php
delete.php
*install.php
*start.php
view.php
menu_left.php
*manifest.xml
image.png

*/

/*
The module class will contain various methods for 
controlling a module.
The structure of our url will be

"http://localhost/stupid/module=val1&sub=val2&action=val3"

val1 =====> any valid module  eg: blog,photos etc
val2 =====> name of sub module  eg: editblog ,viewblog,deleteblog etc
val3 =====> action filename for actions like save,edit etc

*/
?>

<?php
class Modules
{
    
    /**
    $module     : An array with keys name,sub and action.The values is obtained from url through $_GET method.
    $module_dir   : The path of current module  eg: modules/blogs , modules/photos.
    $module_data  : An array used to store the details of the module (obtained from database) .
    $base_file   : The file to fetch and execute .
    $logged_out_menu : The menu for a anonymous user.This will be present in the theme.
    **/
    
    var $module = array();
    var $module_dir;
    var $module_data = array();
    var $module_menu;
    var $base_file;
    var $logged_out_menu;
    
    /**
    Constructor for the modules class.
    The value of base file changes with the values in the query string.
    Have a look at the if else statement for better understanding. 
    **/
    
    function __construct()
    {
        global $theme;
        if (isset($_GET['module'])) {
            $this->module['name'] = $_GET['module'];
        } else {
            $this->module['name'] = 'home';
        }
        $this->module_dir = MODULESPATH . '/' . $this->module['name'];
        if (isset($_GET['sub'])) {
            $this->module['sub'] = $_GET['sub'];
            if (isset($_GET['action'])) {
                $this->module['action'] = $_GET['action'];
                $this->base_file        = $this->module_dir . '/extras/actions/' . $this->module['action'] . '.php';
            } else {
                $this->base_file = $this->module_dir . '/extras/' . $this->module['sub'] . '.php';
            }
        } else {
            $this->module['sub'] = NULL;
            $this->base_file     = $this->module_dir . '/view.php';
        }
        $this->module_data     = $this->get_module_data();
        $this->logged_out_menu = $theme->active_theme . '/menu.php';
    }
    
    /********************************************
    This method is used to get the data of the 
    current module.
    ********************************************/
    
    function get_module_data()
    {
        global $db;
        $res = $db->query("SELECT * FROM `modules` WHERE `name` = '" . $this->module['name'] . "' LIMIT 1");
        return $db->fetch_array($res);
    }
    
    /********************************************
    Returns true if the module is enabled
    $name : The name of the module.
    *********************************************/
    
    function is_active($name)
    {
        global $db;
        $res  = $db->query("SELECT * FROM `modules` WHERE `name` = '" . $name . "' LIMIT 1");
        $data = $db->fetch_array($res);
        if ($data['active'] == 1)
            return true;
        else
            return false;
    }
    
    /******************************************
    Checks whether the module is installed or not
    $name : The name of the module.
    ********************************************/
    
    function is_module_installed($name)
    {
        global $db;
        $res = $db->query("SELECT * FROM `modules` WHERE `name` = '" . $name . "'");
        if ($db->fetch_num($res) == 1)
            return true;
        else
            return false;
    }
    
    /******************************************
    Returs an array of all enabled modules
    ******************************************/
    
    function get_all_enabled_modules()
    {
        global $db;
        $res = $db->query("SELECT * FROM `modules` WHERE `active` = 1");
        while ($all = $db->fetch_array($res)) {
            $enabled_modules[] = $all['name'];
        }
        return $enabled_modules;
    }
    
    /*****************************************
    This is the starter for all enabled modules.
    start.php file from every enabled modules is
    included by this method.
    ******************************************/
    
    function start_all_enabled_modules()
    {
        global $db;
        $enabled_modules = $this->get_all_enabled_modules();
        foreach ($enabled_modules as $e) {
            if ($e != 'admin' && $e != 'home')
                include_once MODULESPATH . '/' . $e . '/start.php';
        }
    }
    
    /*
    This method will be called in engine.php.
    Used to view the module content by building 
    menu.
    */
    
    function view_module()
    {
        if ($this->is_module_installed($this->module['name']) && $this->is_active($this->module['name'])) {
            $this->build_menu();
            $this->view_app();
        } else {
            redirect_to(BASE);
        }
    }
    
    /**
    Builds the necessary menu for the module.
    Includes the menu_left.php
    */
    
    function build_menu()
    {
        if (file_exists($leftmenufile = $this->module_dir . '/menu_left.php')) {
            $this->module_menu = $leftmenufile;
        } else {
            $this->module_menu = MODULESPATH . '/home/menu_left.php';
        }
        
    }
    
    /*
    Views the app in the app block.
    */
    
    function view_app()
    {
        if (is_logged_in()) {
            echo '<div id="canvas">';
            echo '<div id="left">';
            include_once $this->module_menu;
            echo '</div>';
            echo '<div id="app_block">';
            include_once $this->base_file;
            echo '</div>';
            echo '<div class="clear"></div>';
            echo '</div>';
            
        } else {
            if ($this->module['name'] == 'home') {
                global $theme;
                include_once $theme->active_theme . '/homepage.php';
            } else {
                echo '<div id="canvas">';
                echo '<div id="app_block">';
                include_once $this->base_file;
                echo '</div>';
                echo '<div id="left">';
                include_once $this->logged_out_menu;
                echo '</div>';
                echo '<div class="clear"></div>';
                echo '</div>';
            }
        }
    }
    
    /********************************************
    Returns an array of all modules ( enabled and disabled ).
    Obtained by reading the modules directory.
    *********************************************/
    
    function get_modules_list()
    {
        $plugins = array();
        if ($handle = opendir(MODULESPATH)) {
            while ($mod = readdir($handle)) {
                // must be directory and not begin with a .
                if (substr($mod, 0, 1) !== '.' && is_dir(MODULESPATH . "/" . $mod)) {
                    $plugins[] = $mod;
                }
            }
        }
        sort($plugins);
        return $plugins;
    }
    
    // to activate a module
    
    function activate($name)
    {
        global $db;
        $sql = "UPDATE modules SET active='1' WHERE name = '" . $name . "'";
        $db->query($sql);
    }
    
    // to deactivate a module
    
    function deactivate($name)
    {
        global $db;
        $sql = "UPDATE modules SET active='0' WHERE name = '" . $name . "'";
        $db->query($sql);
    }
    
    /*
    To install a module.
    Before installing the installing module is checked for validity.
    */
    
    function install_module($name)
    {
        $valid = $this->check_module($name);
        if ($valid) {
            include_once MODULESPATH . '/' . $name . '/install.php';
        } else {
            show_msg('Invalid', 'This module is not valid');
        }
    }
    
    // To uninstall a module
    
    function uninstall_module($name)
    {
        global $db;
        $sql = 'DROP TABLE IF EXISTS ' . $name . '';
        $db->query($sql);
        $sql = "DELETE FROM modules WHERE name = '" . $name . "'";
        $db->query($sql);
        $sql = "DELETE FROM module_settings WHERE module_name = '" . $name . "'";
        $db->query($sql);
    }
    
    /*
    This method inserts the module into modules table in the database.
    */
    
    function register_module($name)
    {
        global $db;
        $sql = "INSERT INTO modules(name) VALUES('" . $name . "')";
        $db->query($sql);
    }
    
    /**
    Returns true if module is valid.
    A module is valid if it contains the 
    required files.
    **/
    
    function check_module($name, $valid = false)
    {
        if (file_exists(MODULESPATH . '/' . $name . '/install.php') && file_exists(MODULESPATH . '/' . $name . '/view.php') && file_exists(MODULESPATH . '/' . $name . '/manifest.xml'))
            $valid = true;
        return $valid;
    }
    
    // to enable a module
    
    function enable_module($name)
    {
        $this->activate($name);
    }
    
    // to disable module
    
    function disable_module($name)
    {
        $this->deactivate($name);
    }
    
}
?>  

All the methods are named in such way that you can specify the function it does easily.
Also the functions can be easily understood from the comments in the file.So I am skiiping the explanation of each methods specifically.You can just comment below if you need an explanation of any methods.
So we have created our class file successfully.Now its time to create an object of the class.As usual class instantiation is done in 'engine.php' in 'main' folder.The modified 'engine.php' looks like below

<?php
include_once('functions.php');
include_once('config/base.php');
include_once(CLASSPATH . '/database_class.php');
include_once(CLASSPATH . '/session_class.php');
include_once(CLASSPATH . '/user_class.php');
include_once(CLASSPATH . '/theme_class.php');
include_once(CLASSPATH . '/module_class.php');
global $db, $ss, $user, $theme, $module;

$db     = new Database();
$ss     = new Session();
$user   = new User();
$theme  = new Theme();
$module = new Modules();

/**********************************/

/*******************************/
$theme->load_css();
$theme->load_index();

/******************************
to view the module
*******************************/

$module->view_module();
$theme->load_footer();

/*******************************
 *******************************/
include_once('/actions/actions.php');
?>

In the next post , we will be creating our first module 'home'.



<<< PREV || NEXT >>>

Continue Reading

Why dont you create your own CMS???--Part X

Let add some more functions on our 'functions.php'.
We will be looking at each functions in detail.

/***************************************
ESCAPING STRING
*************************************/

function escape($str) {
 global $db;
    $str = get_magic_quotes_gpc()?stripslashes($str):$str;
    $str = mysql_real_escape_string($str, $db->connection);
    return $str;
  }
 
/**************************************
showing a message
EG:-  show_msg('TITLE OF YOUR MESSAGE','CONTENT');
******************************************/

function show_msg($title,$msg)
{
echo '<script src="jquery.js" type="text/javascript">
</script>
 <script src="jquery.freeow.js" type="text/javascript">
</script>';
echo '<script type="text/javascript">
  (function ($) {

  $(document).ready(function() {
 
   var title, message, opts, container;
   message="'.$msg.'";
   title="'.$title.'";      
   $("#freeow-tr").freeow(title,message);
   
  });

}(jQuery));
</script>
';
}

/***************************
 To get the username of the
 logged in person

****************************/
 
function get_username()
{
global $user;
return $user-&gt;get_property('username');
}
/***************************
To get user id of the logged in person

****************************/
function get_user_id()
{
global $user;
return $user-&gt;get_property('u_id');
}
/***************************
Check whether the logged in user is admin or not
The admin has a user id 1

****************************/
function is_admin()
{
global $user;
$id=get_user_id();
if($id==1)
 return true;
else 
 return false;
}
/***************************
Get the various access level of the user

****************************/
function get_user_level()
{
global $user;
return $user-&gt;get_property('level');
}
/***************************
Checks whether user is logged in or not

****************************/
function is_logged_in()
{
global $user;
return $user-&gt;is_logged_in();
}
/***********************************
viewing area to show message
*************************************/

function message_area()
{
echo ('<div class="freeow freeow-top-right" id="freeow-tr"></div>');
}

/*************************************
draw login box
*****************************************/
function draw_login_form()
{
 echo '<div id="login_box"><h1>Login</h1><form action="index.php?action=login" method="post"></form>username: <input name="uname" />

password: <input name="pwd" type="password" />

Remember me? <input name="remember" type="checkbox" value="1" />

<input type="submit" value="login" />
 </div>';
}

/*****************************************
draw register form
*******************************************/
function draw_register_form()
{ 
    echo '<div id="register_box"><h1>Register</h1><form action="index.php?action=register" method="post"></form>username: <input name="username" />

password: <input name="pwd" type="password" />

email: <input name="email" />

<input name="register" type="submit" value="Register user" />
   </div>';
}
 

The function escape is to mysql real escape the string.
Then comes our important function 'show_msg()' function.

function show_msg($title,$msg)
{
echo '<script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.freeow.js"></script>';
echo '<script type="text/javascript">
  (function ($) {
  $(document).ready(function() {
   var title, message, opts, container;
   message="'.$msg.'";
   title="'.$title.'";
   $("#freeow-tr").freeow(title,message);
  });
}(jQuery));
</script>';

We are using the free script 'freeow' for showing short messages to the user.The function will accept two arguments-the title and the message.Then we included two javascripts for our function to work.

You can download the scripts from here and copy it in 'stupid' folder.

• download jquery.freeow.js
• download jquery.js

To show the message you need a message area.Message area can easily be defined by using the message_area() function.Here I have put this below our header.

To obtain the username of the user get_username() can be used.
All other functions are self explanatory.

Now you have to add some css to work with messages.
Please download the modified theme from here

Now we have to include our newly created class files and instantiate in our 'engine.php'.
I am providing the full source code upto our development of stupid cms here..

Download stupid cms

The first registered  user will be the admin.After registering ,login and logout to see all are correct.

<<< PREVIOUS || NEXT >>>

Continue Reading

Why dont you create your own CMS???--Part 9

In the previous post,we created our session class and user class.Here we will look into our 'actions.php' for handling actions like login,logout,register etc.The action to be performed will be decided from a url variable named 'action'.So whenever url variable action is set,corresponding action will be performed.

• Open stupid >>> actions folder.
• Create a file named 'actions.php'.
• Open the file in an editor and write the following code.

 
<?php
global $user;
if (isset($_GET['action'])) {
    $action = $_GET['action'];
    switch ($action) {
        case 'login':
            $username = $_POST['uname'];
            $password = $_POST['pwd'];
            if (!empty($username) && !empty($password)) {
                if (!$user->login($_POST['uname'], $_POST['pwd'])) {
                    show_msg('Attention', 'Wrong username and/or password');
                } else {
                    if (is_admin()) {
                        redirect_to(BASE);
                    } else {
                        redirect_to(BASE);
                    }
                }
            } else {
                show_msg("Attention", "All fields are required ");
            }
            break;
        case 'logout':
            $user->logout();
            redirect_to(BASE);
            break;
        case 'register':
            if (!empty($_POST['username']) && !empty($_POST['pwd']) && !empty($_POST['email'])) {
                $data    = array(
                    'username' => $_POST['username'],
                    'email' => $_POST['email'],
                    'password' => $_POST['pwd'],
                    'level' => 1
                );
                $user_id = $user->insertUser($data); //The method returns the userID of the new user or 0 if the user is not added
                if ($user_id == 0)
                    show_msg('Not Registered', 'User not registered'); //user is allready registered or something like that
                else {
                    show_msg('Registered', 'User registered with user id ' . $user_id . '');
                    //redirect_to(BASE);
                }
            } else
                show_msg('Attention', 'ALL FIELDS REQUIRED');
            break;
        
        default:
            echo "no action";
    }
}
?>

Let us look into the details of the script in order.

• Firstly,we declared the global variable $user which points to the object of the user class.
• Checks whether the action isset using $_GET['action'] .
• If set,the value is assigned to a variable $action.
• Here the value can be login or logout or register.
• We have used switch statement to perform the defined action.

Login action.

if the action to be performed is login,the post variables are checked.If the post varables are not empty,the following code is executed.

$user->login($_POST['uname'],$_POST['pwd'])

Remember the login method used in user_class.php.
The admin will be our first user i.e the user with user id 1.
BASE is our base url.
Similarly logout action as well as register action are carried out by their corresponding methods in the user_class.php.

The functions redirect_to(),is_admin(),show_message() will be added later to the functions.php.

<<< PREVIOUS || NEXT >>>

Continue Reading

Why dont you create your own CMS???--Part 8

From this post onwards,we are entering our second phase of our 'stupid' cms creation.
In this phase,we will

• start using sessions.
• create a simple user management system.
• create some more useful functions .
• build a small notification message system using 'freeow'.

We will be creating a session class and a user class to manage sessions and users respectively.So lets start our second phase...

Building the session class

This class will be used to create a session,set a session variable and get those session variables.

• Open  stupid >>> include  directory.
• create a file named  'session_class.php'.
• Open the file in an editor and write the following code.

<?php
class Session {
 function Session() 
 {
  session_start();
 }
 
 function destroy_session()
 {
 session_unset();
 session_destroy();
 }
 
 function set_session($name,$val)
 {
  $_SESSION[$name] = $val;
 }
 
 function set_session_variable($name,$val)
 {
  $this->set_session($name,$val);
 }
 
 function get_session($name)
 {
  if(isset($_SESSION[$name]))
  return $_SESSION[$name];
 }
 
 function get_session_variable($name)
 { 
 return $this->get_session($name); 
 }
}

?> 

Since all the methods are simple , I am not elaborating each of them.
Now let us focus our attention on the user management system.

Building the user class

Our user class will have the following features

• can check whether the user is loaded or not.
• can check whether the user is logged in or not,active or not.
• can insert a user when registered successfully.
• can assign different levels for users.
• can login and logout a user.

However you can increase the efficiency at any time by adding some more useful methods.
Before we move into the file,lets create a users table in our stupid database.

CREATE TABLE IF NOT EXISTS `users` (
            `u_id` smallint(11) NOT NULL AUTO_INCREMENT,
            `username` varchar(50) NOT NULL,
            `password` varchar(50) NOT NULL,
            `email` varchar(50) NOT NULL,
            `level` tinyint(11) NOT NULL DEFAULT '3',
            `active` tinyint(1) NOT NULL DEFAULT '1',
            PRIMARY KEY (`u_id`)
          ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 ;

The first registered user will be our admin.
Now lets code our user_class.php file.This will also be inside in our include directory.
So here is the code....

<?php

class User
{
    
    var $user_id;
    var $user_data = array();
    
    /**
     * Class Constructure
     * 
     * @param string $dbConn
     * @param array $settings
     * @return void
     */
    function __construct()
    {
        if (!empty($_SESSION['user_id'])) {
            $this->loadUser($_SESSION['user_id']);
        }
        
    }
    
    /**
     * Login function
     * @param string $uname
     * @param string $password
     * @param bool $loadUser
     * @return bool
     */
    
    function login($uname, $password, $loadUser = true)
    {
        global $db, $ss;
        $uname    = escape($uname);
        $password = $originalPassword = escape($password);
        $password = "MD5('$password')";
        $res      = $db->query("SELECT * FROM `users` 
  WHERE `username` = '$uname' AND `password` = $password LIMIT 1", __LINE__);
        if ($db->fetch_num($res) == 0)
            return false;
        if ($loadUser) {
            $this->user_data = $db->fetch_array($res);
            $this->user_id   = $this->user_data['u_id'];
            $ss->set_session_variable('user_id', $this->user_id);
            $ss->set_session_variable('username', $this->user_data['username']);
        }
        return true;
    }
    
    /**
     * Logout function
     * param string $redirectTo
     * @return bool
     */
    function logout($redirectTo = '')
    {
        global $ss;
        $ss->destroy_session();
        $this->userData = '';
        if ($redirectTo != '' && !headers_sent()) {
            header('Location: ' . $redirectTo);
            exit; //To ensure security
        }
    }
    /**
    to get a property of a user
    eg- 
    get_property('username') returns the username
    ***********************************/
    
    function get_property($property)
    {
        return $this->user_data[$property];
    }
    
    /**
     * Is the user an active user?
     * @return bool
     */
    function is_active()
    {
        return $this->user_data['active'];
    }
    
    /**
     * Is the user loaded?
     * @ return bool
     */
    function is_logged_in()
    {
        return empty($this->user_id) ? false : true;
    }
    
    function insertUser($data)
    {
        global $db;
        if (!is_array($data))
            echo ('Data is not an array');
        $password = "MD5('" . $data['password'] . "')";
        foreach ($data as $k => $v)
            $data[$k] = "'" . escape($v) . "'";
        $data['password'] = $password;
        $data_keys        = implode(',', array_keys($data));
        $data_values      = implode(',', $data);
        $db->query("INSERT INTO users (" . $data_keys . ") VALUES (" . $data_values . ")");
        return (int) mysql_insert_id($db->connection);
    }
    
    /**
     * A function that is used to load one user's data
     * @access private
     * @param string $userID
     * @return bool
     */
    function loadUser($user_id)
    {
        global $db, $ss;
        $res = $db->query("SELECT * FROM `users` WHERE `u_id` = '" . escape($user_id) . "' LIMIT 1");
        if (mysql_num_rows($res) == 0)
            return false;
        $this->user_data = mysql_fetch_array($res);
        $this->user_id   = $user_id;
        $ss->set_session_variable('user_id', $this->user_id);
        return true;
    }
    
}
?>

A brief idea of all the methods can be gained from reading the comments in the file itself.So I am skipping the description of this class file for time being.
if you have any doubts about the codes,please post comments....

<<< PREVIOUS || NEXT >>>

Continue Reading

Why dont you create your own CMS???--Part 7

So we have done the following in our previous lessons.

• setup xampp!
• created 'stupid' database with essential tables.
• coded all the essential classes (database,theme).
• completed our engine.php script.

Hey we have completed many files,now its time to check whether we are in the right path???
Remember the functions.php in the 'main' directory!!
Let us define some functions in 'functions.php'.

• Open the file in an editor and write the following code.

/***************************
Shows the title of the page

****************************/
function title($title)
{
echo '<title>'.SITENAME.' : '.$title.'</title>';
}

/***************************
if your module has title
use this function to show title of app inside app block

****************************/
function app_title($app_title)
{
echo '<div id="app_title">'.$app_title.'</div>';
echo '<div id="spacer"></div>';
}
/***********************************
get site logo
***************************************/

function get_site_logo()
{
global $theme;
return $theme->get_sitelogo();
}

The functions are described below

1. title ==> TO DEFINE THE TITLE OF A PAGE.
2. app_title ==> TO DEFINE THE TITLE OF APP.
3. get_site_logo ==> RETURNS THE SITELOGO.

More functions will be included later...

Now its time to create our first theme 'default'.

Please download the code and extract it into 'themes' folder.

Now open the 'index.php' in the stupid folder.

Include our 'engine.php' there.

<div id="container">
<div id="wrapper">
<?php 
require 'main/engine.php';
?>
</div>
</div>

After doing all these,run xampp.

Go to http://localhost/stupid/ from your browser.

If all came in our way,you will see a congratulation message.Otherwise please comment here so that I can understand the details of the error.

<<< PREVIOUS || NEXT >>>

Continue Reading

Why dont you create your own CMS???--Part 6

For any vehicle to move,it is essential to have an engine.In our 'stupid' cms the 'engine.php' will serve as the engine.

• Open stupid >>> main folder.
• create a file and name it as engine.php.
• create another file and name is as functions.php
• open 'engine.php' in an editor and write the following code.

The functions.php will contain the simple and essential functions to perform a specific task.
We will complete our functions.php later.For time being we are going to concentrate on our engine.php.

<?php
include_once('functions.php');
include_once('config/base.php');
include_once(CLASSPATH.'/database_class.php');
include_once(CLASSPATH.'/theme_class.php');

global $db,$theme;

$db=new Database();
$theme=new Theme();

/**********************************/

/*******************************/
$theme->load_css();
$theme->load_index();
$theme->load_footer();

/*******************************
*******************************/
?>

Let me briefly describe the code.
First of all we icluded the functions and configuration file.
Then the essential classes were included.
After including the core files,we instantiated the classes using 'new' operator and assigned it to global variable '$db' and '$theme'.Remember the global $db used in theme_class.php.

$db=new Database();

$theme= new Theme();

The database connection will already be made.Now its time to load our theme.The codes

$theme->load_css();

$theme->load_index();

$theme->load_footer();

will do the work for us.I told you "thats the magic of oop".

In the next post we will create our first theme called "default".
It will be easy and great ,if you are familiar with CSS.
Stay tuned...............!

<<< PREVIOUS || NEXT >>>

Continue Reading

Why dont you create your own CMS???--Part 5

Theming

Theming had always been my challenging topics while creating my cms.Thanks to the social networking sites through which I learned my first lessons on how to manage themes for a site.Before we get into theming,just think about "what kind of look does our site require?".For easy understanding,I am just concentrating on a blog based cms where admin can post,edit blogs.
The theme for our cms will be

• simple
• easily editable
• high speed loading

Our theme will be having

• header -----  with a sitelogo.
• body ---------- containing views from modules.
• footer --------- to show credits.

We will create our first theme 'default' later.For time being, just have alook at the structure of our theme,
///////////////////////////////////////////////////////////
default/
          images/
                    site_logo.gif
          include/
                    header.php
                    footer.php
          index.php
          css.php

////////////////////////////////////////////////////////////

Now we can take a look at theme_class.php

• open stupid >>> include directory.
• create a file and name it as theme_class.php
• open the file in an editor and write the following code.

<?php
class Theme  {
  var $active_theme;
    
  function Theme()
   {
    $this->active_theme=$this->get_active_theme();

   }
  
  function get_active_theme()
   { 
   global $db;
   $sql="SELECT * FROM settings";
   $res=$db->query($sql);
   $settings=$db->fetch_array($res);
   $active_theme=$settings['theme'];
    return THEMESPATH."/".$active_theme;
   }
  
  function set_active_theme($name)
   {
   global $db;
   $sql="UPDATE `settings` SET `theme`='".$name."' WHERE 1";
   if($db->query($sql))
          {
           return;
          }
   }
  
  function get_themes_list()
   {
   $themes = array();
   if ($handle = opendir(THEMESPATH))
    {
    while ($t = readdir($handle))
    {
    // must be directory and not begin with a .
    if (substr($t, 0, 1) !== '.' && is_dir(THEMESPATH . "/" . $t)) 
     {
     $themes[] = $t;
     }
    }
    }
   sort($themes);
   return $themes;
   }
      
  
  function get_sitelogo()
   {
   return BASE.'/'.$this->active_theme.'/images/site_logo.gif';
   }
       
      
  function load_index()
  {
   include $this->active_theme."/index.php";
   }
   
 
  function load_css()
   {
    include $this->active_theme."/css.php";
   
    }
   
   function load_footer()
   {
    include $this->active_theme."/include/footer.php";
    
   }
   
}

?>   

Here are the description of the methods used.

1. Theme  ==>  constructor assigns variable active_theme with the name of the current active theme.
2. get_active _theme ==>  gets the name of the current active theme from the database.
3. set_active_theme ==>  sets the value of active_theme field in the settings table of database with the value of the arguements.
4. get_themes_list ==>  gets all the names of themes available.
5. get_site_logo  ==>  returns the url of the site logo.
6. load_css ==> includes the css.php from the active theme.
7. load_index ==> includes the index.php from the active theme.
8. load_footer ==> includes the footer from the active theme.

In the methods used above , we uses a global variable '$db' (object of database class) which will be created later.

<<<PREVIOUS || NEXT>>>

Continue Reading

Why dont you create your own CMS???--Part 4

Creating the database class file

Here we are going to create a simple class file for carrying database functions.

• Open stupid>>include directory.
• create file and name it as 'database_class.php'.

In our database class file,we will have property named connection.Here is what our class file looks like.

<?php
class Database  {
 var $connection;
 
 function __construct()
 {
 $conn=@mysql_connect(DB_HOST,DB_USER,DB_PASS);
 if(!$conn)
  {
  die("Cannot connect to database");
  }
  else
  {
  $this->connection=$conn;
  $this->select_db(DB_NAME);
  //echo "connected";
  }
 }

 /**************************
   select db
 ***************************/
 private function select_db($db)
 {
 if(!@mysql_select_db($db,$this->connection))
  {
  die("Cannot select database");
  }
 else
  {
  //echo "yes I GOT IT!!!";
  }
 }
 
 /****************************
   QUERY
 *******************************/
 public function query($sql)
 {
 $result=@mysql_query($sql,$this->connection);
 if(!$result)
  {
  die("SQL Error");
  }
 else
  {
  return $result;
  }
 }

 /*****************************
   fetch object
 *******************************/
 public function fetch_obj($result)
 {
 return mysql_fetch_object($result);
 }
 
 public function fetch_array($result)
 {
 return mysql_fetch_array($result);
 }
 
 
 /******************************
   fetch number
 ****************************/
 public function fetch_num($result)
 {
 return mysql_num_rows($result);
 }
   
}

?>

Lets have a quick look at the functions (methods) used.

1] __construct()
              
There is no need of talking much about the constructor.This function is automatically called during class instantiation.In the constructor we are making a connection to database.The arguments in @mysql_connect() function are constants we defined in our 'base.php' file.If connection is established ,database is selected by calling the select_db method.

2] select_db()
                 
 This method selects the database

3] query()
                 
 To do a mysql query and return a result.

4]fetch_object(),fetch_array()
                 
 Both these methods have an argument which is usually the result returned from the query method.The former returns the result as an object,the latter as an array.

5]fetch_num()
                   
This method is used to return the number of rows affected.

THIS IS A SIMPLE CLASS FILE AND  NOT AN ADVANCED DATABASE CLASS FILE .
But you can use this for simple database operations.
The class instantiation will look like

$db= new Database();

We will instantiate all our class files in a single file.I just mentioned it as an example.So if we need to call any method in database class, we will use '->'
for example, to do a  query ,

$db->query("YOUR-QUERY-HERE");

In the next post we will have a look at our next class file 'theme_class.php' to handle themes.

<<<PREVIOUS || NEXT>>>

Continue Reading

Why dont you create your own CMS???--Part 3

Lets create our database tables.

Before writing class file let us create tables on our 'stupid' database.
Haven't created the database!!!!!!!
Please create one with name 'stupid'.

We will have 2 tables in our database.One for storing the settings of our site and the other for storing modules data.Are you confused??

Don't worry I will provide the sql for you.
The sql for settings table is as follows:

====================================================================

CREATE TABLE IF NOT EXISTS `settings` (
  `sitename` varchar(60) NOT NULL DEFAULT 'My new CMS',
  `admin_username` varchar(40) NOT NULL DEFAULT 'admin',
  `admin_pass` varchar(40) NOT NULL DEFAULT 'admin',
  `theme` varchar(50) NOT NULL DEFAULT 'default'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

======================================================================

The field sitename stores the name of the CMS,field theme stores the name of the current active theme (default by default).
The other two fileds stores the
Now let us create modules table.

=====================================================================

CREATE TABLE IF NOT EXISTS `modules` (
            `m_id` int(11) NOT NULL AUTO_INCREMENT,
            `name` varchar(256) NOT NULL,
            `active` tinyint(1) NOT NULL DEFAULT '0',
            PRIMARY KEY (`m_id`)
          ) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

=====================================================================

The field name stores the module name,active field indicates whether the module is active.A module is active if field value od active is 1,inactive if the value is 0.
As I have already told you,we will be considering homepage and admin interface as modules.So their attributes have to be stored in modules table.
Note that they should be active.

===============================================================

INSERT INTO `modules` (`m_id`, `name`, `active`) VALUES
           (1, 'admin', 1),
           (2, 'home', 1);

=============================================================

For settings table

==============================================================

INSERT INTO `settings` (`sitename`, `admin_username`, `admin_pass`, `theme`) VALUES
('My new CMS', 'admin', 'admin', 'default');

==============================================================

In the upcoming posts we will create our essential classes required for our CMS.

<<<PREVIOUS || NEXT>>>

Continue Reading

Why dont you create your own CMS???--Part 2

Working with configuratin files

So here we are going to work with 'main' folder where we will define our server settings and functions in a 'functions.php'.

• Create a database named 'stupid'.
• Open 'main' folder.
• Create a new folder and name it as 'config'.
• Create a file named 'base.php' inside config directory.
• Open the file in an editor.

<?php
define('DB_HOST','localhost');
define('DB_USER','YOUR USER NAME');
define('DB_PASS','YOUR PASSWORD');
define('DB_NAME','stupid');
define('SITENAME','My first CMS');
define('BASE','http://localhost/stupid');
define('CLASSPATH','include');
define('THEMESPATH','themes');
define('MODULESPATH','modules');
?>

We defined constant DB_HOST and assigned a value 'localhost'.
BASE==>'YOUR WEB URL'
Other constant definition are self explanatory.

what are constants in php?

       
"A constant is an identifier (name) for a simple value. As the name suggests, that value cannot change during the execution of the script . A constant is case-sensitive by default. By convention, constant identifiers are always uppercase."

eg:-    define('PI',3.14);

so you have finished the cofiguratin of your stupid cms.Next post we will be discussing about the classes required to create your own CMS.While I prepare the next post,you better refresh your knowledge about php classes.

<<<PREVIOUS || NEXT>>>

Continue Reading

Why dont you create your own CMS???--Part 1

INTRODUCTION

Well if you are ready with your base on php and mysql,we can start creating our own CMS.
Lets give our CMS a name - "stupid cms"
The features of our CMS will be

• It will be based on object oriented programming.
• it can be extended with module system.
• Theming will be easy.
• controlled from a single index page.
• simple admin interface..etc

Let me remind you that stupid cms is just a cms to learn and will not be highly secure.
This cms might be very very bad for advanced developers,but will be good for beginners.
I am assuming that you have already set up xampp on your computer.
So lets staaaaaaaaaaaaaaarrrrrrrrrrrtttttttt..........

Stupid cms will be completely based on module system.Even home and admin interface are considered as modules.The default module will be "home"

• Open htdocs folder in xampp directory.
• Create a new folder and name it as 'stupid'.
• Create following folders in stupid directory.

1. Folders======>>  actions,modules,themes,include,main.
2. Files========>>  index.php

• Create a file 'actions.php' in actions folder.
• The folder 'include' is for class files.
• Folder 'main' is for configuration,functions files.

So now we can look to the 'main' folder.

<<<PREVIOUS || NEXT>>>

Continue Reading

Why dont you create your own CMS???

The title may seem strange to you.You might be thinking that I am a bit crazy to do so while I can get many.

Why should i bother you to create your own CMS??Am I crazy?????????

"Yeah,thats what I am!!"  

So we can get many content management systems freely from many developers like wordpress,drupal ....etc..The have many features and can be used in various ways to create your own site.These site can range from a simple blogging site to a more complex social networking site like facebook.

One of the main feature of a CMS is its admin interface through which the site admin can do whatever they wish their site to perform.Also they are extendable with modules.The look and feel can be varied with themes.

So simply a CMS are used to build dynamic sites in which content varies from time to time.

Its enough to talk about the merits and demerits (well they dont have many) of a CMS.Lets think about

why can't I create my own CMS???????

Can it be for a good or just a waste of time???

It might be a good way to furnish your base knowledge about web programming.And a better way of understanding the theory behind working of already established CMS.

               Most of the present CMS are based on php and Mysql.So I would prefer you to have a small knowledge about php and Mysql.

Are you SLEEPING??????????
Setup your computer as a server and

GET UP AND GO TO W3SCHOOLS

Now I think I should take a break.Enjoy learning php and mysql.

 NEXT >>>

Continue Reading

Wordpress-king of blog CMS!

WordPress is a free and open source blogging tool and content management system (CMS) based on PHP and MySQL. It has many features including a plug-in architecture and a template system. WordPress is used by over 14.7% of Alexa Internet's "top 1 million" websites and as of August 2011 manages 22% of all new websites. WordPress is currently the most popular CMS in use on the Internet.

It was first released on May 27, 2003, by Matt Mullenweg as a fork of b2/cafelog. As of December 2011, version 3.0 had been downloaded over 65 million times.

Some of the features of wordpress are

• Though wordpress is known for blogging,it can be extended to multiuser dynamic sites even a social networking site.
• The look and feel of a wordpress site can be enhanced using various free and premium themes.
•  Themes allow users to change the look and functionality of a WordPress website or installation without altering the informational content.
• One very popular feature of WordPress is its rich plugin architecture which allows users and developers to extend its abilities beyond the features that are part of the base install; WordPress has a database of over 18,000 plugins with purposes ranging from SEO to adding widgets.
• Widgets offer users drag-and-drop sidebar content placement and implementation of many plugins' extended abilities. Users can rearrange widgets without editing PHP or HTML code.
• Wordpress is highly secure.

These are some of the common features of wordpress.For more click here..

To start working with wordpress,follow these simple instructions.

1. Download latest wordpress from here.
2. Unzip the zip file.
3. Copy the contents of wordpress folder in htdocs folder of your  server.
4. Follow simple instruction steps to complete your installation.
5. To know more go to learn.wordpress.com

Continue Reading

First steps towards web programming!

Last sunday,one of my friend asked me
    "Hey azy,which programming language would you prefer for me to enter into the world of web coding????????????"

This question might have been discussed over and over and over......in every discussion boards,forums etc.

Those discussions will never conclude .It goes on and on....

 But to me,there is only one answer and the answer is PHP .

Why are you all surprised,yes I said  P H P.

Let know more about php.

Introduction

Why should I bore you with stuffs copied from wikipedia and all.

Lets get straight into business.For working with php we need to setup a php environment on our computer.

To setup a php environment click here......

To create dynamic websites,we will also need mysql,apache...

So to setup up all these in your computer ,I prefer you to to install Xampp

You can download latest version of xampp from here...

Xampp for windows..

Xampp for Linux..

For other click here....

Finish your installation and enjoy the magic.

Continue Reading