Shaika's Nakama

You want to try Npk? You have no ideas? Here an example to show you how to create a very simple blog with Npk in only 10 minutes.

To keep things simple, this blog will only have one page and PHP code will be at the beginning of this page. In a real project, you should use a more robust structure like a basic MVC pattern.

Prerequisites

 - Apache 2, PHP 5 and mysql installed and running

 - A text editor or a PHP IDE like eclipse, netbeans, etc.

 - Npk 1.0 downloaded from here.

 - 10 minutes

Project Setup

First, create a folder in your ~/public_html or in your apache's DocumentRoot. Name it NpkBlog. Enter NpkBlog folder and uncompress Npk-1.0.tar.bz2. Finally, create a file named index.php.

So, we have a structure that look like this:

/NpkBlog
----/NPK
----index.php

Database Setup

Our blog will use 3 simple tables : t_msg, t_tag, t_tag_msg. Let's create them! Open a shell, login to mysql and create these tables :

CREATE TABLE t_msg (
  msgno mediumint(9) NOT NULL auto_increment,
  title varchar(100),
  body varchar(20000),
  PRIMARY KEY  (msgno)
) ENGINE=InnoDB;

CREATE TABLE t_tag (
  tagno mediumint(9) NOT NULL auto_increment,
  name varchar(100),
  PRIMARY KEY  (tagno)
) ENGINE=InnoDB;

CREATE TABLE t_tag_msg (
  tagno mediumint(9) NOT NULL,
  msgno mediumint(9) NOT NULL,
  PRIMARY KEY  (tagno,msgno),
  CONSTRAINT npkblog_tag_fk FOREIGN KEY (tagno) REFERENCES t_tag (tagno),
  CONSTRAINT npkblog_msg_fk FOREIGN KEY (msgno) REFERENCES t_msg (msgno)
) ENGINE=InnoDB;

Add some records in the tables to work:

-- Tags
insert into t_tag(name) values('Music');
insert into t_tag(name) values('Talk');
insert into t_tag(name) values('Book');

-- Messages
insert into t_msg(title,body) 
values('Hello World!', 'Hello world! This is my blog, I hope you will enjoy it.');
insert into t_msg(title,body) 
values('New Gamma Ray album', 
       'I''m so happy! Since last week, you can buy the new Gamma Ray album : To The Metal...');

-- Link tag to message
insert into t_tag_msg(tagno,msgno) values(2,1);
insert into t_tag_msg(tagno,msgno) values(1,2);

With this, we have a basic structure to work. The next step is your page.

Web Page

We will split our page in 3 sections : an header, the menu and the content. Let's start with a basic template :

<?php
    // Include Npk object
    include("NPK/Npk.php");

    // Strict doctype
    echo NpkUtils::doctype();
?>
<html>
    <head>
	<style type="text/css">
	    #head {position:absolute;top:0;left:50%;margin-left:-400px;width:798px;height:80px;
		   background-color:#8db2db;border:1px solid #4d4d4d;padding:10px;text-align:center;}
	    #menu {position:absolute;top:110px;left:50%;margin-left:-400px;width:130px;
		   background-color:#fff;border:1px solid #a0a0a0;padding:10px;text-align:center;}
	    #content {position:absolute;top:110px;left:50%;margin-left:-240px;width:558px;
		   background-color:#fff;border:1px solid #a0a0a0;padding:10px;text-align:center;}
	</style>
	<!-- NPK Theme and javascript -->
	<link rel="stylesheet" type="text/css" href="NPK/themes/blue/css/npk.css"/>
	<script type="text/javascript" src="NPK/js/jquery.js"></script>
	<script type="text/javascript" src="NPK/js/npk.js"></script>
	<!-- end -->
    </head>
    <body>

    </body>
</html>

Like you can see in this template, to use Npk, you need: 

 - To include Npk.php at the beginning of the page

 - Add your desired theme in the head section

 - Add the 2 scripts shipped with Npk : jquery.js and npk.js.

Please note that you must add a proper doctype in all your pages to use Npk (You can use NpkUtils::doctype();). I don't test nor support any browser in Quirk mode.

To keep things simple, we will work on each part and join the SQL queries, the menu, the header and the content at the end. First, let's call the database to get our content and our tags list:

<?php 

    // Filter tags
    $tagno = null;
    if (isset($_GET["tagno"]) && $_GET["tagno"] != "") {
	    $tagno = $_GET["tagno"];
    }

    // DataBase Connection
    $db = mysql_connect('YOUR_DB_ADDRESS','YOUR_DB_USER','YOUR_DB_PASS') or die("Database error");
    mysql_select_db('NpkBlogDB', $db);

    // Get tags
    $cur_tag = mysql_query('select name as label, 
                  concat("index.php?tagno=", tagno) as url 
                  from t_tag order by name');

    while(($lstTag[] = mysql_fetch_assoc($cur_tag)) || array_pop($lstTag));

    // Get Messages
    $whereClause = "";
    if ($tagno != null) {
	$whereClause = sprintf(" and tm.tagno = %d", $tagno);
    }

    $cur_msg = mysql_query("select m.msgno, m.title, m.body 
    from t_msg m, t_tag_msg tm where m.msgno = tm.msgno " . $whereClause);

    while(($lstMsg[] = mysql_fetch_assoc($cur_msg)) || array_pop($lstMsg));

?>

So, now, we have a tags list and a messages list. Let's use the tags list and Npk to create the menu :

<?php 
Npk::openPanel(array("id" => "menu"));

Npk::buttonGroup(array("data" => $lstTag, "layout" => NpkUtils::$LAYOUT_VERTICAL)); 

Npk::closePanel();
?>

That's it! The trick is to set sql column's name to match buttonGroup's data structure. A buttonGroup needs an array(array("label" => "", "url" => "")) and that's exactly what our query returns.

You want to see if the content section will be as simple as the menu? Let's see.

To create the content, we will use a NpkRepeater. A repeater is an easy way to repeat a template with a set of data.

The message template (save it as tp_msg.php):

<?php Npk::openPanel(); ?>
<h3><?=$title?></h3>   
<br />
<?=$body?>
<?php Npk::closePanel(); ?>
<br />
<br />

The content section will use the template and the messages list we got sooner :

<?php 
Npk::openPanel(array("id" => "content"));

$t = array("tp_msg.php");
Npk::repeater(array("data" => $lstMsg, "template" => $t));

Npk::closePanel();
?>

And finally, add the header section and join each part in index.php to get our web page :

<?php
    // Include Npk object
    include("NPK/Npk.php");

    // Filter tags
    $tagno = null;
    if (isset($_GET["tagno"]) && $_GET["tagno"] != "") {
	    $tagno = $_GET["tagno"];
    }

    // DataBase Connection
    $db = mysql_connect('YOUR_DB_ADDRESS','YOUR_DB_USER','YOUR_DB_PASS') or die("Database error");
    mysql_select_db('NpkBlogDB', $db);

    // Get tags
    $cur_tag = mysql_query('select name as label, 
          concat("index.php?tagno=", tagno) as url 
          from t_tag order by name');

    while(($lstTag[] = mysql_fetch_assoc($cur_tag)) || array_pop($lstTag));

    // Get Messages
    $whereClause = "";
    if ($tagno != null) {
	$whereClause = sprintf(" and tm.tagno = %d", $tagno);
    }

    $cur_msg = mysql_query("select m.msgno, m.title, m.body 
    from t_msg m, t_tag_msg tm where m.msgno = tm.msgno " . $whereClause);

    while(($lstMsg[] = mysql_fetch_assoc($cur_msg)) || array_pop($lstMsg));

    // Strict doctype
    echo NpkUtils::doctype();
?>
<html>
    <head>
	<style type="text/css">
	    #head {position:absolute;top:0;left:50%;margin-left:-400px;width:798px;height:80px;
		   background-color:#8db2db;border:1px solid #4d4d4d;padding:10px;text-align:center;}
	    #menu {position:absolute;top:110px;left:50%;margin-left:-400px;width:130px;
		   background-color:#fff;border:1px solid #a0a0a0;padding:10px;text-align:center;}
	    #content {position:absolute;top:110px;left:50%;margin-left:-240px;width:558px;
		   background-color:#fff;border:1px solid #a0a0a0;padding:10px;text-align:center;}
	</style>
	<!-- NPK Theme and javascript -->
	<link rel="stylesheet" type="text/css" href="NPK/themes/blue/css/npk.css"/>
	<script type="text/javascript" src="NPK/js/jquery.js"></script>
	<script type="text/javascript" src="NPK/js/npk.js"></script>
	<!-- end -->
    </head>
    <body>
	<!-- Head -->
	<div id="head">
	    <br /> 
	    NPk Blog Example
	    <br />
	</div>

	<!-- menu -->
	<?php 
	Npk::openPanel(array("id" => "menu"));

	Npk::buttonGroup(array("data" => $lstTag, "layout" => NpkUtils::$LAYOUT_VERTICAL)); 

	Npk::closePanel();
	?>

	<!-- Content -->
	<?php 
	Npk::openPanel(array("id" => "content"));

	$t = array("tp_msg.php");
	Npk::repeater(array("data" => $lstMsg, "template" => $t));

	Npk::closePanel();
	?>

    </body>
</html>

You have a very simple blog with a menu and dynamic content from a database!

Click here to see the result :  Npk Blog example

Resources

* Npk Demo and Manual

* jQuery

* PHP Manual

PS : My primary language is french. Please forgive me if I made some mistakes.

Nom :

Howto : Create a simple blog with Npk in 10 minutes