Cara Menggunakan Fitur Hook pada CodeIgniter

Fitur hook yang disediakan pada CodeIgniter sebenarnya memungkinkan kita untuk sedikit melakukan hack pada proses yang berjalan pada aplikasi yang kita buat, tanpa harus mengubah skrip pada file inti CodeIgniter. Misalnya saja, kita ingin membuat sebuah log untuk menyimpan data URL apa saja yang diakses oleh pengguna, mendata setiap pengunjung yang mengakses halaman, dll. Dalam kasus dibawah ini kita akan menggunakan fitur hook untuk mengatur konfigurasi aplikasi berdasarkan konfigurasi yang kita simpan di database.

Langkah-langkahnya adalah sebagai berikut:

1. Membuat tabel app_config untuk menyimpan konfigurasi aplikasi kita

   CREATE TABLE IF NOT EXISTS `app_config` (
     `key` varchar(255) NOT NULL,
     `value` varchar(255) NOT NULL,
     PRIMARY KEY (`key`)
   ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
   

2. Memasukkan data konfigurasi awal kedalam tabel yang telah kita buat

   INSERT INTO `app_config` (`key`, `value`) VALUES
     ('address', 'Griya Wilis Indah'),
     ('company', 'Belva Tekindo'),
     ('email', ''),
     ('fax', ''),
     ('language', 'indonesia'),
     ('phone', ''),
     ('timezone', 'Asia/Bangkok'),
     ('version', '1.0');
   

3. Membuat file application/models/m_appconfig.php untuk mengakses tabel yang telah kita buat

   <?php
   class M_appconfig extends CI_Model
   {	
   	function get_all()
   	{
   		$this->db->from('app_config');
   		$this->db->order_by("key", "asc");
   		return $this->db->get();		
   	}
   }
   
   /* End of file m_appconfig.php */
   /* Location: ./application/models/m_appconfig.php */
   

4. Menambahkan model M_appconfig pada file application/config/autoload.php agar di load otomatis
   

   $autoload['model'] = array('M_appconfig');
   

5. Membuat file application/hooks/load_config.php

   <?php
   function load_config()
   {
   	$CI =& get_instance();
   	
   	//Memuat konfigurasi dari database kefalam konfigurasi global CI
   	foreach($CI->M_appconfig->get_all()->result() as $app_config)
   	{
   		$CI->config->set_item($app_config->key,$app_config->value);
   	}
   	
   	//Set konfigurasi timezone CI dengan konfigurasi dari database
   	if ($CI->config->item('timezone'))
   	{
   		date_default_timezone_set($CI->config->item('timezone'));
   	}	
   }
   
   /* End of file load_config.php */
   /* Location: ./application/hooks/load_config.php */
   

6. Mengaktifkan fitur ini pada file application/config/config.php seperti berikut:
   

   $config['enable_hooks'] = TRUE ;
   

7. Mendefinisikan hook yang akan digunakan pada saat aplikasi kita dijalankan. Buka file application/config/hooks.php untuk menambah hook baru.
   

   $hook['post_controller_constructor'] = array(
                                   'class'    => '',
                                   'function' => 'load_config',
                                   'filename' => 'load_config.php',
                                   'filepath' => 'hooks'
                                   );
   

Berikut ini merupakan hal yang harus diperhatikan dalam pembuatan hook. Yaitu poin dimana hook akan dijalankan. Terdapat tujuh poin dimana hook akan kita tempatkan, pada contoh diatas hook ditempatkan pada poin post_controller_constructor. Berikut penjelasan ketujuh poin tersebut.

• pre_system
  Kelas dan metode hook kita akan dijalankan sebelum sistem dieksekusi. Berdasar dokumentasi CodeIgniter, hanya kelas Benchmark dan Hook yang dijalankan pada poin ini.
• pre_controller
  Kelas dan metode hook akan dijalankan sebelum controller kita dipanggil. Semua base class, routing dan security sudah dipanggil pada poin ini.
• post_controller_constructor
  Akan dipanggil ketika konstruktor controller dijalankan, tapi sebelum metode controller dipanggil.
• post_controller
  Akan dipanggil ketika controller sudah benar-benar dijalankan.
• display_override
  Memungkinkan kita untuk menentukan metodologi display sesuai dengan keinginan kita.
• cache_override
  Mengijinkan kita untuk menampilkan mekanisme cache sesuai dengan keinginan kita.
• post_system
  Dijalankan ketika halaman berhasil dikirim ke browser.

Baca selengkapnya »

Validasi Form Menggunakan jQuery Validation Plugin

jQuery Validation adalah sebuah plugin jQuery yang berfungsi untuk mempermudah validasi form client-side. Cara penggunaannya adalah dengan memanggil script jquery dan jquery-validate di dlm kode html anda (biasanya diletakkan di bagian head):
Mari kita mulai dengan contoh sederhana. Klik disini untuk melihat demo. Bentuk demonstrasi tersebut berisi empat bidang: nama, e-mail, komentar dan URL. Seperti yang Anda lihat, pertama tiga bidang yang diperlukan, sedangkan bidang URL adalah opsional. Jika Anda mengirimkan formulir tanpa mengisi kolom yang diperlukan, Anda akan menerima pesan kesalahan.

Berikut adalah kode yang digunakan untuk bentuk dalam demonstrasi di atas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
  <title>Simple Form Validation</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#form1").validate({
        rules: {
          name: "required",// simple rule, converted to {required:true}
          email: {// compound rule
          required: true,
          email: true
        },
        url: {
          url: true
        },
        comment: {
          required: true
        }
        },
        messages: {
          comment: "Please enter a comment."
        }
      });
    });
  </script>
  <style type="text/css">
    * { font-family: Verdana; font-size: 11px; line-height: 14px; }
    .submit { margin-left: 125px; margin-top: 10px;}
    .label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; }
    .form-row { padding: 5px 0; clear: both; width: 700px; }
    label.error { width: 250px; display: block; float: left; color: red; padding-left: 10px; }
    input[type=text], textarea { width: 250px; float: left; }
    textarea { height: 50px; }
  </style>
  </head>
  <body>
    <form id="form1" method="post" action="">
      <div class="form-row"><span class="label">Name *</span><input type="text" name="name" /></div>
      <div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" /></div>
      <div class="form-row"><span class="label">URL</span><input type="text" name="url" /></div>
      <div class="form-row"><span class="label">Your comment *</span><textarea name="comment" ></textarea></div>
      <div class="form-row"><input class="submit" type="submit" value="Submit"></div>
    </form>
  </body>
</html>

Kode tersebut diatas cukup mudah dan tidak perlu banyak penjelasan. Namun, ada beberapa poin penting yang harus di perhatian yaitu:

• Harus selalu menyertakan pustaka jQuery dan plugin validasi bassistance, di bagian head.
• Selalu menetapkan atribut id dari bentuk dan atribut name semua field yang ingin divalidasi.

Selanjutnya kita lihat fungsi validate() secara rinci.

$(document).ready(function() {
  $("#form1").validate({
    rules: {
      name: "required",    // simple rule, converted to {required: true}
      email: {             // compound rule
      required: true,
      email: true
      },
      url: {
        url: true
      },
      comment: {
        required: true
      }
    },
    messages: {
      comment: "Please enter a comment."
    }
  });
});

Yang kita lakukan adalah menginisialisasi form validasi menggunakan fungsi validate(). Ada beberapa parameter yang bisa kita gunakan. Dalam contoh di atas, kita hanya menggunakan dua diantaranya, untuk melihat daftar pilihan fungsi validate() silahkan klik di sini.

Dua parameter kita digunakan adalah:

• rules: memungkinkan Anda untuk menentukan field yang akan divalidasi. Dalam kasus ini, kita memvalidasi nama, email, url dan komentar. Untuk setiap field, kita bisa menentukan bahwa data diperlukan untuk suatu field (required: true). Kita bisa pula menentukan bahwa suatu data adalah berupa alamat e-mail yang valid, URL yang valid, dll.
• messages: memungkinkan Anda untuk menentukan pesan kesalahan untuk field tertentu (seperti kolom komentar dalam contoh di atas). Jika Anda tidak menentukannya, maka pesan default yang akan ditampilkan "this field is required".

Baca selengkapnya »

Format Tampilan Teks di HTML

Format Tampilan Teks di HTML digunakan untuk membuat teks yang ada dalam dokumen HTML menjadi kelihatan berbeda, menarik dan dapat memberikan kemudahan dalam menuliskan teks yang berupa rumus-rumus atau lambang dari suatu disiplin ilmu. Ada banyak sekali format tampilan teks di HTML, namun diantara sekian banyak format-format itu beberapa diantaranya ada yang menjadi dasar dalam penulisan sebuah teks baik teks dalam bentuk artikel, postingan, atau dokumen HTML lainnya. Dan berikut ini adalah format tampilan teks HTML yang paling mendasar, simple, mudah, dan sering digunakan dalam memodifikasi tampilan teks :

Baca selengkapnya »

Struktur Dasar Dokumen HTML

HTML merupakan singkatan dari Hyper Text Markup Language. HTML bukan merupakan bahasa pemrograman, melainkan suatu markup language (bahasa markah). HTML menggunakan markup tags atau biasa disebut HTML tags untuk mendeskripsikan halaman web. Tujuan dari sebuah web browser (seperti Internet Explorer, Firefox, Opera, Safari atau Google Chrome) adalah untuk membaca HTML documents kemudian menampilkannya sebagai halaman web. Browser tidak menampilkan HTML tags, tetapi menggunakan tag tersebut untuk menterjemahkan isi dari halaman web.


Struktur dasar dokumen HTML adalah sebagai berikut:

<html>
  <head>
    <title>Disini Judul Dokumen</title>
  </head>
  <body>
    Disini Body Dokumen
  </body>
</html>

Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:

a. Tag
Adalah teks khusus (markup) berupa dua karakter "<" dan ">",  sebagai contoh <body> adalah tag dengan nama body. Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka (start tag/opening tag)  dan tag penutup (end tag/closing tag). Pada tag penutup ditambahkan karakter "/" setelah karakter "<", sebagai contoh <body> ini adalah tag pembuka, dan </body> ini adalah tag penutup.

b. Element
Dokumen HTML didefinisikan menggunakan elemen-elemen HTML/HTML elements. Elemen HTML adalah semua yang terdapat diantara start tag sampai end tag.

Start tag *	Isi Elemen	End tag *
<p>	This is a paragraph	</p>
<a href="google.com" >	This is a link	</a>
<br />

Sintaks elemen HTML mempunyai ciri sebagai berikut:

• Elemen HTML dimulai dengan start tag/opening tag
• Elemen HTML diakhiri dengan end tag/closing tag
• Isi Elemen/element content adalah semua yang terdapat diantara start tag dan end tag
• Beberapa elemen HTML tidak memiliki isi atau konten
• Elemen yang tidak memiliki isi atau kosong ditutup pada awal tag
• Sebagian besar elemen HTML dapat diberi atribut tertentu

Dalam penulisan dokumen HTML dipastikan menggunakan banyak elemen. Suatu elemen dapat berada di dalam elemen lain atau elemen tersebut menjadi isi/konten pada elemen lain. Hampir semua elemen HTML dapat bersarang. Sehingga dapat disimpulkan bahwa dokumen HTML terdiri dari elemen HTML yang bersarang.

Contoh dokumen HTML:

<html>
  <head>
    <title>Disini Judul Dokumen</title>
  </head>
  <body>
    Disini Body Dokumen
  </body>
</html> 

Pada contoh diatas terdapat 4 buah elemen. Elemen-elemen tersebut adalah:

Elemen <title>. Elemen ini mendefinisikan suatu konten yaitu sebuah title pada dokumen HTML. Elemen ini dimulai dengan start tag <title> dan diakhiri dengan end tag </title>. Isi atau konten dari elemen ini adalah: Disini Judul Dokumen

<title>Disini Judul Dokumen</title>

Elemen <head>. Elemen ini mendefinisikan head/kepala dokumen HTML. Bagian ini berisi informasi umum tentang dokumen HTML. Informasi yang disediakan dalam elemen ini tidak ditampilkan di halaman web tetapi memberikan informasi kepada browser atau mesin pencari. Elemen ini dimulai dengan start tag <head> dan diakhiri dengan end tag </head>. Isi atau konten dari elemen ini adalah: elemen title (yang sudah dijelaskan diatas).

<head>
  <title>Disini Judul Dokumen</title>
</head>

Elemen <body>. Elemen ini mendefinisikan suatu konten yaitu body/tubuh dokumen HTML. Bagian ini adalah konten halaman web yang akan tertampil pada halaman web. Elemen ini dimulai dengan start tag <body> dan diakhiri dengan end tag </body>. Isi atau konten dari elemen ini adalah: Disini Body Dokumen

<body>
  Disini Body Dokumen
</body>

Elemen <html>. Elemen ini mendefinisikan sebuah dokumen HTML. Elemen ini dimulai dengan start tag <html> dan diakhiri dengan end tag </html>. Isi atau konten dari elemen ini adalah: elemen head dan elemen body (yang sudah dijelaskan diatas).

<html>
  <head>
    <title>Disini Judul Dokumen</title>
  </head>
  <body>
    Disini Body Dokumen
  </body> 
</html>

Elemen HTML yang tidak memiliki konten atau isi disebut empty element/elemen kosong. Elemen dapat ditutup pada awal tag. <br> adalah contoh elemen kosong yang tidak memerlukan end tag. <br> bermakna ganti baris. Pada XHTML, XML, dan versi HTML yang lebih baru, semua elemen harus ditutup dengan end tag. Cara yang tepat untuk menutup elemen kosong yang dapat diterima oleh HTML, XHTML dan XML adalah dengan menambahkan garis miring di awal tag, seperti <br />. Walaupun <br> terbukti berjalan baik disemua browser, menulis <br /> akan lebih baik.

Terkadang kita sering lupa memberi end tag pada suatu elemen. Seperti contoh dibawah ini:

<p>Paragraf pertama</p>
<p>Paragraf kedua

Hampir semua browser dapat menampilkan HTML dengan baik walaupun kita lupa memberi end tag pada suatu elemen HTML. Tetapi terdapat pula beberapa elemen yang akan menimbulkan kesalahan (errors) saat kita lupa memberikan end tag. Oleh karena itu, akan lebih baik kita tidak lupa menulis end tag pada suatu elemen.

c. Attribute
HTML Attributes atau atribut HTML adalah suatu informasi tambahan yang bisa disertakan pada suatu elemen HTML. Suatu elemen dapat memiliki atribut. Atribut ini memberikan informasi tambahan tentang elemen yang bersangkutan. Atribut selalu digunakan pada awal tag/start tag. Cara mendefinisikan atribut dengan memberikan informasi name dan value dari suatu elemen, seperti name="value".

Contoh Atribut :
Link HTML atau HTML Links didefinisikan dengan tag <a>. Alamat link inilah yang merupakan atribut.

<a href="http://www.belvatekindo.blogspot.com/">Belva Tekindo</a>

Jadi <a> merupakan elemen html, href adalah name atau nama atribut sedang Belva Tekindo adalah value atau nilai atribut.

Berikut adalah beberapa atribut standar yang hampir dipakai semua elemen:

Atribut	Nilai	Keterangan
class	class_rule atau style_rule	Kelas elemen
id	id_name	Nomor unik suatu elemen
style	style_definition	Definisi gaya atau style
title	tooltip_text	Tulisan yang akan tertampil pada tool tip

Nilai suatu atribut harus selalu dimulai dan diakhiri dengan tanda petik. Biasanya menggunakan tanda petik ("…"). Tanda petik ini mengapit petikan langsung dari suatu nilai elemen. Tanda petik tunggal juga diperbolehkan untuk digunakan walaupun dalam keadaan tertentu nilai suatu atribut bisa berisi tanda kutip, untuk itu di pergunakan tanda kutip tunggal yang mengapit petikan yang tersusun di dalam petikan lain.

Contoh :
name='Belva "Tekindo" Madiun'

Sangat disarankan untuk penulisan atribut dan nilainya tetap menggunakan huruf kecil karena pada versi HTML yang lebih baru (X)HTML meminta penulisan menggunakan huruf kecil.

Baca selengkapnya »

Instalasi dan Konfigurasi CodeIgniter

CodeIgniter adalah aplikasi open source yang berupa framework dengan model MVC (Model, View, Controller) untuk membangun website dinamis dengan menggunakan PHP. CodeIgniter memudahkan developer untuk membuat aplikasi web dengan cepat dan mudah dibandingkan dengan membuatnya dari awal. CodeIgniter dirilis pertama kali pada 28 Februari 2006. Pada saat tulisan ini di buat, CodeIgniter telah mencapai pada Versi 2.1.3.
 
Framework secara sederhana dapat diartikan kumpulan dari fungsi-fungsi/prosedur-prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih mempermudah dan mempercepat pekerjaan seorang programer, tanpa harus membuat fungsi atau class dari awal.

Ada beberapa alasan mengapa menggunakan Framework:

• Mempercepat dan mempermudah pembangunan sebuah aplikasi web.
• Relatif memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam sebuah framework (dengan syarat programmer mengikuti pola standar yang ada)
• Umumnya framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak perlu membangun dari awal (misalnya validasi, ORM, pagination, multiple database, scaffolding, pengaturan session, error handling, dll
• Lebih bebas dalam pengembangan jika dibandingkan CMS

Model View Controller merupakan suatu konsep yang cukup populer dalam pembangunan aplikasi web, berawal pada bahasa pemrograman Small Talk, MVC memisahkan pengembangan aplikasi berdasarkan komponen utama yang membangun sebuah aplikasi seperti manipulasi data, user interface, dan bagian yang menjadi kontrol aplikasi. Terdapat 3 jenis komponen yang membangun suatu MVC pattern dalam suatu aplikasi yaitu :

1. View, merupakan bagian yang menangani presentation logic. Pada suatu aplikasi web bagian ini biasanya berupa file template HTML, yang diatur oleh controller. View berfungsi untuk menerima dan merepresentasikan data kepada user. Bagian ini tidak memiliki akses langsung terhadap bagian model.
2. Model, biasanya berhubungan langsung dengan database untuk memanipulasi data (insert, update, delete, search), menangani validasi dari bagian controller, namun tidak dapat berhubungan langsung dengan bagian view.
3. Controller, merupakan bagian yang mengatur hubungan antara bagian model dan bagian view, controller berfungsi untuk menerima request dan data dari user kemudian menentukan apa yang akan diproses oleh aplikasi.

Dengan menggunakan prinsip MVC suatu aplikasi dapat dikembangkan sesuai dengan kemampuan developernya, yaitu programmer yang menangani bagian model dan controller, sedangkan designer yang menangani bagian view, sehingga penggunaan arsitektur MVC dapat meningkatkan maintanability dan organisasi kode. Walaupun demikian dibutuhkan komunikasi yang baik antara programmer dan designer dalam menangani variabel-variabel yang akan ditampilkan.

Ada beberapa kelebihan CodeIgniter (CI) dibandingkan dengan Framework PHP lain,

• Performa sangat cepat : salah satu alasan tidak menggunakan framework adalah karena eksekusinya yang lebih lambat daripada PHP from the scracth, tapi Codeigniter sangat cepat bahkan mungkin bisa dibilang codeigniter merupakan framework yang paling cepat dibanding framework yang lain.
• Konfigurasi yang sangat minim (nearly zero configuration) : tentu saja untuk menyesuaikan dengan database dan keleluasaan routing tetap diizinkan melakukan konfigurasi dengan mengubah beberapa file konfigurasi seperti database.php atau autoload.php, namun untuk menggunakan codeigniter dengan setting standard, anda hanya perlu merubah sedikit saja file pada folder config.
• Banyak komunitas: dengan banyaknya komunitas CI ini, memudahkan kita untuk berinteraksi dengan yang lain, baik itu bertanya atau teknologi terbaru.
• Dokumentasi yang sangat lengkap : Setiap paket instalasi codeigniter sudah disertai user guide yang sangat bagus dan lengkap untuk dijadikan permulaan, bahasanya pun mudah dipahami.
• Dan banyak lagi yang lainnya.

Pada artikel kali ini kita akan membahas tentang cara instalasi dan konfigurasi Codeigniter pada server lokal. Sebelum menginstall Codeigniter pastikan server lokal anda telah berjalan dengan baik. Dalam hal ini penulis menggunakan xampp sebagai server lokal. Berikut adalah langkah-langkahnya :

• Download Codeigniter di situs ini www.codeigniter.com.

• Buat sebuah folder di dalam folder server lokal anda (jika menggunakan xampp folder diletakkan didalam folder htdocs, jika menggunakan yang lain silakan disesuaikan), beri nama folder tersebut misalnya codeigniter. Kemudian ekstrak file Codeigniter yang telah di download ke dalam folder yang telah kita buat tadi. 

• Sekarang bukalah browser kesayangan anda dan jalankan CodeIgniter dengan mengetikkan http://localhost/codeigniter (sesuaikan dengan nama folder yang anda buat). Jika proses instalasi berhasil maka akan muncul halaman Welcome to CodeIgniter seperti berikut ini.

• Langkah selanjutnya adalah melakukan beberapa konfigurasi pada file CodeIgniter anda. Buka file config.php yang ada di dalam folder application/config. Pada bagian $config[‘base_url’] berfungsi untuk menentukan alamat URL utama pada aplikasi. Anda dapat mengisikannya dengan localhost/codeigniter (sesuaikan nama folder seperti pada saat mengupload file CI ke server). Namun, pada CodeIgniter versi–versi terbaru (2.0 keatas) anda juga dapat mengosongkan saja bagian ini. Codeigniter akan secara otomatis mendeteksi base url aplikasi anda.

  |--------------------------------------------------------------------------
  | Base Site URL
  |--------------------------------------------------------------------------
  |
  | URL to your CodeIgniter root. Typically this will be your base URL,
  | WITH a trailing slash:
  |
  | http://example.com/
  |
  | If this is not set then CodeIgniter will guess the protocol, domain and
  | path to your installation.
  |
  */
  $config['base_url'] = '';
  

• Selanjutnya buka file database.php pada folder application/config. File ini berfungsi untuk mengatur koneksi database pada aplikasi anda. Pada CodeIgniter, anda tidak perlu menuliskan script program dari awal dan memanggilnya berulang-ulang untuk melakukan koneksi database.

  $active_group = 'default';
  $active_record = TRUE;
  
  $db['default']['hostname'] = 'localhost';
  $db['default']['username'] = '';
  $db['default']['password'] = '';
  $db['default']['database'] = '';
  $db['default']['dbdriver'] = 'mysql';
  $db['default']['dbprefix'] = '';
  $db['default']['pconnect'] = TRUE;
  $db['default']['db_debug'] = TRUE;
  $db['default']['cache_on'] = FALSE;
  $db['default']['cachedir'] = '';
  $db['default']['char_set'] = 'utf8';
  $db['default']['dbcollat'] = 'utf8_general_ci';
  $db['default']['swap_pre'] = '';
  $db['default']['autoinit'] = TRUE;
  $db['default']['stricton'] = FALSE;
  

  • $db['default']['username'] = '';
    Isikan dengan nama user database anda
  • $db['default']['password'] = '';
    Isikan dengan password database anda
  • $db['default']['database'] = '';
    Isikan dengan nama database anda
  • $db['default']['dbdriver'] = 'mysql';
    Isikan dengan driver database yang akan anda gunakan
• Selanjutnya buka file routes.php pada folder application/config. Kemudian pada bagian $route['default_controller'] anda dapat mengisikannya dengan file controller yang akan dijalankan secara default. Secara default akan bernilai welcome, yang berarti saat aplikasi pertama kali dijalankan (saat anda mengetikkan localhost/nama_folder_ci pada browser) maka aplikasi akan menjalankan file controller bernama welcome.php

  $route['default_controller'] = "welcome";
  $route['404_override'] = '';
  

Sebenarnya masih banyak file-file konfigurasi lainnya untuk lebih memudahkan anda dalam mendevelop sebuah aplikasi berbasis web. Namun penjelasan-penjelasan tersebut diatas adalah konfigurasi dasar yang paling umum.

Baca selengkapnya »

Sistem Informasi Manajemen Sekolah

Sekolah adalah suatu instansi yang bergerak dalam bidang pelayanan pendidikan kepada siswa. Saat ini, masih banyak sekolah yang belum menerapkan dan memanfaatkan keberadaan teknologi informasi terintegrasi guna mendukung aktifitas kerja sehari-hari, sehingga sebagian besar aktifitas operasional pelayanan pendidikan masih dilakukan secara manual, baik aktifitas manajemen pelayanan pendidikan maupun aktifitas manajemen akuntansi keuangan.

Seiring dengan perjalanan kegiatan operasional sekolah, masih banyak sekali dijumpai kendala yang menimbulkan permasalahan yang mengganggu aktifitas sehari-hari, karena sebagian aktifitas masih dilakukan secara manual. Hal ini tentunya akan mempersulit dan memperlambat pegawai/guru di sekolah untuk melayani siswa, baik yang akan melakukan presensi/kehadiran siswa, data akademik siswa, transaksi keuangan sekolah, dan proses yang ada di sekolah yang diperuntukkan bagi siswa.

Dibutuhkan solusi untuk mengatasi permasalahan tersebut diatas, salah satunya adalah Sistem Informasi Manajemen (SIM) Sekolah. Sistem Informasi Manajemen Sekolah ini dirancang sebagai alat pemrosesan data sekolah berupa perangkat lunak berbasiskan web untuk menunjang seluruh kegiatan sekolah yang mempunyai tujuan-tujuan sebagai berikut :

• Tersedianya Informasi utk mendukung perencanaan dan pengambilan keputusan bagi kepentingan sekolah ke depan
• Tersedianya layanan informasi bagi komunitas sekolah seperti guru, siswa, staf, pimpinan, orang tua, alumni dan masyarakat pada umumnya
• Memberikan nilai tambah bagi profil sekolah sehingga bisa meningkatkan daya saing yang lebih baik
• Membantu dalam proses pengadministrasian aktifitas operasional sekolah
• Meningkatkan pengawasan administrasi yang lebih baik

Tujuan-tujuan diatas sesuai dengan perkembangan yang dinamis bagi keperluan pengembangan sekolah di masa datang yaitu fleksibilitas, akuntabilitas dan transparansi sehingga sekolah diharapkan tidak akan ketinggalan jaman dalam mempersiapkan anak didiknya menghadapi era global yang sudah berjalan dengan sangat cepat ini. Dalam pengembangan SIM Sekolah, aplikasi berbasis web ini memiliki keunggulan-keunggulan diantaranya :

1. Berbahasa Indonesia, hal ini untuk memudahkan pengguna dalam mengoperasionalkan SIM Sekolah ini
2. Dikembangkan dalam sistem yang modular sekaligus terintegrasi. Modular artinya setiap modul bisa berdiri sendiri, sehingga user dapat memilih modul-modul yang diinginkannya sesuai dengan budget. Pada saat yang bersamaan modul-modul tersebut bisa saling berinteraksi bila user membeli dua atau lebih modul (sistem otomatis menjadi terintegrasi).
3. Jumlah pengguna tidak dibatasi, karena sistemnya menggunakan basis web sehingga siapa saja yang terhubung ke jaringan server Sistem Informasi Manajemen Sekolah bisa mengakses melalui browser
4. Dibangun dengan teknologi web berbasiskan AJAX. Dengan teknologi AJAX resource (bandwith) yang diperlukan lebih lebih kecil sehingga kemampuan untuk diakses jauh lebih baik
5. Dibangun dengan desain keamanan yang optimum untuk menjamin bahwa aplikasi diakses oleh user yang berwenang. Setiap user dipetakan pada role tertentu dan hanya bisa mengakses halaman-halaman tertentu saja. Halaman-halaman yang bisa diakses bisa dikonfigurasi sesuai kehendak user
6. Memberikan solusi dalam satu kesatuan sistem secara keseluruhan sehingga meningkatkan efisiensi operasional dan menghasilkan informasi dan laporan yang komprehensif (Front desk – Back End)
7. Dirancang dengan arsitektur yang difungsikan untuk pengaksesan data dan transaksi dengan kapasitas besar yang meliputi business rules, user level, security dan metodologi programming
8. Kemampuan menyimpan data dan skalabilitas dapat ditingkatkan dan dikembangkan sesuai dengan teknologi
9. Memiliki fitur backup database secara manual dan otomatis sehingga keamanan data bisa lebih terjamin, dan restore database untuk perbaikan data secara otomatis jika terjadi kerusakan database sehingga meminimalkan ketergantungan dengan vendor

Dari tujuan dan keunggulan yang dicanangkan diatas, ada 8 sub-sistem yang semuanya akan terintegrasi saat dioperasionalkan, yaitu :

1. Sistem Informasi Profil (Portal Sekolah) : yang nantinya akan berisi Profil Sekolah, Visi, Misi, Fasilitas, program-program, Berita/Artikel, kegiatan/agenda, informasi kesiswaan, forum, galeri foto, dan buku tamu.
2. Sistem Informasi Personalia : yang berisi Data Guru dan Staf untuk mengelola informasi penting tentang tenaga pengajar maupun staf yang terdaftar di sekolah, seperti biodata, pangkat, jabatan, alamat, status bekerja, jam kerja, riwayat pendidikan, riwayat karir, riwayat pelatihan, tingkat kehadiran, info gaji dan lain-lain
3. Sistem Informasi Sarana dan Prasarana : berisi mengenai Manajemen Aset sekolah mulai dari penomoran aset, lokasi aset, penggunaan aset dan jumlah aset
4. Sistem Informasi Keuangan : akan berisi data pembayaran biaya pendidikan siswa, seperti SPP, uang pembangunan, dan biaya-biaya lain. Data pembayaran tersebut akan ditampilkan dalam format laporan yang akan memudahkan pihak sekolah dalam melakukan pemeriksaan dan evaluasi, seperti :
   • Laporan siswa yang belum melakukan pembayaran
   • Laporan siswa yang sudah melakukan pembayaran
   • Laporan-laporan yang berkenaan dengan honor guru/karyawan
5. Sistem Informasi Siswa: akan berisi data Penerimaan Siswa Baru, Biodata siswa, Pengelolaan Kenaikan Kelas Siswa (manual maupun otomatis), Pengelolaan Kelulusan/Alumni, Pencetakan Kartu Siswa, dan Pengelolaan Kedisiplinan Siswa
6. Sistem Informasi Akademik : berisi Pengelolaan Kurikulum, Penjadwalan Satuan Pengajaran, Pengelolaan Nilai Akademik Siswa dan Laporan Hasil Studi Siswa, dan Presensi Siswa dalam kegiatan PBM
7. Sistem Informasi Perpustakaan : berisi Pengelolaan buku, Pengelolaan anggota, Transaksi peminjaman dan pengembalian buku, dan Manajemen Arsip Digital
8. Sistem E-Learning : berisi Proses pendidikan menggunakan sistem online maupun intranet bagi siswa dan guru berupa modul sekolah, tanya-jawab, kuis online, maupun tugas-tugas.

Fitur yang tersedia adalah:

1. Master Data
   • Identitas Sekolah
   • Jenis Kelas
   • Agama
   • Tahun Pelajaran
   • Kelompok Pembayaran
   • Point Pelanggaran
   • Extrakurikuler
   • Jabatan
   • Jenis Absensi
   • Jenis Pengeluaran Sekolah
   • Mapel
   • Tahun Aktif
   • Setting Bayar
   • Setting Wali Kelas
   • Setting Pembayaran
   • Setting Guru
   • Setting User
2. Input Data
   • Input data siswa
   • Input Guru dan Karyawan
   • Input Absensi
   • Input Absensi Manual
   • Cetak Absensi
   • Impor data Siswa
3. Adminsitrasi
   • Buku Induk Siswa
   • Buku Induk Alumni
   • Kelas Siswa
   • Pembayaran SPP
   • Pengeluaran Sekolah
   • Mutasi Siswa
   • Proses naik kelas
   • Proses lulus siswa
4. Perpustakaan
   • Pengunjung perpus
   • Peminjam buku
   • Pengembalian buku
   • Top buku dan siswa
   • Kategori buku
   • Laporan Grafik
   • Input buku
   • Laporan Tabel
   • Jurnal Perpus
5. Pembukuan
   • Buku Pembantu Bank
   • Buku Pembantu Pajak
   • Buku Pembantu Tunai
   • Buku Khusus Pajak
6. Nilai Siswa
   • Isi Tugas Siswa
   • KKM
   • Daftar Nilai Akhir
   • Nilai Harian
   • Cetak Rapot
7. BK ( Bimbingan Konseling)
   • Buku Pelanggaran siswa
   • Buku Konseling Siswa

Baca selengkapnya »

Cara Membuat Readmore Otomatis di Blogspot Menggunakan Javascript

Rasanya kurang menarik apabila dalam halaman utama (Home/Beranda) sebuah Blog berisi postingan utuh yang panjang, ini karena akan menyita ruang halaman utama yang seharusnya menggambarkan sebagian besar dari postingan kita. Untuk itu perlu adanya pemenggalan postingan agar halaman utama blog kita menjadi lebih menarik. Salah satu cara untuk membuat pemenggalan postingan (Readmore) yang bisa dilakukan secara otomatis adalah dengan menggunakan Javascript.

Cara kerja dari script ini adalah membuang tag html, mengambil beberapa huruf saja, menambahkan image serta menambahkan hyperlink yang mengarahkan pada postingan yang sebenarnya.

Fungsi dari pemasangan Readmore:

• Menghemat Ruang pada tampilan halaman utama sebuah website. 
• Menjadi Lebih Elegant dan Interaktif. 
• Membuat pengunjung membaca artikel tersebut hingga selesai. 
• Menambah pageviews artikel yang dibaca oleh pengunjung. 
• Menambah Link Anchor terhadap keyword judul.

<script type='text/javascript'>
 summary_noimg = 550;
 summary_img = 450;
 img_thumb_height = 150;
 img_thumb_width = 200; 
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script> 

Baca selengkapnya »