Free Ebook Tutorial from Rosihan Ari's Blog

Tutorial Javascript | Tutorial PHP | Tutorial AJAX | Tutorial CSS | Tutorial FPDF | Tutorial Wordpress | Tutorial Java SE


Ebook yang direkomendasikan untuk Anda
Ebook Panduan Praktis OOP di PHP


Ide Membuat Script Grafik PHP Untuk Menampilkan Indeks Prestasi Mahasiswa (Studi Kasus)


June 20th, 2009 | by rosihanari | Cetak Artikel Cetak Artikel


GampSMS SMS Gateway

Dalam artikel sebelumnya, saya pernah singgung bagaimana membuat query SQL untuk menampilkan Indeks Prestasi (IP) mahasiswa dalam setiap semester yang telah ditempuhnya. Hasil query ini nanti bisa digunakan untuk melihat progress atau perkembangan prestasi akademik mahasiswa. Oleh karena itu biasanya, query ini sering digunakan dalam suatu sistem informasi akademik.

Selanjutnya dalam artikel ini, saya akan mencoba memaparkan bagaimana menampilkan hasil query SQL di atas ke dalam bentuk grafik (chart) menggunakan script PHP, atau dengan kata lain artikel ini akan membahas bagaimana membuat grafik (chart) untuk menampilkan perkembangan IP setiap semester mahasiswa.

Mengapa harus ditampilkan dalam bentuk grafik (chart)? ya… karena dengan grafik, seseorang dapat dengan mudah membaca suatu informasi. Dengan grafik, seseorang dapat dengan mudah mengetahui apakah prestasi akademiknya semakin turun, ataukah naik atau sedang-sedang saja.

OK deh… trus bagaimana skenario dari script ini? adapun skenarionya adalah pertama akan disajikan terlebih dahulu daftar (list) dari mahasiswa yang ada. Kemudian disetiap mahasiswa terdapat link untuk melihat grafik IP nya. Berikut ini adalah gambarannya.

Photobucket

Apabila link VIEW tersebut diklik, maka akan tampil grafik IP untuk setiap semesternya

Photobucket

OK.. paham ya skenarionya? Nah.. selanjutnya kita mulai rancang tabel-tabel dan field yang diperlukan untuk databasenya. Pada prinsipnya, struktur tabelnya sama seperti di artikel sebelumnya.

Terdapat 3 tabel yang kita perlukan untuk studi kasus ini, yaitu ‘mhs’ (tabel mahasiswa), ‘mk’ (tabel matakuliah) dan ‘ambilmk’ (tabel pengambilan matakuliah)

CREATE TABLE mhs (
  nim varchar(5),
  nama varchar(20),
  PRIMARY KEY (nim)
)
CREATE TABLE mk (
  kodeMK varchar(5),
  namaMK varchar(20),
  sks int(11),
  PRIMARY KEY (kodeMK)
)
CREATE TABLE ambilmk (
  nim varchar(5),
  kodeMK varchar(5),
  nilai float,
  smt varchar(10) default NULL,
  tahun varchar(9) default NULL,
  PRIMARY KEY (nim,kodeMK)
)

Hmm… alangkah baiknya jika Anda menggunakan tipe tabel InnoDB untuk merancang tabel-tabel di atas supaya terdapat referential integration di antara setiap datanya.

Sedangkan untuk sampel recordnya, kita gunakan data seperti di bawah ini

INSERT INTO mhs VALUES ('M002', 'DWI AMALIA FITRIANI');
INSERT INTO mhs VALUES ('M003', 'FAZA FAUZAN');
INSERT INTO mk VALUES ('MK01', 'DATABASE', 3);
INSERT INTO mk VALUES ('MK02', 'PEMROGRAMAN DASAR', 2);
INSERT INTO mk VALUES ('MK03', 'PEMROGRAMAN WEB', 4);
INSERT INTO mk VALUES ('MK04', 'OOP', 3);
INSERT INTO mk VALUES ('MK05', 'PEMROGRAMAN VISUAL', 3);
INSERT INTO ambilmk VALUES ('M002', 'MK01', 3, 'GANJIL', '2008/2009');
INSERT INTO ambilmk VALUES ('M002', 'MK02', 2, 'GANJIL', '2008/2009');
INSERT INTO ambilmk VALUES ('M002', 'MK03', 2, 'GENAP', '2008/2009');
INSERT INTO ambilmk VALUES ('M002', 'MK04', 2, 'GENAP', '2008/2009');
INSERT INTO ambilmk VALUES ('M002', 'MK05', 4, 'GANJIL', '2009/2010');
INSERT INTO ambilmk VALUES ('M003', 'MK01', 2, 'GANJIL', '2008/2009');
INSERT INTO ambilmk VALUES ('M003', 'MK02', 3, 'GANJIL', '2008/2009');
INSERT INTO ambilmk VALUES ('M003', 'MK03', 3, 'GENAP', '2008/2009');
INSERT INTO ambilmk VALUES ('M003', 'MK04', 2, 'GENAP', '2008/2009');
INSERT INTO ambilmk VALUES ('M003', 'MK05', 3, 'GANJIL', '2009/2010');

OK.. tabel dan sampel record sudah ready, selanjutnya kita mulai membuat script untuk menampilkan list mahasiswanya terlebih dahulu.

mhs.php

<?php

mysql_connect("dbhost", "dbuser", "dbpass");
mysql_select_db("dbname");

echo "<h1>Data Mahasiswa</h1>";

$query = "SELECT * FROM mhs";
$hasil = mysql_query($query);

echo "<table border='1'>";
echo "<tr><th>NIM</th><th>Nama Mhs</th><th>Statistik IP</th></tr>";
while ($data = mysql_fetch_array($hasil))
{
  echo "<tr>
         <td>".$data['nim']."</td>
         <td>".$data['nama']."</td>
         <td><a href='statistik.php?nim=".$data['nim']."'>View</a></td>
        </tr>";
}

echo "</table>";

?>

Perhatikan script mhs.php di atas! Untuk menampilkan list mahasiswa kita cukup membuat query SQL yang memanfaatkan tabel ‘mhs’. Kemudian di setiap baris data mahasiswa dalam tabel, kita buat link ‘VIEW’ yang diarahkan ke script ‘statistik.php’. Link ke script ini kita sertakan parameter ‘?nim=…’ karena NIM ini nanti digunakan sebagai acuan untuk membuat grafik IP si mahasiswa yang memiliki NIM tersebut. Hasil dari script mhs.php ini tampak seperti pada gambar pertama di atas.

Selanjutnya kita membuat script statistik.php nya

statistik.php

<?php

mysql_connect("dbhost", "dbuser", "dbpass");
mysql_select_db("dbname");

// membaca nim dari parameter
$nim = $_GET['nim'];

// query untuk menampilkan NIM dan Nama Mahasiswa berdasarkan NIM
$query = "SELECT * FROM mhs WHERE nim = '$nim'";
$hasil = mysql_query($query);
$data  = mysql_fetch_array($hasil);

echo "<h1>Statistik Indeks Prestasi</h1>";

echo "<table>";
echo "<tr><td>NIM</td><td>:</td><td>".$data['nim']."</td></tr>";
echo "<tr><td>Nama Mhs</td><td>:</td><td>".$data['nama']."</td></tr>";
echo "</table>";

// menampilkan image grafik IP dari mahasiswa berdasarkan NIM
echo "<img src='stat.php?nim=".$nim."'>";

?>

Script statistik.php di atas pada prinsipnya adalah menggabungkan antara informasi si mahasiswa (NIM dan Nama) dengan grafik IP nya. Untuk menampilkan informasi si mahasiswa, cukup kita buat query SQL SELECT * FROM mhs WHERE nim = '$nim', dan grafiknya kita embed menggunakan tag <img src='stat.php?nim=".$nim."'>. Script ‘stat.php’ adalah script untuk membuat grafiknya. Mengapa dalam tag <img> ini perlu ada parameter ‘?nim=…’ nya? Ya… karena NIM itu nanti juga digunakan untuk acuan dalam membuat script grafik IP dari mahasiswa tersebut.

Mungkin Anda bertanya, mengapa tidak dijadikan satu saja antara script untuk menampilkan informasi mahasiswa dengan script untuk grafiknya? He.. 3x jawabannya adalah ‘tidak bisa’. Karena script stat.php ini akan menghasilkan output berupa image. Sedangkan informasi mahasiswanya (statistik.php) outputnya berupa dokumen HTML sehingga keduanya tidak bisa langsung dipadukan menjadi satu. Solusinya adalah mengembed script grafiknya ke dalam script dokumen HTML menggunakan tag <img src="...">.

Trus… kita akan membuat script grafiknya. Untuk grafik, kita akan menggunakan JpGraph karena free and mudah digunakan :-) Mau menggunakan Open Flash Chart nya yang digunakan KPU, gak jadi, coz it’s very ribet :-) Ane pengin yang simpel-simpel aja deh.

Untuk grafiknya, seperti yang kita lihat pada sampel di atas, akan kita pilih grafik yang merupakan gabungan dalam bentuk batang (bar chart) dan garis (line chart).

stat.php

<?php

mysql_connect("dbhost", "dbuser", "dbpass");
mysql_select_db("dbname");

// membaca parameter NIM dari <img src="stat.php?nim=...">
$nim = $_GET['nim'];

// menyiapkan array untuk menyimpan smt dan tahun
$smtThn = array();

// menyiapkan array untuk menyimpan ip
$ip = array();

// memanggil modul JpGraph untuk membuat grafik batang dan garis
// modul ini terletak dalam folder bernama 'modul'
include ("modul/jpgraph.php");
include ("modul/jpgraph_bar.php");
include ("modul/jpgraph_line.php");

// query sql untuk mendapatkan IP setiap semester dari mahasiswa
$query = "SELECT smt, tahun, sum(nilai * sks)/sum(sks) as ip
          FROM ambilmk, mk
          WHERE ambilmk.kodemk = mk.kodemk AND ambilmk.nim = '$nim'
          GROUP BY tahun, smt";

$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
  // menyimpan data semester dan tahun hasil query ke dalam array $smtThn
  // smt dan tahun digabung dalam satu string untuk ditampilkan dalam sumbu-y grafik
  array_unshift($smtThn, $data['smt']." ".$data['tahun']);

  // menyimpan data IP hasil query ke dalam array $ip
  array_unshift($ip, $data['ip']);
}

// membuat image ukuran 500 x 300 pixel
$graph = new Graph(500,300,"auto");

// membuat skala grafik. Nilai 4 di sini adalah nilai maksimum sumbu Y nya, mengingat IP maks adalah 4
$graph->SetScale("textlin", 1, 4);

// membuat bayangan dari image
$graph->SetShadow();

// mengatur batas margin grafik
$graph->SetMargin(50,50,40,40);

// membuat bar plot dari data IP
$barplot = new BarPlot($ip);

// membuat line plot dari data IP
$lineplot=new LinePlot($ip);

// memberi warna merah pada bar plot
$barplot->SetFillColor("red");

// menampilkan value IP pada setiap bar
$barplot->value->show();

// mengatur tampilan value IP dengan format 1 digit desimal di belakang koma
$barplot ->value->SetFormat("%3.1f");

// mengatur ketebalan garis pada lineplot
$lineplot->SetWeight(3);

// mengatur posisi ujung line plot supaya terletak di tengah-tengah bar
$lineplot->SetBarCenter();

// menampilkan barplot ke dalam image
$graph->Add($barplot);

// menampilkan lineplot ke dalam image
$graph->Add($lineplot);

// menampilkan smt dan tahun pada sumbu X
$graph->xaxis-> SetTickLabels($smtThn);

// menampilkan title grafik
$graph->title->Set("Grafik Indeks Prestasi Mahasiswa");

// memberi label pada sumbu X
$graph->xaxis->title->Set("Semester");

// memberi label pada sumbu Y
$graph->yaxis->title->Set("Indeks Prestasi (IP)");

// mengatur jenis font pada title, label sumbu X dan label sumbu Y
$graph->title->SetFont(FF_FONT1,FS_BOLD);
$graph->yaxis->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->title->SetFont(FF_FONT1,FS_BOLD);

// menampilkan output grafik
$graph->Stroke();
?>

Catatan:
Query SQL untuk menghasilkan data IP setiap semester dari mahasiswa untuk ditampilkan ke dalam grafik, sama dengan query SQL yang pernah dibahas pada artikel sebelumnya.

Jika Anda ingin mendapatkan script di atas sekaligus modul JpGraph nya, maka dapat didownload di bawah ini.

[ Download Script ]

Selamat mencoba ya. Mudah-mudahan artikel ini bermanfaat bagi Anda semuanya baik yang sedang belajar, maupun yang sedang mendapat project membuat sistem informasi akademik :-) Kalau sedang dapat project, jangan lupa bagi-bagi ya :-)




Share ke Facebook Share ke Twitter
Baca Juga Artikel Terkait
Script PHP Updating Data Secara Simultan (Studi Kasus Update Nilai Kuliah Mahasiswa)
Perintah SQL Menampilkan Nilai Matakuliah Terbaik (Studi Kasus Akademik)
Membuat Grafik Chart di PHP
Query SQL Untuk Menampilkan Index Prestasi (IP) Per Semester
Script PHP untuk Menampilkan Siswa Belum Bayar SPP (A Study Case)

Kata kunci: cara membuat grafik php - chart - grafik - jpgraph - membuat chart php - PHP - php chart - php grafik - script - script grafik - script jpgraph -


Ada 37 komentar dalam artikel ini.



  1. endah says:

    mm… manfaat. tks

  2. deksa syafradha says:

    pak kla kita punya pendapatan tahun 2005 misal 1 juta terus tahun 2006 2 jt, dan tahun 2007 8 jt, total keseluruhan pendapatan 11 juta, bagaimana caranya agar dijadikan persen, dlm bentuk pie terima kasih.

  3. Agus says:

    Mas Rosihan Ari, mhn bntuannya. Sya mau buat grafik chart Statistik dengan IP Smster (IPS) dan IP Kumulatif (IPK) dengan PHP, tapi dibuatnya per fakultas dan jurusan. Bgmn ya caranya? Mhn pncerahannya.

    Thanks,
    Agus

  4. afag says:

    thank atas scriptna pak,,,
    mohon maaf, pada waktu saya coba ko muncul

    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in D:\XAMPP\xampp\htdocs\q\grafik\modul\jpgraph.php on line 285

    mohon pencerahannya…
    thanks

  5. Mas Rosihan Ari, mksud tinggal mainin saja query sql nya… dan semua data tergantung query nya,bgmn Mas?
    Tlg dong Mas,sya dberi pnjelasan yg detail.Krn sya Newbie PHP dan MySQL.

    Sngt trimaksih skali klau sya mau dbantu.

  6. andino says:

    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in C:\AppServ\www\stkip\mahasiswa\grafik\stat.php on line 28
    JpGraph Error Empty input data array specified for plot. Must have at least one data point.

    aku dapatnya error gt mas..pie iki?

    dah cocok belum nic?
    // query sql untuk mendapatkan IP setiap semester dari mahasiswa
    $query = “SELECT semester, thn_akademik, sum(nilai_angka * sks)/sum(sks) as ip
    FROM nilai, matakuliah
    WHERE nilai.kode_matkul = matakuliah.kode_matkul AND nilai.nim = ‘$nim’
    “;

    $hasil = mysql_query($query);
    while ($data = mysql_fetch_array($hasil))
    makasih yah sebelumnya

  7. Kk rosihan ari…saya mau bertanya ….

    kenapa saya ga nampil grafiknya ya,,,

    saya pake xampp 1.4.6…

    ada support jp graph lain ga…

    Saya mu ngumpulin Sidang program ku 3 hari lg..mohon bantuannya

  8. belinda says:

    Ass pak..
    saya mau nanya..kalo misalnya
    Chosen locale file (“lang/en.inc.php”) for error messages does not exist or is not readable for the PHP process. Please make sure that the file exists and that the file permissions are such that the PHP process is allowed to read this file.
    itu kenapa ya pak? perasaan mah udah bener..
    terima kasih pak?

  9. gugum says:

    ini sourch coding yg aku cariiii….

    masss semoga ilmuinya bermanfaat…..and berguna untuk dunia..hehe

    doain jg moga sidang skripsi lancar…



 

Komentar/pertanyaan Anda!

Mohon maaf, komentar/pertanyaan yang menggunakan email palsu atau komentar bernada negatif, cemooh, umpatan, cacian atau sejenisnya secara otomatis akan terhapus karena dianggap spam dan tidak akan tampil

Dimohon jangan pula memasukkan code program dalam bentuk apapun ke dalam komentar karena akan dianggap spam.

Mohon maaf jika seandainya ada beberapa pertanyaan Anda yang tidak direspon atau ditanggapi mengingat banyaknya komentar yang masuk dan keterbatasan kemampuan/ilmu saya dalam menjawab pertanyaan satu persatu. Saya harap Anda bisa memahami dan memakluminya.

Semua komentar atau pertanyaan yg masuk tidak akan langsung tampil di halaman ini, karena akan dimoderasi dahulu.


*