Tutorial Panada: Membuat Website Sederhana dengan Panada

Pendahuluan

Untuk tutorial kali ini, kita akan membuat sebuah website sederhana tanpa akses database sebagai demonstrasi kemampuan dasar dan alur dasar membuat Web/Applikasi berbasis Panada Framework. Untuk dapat mengikuti tutorial kali ini, minimal anda sudah menguasai konsep dasar OOP pada PHP dan Instalasi Panada Framework.

Langkah-langkah

1. Install Panada Framework

2. Buat folder kerja

Folder kerja yang dimaksud disini adalah folder aplikasi berbasis Panada akan dikembangkan. Perlu diingat, Panada bisa menampung banyak aplikasi/website dalam satu engine/system baik dengan nama domain yang sama maupun berbeda.

Untuk tutorial kali ini, silakan buat folder bernama: websiteku. Struktur folder didalamnya adalah sebagai berikut:

panada-simpleweb-1

3. Buat File bootstrap/loader utama engine Panada. Silakan buat file index.php pada folder websiteku. Isi dari file index.php tersebut adalah:


<?php
// Sets the default timezone used by all date/time. Adjust to your location
date_default_timezone_set('Asia/Jakarta');

// You can adjust this following constants if necessary.

// The APP constant is where your application folder located.
define('APP', dirname(__FILE__) . '/');

// The INDEX_FILE constant is this default file name.
define('INDEX_FILE', basename(__FILE__));

// And the GEAR constant is where panada folder located.
define('GEAR', '../panada/');

require_once GEAR.'Gear.php';

// To sets which PHP errors are reported just like documented in this page
// http://php.net/manual/en/function.error-reporting.php
// You can pass a parameter into the Gear class.

// Turn off all errors reporting - production use.
// new Gear(0);

// By default all errors will displayed - development use.
new Gear;

4. Buat file konfigurasi utama.

Silakan tulis source code berikut dan simpan sebagai file main.php di folder /websiteku/config.

<?php

return array(
    
    'defaultController' => 'Home',
    
    // Just put null value if you has enable .htaccess file
    'indexFile' => INDEX_FILE . '/',
    
    'module' => array(
        'path' => APP,
        'domainMapping' => array(),
    ),
    
    'vendor' => array(
        'path' => GEAR.'vendors/'
    ),
    
    'alias' => array(
        /*
        'controller' => array(
            'class' => 'Alias',
            'method' => 'index'
        ),
        */
        'method' => 'alias'
    ),
);

NB. Yang patut dicatat pada konfigurasi ini adalah, Controller Default Panada telah kita set pada Controller Home.

5. Membuat Controller Home (controller default)

Silakan tuliskan source code berikut dan simpan sebagai Home.php pada folder /websiteku/Controllers/

<?php
namespace Controllers;
use Resources, Models;

class Home extends Resources\Controller
{    
    public function index()
    {    
        echo "Test controller default berhasil";
    }
}

6. Cek tampilan dari Controller Home (sebagai dasaran berpijak)

(di http://localhost/panada/websiteku/). Contoh tampilan hasil:
panada-simpleweb-2

7. Latihan melempar data dari Controller ke View.

NB. Ingat, Controller adalah skrip yang digunakan untuk memproses request dari User (bayangkan saja dari URL yang dibuka user) kemudian View adalah skrip berisi tampilan yang akan dilihat user. Dalam konsep MVC maupun HMVC, file View SEBAIKNYA bersih dari proses olah data. Data, sebaiknya diolah di Controller.

Buka kembali file Home.php di folder /websiteku/Controllers. Ubah sehingga menjadi seperti berikut:

<?php
namespace Controllers;
use Resources, Models;

class Home extends Resources\Controller
{    
    public function index()
    {    
        $data['nama'] = 'Nama saya adalah Emka';
        
        $this->output('home', $data);
    }
}

yang patut kita perhatikan adalah perubahan logika pada fungsi index(). Kini, data yang direpresentasikan dalam bentuk array akan kita isi dan kita lempar ke file view untuk ditampilkan. Dalam contoh ini, data ‘nama’ akan kita isi dan akan kita lempar ke file view.

Snippet:

//contoh isian data
$data['nama'] = 'Nama saya adalah Emka';

//cara default untuk meload file view beserta data-nya
//template: $this->output('namafileview', dataviewyangdilempar);
        
$this->output('home', $data);

kemudian buat file view yang akan menjadi sasaran pelemparan data. Misalnya file: /websiteku/views/home.php (ingat, sesuai gaya tulis yang dianjurkan dan nama yang diset di Controller).

Isi dari file view tersebut adalah:

<?php
echo $nama;
?>

hasil tampilan di browser:
panada-simpleweb-3

Jadi, untuk menampilkan data pada file view, anda bisa melakukan echo terhadap data yang dimaksud dengan acuan, jika pada Controller tertulis

$data['nama']

sebagai array dan key array, maka pada file view, anda tulis

echo $nama;

(menyesuaikan key array yang dimaksud). Jika nanti ada

$data['jumlah_siswa'];

maka pada file view anda akan tulis:

echo $jumlah_siswa;

.

8. Mulai Gunakan Template Web/Template HTML Sederhana

Untuk memulai menggunakan template web bagi website berbasis Panada, anda cukup menyalin source dari template web yang dimaksud ke file view (yang sesuai).

Sebagai contoh, saya modifikasi file /websiteku/views/home.php (file view default dari Controller Home dan fungsi index()) dengan memasukkan template html sebagai berikut:

<html>
<head>
	<title>Websiteku</title>
	<style>
		#container
		{
			margin: 0 auto;
			width: 900px;
			background: #fff;
		}

		#header
		{
			background: #ccc;
			padding: 20px;
		}

		#header h1 { margin: 0; }

		#navigation
		{
			float: left;
			width: 900px;
			background: #333;
		}

		#navigation ul
		{
			margin: 0;
			padding: 0;
		}

		#navigation ul li
		{
			list-style-type: none;
			display: inline;
		}

		#navigation li a
		{
			display: block;
			float: left;
			padding: 5px 10px;
			color: #fff;
			text-decoration: none;
			border-right: 1px solid #fff;
		}

		#navigation li a:hover { background: #383; }

		#content-container
		{
			float: left;
			width: 900px;
			background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0;
		}

		#content
		{
			clear: left;
			float: left;
			width: 560px;
			padding: 20px 0;
			margin: 0 0 0 30px;
			display: inline;
		}

		#content h2 { margin: 0; }

		#aside
		{
			float: right;
			width: 240px;
			padding: 20px 0;
			margin: 0 20px 0 0;
			display: inline;
		}

		#aside h3 { margin: 0; }

		#footer
		{
			clear: both;
			background: #ccc;
			text-align: right;
			padding: 20px;
			height: 1%;
		}
	</style>
</head>
<body>
	<div id="container">
	<div id="header">
		<h1>
			Site name
		</h1>
	</div>
	<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
	</div>
	<div id="content-container">
		<div id="content">
			<h2>
				Page heading
			</h2>
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
			</p>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
			</p>
		</div>
		<div id="aside">
			<h3>
				Aside heading
			</h3>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
			</p>
		</div>
		<div id="footer">
			Copyright © Site name, 20XX
		</div>
	</div>
</div>
</body>
</html>

sehingga tampil halaman sebagai berikut:
panada-simpleweb-4

Demi efektivitas dan kerapian pengerjaan, sebaiknya file view dengan konsep template HTML ini kita pecah menjadi beberapa section besar, yaitu: header, content, sidebar, dan footer.

Dari file view home.php diatas, kita akan pecah menjadi 4 bagian yaitu header, content, sidebar dan footer.

Untuk header:

<html>
<head>
	<title>Websiteku</title>
	<style>
		#container
		{
			margin: 0 auto;
			width: 900px;
			background: #fff;
		}

		#header
		{
			background: #ccc;
			padding: 20px;
		}

		#header h1 { margin: 0; }

		#navigation
		{
			float: left;
			width: 900px;
			background: #333;
		}

		#navigation ul
		{
			margin: 0;
			padding: 0;
		}

		#navigation ul li
		{
			list-style-type: none;
			display: inline;
		}

		#navigation li a
		{
			display: block;
			float: left;
			padding: 5px 10px;
			color: #fff;
			text-decoration: none;
			border-right: 1px solid #fff;
		}

		#navigation li a:hover { background: #383; }

		#content-container
		{
			float: left;
			width: 900px;
			background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0;
		}

		#content
		{
			clear: left;
			float: left;
			width: 560px;
			padding: 20px 0;
			margin: 0 0 0 30px;
			display: inline;
		}

		#content h2 { margin: 0; }

		#aside
		{
			float: right;
			width: 240px;
			padding: 20px 0;
			margin: 0 20px 0 0;
			display: inline;
		}

		#aside h3 { margin: 0; }

		#footer
		{
			clear: both;
			background: #ccc;
			text-align: right;
			padding: 20px;
			height: 1%;
		}
	</style>
</head>
<body>
	<div id="container">
	<div id="header">
		<h1>
			Site name
		</h1>
	</div>
	<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
	</div>

simpan sebagai /websiteku/views/header.php

untuk bagian Content:

	<div id="content-container">
		<div id="content">
			<h2>
				Page heading
			</h2>
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
			</p>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
			</p>
		</div>

simpan sebagai file /websiteku/views/content.php

untuk bagian Sidebar (bilah kanan)

	<div id="content-container">
		<div id="content">
			<h2>
				Page heading
			</h2>
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
			</p>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
			</p>
		</div>

simpan sebagai /websiteku/views/content.php

Untuk bagian footer:


		<div id="footer">
			Copyright © Site name, 20XX
		</div>
	</div>
</div>
</body>
</html>

simpan sebagai file /websiteku/views/footer.php.

Kemudian modifikasi method di Controller Home, sehingga kita akan meload 4 bagian file tersebut:

public function index()
    {    
        $data['nama'] = 'Nama saya adalah Emka';
        
        $this->output('header', $data);
        $this->output('content', $data);
        $this->output('sidebar', $data);
        $this->output('footer', $data);
    }

Silakan cek di Browser, seharusnya tampilan yang dihasilkan sama dengan tampilan sebelum dipecah per bagian.

9. Ubah string statis di file view menjadi lebih dinamis dengan mengambil/menuliskan data dari Controller.

Contoh data yang akan kita gunakan (kita set di Controller dan akan ditulis di view).

Dalam file Controller Home.php

public function index()
    {    
        $data['judul_web']	= 'Websiteku.com';
        $data['nama_web']	= 'Websiteku.com - Website berbasis Panada Framework';
        
        $this->output('header', $data);
        $this->output('content', $data);
        $this->output('sidebar', $data);
        $this->output('footer', $data);
    }

dan file view-nya (yaitu bagian header.php):

<html>
<head>
	<title><?php echo $judul_web;?></title>
	<style>
		#container
		{
			margin: 0 auto;
			width: 900px;
			background: #fff;
		}

		#header
		{
			background: #ccc;
			padding: 20px;
		}

		#header h1 { margin: 0; }

		#navigation
		{
			float: left;
			width: 900px;
			background: #333;
		}

		#navigation ul
		{
			margin: 0;
			padding: 0;
		}

		#navigation ul li
		{
			list-style-type: none;
			display: inline;
		}

		#navigation li a
		{
			display: block;
			float: left;
			padding: 5px 10px;
			color: #fff;
			text-decoration: none;
			border-right: 1px solid #fff;
		}

		#navigation li a:hover { background: #383; }

		#content-container
		{
			float: left;
			width: 900px;
			background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0;
		}

		#content
		{
			clear: left;
			float: left;
			width: 560px;
			padding: 20px 0;
			margin: 0 0 0 30px;
			display: inline;
		}

		#content h2 { margin: 0; }

		#aside
		{
			float: right;
			width: 240px;
			padding: 20px 0;
			margin: 0 20px 0 0;
			display: inline;
		}

		#aside h3 { margin: 0; }

		#footer
		{
			clear: both;
			background: #ccc;
			text-align: right;
			padding: 20px;
			height: 1%;
		}
	</style>
</head>
<body>
	<div id="container">
	<div id="header">
		<h1>
			<?php echo $nama_web;?>
		</h1>
	</div>
	<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
	</div>

NB. Data dari controller yang kita gunakan untuk sementara ini adalah ‘judul_web’ dan ‘nama_web’.

Silakan cek di Browser. Seharusnya tampil:
panada-simpleweb-5

10. Mengubah isi Link Navigasi Situs sesuai keinginan.

Perhatikan pada file header.php

<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
	</div>

Dengan sedikit logika tambahan dan pengaturan awal data link navigasi bisa kita set di Controller dan dijabarkan/dituliskan pada file view yang dimaksud.

Dalam controller tambahkan:

$data['navigasi']	= array('about', 'produk', 'kontak');

dan pada file view (header.php) ubah skrip sebelumnya menjadi:

<div id="navigation">
		<ul>
			<li><a href="<?php echo $this->location('Home');?>">Home</a></li>
			<?php
			foreach($navigasi as $nav)
			{
				echo '<li><a href="'.$this->location('home/'.$nav).'">'.$nav.'</a></li>';
			}
			?>
		</ul>
	</div>

Disini kita memanfaatkan Global Method Panada yaitu $this->location();. Dengan menuliskan $this->location(‘home/kontak’); maka URL yang digenerate adalah: http://localhost/websiteku/index.php/home/kontak.

Cek di browser, seharusnya akan tampil seperti berikut:
panada-simpleweb-6

11. Membuat halaman about

Untuk membuat halaman about, silakan buka controller Home dan tambahkan method/fungsi berikut:

public function about()
    {    
        $data['judul_web']	= 'Websiteku.com - About';
        $data['nama_web']	= 'Websiteku.com - Website berbasis Panada Framework';
        $data['navigasi']	= array('about', 'produk', 'kontak');
        
        $this->output('header', $data);
        $this->output('about', $data);
        $this->output('sidebar', $data);
        $this->output('footer', $data);
    }

perbedaan dari method/fungsi index() adalah dalam hal meload konten, dimana tidak meload file content.php tapi file about.php, karena file about.php akan kita jadikan file view untuk halaman about.

Buat file about.php di folder /websiteku/views/.

	<div id="content-container">
		<div id="content">
			<h2>
				About <?php echo $nama_web;?>
			</h2>
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
			</p>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
			</p>
		</div>

dalam source diatas, heading/judul halaman sudah kita Set sebagai About {nama_web}, dimana nama_web diambil dari data yang dilempar oleh Controller Home.

Coba buka link About dan seharusnya tampil:
panada-simpleweb-7

Ulangi hal yang sama untuk halaman produk dan halaman kontak. Anda tinggal tambahkan method/fungsi produk() dan kontak() dengan isi yang kurang lebih sama seperti source about() diatas, dengan perbedaan pada file view yang di load, misalnya menjadi $this->output(‘produk’,$data); atau $this->output(‘kontak’,$data);.

Download

Download source code tutorial ini: websiteku.zip

Tutorial PHP: Skrip Download Data & NISN Siswa Dapodik

Dalam tutorial kali ini kita akan mencoba mendapatkan data pokok dari seorang siswa yang telah memiliki NISN (Nomor Induk Siswa Nasional) yang dikelola oleh Dapondik, Kemendikbud. Tutorial ini akan bertumpu pada penggunaan library cURL dan manipulasi array-string sederhana.

Prinsip Kerja

Pada dasarnya, data pokok yang akan kita ambil berasal dari hasil pencarian pada situs Dapondik Kemendikbud (http://nisn.dapondik.org/). URL yang dituju adalah http://nisn.dapondik.org/siswa.php. Dengan library cURL, kita akan posting variabel $_GET berupa nisn dengan value nomor NISN seorang siswa. Hasil eksekusi cURL tersebut akan kita olah dengan teknik parsing dan replacing data.

Source Code

Berikut adalah source code dari fungsi untuk mengambil data pokok Siswa berdasarkan NISN dengan PHP: Continue reading Tutorial PHP: Skrip Download Data & NISN Siswa Dapodik

Tutorial WordPress: Menambahkan Tipe File Baru (Mimetypes) di Fitur Upload

Mime types yang didukung WordPress untuk sementara ini hanyalah tipe file gambar dan dokumen, untuk tipe-tipe lain fasilitas menambahkan tipe file baru pada saat mengupload file baru memang hanya tersedia saat WordPress disulap menjadi multiuser. Untuk itulah kita harus menambahkan sendiri tipe file tersebut, baik dengan plugin atau script langsung.

Untuk menambahkan dengan script berikut: Continue reading Tutorial WordPress: Menambahkan Tipe File Baru (Mimetypes) di Fitur Upload

Tutorial WordPress: Menambahkan Tombol Google +1

Untuk menambahkan link ataupun widget Google+ (+1) pada tiap post, silakan buka file functions.php pada themes kamu dan tulis:

add_filter('the_content', 'wpr_google_plusone');
function wpr_google_plusone($content) {
	$content = $content.'<div class="plusone"><g:plusone size="tall" href="'.get_permalink().'"></g:plusone></div>';
	return $content;
}
add_action ('wp_enqueue_scripts','wpr_google_plusone_script');
function wpr_google_plusone_script() {
	wp_enqueue_script('google-plusone', 'https://apis.google.com/js/plusone.js', array(), null);
}

Tutorial PHP: Skrip Anagram dan Kata Acak

Anagram sendiri seperti yang kita kenal adalah permainan mengacak kata-kata dalam suatu bahasa. Dengan PHP kita dapat membuat anagram dan kata-kata acak dengan bantuan sebuah Class, Word Solver karya om Arturs Sosins aka ar2rsawseen. Silakan unduh kode sumbernya disini.

Untuk menggunakannya, sesuai contoh berikut:
1. Buat interfacenya
lebih lanjut tentang Membuat Anagram dan Kata Acak dengan PHP…

Tutorial Java: Akses Database MongoDB dengan Java

Pendahuluan

Menyambung seri belajar MongoDB yang dulu dan melengkapi tutorial tentang JAVA dalam web ini. Kali ini kita akan belajar membuat program berbasis bahasa pemrograman JAVA dengan database MongoDB. Sebaiknya anda sudah membaca tutorial-tutorial sebelumnya tentang Apa itu MongoDB dan bagaimana Instalasinya (lihat pada Tulisan terkait dibawah post ini).

Yang perlu anda ingat dari MongoDB:

  • MongoDB secara otomatis akan membuatkan Database, Collection, Document, beserta field di dalamnya jika Anda belum pernah membuatnya. Dengan demikian Anda tidak perlu membuat batch SQL yang begitu panjang untuk persiapan membuat database.
  • Setiap document yang dibuat dalam MongoDB akan selalu memiliki index id yang unik. Hal ini secara global dapat mempercepat proses pencarian data.
  • MongoDB lebih mudah diimplementasikan dalam database berukuran besar yang terpisah dalam banyak server. Berbeda dengan RDBMS yang cukup sulit dalam melakukan konfigurasinya.
  • MongoDB tetap dapat membuat record yang berelasi terhadap record lainnya.

Instalasi MongoDB di Windows

  • Unduh file MongoDB dari http://www.mongodb.org/downloads/ pilih versi Windows,
  • Ekstrak file Zip tersebut pada direktori C:\ dan ubah namanyanya menjadi C:\mongodb
  • Buat direktori data untuk MongoDB di C:\data\db (harus seperti ini)
  • Jalankan daemon MongoDB mongod.exe yang berada di C:\mongodb\bin\

Pemrograman Aplikasi Continue reading Tutorial Java: Akses Database MongoDB dengan Java

Tutorial Visual Basic: Akses Database dBase/dBF dengan VB6

Pendahuluan

Pada tutorial kali ini, kita akan mencoba menampilkan data yang tersimpan dalam format basis data dBase (DBF) dengan aplikasi yang dibangun dengan Visual Basic 6 (VB6). Pada dasarnya, kita hanya akan menggunakan driver dBase bawaan dari Microsoft dalam VB6 yaitu Microsoft dBASE Driver.

Menampilkan data dBase/DBF dengan VB6

    • Silakan buat sebuah project baru pada VB6, tambahkan component: Microsoft Common Dialog 6.0 dan Microsoft Common Control 6.0.
    • Pada sebuah form, silakan tambahkan komponen 1 textbox dengan nama Descr, 1 ListView dengan nama ListView1, 1 button dengan nama BrowseButton dan 1 Common Dialog browser dengan nama CommonDialog

Continue reading Tutorial Visual Basic: Akses Database dBase/dBF dengan VB6

Tutorial JAVA: Skrip Olah Database SQLite dengan Java

Pendahuluan

SQLite adalah salah satu basis data mandiri yang tersedia lintas sistem operasi dan dipergunakan dibanyak arsitektur dan platform hardware, dari mulai handphone sampai Apple Macbook. Keuntungan signifikan dari penggunaan SQLite adalah kemampuan portabilitasnya yang sangat minim penyertaan library, cukup menyertakan API dari SQLite sendiri dan wrapper untuk masing-masing bahasa pemrograman.

Pada tutorial pemrograman Java kali ini, kita akan mencoba berlatih menggunakan Database SQLite dengan model koneksi JDBC dan Wrapper SQLite.

Pemrograman JAVA dan Basisdata SQLite

Pada tutorial kali ini saya menggunakan IDE Netbeans sebagai lingkungan kerja dan class SQLiteJDBC dari David Chrawshaw (www.zentus.com). Unduh file sqlitejdbc-vXX.jar dari http://www.zentus.com/sqlitejdbc/index.html, versi terbaru saat tulisan ini dipublish adalah versi 056 untuk SQLite versi 3.6.14.2. Continue reading Tutorial JAVA: Skrip Olah Database SQLite dengan Java

Tutorial MongoDB: Instalasi Database MongoDB

Pendahuluan

Tutorial singkat ini akan membahas instalasi database MongoDB untuk bahasa PHP pada berbagai sistem operasi, seperti *NIX, Windows, Linux dan lainnya. Untuk dapat mengikuti tutorial ini, selayaknya anda harus mengenal apa itu PHP dan apa itu MongoDB. Semua ekstension MongoDB untuk PHP dapat anda ikuti pengembangannya dan dapat anda unduh dari:

http://github.com/mongodb/

dan Continue reading Tutorial MongoDB: Instalasi Database MongoDB

Tutorial MongoDB: Sekilas Tentang MongoDB

MongoDB merupakan salah satu jenis database, lebih tepatnya masuk dalam kategori Document-oriented Database. MongoDB dikembangkan sejak Oktober 2007 oleh 10Gen, dirilis publik sejak Februari 2009 dan dilepas dengan lisensi GNU AGPL 3.0 dan Apache License untuk drivernya.

Logo MongoDB

MongoDB sendiri ditulis dengan bahasa C++ dan telah tersedia untuk berbagai jenis bahasa pemrograman. Fitur utama dari mongoDB antara lain: Continue reading Tutorial MongoDB: Sekilas Tentang MongoDB

Tutorial PHP: Deteksi Plagiarisme Konten / Paragraf

Pengantar

Plagiarisme (penjiplakan) adalah salah satu kejahatan, tidak saja secara moral dan etik bermasalah, namun secara hukum. Nah, bagaimana cara mengetahui sebuah karya tulis merupakan hasil jiplakan karya orang lain? tentunya kita harus melakukan deteksi dengan berbagai teknik dan algoritma tersendiri.

Dalam posting kali ini, saya akan mencoba mendemonstrasikan deteksi plagiarisme konten dengan teknik komparasi string dalam bahasa PHP. Algoritma ini (tampaknya) yang digunakan oleh Sistem Informasi Sertifikasi dosen Nasional yang mendeteksi apakah portofolio yang dikirim merupakan jiplakan dari orang lain.

Source Code

Kode sumber yang saya ulas disini adalah karya dari Rochak Chauhan dari DMWTechnologies. Berikut adalah class PHP-nya Continue reading Tutorial PHP: Deteksi Plagiarisme Konten / Paragraf

Tutorial PHP: Konversi Date Time MS-SQL ke MySQL

Bekerja lintas basis data memang menantang, setiap basis data mempunyai ciri kekhasan sendiri, walaupun sama-sama memakai bahasa SQL. Contohnya ketika bekerja lintas MS-SQL (Microsoft SQL) dengan MySQL. Ada beberapa hal yang harus disesuaikan untuk mendapatkan data yang sesuai dengan format-format masing-masing. Karena itulah, konversi mutlak diperlukan untuk beberapa kasus tertentu, contohnya date time MSSQL dan MySQL yang berbeda.

MySQL tidak mendukung penyimpanan date time sedetil MSSQL yang telah sampai pada level microsecond. Konversi diperlukan untuk hal ini. Dalam bahasa PHP mungkin kode berikut bisa anda gunakan: Continue reading Tutorial PHP: Konversi Date Time MS-SQL ke MySQL

Tutorial PHP: Enkripsi URL & Enkripsi Variable $_GET

Kita mengenal dua macam variable URL pada form processing dengan PHP, Post dan Get. Ciri khas variable GET adalah, tampaknya variable-variable tersebut pada aplikasi. Untuk itulah, beberapa aplikasi membuat skenario enkripsi pada variable-variable tersebut.

Untuk enkripsi yang dipakai pada praktik kali ini adalah enkripsi base64 dengan key, baik encode dan decode. Anda dapat membaca ulasannya disini: http://wp.me/pTjo8-eV

Berikut contoh aplikatifnya: Continue reading Tutorial PHP: Enkripsi URL & Enkripsi Variable $_GET

Tutorial WordPress: Switching Themes Otomatis untuk Browser Mobile

Menurut hasil analisis Google Analytics, situs kami setidaknya diakses paling banyak dengan 3 browser: Mozilla Firefox, Google Chrome dan Opera Mini/Mobile. Tentunya dengan analisis ini, bisa diperkirakan bahwa pembaca blog ini tersebar pada dua platform, Desktop dan Handset/Mobile.

Kebetulan sekali, themes yang dipakai oleh blog ini belum secara otomatis berubah dan sesuai dengan layar kecil perangkat Mobile. Inilah yang harus diantisipasi oleh pengelola situs, supaya pembaca nyaman membaca blog/situsnya berlama-lama. Pada situs berbasis WordPress, kita bisa memanfaatkan plugin-plugin untuk mengubah themes situs secara otomatis khusus perangkat mobile. Continue reading Tutorial WordPress: Switching Themes Otomatis untuk Browser Mobile

Tutorial PHP: Skrip Akses & Pengolahan Database MS-SQL

SQLExpress adalah salah satu edisi Microsoft SQL Server (MSSQL) yang didistribusikan secara gratis untuk para hobiest dan tujuan non komersial. Edisi terbaru dari SQLExpress adalah versi 2008, yang dipaketkan dengan Visual Studio 2010. Sejak PHP5 dirilis, dukungan komunitas untuk database MS-SQL tidak berkembang, hingga akhirnya Microsoft merilis sqlsrv untuk menggantikan ekstensi mssql yang sudah mandeg dikembangkan. Selain ekstensi mssql (dengan ntdwlib/DB_LIB) di Windows, akses PHP ke MS-SQL di Linux bisa dilakukan dengan FreeTDS dan Sybase.

Untuk pembahasan kali ini, kita akan belajar bagaimana mengakses database MS-SQL dengan PHP.

Instalasi SQLExpress

Untuk menginstall SQLExpress, anda butuh installernya yang dapat diunduh disini:

Install dengan klik ganda file tersebut, saat instalasi pastikan metode autentifikasi yang digunakan adalah campuran antara Windows Authentication dan SQL Server Authentication serta isi password dengan benar. Continue reading Tutorial PHP: Skrip Akses & Pengolahan Database MS-SQL

Tutorial CSS: Kompresi File CSS dengan Skrip PHP

Salah satu teknik untuk mempercepat loading halaman web adalah dengan memampatkan/mengkompresi CSS sehingga ukuran file CSS yang diload lebih kecil. Untuk mengkompres CSS setidaknya ada tiga metode: 1) metode Paul Stamatiou, 2) metode Perishable Press dan 3) metode Reinhold Weber.

Pada tulisan kali ini saya akan mengaplikasikan metode yang diperkenalkan oleh Reinhold Weber, karena mampu mengkombinasikan beberapa file CSS dalam satu output file CSS terkompresi dan tidak perlu mengganti ekstensi file css menjadi file PHP.

Berikut contoh script PHPnya: Continue reading Tutorial CSS: Kompresi File CSS dengan Skrip PHP

Tutorial Yii: Integrasi Yii Framework dengan WordPress

Yii yang tenar sebagai framework pengembangan aplikasi web dengan konsep MVC dan WordPress sebagai sebuah framework CMS/Blogging terpopuler ternyata bisa disatukan. Contoh kasus, misalnya WordPress digunakan sebagai frontpage sebuah Sistem Informasi, dan aplikasi berbasis Yii untuk menangani berbagai kebutuhan sistem informasi. Aplikasi Yii tersebut dikembangkan sebagai plugin WordPress, dan cukup menangani kebutuhan khusus saja, untuk urusan penerbitan konten, berita, user dan lain-lain serahkan saja pada core milik WordPress.

Setelah mencari dan memahami beberapa referensi yang saya dapat, berikut langkah untuk mengintegrasikan aplikasi Yii ke dalam WordPress sebagai sebuah plugin. Continue reading Tutorial Yii: Integrasi Yii Framework dengan WordPress

Tutorial Windows: Akses Partisi Ext4 dan Ext3 Linux

Bagi pengguna linux yang masih melakukan metode dual-boot Windows-Linux, tentunya metode sharing file antara linux-windows menjadi sangat berguna.

Bagi saya misalnya, partisi khusus data telah saya pisah dari partisi sistem baik untuk sistem windows dan sistem linux, sehingga keduanya bisa menggunakan data sumber yang sama. Berbagai distro modern dewasa ini sudah mendukung akses file FAT32 dan NTFS milik Windows, namun beda halnya bagi Windows, secara native akses ke file sistem milik Linux masih belum (tidak akan) didukung. Continue reading Tutorial Windows: Akses Partisi Ext4 dan Ext3 Linux