Simpeg H +1: Membuat Kerangka SIMPEGDA - Workshop Simpegda - Belajar PHP dan menjadi pengembang web

www.gecko.web.id
Resource Untuk Pengembang Web, PHP, CSS, MySQL, ajax.

Home · Workshop Simpegda · Simpeg H +1: Membuat Kerangka SIMPEGDA

25
May ’08
Simpeg H +1: Membuat Kerangka SIMPEGDATopik: workshop-simpegda | Tags: simpeg, sim, sistem informasi manajemen pegawai, dll

Mungkin tahapan awal inilah yang terberat. Menentukan kerangka/ membuat sketsa rancangan awal simpeg. OK, nantinya simpegda akan gw buat begini:

pakai SEF url; biar keren. wkk
template pakai 2 kolom dengan menu di bagian kanan. Menu fixed, isi fluid.
menu atas untuk bermacam-macam menu, sedang menu kanan diisi SKPD/ instansi dan pada modul tertentu beralih fungsi untuk menampilkan foto
menentukan nama. Apa ya bagusnya??? simpol:simpeg online?? simpego:simpeg online atau simpegnya gecko. Ah... buang waktu. namanya simpegda ja deh.. atau kalo ada saran bagus dari temen-temen ntar gw pake deh..
oh iya SEF urlnya pake bantuan mod rewrite

Terus testing server yang gecko pakai:
appserv 2.5.7 yang isinya

Apache Web Server Version 2.2.3,
PHP Script Language Version 5.1.6,
MySQL Database Version 5.0.24a,
phpMyAdmin Database Manager Version 2.9.0.2

Atau mungkin kalau mungkin dirasa perlu gw akan upload di server ini progresnya / live demonya.

Tool yang gw pake:

macromedia dreamweaver buat edit tabel dan mempermudah editing
text editor pakek Scite version 1.57 dari www.scintila.org

Resource:

Sementara mengambil css layout dari dynamicdrive.com
dan mengambil fungsi cleanxss dan clean query dari snewscms

SIMPEGDA hari pertama sebagai berikut:
terdiri dari 4 buah file yaitu:

index.php >> file untuk layout secara keseluruhan
gecko.php >> otak dari simpegda, menangani database & juga menangani SEF url
.htaccess >> yang menangani SEF url
nominatif.php >> contoh tabel untuk menampilkan nominatif

berikut kodenya:

1.index.php

<?php
include("gecko.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simpegda </title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-right: 200px; /*Set right margin to RightColumnWidth*/
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column in pixels*/
margin-left: -200px; /*Set left margin to -(RightColumnWidth) */
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube">
  <h1>Simpegda</h1><br  />

<a href="<?=$website?>home" >Home</a> |
<a href="<?=$website?><?=$a_url?>/nominatif" >Nominatif</a> | 
<a href="<?=$website?><?=$a_url?>/rekapitulasi" >Rekapitulasi</a> |

<?php  
echo 'menua menub menuc menud menue menuf'; ?>
</div></div>

<?php isi(); ?>

<br /><hr />			
<?php
echo '<b>website : </b> '.$website.'<br>';
echo '<b>$a_url : </b> '.$a_url.'<br>';
echo '<b>$b_url : </b> '.$b_url.'<br>';
echo '<b>$c_url : </b> '.$c_url.'<br>';
?>

</div>
</div>
</div>

</div>

</div>
</body>
</html>

2. gecko.php

//   DATABASE
//==============//

$db_host = "localhost";
$db_user = "root";
$db_pass = "sipit";
$db_name = "simpegda";

//   KONEKSI KE DATABASE
//=========================//
$link = mysql_pconnect ($db_host, $db_user, $db_pass) or die ("Ga bisa connect");
mysql_select_db ($db_name) or die ("Ga bisa select database");

$host = 'http://'.$_SERVER['HTTP_HOST'];
$directory = dirname($_SERVER["SCRIPT_NAME"]);
$website = $directory == '/' ? $host.'/' : $host.$directory.'/';

/********************************************
//================================//
//   MENDAPATKAN SEO URL
//================================//

==>> konsep directory :: 
   simpol/dinas/aksinya/detailnya.htm 
      + all/biodata/510142744.htm
      + bkd/nominatif
      + all/cari/eko.htm

-a-  /  -b-  /  -c-  .htm
*********************************************/

$url = explode('/',clean(cleanXSS($_SERVER['REQUEST_URI'])));

$a_url = $url[2];
  $a_url = explode('.',$a_url);
  $a_url = $a_url[0]; 
$b_url = $url[3];
  $b_url = explode('.',$b_url);
  $b_url = $b_url[0]; 
$c_url = $url[4];
  $c_url = explode('.',$c_url);
  $c_url = $c_url[0];

if (!$a_url) { $a_url = 'home'; }

//==================================//
//  MODULs
//==================================//

// Isi
function isi() {
        global $a_url, $b_url, $c_url;
	switch(true) {
            case ($a_url == home) :  
                  echo 'Anda berada di halaman depan (home) dan disini akan diisi statistik pegawai secara umum. $a_url diset semua pegawai'; 
                  break;
            case ($b_url == nominatif):  
                  echo 'Nominatif '.$a_url; 
                  include("modul/nominatif.php");
                  break;
            case ($b_url == rekapitulasi):  
                  echo 'Rekapitulasi '.$a_url; 
                  break;      
            case isset($c_url):  break;
	}
}

// menu DKPD
function menu_skpd() {
        global $link, $website, $a_url, $b_url, $c_url ;
        $sql = mysql_query("SELECT tampil,skpd_singkat,skpd_sef FROM skpd where skpd.tampil = 1 order by skpd.skpd_singkat ASC") or die(mysql_error());
	while ($res=mysql_fetch_array($sql)) {
        echo '<a href="'.$website.$res['skpd_sef'].'/'.$b_url.'/'.$c_url.'">'.$res['skpd_singkat'].'</a><br>';
        } 
        mysql_free_result($sql);
}

//==================================//
//  FUNCTIONs 
//==================================//

// XSS CLEAN
function cleanXSS($val) {
	# source from http://quickwired.com/kallahar/smallprojects/php_xss_filter_function.php
	$val = preg_replace('/([x00-x08][x0b-x0c][x0e-x20])/', '', $val);
	$search = 'abcdefghijklmnopqrstuvwxyz';
	$search .= 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
	$search .= '1234567890!@#$%^&*()';
	$search .= '~`";:?+/={}[]-_|'\';
	for ($i = 0; $i < strlen($search); $i++) {
		$val = preg_replace('/(&#[x|X]0{0,8}'.dechex(ord($search[$i])).';?)/i', $search[$i], $val);
		$val = preg_replace('/(�{0,8}'.ord($search[$i]).';?)/', $search[$i], $val);
	}
	$ra1 = Array('javascript', 'vbscript', 'expression', 'applet', 'meta', 'xml', 'blink', 'link', 'style', 'script', 'embed', 'object', 'iframe', 'frame', 'frameset', 'ilayer', 'layer', 'bgsound', 'title', 'base');
	$ra2 = Array('onabort', 'onactivate', 'onafterprint', 'onafterupdate', 'onbeforeactivate', 'onbeforecopy', 'onbeforecut', 'onbeforedeactivate', 'onbeforeeditfocus', 'onbeforepaste', 'onbeforeprint', 'onbeforeunload', 'onbeforeupdate', 'onblur', 'onbounce', 'oncellchange', 'onchange', 'onclick', 'oncontextmenu', 'oncontrolselect', 'oncopy', 'oncut', 'ondataavailable', 'ondatasetchanged', 'ondatasetcomplete', 'ondblclick', 'ondeactivate', 'ondrag', 'ondragend', 'ondragenter', 'ondragleave', 'ondragover', 'ondragstart', 'ondrop', 'onerror', 'onerrorupdate', 'onfilterchange', 'onfinish', 'onfocus', 'onfocusin', 'onfocusout', 'onhelp', 'onkeydown', 'onkeypress', 'onkeyup', 'onlayoutcomplete', 'onload', 'onlosecapture', 'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel', 'onmove', 'onmoveend', 'onmovestart', 'onpaste', 'onpropertychange', 'onreadystatechange', 'onreset', 'onresize', 'onresizeend', 'onresizestart', 'onrowenter', 'onrowexit', 'onrowsdelete', 'onrowsinserted', 'onscroll', 'onselect', 'onselectionchange', 'onselectstart', 'onstart', 'onstop', 'onsubmit', 'onunload');
	$ra = array_merge($ra1, $ra2);
	$found = true;
	while ($found == true) {
		$val_before = $val;
		for ($i = 0; $i < sizeof($ra); $i++) {
			$pattern = '/';
			for ($j = 0; $j < strlen($ra[$i]); $j++) {
				if ($j > 0) {
					$pattern .= '(';
					$pattern .= '(&#[x|X]0{0,8}([9][a][b]);?)?';
					$pattern .= '|(�{0,8}([9][10][13]);?)?';
					$pattern .= ')?';
				}
				$pattern .= $ra[$i][$j];
			}
			$pattern .= '/i';
			$replacement = substr($ra[$i], 0, 2).'<x>'.substr($ra[$i], 2);
			$val = preg_replace($pattern, $replacement, $val);
			if ($val_before == $val) {$found = false;}
		}
	}
	$allowedtags = "<strong><em><ul><li><pre><hr><blockquote><span>";
	$cstring = strip_tags($val, $allowedtags);
	$cstring = nl2br($cstring);
	return $cstring;
}

// CLEAN - cleaning query
function clean($query) {
	if (get_magic_quotes_gpc()) {$query = stripslashes($query);}
	$query = mysql_real_escape_string($query);
	return $query;
}

3. .htaccess

4. nominatif.php

<table width="100%" border="1">
  <tr>
    <td align="center" valign="middle">No.</td>
    <td align="center" valign="middle">Nama /<br />
    NIP</td>
    <td align="center" valign="middle">Tempat /<br />
    Tanggal Lahir </td>
    <td align="center" valign="middle">GR / TMT </td>
    <td align="center" valign="middle">Pendidikan</td>
    <td align="center" valign="middle">Jabatan</td>
    <td align="center" valign="middle">Alamat</td>
  </tr>
  <tr>
    <td align="center" valign="top">1</td>
    <td align="center" valign="top">2</td>
    <td align="center" valign="top">3</td>
    <td align="center" valign="top">4</td>
    <td align="center" valign="top">5</td>
    <td align="center" valign="top">6</td>
    <td align="center" valign="top">7</td>
  </tr>
  <tr>
    <td align="left" valign="top"> </td>
    <td align="left" valign="top"> </td>
    <td align="left" valign="top"> </td>
    <td align="left" valign="top"> </td>
    <td align="left" valign="top"> </td>
    <td align="left" valign="top"> </td>
    <td align="left" valign="top"> </td>
  </tr>
</table>

Memang belum berwujud sebuah simpeg. Karena memang masih dihari pertama. Di hari berikutnya kita lanjutkan lagi.. kalo ada script yang salah, kurang bagus mohon dikomentari. TNX

Download simpegda hari satu

Maaf banget pengembangan simpegda macet... gara2 si komo lewat. Mmm untuk gambaran ini aja simpegda pemkab trenggalek yang maren gw bikin...

www.gecko.web.id/img/contoh-output-simpeg-kab-trenggalek.pdf

Artikel yang sesuai:

Diskusikan Artikel Ini

* = required field

« Previous Post Next Post »

HTML dan CSS (1)
Workshop Belajar PHP (2)
Belajar PHP (8)

resep PHP (10)
Resep CSS (1)
Database (1)

Web Performance (2)
SEO (1)

Resource Yang Berguna (15)
Inspirasi (1)

Implementasi TI (7)
Seputar Web (5)
Workshop Simpegda (2)

It's My Life (13)

Untuk mengetahui update blog ini, ada baiknya Anda
me-LIKE facebook page ini.

Fery Ardiant pada January 11, 2012 (2:26PM)

sampe sekarang, lum ada klanjutan nya ya kk....

berarti inyong tlat dong...??? :'(

boypeace pada November 22, 2011 (8:24AM)

tolong bro... kalo yang punya source yang lebih komplit dishare ya..
pengen buat tapi gak punya contoh sourcenya..
misal gini brooo...

Identitas Pegawai :
NIP
Nama
Agama
Pangkat
Id_Riwayat
Id_pendidikan

Riwayat :
Id_riwayat
Unit_Kerja
NIP

Pendidikan :
Id_pendidikan
nama_sekolah
jurusan
NIP

cara penerapannya di form gimana yach..???
masing-masing dibuatkan form tersendiri

deden pada June 17, 2011 (10:20AM)

wah ini ne yang xaya cari2,, saLam kenal ga,..
bisa minta toLong share Langkah2x gan , ,???
please reply via dedenmboz@gmail.com

boypeace pada August 6, 2010 (6:13PM)

kelanjutannya mana...???
di tunggu
thanks

Gajah

Giliran Admin ngomong.. :D

gecko pada November 3, 2008 (10:28AM)

www.gecko.web.id/img/contoh-output-simpeg-kab-trenggalek.pdf

ini contoh laporan/ output simpegda kabupaten Trenggalek. Gw ga pelit khan?????

hky pada October 30, 2008 (1:06PM)

wahh mirip mas dengan case dikantor saya, jadi penasaran, template simple bagus.. simpeg termasuk aplikasi sederhana dan langka, coba deh mas jangan pelit pelit kasih info detilnya...
thanks atas respon

Gajah

Giliran Admin ngomong.. :D

gecko pada October 20, 2008 (11:59AM)

screenshot simpegda Kab Trenggalek bisa dilihat di sini: http://www.gecko.web.id/img/screenshot_simpeg.jpg

Maaf yang simpeg ini masih belum sempet gw lanjutin

Mungkin pengembangan simpeg ini akan gw lanjut ke arah SIM kesehatan.

hky pada October 18, 2008 (8:54PM)

wahhh bagus neh artikelnya mas, lagi belajar dapet tugas kantor buat SSDM / Simpeg dari kantor, kalo bisa liat skrinsutnya... mungkin ngga beda jauh dari kebutuhan kantor saya, teknik2nya, template dst kayaknya saya masih blank, dibuat gimana, kalo flowchart, database udah mateng tinggal PHP ne...

nuwun

princefafa pada September 22, 2008 (11:48AM)

Mas klo boleh simpeg nya di share dunk, hehehehehe

T-Reeve pada September 20, 2008 (7:27AM)

iya, hari keduanya mana mas...

Rahman J pada May 28, 2008 (10:03AM)

Hari keduanya mana Mas? :-)
Salam kenal . . .

Ikutan komentar...

25May ’08Simpeg H +1: Membuat Kerangka SIMPEGDATopik: workshop-simpegda | Tags: simpeg, sim, sistem informasi manajemen pegawai, dll

Artikel yang sesuai:

Diskusikan Artikel Ini

25
May ’08
Simpeg H +1: Membuat Kerangka SIMPEGDATopik: workshop-simpegda | Tags: simpeg, sim, sistem informasi manajemen pegawai, dll