Jika anda mendapati service MySQL ini belum jalan, maka anda dapat mengetikkan:

Teks penuh

(1)

4. IMPLEMENTASI SISTEM

Dari sistem yang telah dirancangkan dari bab sebelumnya, ada beberapa fungsi yang dibuat untuk mempermudah pengkodean dalam program E-Office ini. Adapula beberapa object yang telah penulis buat sendiri untuk melakukan abstraksi penggunaan fungsi-fungsi PHP-MySQL. Dari sekian fungsi yang telah dibuat, kita akan bahas implementasi dan penjabaran website E-Office ini sepenuhnya pada bagian implementasi website.

4.1. Database

Database dalam Linux, terutama distro-distro besar seperti RedHat, Mandrake, dan Suse telah menyertakan program Apache, MySQL dan PHP di dalamnya, sehingga pengguna Linux tidak perlu repot menginstall lagi. Bahkan konfigurasi standard yang telah disediakan telah dapat digunakan.

Pada kasus ini, penulis menggunakan Fedora 2 sebagai distro Linux yang digunakan, di mana di dalamnya telah terdapat Apache, MySQL dan PHP yang telah siap dipakai. Namun sebelumnya pastikan bahwa service MySQL telah berjalan. Untuk mengetahuinya, kita bisa menggunakan perintah:

service mysqld status

Jika anda mendapati service MySQL ini belum jalan, maka anda dapat mengetikkan:

service mysqld start

Jika service MySQL telah berjalan, maka database dapat telah dapat digunakan.

Untuk mempermudah instalasi awal, penulis membuat sebuah query yang berfungsi membuat database serta user MySQL yang akan digunakan oleh website E-Office ini. File create.sql yang terdapat dalam directory E-Office/query berisikan pembuatan database E-Office dan membuat user E-Office pada

(2)

database MySQL. Untuk menjalankan query ini kita dapat menggunakan perintah:

mysql < create.sql

Adapun isi dari file create.sql ini ialah: CREATE DATABASE E-Office;

GRANT all privileges on E-Office.* to E-Office@localhost identified by "E-Office" with grant option;

Perintah ini diketikkan dalam console Linux dan dalam directory query yang telah disebutkan di atas. Begitu perintah ini dijalankan, maka database E-Office siap digunakan namun masih belum ada tabel apapun sama sekali.

Selanjutnya yang perlu dieksekusi ialah query pada file default.sql yang berisikan tabel-tabel beserta data inisial E-Office. Untuk menjalankan query ini, kita gunakan perintah:

Mysql E-Office < default.sql

Saat perintah ini dijalankan, semua tabel dan data awal E-Office dimasukkan dan database siap dipakai pun beserta website E-Office-nya.

4.2. Object Date

4.2.1. Definisi Object Date

Keterbatasan fungsi yang berhubungan dengan tanggal menyebabkan penulis membuat object ini untuk mempermudah kalkulasi dan pemakaian tanggal di PHP. Adapun fungsi yang disedikan oleh PHP yang berhubungan dengan tanggal hanyalah fungsi untuk membuat tanggal seperti date, mktime, time, dan microtime. Fungsi lainnya untuk menguji tanggal, seperti checkdate, dan mengambil tanggal dalam berbagai format, seperti getdate, gettimeofday, gmdate, gmmktime, dan lainnya. Untuk itu penulis melakukan kombinasi berbagai fungsi tanggal pada PHP ini untuk mempermudah pemrograman penanggalan, terutama untuk menghitung penggambaran timeline.

(3)

Berikut ialah daftar fungsi dari object date: <?PHP define( 'D_SUNDAY', 0 ); define( 'D_MONDAY', 1 ); define( 'D_TUESDAY', 2 ); define( 'D_WENESDAY', 3 ); define( 'D_THURSDAY', 4 ); define( 'D_FRIDAY', 5 ); define( 'D_SATURDAY', 6 ); define( 'M_JANUARY', 1 ); define( 'M_FEBRUARY', 2 ); define( 'M_MARCH', 3 ); define( 'M_APRIL', 4 ); define( 'M_MAY', 5 ); define( 'M_JUNE', 6 ); define( 'M_JULY', 7 ); define( 'M_AUGUST', 8 ); define( 'M_SEPTEMBER', 9 ); define( 'M_OCTOBER', 10); define( 'M_NOVEMBER', 11); define( 'M_DECEMBER', 12); define( 'SEC_MINUTE', 60 ); define( 'SEC_HOUR', 3600 ); define( 'SEC_DAY', 86400 ); class eo_date {

Ini merupakan daftar variabel yang digunakan dalam object date. // VARIABEL YANG DIGUNAKAN DI CLASS DATE

var $current_date = null; var $current_day = null; var $current_day_on_week = null; var $current_month = null; var $current_year = null; var $current_day_string = null; var $current_day_short_string = null; var $current_month_string = null; var $current_month_short_string = null; var $current_week_on_month = null; var $current_day_on_year = null; var $current_week_on_year = null;

var $date_flag = null;

Di bawah ini merupakan daftar fungsi object date yang berhubungan dengan inisialisasi dan pengecekkan tanggal.

function eo_date($d=null, $m=null, $y=null); function init();

function apply_from_date(); function apply_current(); function check_date();

(4)

function if_false_then_reset_date();

Sedang di bawah ini ialah kumpulan fungsi yang berhubungan dengan memasukkan tanggal.

function set_now($timestamp=null); function set_day($d);

function set_month($m); function set_year($y);

function set_date($d, $m, $y); function set_mysql_date($mysd);

Di bawah ini ialah fungsi-fungsi untuk mengambil tanggal dalam berbagai format dan berbagai keperluan.

function get_date_complete(); function get_day_string(); function get_timestamp(); function get_mysql_date(); function get_day_number_week(); function get_day_number(); function get_day_on_year_number(); function get_days_in_month(); function get_date_number(); function get_month(); function get_month_string(); function get_year(); function get_week_on_month(); function get_days_before_new_year(); function get_days_before_new_month();

Berikut ini merupakan fungsi yang digunakan untuk melakukan perubahan tanggal. function next_year($inc=null); function next_beginning_year($inc=null); function previous_year($inc=null); function next_month($inc=null); function next_beginning_month($inc=null); function previous_month($inc=null); function next_week($inc=null); function previous_week($inc=null); function next_day($inc=null); function previous_day($inc=null);

Di bawah ini adalah kumpulan fungsi untuk mencetak tanggal dalam berbagai bentuk mulai dari yang singkat hingga yang lengkap.

function write_vars(); function write_date($code); function write_date_short(); function write_date_complete();

(5)

function write_date_numbers();

Dan terakhir di bagian ini merupakan fungsi-fungsi untuk melakukan berbagai konversi pada tanggal.

function timestamp_to_string($time); function num_to_days($num); function num_to_month($num); function num_to_short_days($num); function num_to_bit_days($num); function num_to_short_month($num)

Di luar object date di atas, adapula fungsi-fungsi yang menggunakan object tersebut terutama jika ada suatu proses yang melibatkan dua buah tanggal. Untuk itu penulis pun membuat fungsi-fungsi pelengkap sebagai berikut:

function cal_days_of_year($y);

function cal_count_to_days($d, $m, $y=null); function cal_count_to_months($m=null, $y=null);

function cal_count_2_days($d2, $m2=null, $y2=null, $d1=null, $m1=null, $y1=null);

function cal_count_2_days_date($date_1, $date_2);

function cal_count_2_weeks($d2, $m2, $y2, $d1=null, $m1=null, $y1=null);

function cal_count_2_months($d2, $m2, $y2, $d1=null, $m1=null, $y1=null);

function cal_count_years($d2, $m2, $y2, $d1=null, $m1=null, $y1=null);

function printfloat($float, $dec);

function cal_days_to_date_complete($days, $m = null) function copy_date($source, $dest)

function is_bigger($date_1, $date_2); function is_same($date_1, $date_2);

function next_beginning_year_until($start, $end); function list_days_year($start, $end);

function next_beginning_month_until($start, $end); function list_days_month($start, $end)

?>

4.2.2. Implementasi Object Date

Untuk menggunakannya, object date yang bernama class_date.php ini harus disertakan pada awal program, dengan menggunakan perintah include(). Contoh:

(6)

Barulah kita dapat membuat instance dari object date ini, dan menyimpannya dalam sebuah variabel. Untuk membuat instance ini dapat dilakukan sebagai berikut:

$sekarang = new eo_date(); //untuk memasukkan tanggal sekarang

$natal = new eo_date( 25, 12, 2004 ); //untuk memasukkan tanggal natal

Setelah membuat instance dalam variabel seperti di atas, maka kita dapat menggunakan berbagai fungsi date yang tertera di daftar fungsi. Untuk listing kode dari object date ini bisa dilihat pada lampiran source code.

4.3. Object Timeline

4.3.1. Definisi Object Timeline

Timeline merupakan object yang dibuat untuk melakukan penggambaran Gantt Chart sederhana, sehingga penggunaannya dalam listing program menjadi lebih mudah. Object Timeline ini memanfaatkan table yang berisi kolom yang banyak untuk menggambarkan tanggal dan menggunakan baris untuk menunjukkan kegiatan yang berlangsung. Untuk itu penulis membuat object untuk menyederhakan fungsi ini menjadi dua object yang berkaitan yaitu object eo_single_timeline dan eo_timeline. Adapun eo_single_timeline digunakan untuk menggambar Gantt Chart dalam satu baris kegiatan saja. Sedang eo_timeline merupakan kumpulan dari banyak eo_single_timeline yang dirangkai menjadi satu, beserta navigatornya.

(7)

Gambar 4.1. Struktur Object Timeline

Berikut ini merupakan daftar fungsi dari object eo_single_timeline: class eo_single_timeline {

var $header = null; var $start_date = null; var $end_date = null;

var $start_line_date = null; var $end_line_date = null; var $link = null;

var $depend = array(null); var $color = null;

var $report = null; var $current_id = null; var $current_type = null; var $global_result;

var $range = null; var $projectid = NULL; var $moduleid = NULL;

function eo_single_timeline($id, $type, $header, $date, $rg);

function set_data($id, $type); function set_range($rg);

function set_date_mysql($start, $end); function set_ids( $project, $module);

function draw_row();

Untuk inisialisasi object ini dapat dilakukan dengan memanggil constructor object eo_single_timeline serta memasukkan parameter yang dibutuhkan yaitu $id, yang merupakan id dari project, module atau task, tergantung dari type yang ditentukan pada parameter $type, $header untuk

Project Module Task

User Tasks

Single Timeline Process

QUERY View Date Range Query Date Range Calculating Date DRAW Timeline Object DRAW MULTIPLE

(8)

menuliskan nama project, module atau task, $date untuk memasukkan tanggal awal, dan terakhir $rg untuk jangkauan kerja dalam satuan hari. Setelah instance dibuat, maka object dapat digunakan, dan digambar dengan menggunakan fungsi draw_rowi.

Namun fungsi ini hanya dapat digambar jika dipanggil oleh fungsi eo_timeline yang menggunakan object eo_single_timeline di atas. Adapun daftar fungsi dari object eo_timeline ini ialah sebagai berikut:

class eo_timeline {

var $start_date = null; var $end_date = null; var $temp = null; var $day_range = null; var $month_range = null; var $main_link = null;

var $time_rows = array(null); var $global_type = null; var $global_id = null; var $user_id = null; var $view = null;

var $view_total = null; var $range = null;

Ini adalah fungsi-fungsi yang berhubungan dengan inisialisasi dan submit data.

function eo_timeline($type, $user=null); function set_view($tview, $total);

function process_submit(); function init();

function get_header_url();

function set_date($d1, $m1, $y1, $d2, $m2, $y2); function fit_to_week();

function set_date_range ($d=null, $m=null); function set_view($tview, $total);

Sedang bagian di bawah ini merupakan fungsi-fungsi yang berhubungan dengan pengambilan data dari database dan penggambaran Gantt Chart.

function exec_query(); function draw_top_table(); function draw_bottom_table(); function draw_navigator(); function draw();

(9)

function draw_date_input(); 4.3.2. Implementasi Object Timeline

Penggunaan dua buah object ini hanya menggunakan object eo_timeline saja, yang kemudian secara otomatis eo_timeline ini akan memanggil eo_single_timeline di dalamnya. Intinya sebuah Gantt Chart sederhana dapat dibuat oleh object eo_timeline ini dengan menggunakan beberapa fungsi sederhana, mulai dari pembuatan instance, memasukkan tanggal dan memanggil fungsi penggambaran, yang dapat dicontohkan sebagai berikut:

Include(“./function/class_timeline.php”); $gantt = new eo_timline(2);

$gantt->draw();

Contoh di atas merupakan pembuatan Gantt Chart terhadap module proyek, dan secara otomatis timeline akan mengambil data dari database dan menggambarkan Gantt Chart sederhananya.

Gambar 4.2. Tampilan Timeline terhadap module

Object Timeline ini terbagi atas 4 penggambaran yang terdiri atas penggambaran Project, Module, Task dan User Task yang mana di dalamnya terdapat perbedaan kecil yang yaitu penggambaran Milestone, query dan link untuk header. Namun perbedaan ini sama sekali tidak menimbulkan perbedaan.

Sedang source code lengkap dari object Timeline ini dapat dilihat pada lampiran.

(10)

4.4. Implementasi website

Sesuai dengan rancangan desain dan konsep E-Office yang dijabarkan pada bab sebelumnya, maka website ini di awali dengan login user terlebih dahulu.

Gambar 4.3. Tampilan login

Di sini autentikasi user di cek melalui database, dan setelah berhasil diterima, maka user dapat mengakses E-Office dan menyimpan user ID nya dalam session pada PHP. Dan proses login awal dapat dilihat di bawah ini:

if ($_POST["login"]){ session_start(); $statuspass = -1; session_register("ses_id","ses_fullname","ses_username", "ses_password"); list ($_SESSION["ses_fullname"], $_SESSION["ses_id"], $statuspass) = login($_POST["username"],$_POST["password"]); if ($statuspass == 0){ $_SESSION["ses_username"] = $_POST["username"]; $_SESSION["ses_password"] = $_POST["password"]; $query = "SELECT user_id FROM users WHERE user_username = \"".$_POST["username"]."\""; $result = mysql_query($query) or header("Location:index.php?errorcode=1"); $row = mysql_fetch_array($result) or header("Location:index.php?errorcode=2"); header("Location:index.php"); } elseif ($statuspass == 1){ $_SESSION["ses_username"] = $_POST["username"];

(11)

$_SESSION["ses_password"] = $_POST["password"]; $user_id = $_SESSION["ses_id"];

$query = "UPDATE users SET user_active = user_active + 1, user_last_login = now() WHERE user_id = \"".$user_id."\"";

$result = mysql_query($query) or

header("Location:index.php?errorcode=1"); header("Location:main.php");

} }

Di atas terdapat function login yang berfungsi untuk melakukan pengecekan apakah username dan passwordnya telah sesuai. Dan fungsi login di atas, kita bisa lihat berikut ini.

function login($username,$password){

$query = "SELECT user_id,user_first_name,user_last_name FROM

users WHERE user_username=\"".$username."\" and user_password=\"".$password."\"";

$result = mysql_query($query);

$row = mysql_fetch_array($result); if ($result = mysql_query($query)){

if (mysql_num_rows($result) > 0){ $query = "UPDATE users SET user_last_login=now() WHERE user_username=\"".$username."\""; $result = mysql_query($query); $id = $row["user_id"]; $name = $row["user_last_name"].', '.$row["user_first_name"];

$query = "SELECT user_password FROM users WHERE user_username=\"".$username."\""; $result = mysql_query($query); $pass = mysql_fetch_array($result); if ($pass["user_password"] == "") return array($name,$id,0); else return array($name,$id,1); } else { return array('',2); } } return array('',3); }

Saat username dan password tidak sesuai, maka user tidak dapat masuk ke halaman utama, yaitu main.php.

Setelah berhasil melakukan proses login, user akan dihadapkan dengan user area dengan halaman Announcement yang berisi berita-berita terbaru. Inilah menu

(12)

pertama yang dihadirkan di website E-Office, yang untuk selanjutnya akan kita bahas lebih detil.

4.4.1. main.php

Ini adalah file utama yang akan memanggil file .php lainnya dengan menggunakan perintah include. Adapun listing program dari main.php ini sebagai berikut: <?PHP ob_start(); include ("./functions/config_inc.php"); include ("./functions/main_function.php"); include ("./includes/class_date.php"); include ("./includes/class_timeline.php"); $temp = security_check(); if (!isset($_GET["action"])) { $_GET["action"] = 1; } if ($_POST["logout"]) { $user_id = $_SESSION['ses_id'];

$query = "UPDATE users SET user_active = user_active - 1 WHERE user_id = '$user_id'";

$result = mysql_query($query); if (session_destroy()) { header("Location: index.php"); } } ?> <HTML> <HEAD>

<TITLE> E-Office </TITLE>

<LINK href="./css/basics.css" rel="stylesheet" type="text/css"> <script language="JavaScript" src="javascript.js"></script> </HEAD>

<BODY bgcolor="EEEEEE">

<TABLE cellpadding="5" cellspacing="0" width="100%" class="table_1">

<TR valign="middle">

<TD align="left" width="30%" bgcolor="FFFFFF"> <!-- <IMG src="./images/logo.gif"> -->

<?PHP

echo "<A class=\"default_font\"> Welcome <B>".$_SESSION["ses_fullname"]."</B></A>"; ?>

</TD>

<TD valign="bottom" align="right" width="70%" bgcolor="FFFFFF">

<FORM name="main" method="post" action="main.php">

<?PHP

echo "<FONT class=\"default_font_gray\"> <B>".date(":: D, d M Y")." &nbsp; &nbsp; &nbsp;</B></FONT>";

?>

<INPUT name="logout" class="default_font" type="submit" id="logout" value="LogOut">

(13)

</FORM></TD> </TR>

<TR valign="middle">

<TD height="20" bgcolor="#999999" align="left" class="header_2" nowrap>

<?PHP

switch ($_GET["action"]) {

case 1 : { echo "Announcement"; break;

}

case 2 : { echo "My Desk"; break; } case 3 : { echo "Human Resource

Management"; break; }

case 4 : { echo "Projects"; break; } case 5 : { echo "Calendar"; break; } case 6 : { echo "Documents"; break; }

case 7 : { echo "Communication"; break; }

case 8 : { echo "This Company"; break;

} }

?> </TD>

<TD height="20" bgcolor="#999999" align="right" class="default_font_white">

<A href="main.php?action=1"

class="default_font_white_bold"> Announcement </A> | <A href="main.php?action=2"

class="default_font_white_bold"> My Desk </A> | <A href="main.php?action=3"

class="default_font_white_bold"> HRD </A> | <A href="main.php?action=4"

class="default_font_white_bold"> Projects </A> | <A href="main.php?action=8"

class="default_font_white_bold"> About Company </A>

</TD></TR> </TABLE>

<?PHP

switch ($_GET["action"]) {

case 1 : { include("./modules/news/news.php"); break; } case 2 : { include("./modules/my_desk/my_desk.php"); break; }

case 3 : { include("./modules/hrd/hrd.php"); break; } case 4 : {

include("./modules/projects/projects.php");break;} case 8 : { include("./modules/about_company/

about_company.php"); break; } } ?> </BODY> </HTML> <?PHP ob_end_flush(); ?>

(14)

Di sini kita dapat lihat bahwa dalam setiap link, halaman ini akan memanggil file .php yang bersesuaian dengan link tersebut, dan meletakkannya di dalam halaman main.php ini. Pada bagian tengah program terdapat listing untuk menampilkan menu yang tampak pada tampilan paling atas, yaitu menu Announcement, My Desk, HRD, Projects, dan About Company. Begitu pula dengan file .php yang dipanggil pun ada yang memanggil file lain yang lebih di bawahnya, dengan metode yang sama dengan main.php.

4.4.2. Announcement

Di halaman ini user akan dihadapkan pada berita-berita kiriman administrator atau setingkat itu diurutkan dari yang paling baru. Jadi untuk user biasa, di luar administrator dan sejenisnya, tidak dapat melakukan penambahan announcement apalagi menghapusnya. Dan untuk administrator, ada menu tambahan yaitu Add dan Manage, seperti yang ditampilkan di bawah ini.

Gambar 4.4. Halaman Announcement

Dalam menu announcement ini ada dua sub menu yang berisi Add dan Manage, yang hanya dapat dipilih oleh administrator saja.

(15)

Gambar 4.5. Add Announcement

Dan setelah admin memasukkan judul dan isi dari announcement, maka halaman website akan dikembalikan ke View. Dan sub-menu yang terakhir dari announcement ini ialah Manage, yang isinya ialah list dari announcement yang terdapat pilihan delete dan edit.

(16)

Gambar 4.6. Manage Announcement

Di sebelah kanan terdapat pilihan edit dan del untuk tiap announcement. Pilihan Edit akan dihubungkan dengan halaman yang serupa dengan halaman Add Announcement, namun form di dalamnya telah terisi dengan announcement yang mau di edit.

Berbeda dengan edit, del yang berfungsi untuk menghapus announcement ini bekerja mengubah field status pada tabel News, dari yang mulanya bernilai 0 menjadi 1. Jadi sebenarnya announcement itu belum terhapus, hanya ditandai saja. Dan administrator bisa menandai banyak announcement untuk dihapus. Announcement itu baru betul-betul terhapus jika administrator memilih menu Clear Del yang akan mengeksekusi query yang isinya menghapus semua announcement yang memiliki nilai status 1.

4.4.3. My Desk

Menu ini merupakan halaman yang berisikan apa yang seharusnya ada di meja kerja, seperti jadwal yang khusus hanya untuk user itu sendiri, sehingga mereka dapat mengetahui kegiatan apa saja yang harus mereka lakukan sekarang

(17)

atau yang akan datang. Selain itu, mereka juga dapat mengubah profile mereka, juga dapat melihat message yang masuk dari user-user lain di dalam E-Office ini. 4.4.3.1. Schedule

Di sub menu ini user dapat melihat jadwal yang harus mereka lakukan sehubungan dengan proyek yang mereka tangani. Di dalam Schedule ini terdapat empat kategori jadwal proyek yang disediakan yaitu In Progress (proyek yang sedang berjalan), In Planning (proyek yang sedang direncanakan), Others (kondisi proyek yang lain), All (semua jenis proyek). Menu ini disediakan dengan asumsi bahwa umumnya dalam pengerjaan proyek, orang cenderung melihat kalender atau tanggalan untuk memastikan kapan proyek mereka selesai, atau proyek apa yang sedang dan akan berjalan. Karena itu Schedule ini dijadikan halaman paling depan dari menu MyDesk.

Gambar 4.7. My Desk Schedule

4.4.3.2. My Jobs

Di bagian sub-menu ini menampilkan jadwal yang hampir sama dengan Schedule, hanya saja ditampilkan dalam bentuk detil dengan tujuan agar user dapat langsung mengerti tugas yang harus dilakukannya hari itu. Berbeda tujuan dengan Schedule yang lebih mengarah pada penanggalan, My Jobs ini lebih menekankan pada listing tugas dan detil task yang harus dikerjakan.

(18)

Empat kategori yang disediakan sebagai pilihan ialah Today, untuk semua kegiatan hari ini; Previous Days, untuk kegiatan yang dilakukan beberapa hari yang lalu; Next Days, untuk kegiatan yang dilakukan beberapa hari kedepan; These 3, menunjukkan kegiatan 3 hari sekitar hari ini.

Gambar 4.8. My Jobs 4.4.3.3. Mail Box

Menu ini berfungsi untuk mengirim pesan antar user dalam E-Office ini. Fasilitas ini disediakan untuk komunikasi lokal standard dan sederhana. Di halaman ini disediakan langsung link untuk reply dan delete mail secara langsung. Sub menu yang tersedia selain inbox yang menjadi halaman utama Mailbox ini ialah Send New Message.

(19)

Gambar 4.9. Mail Box

Dan untuk menu Send New Message, user tentu dihadapkan pada sebuah form untuk mengirim message. Jika dalam email nama penerima dapat ditulis sendiri, di sini user yang dituju tidak dapat ditulis sendiri, melainkan telah disediakan dalam sebuah combobox yang isinya semua user E-Office kecuali user itu sendiri.

(20)

4.4.3.4. Profile

Di sinilah user dapat melihat data tentang dirinya yang dimasukkan oleh administrator atau pihak yang selevel dengan administrator. Di halaman ini ditampilkan biodata lengkap beserta jabatan yang di pegangnya.

Gambar 4.11. Profile

Di bagian ini pun hanya terdapat satu menu yaitu Edit Profile, dan dibagian inilah user dapat mengganti segala biodata kecuali nama user.

(21)

4.4.4. Human Resource Development (HRD)

Ini ialah bagian untuk mengurusi semua yang berhubungan dengan sumber daya, mulai dari data semua user, manajemen jabatan hingga jabatan tiap user yang bisa lebih dari satu. Di halaman awal, user dihadapkan pada listing user-user yang terdapat dalam E-Office.

Gambar 4.13. Struktur HRD

Gambar 4.14. Struktur hak akses HRD Jobtype Users Profile Histories Users Jobtype Levels

Common User Managers

(22)

Gambar 4.15. HRD Users

Jika username pada list user itu di klik, maka halaman akan berganti ke halaman profile tunggal dari user yang dipilih tadi, dengan format yang sama dengan profile pada My Desk. Tentunya administrator saja yang berhak untuk mengubah dan menghapus user di bagian ini. Jadi jika user yang tidak punya hak akses seperti administrator masuk ke halaman ini, mereka tidak akan menemukan sub menu Add dan Manage.

Di halaman Add ini administrator bisa memasukkan user baru beserta biodatanya, dan setelah di submit maka data tersebut langsung terlihat pada list users.

(23)

Sedangkan pada sub menu Manage administrator dapat melihat data user dengan lebih rinci, juga dapat mengeditnya kembali atau menghapusnya. Intinya, metode pengeditan dan penghapusan tidak berbeda dengan proses edit dan penghapusan pada announcement.

Gambar 4.17. User Manage 4.4.4.1. User Profile

Ini adalah halaman yang anda temukan setelah memilih salah satu user seperti yang telah dijelaskan di atas.

(24)

Gambar 4.18. User Detail

Dari sini terdapat menu tambahan yang mana menu Manage Job Type hanya bisa dilihat oleh user yang berlevelkan administrator. Dan pada sub menu Manage Job Type ini administrator dapat menambahkan atau mengurangi jabatan yang ada pada tiap user, bahkan juga dapat mengatur prioritas jabatan yang diemban.

Gambar 4.19. Manage Job Type

Untuk mengubah prioritas jabatan menjadi jabatan primer, administrator bisa memilih tulisan > primary pada sebelah kanan. Sehingga salah satu jabatan harus menjadi jabatan primer. Sedang untuk menghapusnya, administrator dapat memlih del di sebelah kanan. Jika ingin menambahnya, administrator bisa memilih salah satu dari sekian banyak Job Type dan menekan tombbol Add to User.

(25)

4.4.4.2. User History

Sedang untuk sub-menu History ini kita bisa lihat pengalaman kerja user, prestasi user dan apa keahlian user. Tujuan halaman ini sebagai arsip kerja user, juga sebagai bahan pertimbangan para leader serta pemilik Software House untuk bisa menentukan jabatan berikutnya pada pekerjanya. Dan halaman pertama sub menu ini langsung menunjukkan list sejarah dari user yang dipilih sebelum masuk ke level halaman ini.

Gambar 4.20. User History

Dan sama seperti sub menu listing lainnya, pada pilihan Add, administrator dapat memasukkan history baru.

(26)

Demikian dengan sub-menu Manage, isi yang ditampilkan di sana sangat mirip dengan view, hanya saja lebih detil dan di dalamnya terdapat pilihan Edit dan Del. Dan semua fungsi Edit dan Del bekerja dengan jalan yang hampir sama dengan menu dari announcement.

Gambar 4.22. Manage History 4.4.4.3. Job Type

Ini ialah bagian terakhir dari HRD yang berperan dalam memanajemen jabatan yang ada dalam E-Office. Dari halaman ini user bisa lihat, apa definisi jabatan yang dipegangnya, siapa atasannya, dan apa level hak akses yang diberikan pada jabatannya. Dan seperti sub-menu lainnya, pada Job Type ini pun administrator berhak menambah jabatan baru, serta me-manage jabatan dengan mengedit atau menghapusnya pada pilihan Manage.

(27)

Gambar 4.23. Job Types Dan berikut ialah halaman untuk menambahkan jabatan.

(28)

Tak jauh berbeda dengan halaman Manage lain, Job Types pun memiliki halaman yang serupa dengan fitur yang sama.

Gambar 4.25. Manage Job Type 4.4.5. Projects

Ini ialah bagian paling rumit di antara semua bagian E-Office ini, namun pada intinya pembagian dan model struktur halamannya tetap sama. Mulai dari fitur View, Add, dan Manage. Struktur proyek ini melingkupi pekerja yang menjadi pemimpin proyek, beserta pekerja yang terlibat dalam tiap task-nya dan log report serta dokumentasi file.

(29)

Gambar 4.26. Struktur Proyek

Dan pada halaman ini diperlihatkan semua Proyek yang sedang berjalan. Untuk berbagai kategori proyek ini dapat dipilih di bagian kanan atas diantaranya ialah: In Planning, Proposed, In Progress dan lain sebagainya. Namun pada awalnya, yang diperlihatkan ialah proyek yang sedang berjalan.

Di bawah list proyek langsung tergambar Gantt Chart sederhana dari proyek yang ditampilkan, sehingga nampak jelas jadwalnya berdasarkan hari ini.

Projects Leader Modules Tasks Leader Users Logs / Report Logs / Report Logs / Report Files Files Files Documentation Section

(30)

Gambar 4.27. Project View

Menu Add dan Manage di atas hanya bisa diakses oleh administrator atau pemilik perusahaan. Dan berikut ini ialah halaman Add Project.

(31)

Setelah memasukkan nama project, selanjutnya memasukkan nama client. Client ini berdasarkan Client list pada bagian About Company, yang akan dibahas di bagian terakhir. Pada awal project dibuat, harus ada kondisi awal, apakah proyek ini masih perencanaan saja, atau tengah berjalan, bagaimanapun hal itu di set pada bagian condition. Dan terakhir, administrator harus menentukan siapa yang memimpin proyek ini. Dan pemimpin proyek mendapat hak akses khusus untuk mengendalikan project sepenuhnya hingga orang-orang yang terlibat, pengaturan module sampai task.

Sedang bagian Manage, terpampang listing project secara detil, ditambah pilihan untuk Edit dan Delete. Fungsi edit inipun akan membawa user ke halaman Add, hanya saja telah terisi project yang bersangkutan. Fungsi delete pun berfungsi mengubah nilai status yang tadinya 0 menjadi 1, sehingga jika user memilih Clear Del maka semua project yang berstatus 1 akan dihapus.

Gambar 4.29. Manage Project 4.4.6. Module

Dengan mengklik nama project di halaman project, maka kita akan mendapati halaman modul seperti di bawah ini.

(32)

Gambar 4.30. Module View

Di awal halaman modul ini ditampilkan detil project sehingga user tau di lingkup apa module-module ini berjalan. Baru kemudian di bawahnya tertera list module yang terdiri atas dua bagian, yaitu module dan milestone. Milestone merupakan suatu penanda dalam proyek yang berarti proyek tersebut telah mencapai satu tahapan yang diinginkan. Jika user ingin kembali ke project yang berada di atas module ini, di kanan atas tertera tulisan <<project untuk link kembali ke project sebelumnya.

Sub menu untuk module ini lebih banyak dari project, antara lain tambahannya ialah Add Milestone, Timeline, Log dan Files. Adapun menu Add dan Manage memang tidak berbeda jauh dengan proyek, tapi kali ini yang dibahas hanya yang Add karena ada sedikit perbedaan di dalam menginputkan module dan project.

Pada Add Module ini terdapat dependencies atau ketergantungan suatu module dengan module lain. Dan untuk gambar detilnya akan ditampilkan berikut ini:

(33)

Gambar 4.31. Penginputan Module

Di dalamnya terdapat dependencies, di mana kiri merupakan task yang dapat dilakukan dependencies, dan sebelah kanan ialah tempat module yang di dependencies. Maka setelah submit ditekan, module akan segera ditambahkan dan terlihat di halaman view.

Untuk menambahkan milestone, user bisa memilih menu Add Milestone dan setelah itu halaman akan berganti ke sebuah form milestone

(34)

Satu perbedaan baru pada menu module ini ialah Log report dengan memilih link Logs pada sub menu module. Dan di halaman Logs inilah ditampilkan laporan kerja dalam yang tingkatannya ialah proyek. Di sini pun user bisa langsung mengambil file yang di upload oleh user lain.

Gambar 4.33. Logs View

Untuk menambah laporan ini, disediakan link bertulisan Add Log yang cukup besar dan setelah diklik, akan muncul sebuah popup form yang berisikan form untuk laporan tersebut. Dalam bagian ini, report yang sudah terkirim tidak dapat dihapus atau diedit.

(35)

Dan yang menjadi sub menu terakhir ialah Files yang berisikan semua file yang terkirim dari Logs project ini. Dan informasi yang ditampilkan cukup sederhana mulai dari nama file, tipe data, dan ukuran file.

Gambar 4.35. Files View

Ini merupakan garis besar apa yang terdapat pada menu Module, dimana jabarannya telah dibahas. Jika kita memilih salah satu module dari list module pada sub menu View, maka akan user akan menemukan halaman module yang berisikan kmpulan task.

Sekarang kita lihat sub-menu yang menjadi fitur utama E-Office ini yaitu Timeline berupa Gantt Chart sederhana. Fasilitas ini dibuat langsung melalui PHP dan diolah menjadi HTML. Timeline ini mengambil dulu module yang ada dan membaca tanggal awal dan akhir kemudian menggambarkannya dalam satu baris.

(36)

Gambar 4.36. Module Timeline

Untuk mengubah tanggal bisa dengan melakukan perubahan langsung pada tanggal yang diinginkan, atau di klik pada tombol ke arah kiri atau kanan. Berapapun jangauan waktu yang kita inginkan, batas penglihatan Timeline ini di bulatkan menjadi mingguan atau tepat kelipatan tujuh.

4.4.7. Task

Di bagian ini diperlihatkan task yang terdapat dalam satu module. Seperti halnya halaman module, di bagian atas di tulis kembali detil dari module supaya user mengerti task-task berikut ini bergerak dalam lingkup module seperti apa.

(37)

Gambar 4.37.Task View

Sub Menu yang tertera di sini sama sekali sama dengan module, sehingga untuk detilnya sub menu tidak dibahas. Penekanannya di sini ialah kedetilan task yang dibuat pada halaman Add. Dimana selain terdapat task dependencies juga terdapat user assign, untuk memasukkan user-user untuk bekerja di task ini.

(38)

Gambar 4.38. Add Task

Untuk bisa melakukan pemindahan resources dan dependencies secara realtime pada website, penulis menggunakan Java Script. Dengan script itu kita dapat melakukan pemindahan dari listbox satu ke listbox yang lain.

function addTaskDependency() { var form = document.add_task; var at = form.all_tasks.length -1;

var td = form.task_dependencies.length -1; var tasks = "x";

//build array of module dependencies for (td; td > -1; td--) {

tasks = tasks + "," +

form.task_dependencies.options[td].value + ","; }

//Pull selected resources and add them to list for (at; at > -1; at--) {

if (form.all_tasks.options[at].selected &&

tasks.indexOf( "," + form.all_tasks.options[at].value + "," ) == -1) {

t = form.task_dependencies.length; opt = new Option(

form.all_tasks.options[at].text, form.all_tasks.options[at].value); form.task_dependencies.options[t] = opt; }

(39)

} }

function removeTaskDependency() { var form = document.add_task;

td = form.task_dependencies.length -1; for (td; td > -1; td--) {

if (form.task_dependencies.options[td].selected) { form.task_dependencies.options[td] = null; }

} }

function addAssigned() {

var form = document.add_task;

var ar = form.all_resources.length -1; var ua = form.assigned.length -1; var assign = "x";

//build array of listed users for (ua; ua > -1; ua--) {

assign = assign + "," + form.assigned.options[ua].value + ","; }

//Pull selected resources and add them to list for (ar; ar > -1; ar--) {

if (form.all_resources.options[ar].selected && assign.indexOf( "," +

form.all_resources.options[ar].value + "," ) == -1) {

a = form.assigned.length; opt = new Option(

form.all_resources.options[ar].text, form.all_resources.options[ar].value); form.assigned.options[a] = opt; } } } function removeAssigned() {

var form = document.add_task; ua = form.assigned.length -1; for (ua; ua > -1; ua--) {

if (form.assigned.options[ua].selected) { form.assigned.options[ua] = null; }

} }

Inilah script Java Script yang mampu memanipulasi object apapun pada website untuk di proses.

(40)

4.4.8. Task Detail

Ini merupakan level terakhir dari Project yang didalamnya tertera detail dari task yang ditampilkan dengan lengkap, langsung dengan Logs report karena asumsinya user yang sudah berada pada detil task ini langsung ingin melihat sampai dimana kerja task ini dan ada perkembangan apa. Sub menu yang ditampilkan di halaman ini sangat sedikit yaitu view dan files. Dan untuk files ini tidak dibahas karena sama dengan task dan modules.

Gambar 4.39. Task Detail 4.4.9. Clients

Dan terakhir yang dibahas ialah Client yang berada pada menu utama About Company. Di sini terlihat list dari Client yang ada di E-Office ini

(41)

Gambar 4.40.Clients

Jadi sebelum memasukkan project, pastikan dulu bahwa client yang bertanggung jawab atas proyek tersebut dimasukkan, keterlibatan pihak ke-3 bisa dimanajemen dengan baik.

Figur

Gambar 4.4. Halaman Announcement

Gambar 4.4.

Halaman Announcement p.14
Gambar 4.5. Add Announcement

Gambar 4.5.

Add Announcement p.15
Gambar 4.6. Manage Announcement

Gambar 4.6.

Manage Announcement p.16
Gambar 4.7. My Desk Schedule

Gambar 4.7.

My Desk Schedule p.17
Gambar 4.8. My Jobs

Gambar 4.8.

My Jobs p.18
Gambar 4.10. Send New Message

Gambar 4.10.

Send New Message p.19
Gambar 4.12. Edit Profile

Gambar 4.12.

Edit Profile p.20
Gambar 4.11. Profile

Gambar 4.11.

Profile p.20
Gambar 4.13. Struktur HRD

Gambar 4.13.

Struktur HRD p.21
Gambar 4.15. HRD Users

Gambar 4.15.

HRD Users p.22
Gambar 4.16. Add User

Gambar 4.16.

Add User p.22
Gambar 4.17. User Manage

Gambar 4.17.

User Manage p.23
Gambar 4.18. User Detail

Gambar 4.18.

User Detail p.24
Gambar 4.19. Manage Job Type

Gambar 4.19.

Manage Job Type p.24
Gambar 4.20. User History

Gambar 4.20.

User History p.25
Gambar 4.22. Manage History

Gambar 4.22.

Manage History p.26
Gambar 4.23. Job Types  Dan berikut ialah halaman untuk menambahkan jabatan.

Gambar 4.23.

Job Types Dan berikut ialah halaman untuk menambahkan jabatan. p.27
Gambar 4.25. Manage Job Type

Gambar 4.25.

Manage Job Type p.28
Gambar 4.26. Struktur Proyek

Gambar 4.26.

Struktur Proyek p.29
Gambar 4.27. Project View

Gambar 4.27.

Project View p.30
Gambar 4.29. Manage Project  4.4.6.  Module

Gambar 4.29.

Manage Project 4.4.6. Module p.31
Gambar 4.30. Module View

Gambar 4.30.

Module View p.32
Gambar 4.31. Penginputan Module

Gambar 4.31.

Penginputan Module p.33
Gambar 4.33. Logs View

Gambar 4.33.

Logs View p.34
Gambar 4.35. Files View

Gambar 4.35.

Files View p.35
Gambar 4.36. Module Timeline

Gambar 4.36.

Module Timeline p.36
Gambar 4.37.Task View

Gambar 4.37.Task

View p.37
Gambar 4.38. Add Task

Gambar 4.38.

Add Task p.38
Gambar 4.39. Task Detail  4.4.9.  Clients

Gambar 4.39.

Task Detail 4.4.9. Clients p.40
Gambar 4.40.Clients

Gambar 4.40.Clients

p.41
Related subjects :
Outline : User History