Codeigniter Reactor: Quick and Dirty

By Brandon Beasley On 04/06/2011 · Leave a Comment

This entire Codeigniter Reactor example was created in about 1hr using version 2.0.1. Although quick and dirty, the result is a very effective web application that is stupidly simple. I don’t suggest taking this code and creating a similar site unless you own the domain names my.ip or myip.is as the niche is already over-crowded. Nevertheless you can check out YourIP4.com – A Codeigniter Reactor Example Web Application and have a look at the example controller, view, and css style:

The Controller

class Home extends CI_Controller {
    function __construct()
	{
            parent::__construct();
	}
	function index()
        {
            if(isset($_SERVER['HTTP_REFERER'])) {
                $referer =  $_SERVER['HTTP_REFERER'];
            } else {
                $referer = 'No Referer';
            }
 
            $data = array(
                'ip_address'  => $_SERVER['REMOTE_ADDR'],
                'remote_host' => gethostbyaddr($_SERVER['REMOTE_ADDR']),
                'browser'     => $_SERVER['HTTP_USER_AGENT'],
                'referer'     => $referer,
            );
            $this->load->view('home_view', $data);
	}
}

The View

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>YourIP4 &copy; 2011</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <a href="http://yourip4.com">
                <h1>yourIP4.com</h1></a>
            </div>
            <div id="content">
                <div id="liftbox">
                    <h1>Your IP Address is:</h1>
                    <h4><?php echo $ip_address ?></h4>
                </div>
                <div id="info">
                    <img src="img/globe_download.png" alt="HTTP Referer" class="icon" />
                    <h2>The last site you visited was:</h2>
                    <h3><?php echo $referer ?></h3>
                    <img src="img/gear.png" alt="HTTP Referer" class="icon" />
                    <h2>Your browser type is:</h2>
                    <h3><?php echo $browser ?></h3>
                    <img src="img/info.png" alt="Hostname" class="icon" />
                    <h2>Your hostname is:</h2>
                    <h3><?php echo $remote_host ?></h3>
                </div>
            </div>
            <div id="dashboard">
            <table width="850">
            <tr>
                <td>
                    <ul>
                            <li><a href="http://codeigniter.com/">Codigniter</a></li>
                            <li><a href="http://fuelphp.com/">FuelPHP</a></li>
                            <li><a href="http://jquery.com/">jQuery</a></li>
                            <li><a href="http://php.net/">PHP</a></li>
                            <li><a href="http://www.apache.org/">Apache SF</a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li><a href="http://codeigniter.com/">Codigniter</a></li>
                            <li><a href="http://fuelphp.com/">FuelPHP</a></li>
                            <li><a href="http://jquery.com/">jQuery</a></li>
                            <li><a href="http://php.net/">PHP</a></li>
                            <li><a href="http://www.apache.org/">Apache SF</a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li><a href="http://codeigniter.com/">Codigniter</a></li>
                            <li><a href="http://fuelphp.com/">FuelPHP</a></li>
                            <li><a href="http://jquery.com/">jQuery</a></li>
                            <li><a href="http://php.net/">PHP</a></li>
                            <li><a href="http://www.apache.org/">Apache SF</a></li>
 
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li><a href="http://codeigniter.com/">Codigniter</a></li>
                            <li><a href="http://fuelphp.com/">FuelPHP</a></li>
                            <li><a href="http://jquery.com/">jQuery</a></li>
                            <li><a href="http://php.net/">PHP</a></li>
                            <li><a href="http://www.apache.org/">Apache SF</a></li>
                        </ul>
                    </td>
                </tr>
            </table>
 
        </div>
 
        <div id="footer">
 
 
                        <div id="footer_stats">
 
                </div><!-- End Footer_Stats -->
            </div><!-- End Footer -->
        </div> <!-- End Wrapper -->
    </body>
</html>

The Style

/* 
    Document   : style.css
    Created on : Jan 19, 2011, 10:14:46 AM
    Author     : Brandon Beasley
    Description: yourip4.com
*/
/* The Basics */
root { 
    display: block;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    background-color:#142D58;
}
h1, h2, h3 {
    font-weight: bold;
}
h1 {
    font-size: 24pt;
}
h2 {
    font-size: 18pt;
}
h3 {
    font-size: 12pt;
}
h4 {
    font-size: 36pt;
}
img {
    border-style: none;
}
/* End Basics */
 
#wrapper {
    margin: 0 auto;
    width: 922px;
}
#header {
    color: #333;
    width: 900px;
    height: auto;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 0px 0px;
}
#header h1 {
    font-size: 32pt;
    margin: 0 0 10px 40px;
}
#header a {
    text-decoration: none;
    color: #FFFFFF;
}
#header a:visited {
    color: #FFFFFF;
}
#content {
    width: 900px;
    float: left;
    padding: 10px 10px 10px 10px;
    height: auto;
    margin: 0 0 5px 0;
    background: #BBBBBB;
    border: 1px solid #000000;
    -moz-border-radius:4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
#dashboard {
    width: 900px;
    clear: both;
    background: #0e203e;
    margin-bottom: 5px;
    padding: 10px 5px 10px 18px;
    border: 1px solid #000000;
    -moz-border-radius:4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #fff;
    font-size: 10pt;
    font-weight: bold;
    text-shadow: 1px 1px 1px #333;
    text-decoration: none;
}
#dashboard ul {
    list-style-type: none;
}
#dashboard td {
    text-align: center;
    color: #BBB;
}
#dashboard a{
    color: #EEEEEE;
    text-decoration: none;
}
#dashboard a:visited {
    color: #999999;
}
#dashboard a:hover {
    color: #FFFFFF;
    font-weight: bold;
}
#footer {
    width: 900px;
    clear: both;
    background: #9E3E17;
    margin: 0px 0px 10px 0px;
    padding: 5px 5px 20px 18px;
    border: 1px solid #000000;
    -moz-border-radius:4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #fff;
    font-size: 10pt;
    font-weight: bold;
    text-shadow: 1px 1px 1px #333;
    text-decoration: none;
}
#footer_stats {
    text-align: right;
    margin: -15px  0 0 0;
}
#liftbox {
    background: #EEEEEE;
    border: 1px solid #0e203e;
    -moz-border-radius:4px;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-border-radius: 4px;
    -webkit-box-shadow: 5px 5px 5px #888;
    border-radius: 4px;
    margin: 10px;
    padding: 10px;
    text-align: center;
}