Pages

Friday, February 4, 2011

Blog Application Using CodeIgniter

This application use some file:
1. application/controllers/blog.php
2. application/views/blogview.php
3. application/views/form.php
4. application/views/view.php





 ======================== blog.php ===================
<?php

class Blog extends CI_Controller{

    function index()
    {   
        $page = "blog/page";
        header("Location: $page");
    }

    function page()
    {
        $this->load->view('blogview');         
    }   
    
    function form()
    {
        $form = $this->load->view('form','',TRUE);
        echo $form;
    }

    function insertpost($title,$content)
    {       
        $title = urldecode($title);
        $content = urldecode($content);
        $data = array(
            'title'=>$title,
            'content'=>$content
        );
        $this->db->insert('article',$data);
    }

    function view()
    {
        $query = $this->db->get('article');
        $data['hasil'] = $query->result();
       
        $this->load->view('view',$data);
    } 
}

?>

================== blogview.php ======================
<html>
<head>
    <title>Blog Application</title>
<script>
function createNew(){
    var page = document.getElementById('page');
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function(){
        page.innerHTML = ajax.responseText;
    }
    ajax.open('POST','form',false);
    ajax.send();

}
function lol(){
    var title = document.getElementById('title').value;
    var content = document.getElementById('content').value;
    var ajax = new XMLHttpRequest();
    ajax.open('POST','insertpost/'+title+'/'+content,true);
    ajax.send();

    var page = document.getElementById('page');
    page.innerHTML = '<h1>Your post saved successfully!</h1>';
}
function view(){
    var page = document.getElementById('page');
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function(){
        page.innerHTML = ajax.responseText;
    }
    ajax.open('POST','view',true);
    ajax.send();

}

</script>
</head>
<body>

<h1 id="header">
Blog Application
</h1>

<div id="nav">
<a href="javascript:createNew()" id="nav-first">Create New</a>
<a href="">Edit</a>
<a href="javascript:view()">View</a>
</div>

<div id="page">
<h1>This is the content</h1>

</div>

<div id="footer">
    <p>&copy;2011, irfan.ub@gmail.com</p>
</div>

<style>
html, body, div, h1 { margin: 0px; }
html { background: #aaf; font: 12px arial; }
body { background: white; padding: 10px; margin: 10px; border: 1px solid #aaa; border-radius: 10px;}

#header { background: #55f; color: white; padding: 10px; -moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;  border-bottom: 2px solid white; }

#nav { background: #99f; padding: 5 0px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; }
#nav a { color: white; font: 14px arial; padding: 5 10px; text-decoration: none; font-weight: bold;  }
#nav a:hover { background: #ccf; color: blue; }
#nav-first { -moz-border-radius-bottomleft: 4px; }

#page { border: 1px solid #aaa; margin: 10 0 0; border-radius: 4px; padding: 10px; }

#footer { text-align: center; background: #ccc; margin: 10 0 0px; border-radius: 4px; color: #555;}
#footer p {padding: 5px; }
</style>

</body>
</html>

================== form.php ===================
<div id="form">
    <h2>Entry New Post</h2>
<table>
<form action="insertpost" method="post">
    <tr><td><span id="sp-title">Title</span></td><td>:</td><td><input type="text" id="title" name="title" size="50"/></td></tr>
    <tr><td colspan="3"><textarea cols="50" rows="10" id="content" name="content"></textarea></td></tr>
    <tr><td colspan="3"><input type="button" id="submit" onclick="lol()" value="Save"/><td></tr>
</form>
</table>
</div>

<style>
#form h2 { font-family: arial; }
#sp-title { font: 16px arial; font-weight: bold; }
#title { border-radius: 4px; border: 1px solid #aaa; padding: 2px;}
#title:hover { box-shadow: 0 0 10px gold; border: 1px solid #ccc; }
#content { border-radius: 4px; border: 1px solid #aaa; padding; 4px; }
#content:hover { box-shadow: 0 0 10px gold; border: 1px solid #ddd; }
#submit { background: #88f; color: white;  border: 1px solid #eee; padding: 3 10; cursor: pointer; font: 12px arial; border-radius: 20px; width: 100px; }
#submit:hover { background: #55f; }
</style>

================== view.php ===========================
<div id="page-post">


<?php
foreach($hasil as $lol): ?>
    <div class="post">
    <h3><?php echo $lol->title; ?></h3>
    <p><?php echo $lol->content; ?></p>
    </div>
<?php endforeach; ?>
</div>

<style>
.post { border: 1px solid #aaa; border-radius: 4px; margin-bottom: 10px; padding: 10px; background: azure; }
.post h3 { color: #55f; text-transform: capitalize;}
.post p { font: 12px arial;  }
</style>

No comments:

Post a Comment