Selasa, 01 Juli 2014

2 Website Edukasi Terbaik dan Kelebihannya

           Berikut adalah dua website edukasi terbaik yang akan saya jelaskan kelebihannya. Yang saya bahas pertama adalah National Geographic Indonesia. Website ini membahas tentang Antariksa, Sosial-Budaya, Arkeologi, Sejarah, Alam-Lingkungan, Kesehatan, Sains-Teknologi, dan Travel. Dari tampilan beranda pengunjung akan di hadapkan dengan foto-foto yang berkualitas tinggi sehingga nyaman untuk dipandang, dan juga informasi yang disajikan mudah dipahami dengan menggunakan bahasa yang ringan.
Dibawah ini adalah tampilan di bagian atas beranda National Geographic Indonesia :


Selanjutnya pada bagian kedua pengunjung akan dimudahkan dalam melihat berita terbaru pada website ini dengan disertai gambar yang cukup besar dengan beberapa daftar berita disampingnya.


Seperti yang sudah saya sebutkan diatas bahwa National Geographic Indonesia ini memuat informasi edukasi tentang Antariksa, Sosial-Budaya, Arkeologi, Sejarah, Alam-Lingkungan, Kesehatan, Sains-Teknologi, dan Travel.




Website ini tidak hanya memberikan informasi edukasi lewat tulisan saja, tetapi website ini juga menyediakan informasi berupa video yang dapat pengunjung putar dengan kualitas gambar yang cukup baik.



Yang hobi dengan fotografi di website ini juga menyediakannya dengan hasil foto yang baik. Ada foto Imaji, Kilas Balik, dan Di Balik Layar.


Pengujung juga dapat mengisi forum yang disediakan oleh National Geographic Indonesia. dan tampilan forumnya sebagai berikut :


Jika Anda tertarik dengan website ini kunjungi link ini http://nationalgeographic.co.id/


Selanjutnya saya akan membahas tentang kelebihan situs yang kedua yaitu; pesonaedu.com yang memberikan pembelajaran melalui media internet/website dari tingkat SD, SMP, dan SMA/SMK.

Berikut adalah tampilan menu atau informasi yang disediakan untuk anak SD :


Berikut adalah tampilan menu atau informasi yang disediakan untuk anak SMP :



Berikut adalah tampilan menu atau informasi yang disediakan untuk anak SMA/SMK :





Membuat web service XML sederhana menggunakan PHP dan MySQL

Pada pembahasan kali ini, dalam blog ini web service yang dibangun hanya untuk menjelaskan secara sederhana saja. Untuk contoh kasus, diasumsikan ada sebuah database yang berisi satu tabel yaitu t_mhs. Dalam t_mhs ini memiliki kolom nim, nama, kelas, tahun dan alamat. Dengan menggunakan tabel tersebut kita akan mencoba satu per satu bagaimana web service dibuat.




Dari struktur tabel ini kita akan mencoba menampilkan hasil seperti ini.
<xml>
<data>
<nim>10108088</nim>
<nama>Daeng Rosanda</nama>
<kelas>IF-2</kelas>
<thn>2008</thn>
<alamat>Soreang</alamat>
</data>
</xml>
 
Sebelum menuju koding, alangkah baik nya kita analisis dulu struktur dari XML nya sendiri. Perhatikan baik-baik, XML merupakan suatu format text yang nilainya saling diapit oleh kuncinya. Jadi kalau struktur XML itu kuncinya ada yang tidak saling mengapit, maka pembacaannya bisa menimbulkan error. Kemudian lihat kuncinya baik-baik, disana ada kunci <nim>nilai</nim> kunci ini merupakan representasi dari fieldnamenya tabel t_mhs. Begitu pula sampai dengan struktur dibawahnya. Bagaimana dengan kunci <xml> dengan kunci <data>? kunci tersebut merupakan kunci bantuan yang sengaja dibuat untuk memisahkan apabila data yang diaksesnya banyak. Untuk lebih jelasnya lihat kode XML dibawah ini.
 
<xml>
<data>
<nim>10108088</nim>
<nama>Daeng Rosanda</nama>
<kelas>IF-2</kelas>
<thn>2008</thn>
<alamat>Soreang</alamat>
</data>
<data>
<nim>10108089</nim>
<nama>Trisna Abdi</nama>
<kelas>IF-2</kelas>
<thn>2008</thn>
<alamat>Kebon Bibit</alamat>
</data>
</xml>
 
Pada struktur ini terjadi pengulangan kunci <data> sedangkan kunci <xml> tetap ada pada awal dan akhir kode. Sebenarnya mau bebas pun bisa, disini dibuat seperti itu hanya untuk membedakan kunci berulang dengan yang tidak. Baiklah kita mulai dengan XML banyak baris. Sebelum memulai. persiapkan dulu kode PHP untuk koneksi database. Simpan dengan nama koneksi.php. Untuk koneksi.php username, password, dan nama database disesuaikan dengan konfigurasi yang anda miliki. Bisa juga untuk menggunakan user root.
 
<?php
function koneksi_db(){
  //untuk koneksi database
  $host = "localhost";
  $database = "kuliah_be";
  $user = "kuliah_be";
  $password = "kuliah_be";
  $link=mysql_connect($host,$user,$password);
  mysql_select_db($database,$link);
  if(!$link){
echo "Error : ".mysql_error();
  }else{
    return $link;
  }
}
?>
 
 

XML output untuk fungsi daftar mahasiswa

Pertama-tama buat file php simpan dengan list_mhs.php. Dalam list_mhs.php ini akan ada beberapa fungsi native PHP, diantaranya adalah header, include, kueri database disusul dengan fungsi echo untuk output XMLnya.
 
<?php
include('koneksi.php');
header('Content-Type:text/xml');
$link=koneksi_db();
$sql='SELECT * FROM `t_mhs` WHERE 1 ORDER BY NIM';
$res=mysql_query($sql,$link);
if($res){
if(mysql_num_rows($res)>0){
echo '<xml>';
while($data = mysql_fetch_assoc($res)){
echo '<data>';
echo '<nim>'.$data['nim'].'</nim><nama>'.$data['nama'].'</nama><kelas>'.$data['kelas'].'</kelas><thn>'.$data['thn'].'</thn><alamat>'.$data['alamat'].'</alamat>';
echo '</data>';
}
echo '</xml>';
}else{
echo '<xml><data>t_mhs masih kosong</data></xml>';
}
 
}else{
echo '<xml><error><no>'.mysql_errno().'</no><message>'.mysql_error().'</message></error></xml>';
}
?>
 

XML output untuk fungsi detail mahasiswa

Untuk pembuatan detail mahasiswa akan ada suatu parameter khusus untuk menampilkan mahasiswa secara spesifik. Biasanya yang digunakan adalah parameter HTTPGET. Parameter HTPGET merupakan parameter yang langsung disertakan pada badan URL. contoh: http://www.google.com/?q=search&aqs=chrome. Pada URL tersebut ada parameter setelah simbol tanda tanya (?) yaitu q dan aqs. Parameter tersebut dipecah dengan simbol dan (&). Sedangkan untuk nilai dari setiap parameternya biasanya diikuti setelah sama dengan(=) setelah nama parameter. Dengan adanya parameter ini, perlu penanganan khusus dalam skrip PHPnya supaya tidak error. Adapun fungsi yang digunakan adalah fungsi isset. Untuk lebih jelasnya tinjau kode dibawah ini. Simpan kode dibawah ini dengan nama detail_mhs.php.
 
 
<?php
include('koneksi.php');
header('Content-Type:text/xml');
if(isset($_GET['id'])){
$link=koneksi_db();
$sql='SELECT * FROM `t_mhs` WHERE nim = "'.$_GET['id'].'";';
$res=mysql_query($sql,$link);
if($res){
echo '<xml>';
$data = mysql_fetch_assoc($res);
echo '<data>';
echo '<nim>'.$data['nim'].'</nim><nama>'.$data['nama'].'</nama><kelas>'.$data['kelas'].'</kelas><thn>'.$data['thn'].'</thn><alamat>'.$data['alamat'].'</alamat>';
echo '</data>';
echo '</xml>';
}else{
echo '<xml><error><no>'.mysql_errno().'</no><message>'.mysql_error().'</message></error></xml>';
}
}else{
echo '<xml><error><no>404</no><message>one or more parameter needed</message></error></xml>';
}
?>
 
Cara pengaksesan untuk skrip ini adalah dengan memanggil url disertai dengan parameter id kemudian disusul dengan nilainya. Contoh : http://localhost/backend/detail_mhs.php?id=10108088. Untuk mengganti detail mahasiswanya Anda cukup mengganti nilai yang digaris bawahi dengan nilai yang valid dalam field nim t_mhs. 
 

XML output untuk fungsi tambah data mahasiswa

Untuk pembuatan  tambah data mahasiswa mahasiswa akan ada beberapa parameter khusus untuk mengisikan data mahasiswa kedalam database. Biasanya yang digunakan adalah parameter HTTPPOST. Parameter HTPPOST merupakan parameter dikirim melalui form. Dalam parameter ini, nilai dan parameter tidak eksplisit diperlihatkan pada url, melainkan dikirim langsung pada saat request halaman web melaui form submit. Tapi meskipun begitu, untuk penangannya sama dengan HTTPGET yaitu dengan menggunakan fungsi isset. Untuk lebih jelasnya lihat kode dibawah ini.
 
<?php
include('koneksi.php');
header('Content-Type:text/xml');
if(isset($_POST['nim'],$_POST['nama'],$_POST['kelas'],$_POST['thn'],$_POST['alamat'])){
$link=koneksi_db();
$sql='INSERT INTO `t_mhs`(`nim`, `nama`, `kelas`, `thn`, `alamat`) VALUES ("'.$_POST['nim'].'","'.$_POST['nama'].'","'.$_POST['kelas'].'","'.$_POST['thn'].'","'.$_POST['alamat'].'");';
$res=mysql_query($sql,$link);
if($res){
echo '<xml>';
$data = mysql_fetch_assoc($res);
echo '<data>';
echo '<status>1</status><message>data added</message>';
echo '</data>';
echo '</xml>';
}else{
echo '<xml><error><no>'.mysql_errno().'</no><message>'.mysql_error().'</message></error></xml>';
}
}else{
echo '<xml><error><no>404</no><message>one or more parameter needed</message></error></xml>';
}
?>
 
Tapi ini belum selesai, kita harus membuat tester untuk menguji apakah kodenya berjalan dengan baik atau tidak. Untuk itu kita membuat file php baru yaitu tester_add_mhs.php. File ini berstruktur html biasa dengan berisikan form dan nilai beserta kunci parameter yang akan digunakan untuk menambahkan data pada database melalui web service. Untuk lebih jelasnya lihat kode dibawah ini.
 
<html>
<head>
<title>
Tester - add_mhs.php
</title>
</head>
<body>
<h3>Tester - add_mhs.php</h3>
<form name="fregister" method="post" action="./add_mhs.php">
<table border=0>
<tr>
<td>
nim
</td>
<td>
:
</td>
<td>
<input type="text" name="nim" required="required" />
</td>
</tr>
<tr>
<td>
nama
</td>
<td>
:
</td>
<td>
<input type="text" name="nama" required="required" />
</td>
</tr>
<tr>
<td>
kelas
</td>
<td>
:
</td>
<td>
<input type="text" name="kelas" required="required" />
</td>
</tr>
<tr>
<td>
thn
</td>
<td>
:
</td>
<td>
<input type="text" name="thn" required="required" />
</td>
</tr>
<tr>
<td>
alamat
</td>
<td>
:
</td>
<td>
<textarea name="alamat" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
&nbsp;
</td>
<td>
<input type="submit" name="submit" value="submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
 
Setelah itu buka file nya kemudian isi dengan lengkap setelah itu coba untuk submit. Kemudian lihat hasilnya apa ada error atau tidak. Jika ada error, pastikan anda memeriksa field name pada input di form testernya. Jika tidak ada error, maka anda bisa langsung melihatnya melalui web service list_mhs.php.
 

XML output untuk fungsi merubah data mahasiswa

Untuk merubah data mahasiswa akan diperlukan Key untuk mengakses data mahasiswa yang akan diubah datanya beserta parameter-parameter detail dari data mahasiswa. Ini tidaklah rumit, karena ini telah dibangun sebelumnya. Untuk membangun skrip ini tinggal menggabungkan skrip add_mhs.php dengan detail_mhs.php tapi query MySQL nya saja yang diganti. Untuk lebih jelasnya lihat kode dibawah ini. Simpan kode dibawah ini dengan nama edit_mhs.php.
 
<?php
include('koneksi.php');
header('Content-Type:text/xml');
if(isset($_GET['id'],$_POST['nim'],$_POST['nama'],$_POST['kelas'],$_POST['thn'],$_POST['alamat'])){
$link=koneksi_db();
$sql='UPDATE `t_mhs` SET `nim`="'.$_POST['nim'].'",`nama`="'.$_POST['nama'].'",`kelas`="'.$_POST['kelas'].'",`thn`="'.$_POST['thn'].'",`alamat`="'.$_POST['alamat'].'" WHERE nim = "'.$_GET['id'].'";';
$res=mysql_query($sql,$link);
if($res){
echo '<xml>';
$data = mysql_fetch_assoc($res);
echo '<data>';
echo '<status>1</status><message>data changed</message>';
echo '</data>';
echo '</xml>';
}else{
echo '<xml><error><no>'.mysql_errno().'</no><message>'.mysql_error().'</message></error></xml>';
}
}else{
echo '<xml><error><no>404</no><message>one or more parameter needed</message></error></xml>';
}
?>
 
Seperti pada add_mhs.php. Skrip ini juga butuh tester untuk pengujiannya. Pada dasarnya tester ini dengan yang add_mhs.php sama, namun yang membedakan adalah pada url action di tag formnya. Ini merupakan hal yang harus digaris bawahi, karena skrip edit_mhs.php ini terdiri dari parameter HTTPPOST dan HTTPGET jadi mau tidak mau harus ada kode yang diedit manual ketika akan menggunakan skrip tester ini. Untuk lebih jelasnya lihat pada kode dibawah ini. Simpan kode dibawah ini dengan tester_edit_mhs.php.
 
<html>
<head>
<title>
Tester - edit_mhs.php
</title>
</head>
<body>
<h3>Tester - edit_mhs.php</h3>
<form name="fregister" method="post" action="./add_mhs.php?id=10108088">
<table border=0>
<tr>
<td>
nim
</td>
<td>
:
</td>
<td>
<input type="text" name="nim" required="required" />
</td>
</tr>
<tr>
<td>
nama
</td>
<td>
:
</td>
<td>
<input type="text" name="nama" required="required" />
</td>
</tr>
<tr>
<td>
kelas
</td>
<td>
:
</td>
<td>
<input type="text" name="kelas" required="required" />
</td>
</tr>
<tr>
<td>
thn
</td>
<td>
:
</td>
<td>
<input type="text" name="thn" required="required" />
</td>
</tr>
<tr>
<td>
alamat
</td>
<td>
:
</td>
<td>
<textarea name="alamat" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
&nbsp;
</td>
<td>
<input type="submit" name="submit" value="submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
Coba perhatikan pada kode yang digaris bawahi diatas. Kode tersebut menandakan bahwa tester hanya akan merubah data mahasiswa dengan id sama dengan 10108088. Jadi tester ini menggabungkan HTTPGET dan HTTPPOST secara bersamaan. Bagaimana jika id yang tertera tidak ada? berarti dalam tabel t_mhs tidak ada data yang dirubah meskipun hasil pada XML nya adalah data changed. Jadi solusi terbaiknya adalah, pastikan id yang anda definisikan pada skrip tersebut valid. Jika ingin merubah data mhs yang lain, maka Anda cukup untuk mengganti nilai dari parameter id tersebut.
 

XML output untuk fungsi hapus data mahasiswa

Untuk membangun skrip ini sebenarnya telah sama dengan skrip untuk add_mhs.php. Hanya saja yang membedakan adalah kueri beserta parameter yang dikirimnya. Parameter yang dikirim untuk skrip ini berupa HTTPGET parameter. Jadi tidak perlu tester untuk penggunaan skrip ini. Untuk lebih jelasnya lihat kode dibawah ini. Simpan kode dibawah ini dengan nama rem_mhs.php.
 
<?php
include('koneksi.php');
header('Content-Type:text/xml');
if(isset($_GET['id'])){
$link=koneksi_db();
$sql=' DELETE FROM `t_mhs` WHERE nim = "'.$_GET['id'].'";';
$res=mysql_query($sql,$link);
if($res){
echo '<xml>';
$data = mysql_fetch_assoc($res);
echo '<data>';
echo '<status>1</status><message>data removed</message>';
echo '</data>';
echo '</xml>';
}else{
echo '<xml><error><no>'.mysql_errno().'</no><message>'.mysql_error().'</message></error></xml>';
}
}else{
echo '<xml><error><no>404</no><message>one or more parameter needed</message></error></xml>';
}
?>
Untuk pengaksesan skrip ini, caranya sama dengan pemanggilan dari skrip detail_mhs.php.
 

XML output untuk fungsi pencarian data mahasiswa

Pencarian merupakan salah satu syarat yang harus ada baik dalam web maupun web service. Pembangunan skrip ini sama halnya dengan skrip detail mahasiwa, tapi yang membedakan hanyalah kunci parameter dengan kueri nya saja. Untuk lebih jelasnya lihat kode dibawah ini. Simpan kode dibawah ini dengan nama find_mhs.php.
 
<?php
include('koneksi.php');
header('Content-Type:text/xml');
if(isset($_GET['q'])){
$link=koneksi_db();
$sql='SELECT * FROM `t_mhs` WHERE nim LIKE %"'.$_GET['q'].'"% OR name LIKE %"'.$_GET['q'].'"% OR kelas  LIKE %"'.$_GET['q'].'"% OR thn  LIKE %"'.$_GET['q'].'"% OR alamat LIKE %"'.$_GET['q'].'"%;';
$res=mysql_query($sql,$link);
if($res){
echo '<xml>';
$data = mysql_fetch_assoc($res);
echo '<data>';
echo '<nim>'.$data['nim'].'</nim><nama>'.$data['nama'].'</nama><kelas>'.$data['kelas'].'</kelas><thn>'.$data['thn'].'</thn><alamat>'.$data['alamat'].'</alamat>';
echo '</data>';
echo '</xml>';
}else{
echo '<xml><error><no>'.mysql_errno().'</no><message>'.mysql_error().'</message></error></xml>';
}
}else{
echo '<xml><error><no>404</no><message>one or more parameter needed</message></error></xml>';
}
?>
 

Dokumentasi untuk Web Service

Ini merupakan salah satu pekerjaan dari pada pembangun web service disamping membangun kode. Dokumentasi memudahkan para programmer lainnya untuk menggunakan web service yang anda bangun secara mudah. Meskipun para programmer mampu membaca setiap kode yang anda bangun, tapi itu akan menambah beban dan menambah lama waktu pembuatan aplikasi yang memerlukan web service anda. Oleh karena itu, alangkah baiknya anda mendokumentasikan setiap web service yang anda bangun. Secara garis besar, dokumentasi yang anda bangun meliputi logika constrain da restriction kemudian parameter, key, value, data type, beserta output yang dihasilkan. Untuk lebih jelasnya anda bisa mengacu pada contoh dibawah ini.
 
Web Service API Edit Data Mahasiswa
 
Sample request http://localhost/backend/edit_mhs.php?id=[valid_nim_mhs]
note : Webservice API will not detected for valid_nim_mhs. Please use the valid identifier.
 
Required parameter
POST : nim, nama, kelas, tahun, alamat.
GET :id
 
Sample Respons
if success
<xml><data><status>1</status><message>data added</message></data></xml>
if one or more parameter missing
<xml><error><no>404</no><message>one or more parameter needed</message></error></xml>
 
Ini merupakan akhir dari salah satu dokumentasi fungsi add_mhs.php, masih ada banyak fungsi yang belum terdokumentasi. Dokumentasi API biasanya disajikan terus menerus sampai semua fungsi yang ada dalam webservice ter-cover. Diharapkan dengan adanya dokumentasi, para programmer yang akan menggunakan web service Anda dapat mengetahui secara garis besar maupun detail kebutuhan apa saja yang mereka harus sediakan.
 

Kesimpulan

Pembangunan web service ini hanya sebagai gambaran kasar. Web Service ini masih banyak kekurangan, diantaranya kekurang konsistenan untuk key yang dihasilkan XML jika terjadi perubahan struktur pada tabel. Belum adanya batasan keamanan untuk membatasi web service yang dibangun. Batasan ini biasanya berbentuk kode yang disebut dengan AppKey atau token. Dengan adanya token, diharapkan penggunaan web service dapat dimanfaatkan secara terkendali.
 
Akhir kata, jika anda perlu yang sudah langsung jadi, anda bisa download sample kode-kode diatas beserta sql dump nya di sini.

Sumber :


Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Affiliate Network Reviews