Friday, October 14, 2016

Sistem Informasi Klinik Dengan PHP Dan MySql

Assalamualaikum wr.wb...
Pada jaman teknologi saat ini perkembangan aplikasi sangat pesat baik aplikasi khusus seperti system informasi perkantoran ataupun umum seperti system operasi windows. Kebutuhan akan system yang dapat menujang kegiatan bisnis atau process usaha tidak bisa dihindarkan lagi, klinik yang merupakan kepanjangan dari rumasakit yang lebih dekat kepada konsumen (kepada masyarakat) tidak mau ketinggalan, bisa kita temukan dimana-mana, jika sebuah klinik menginginkan perkembangan yang signifikan maka tidak bisa mengabaikan yang namanya system informasi.

Berdasarkan kondisi diatas kiranya system informasi klinik cukup bagus dan banyak di cari orang sehingga pada postingan kali ini saya akan share sebuah aplikasi Sistem Informasi Clinik dengan PHP dan MySql. Aplikasi ini memang masih sangat sederhana dan jauh dari kata sempurna, tetapi cukup membantu untuk latihan bagi para pemula. Aplikasi ini dibangun dengan PHP 5.3 dan MySql versi 5.4. Tampilan halaman pertama terlihat seperti pada gambar di atas. Pada halaman pertama user bisa melakukan registrasi dan melihat dokter jaga.

Buat anda yang baru pertama kali belajar dan masih membutuhkan aplikasi yang sederhana tapi sudah sedikit terstruktur ini cocok buat kamu. Tetapi bagi kamu yang sudah PRO saya rasa ini tidak cocok, karena masih terlalu sederhana.

Aplikasi ini terdiri dari empat level, yaitu:
  • Superadmin
Supeeradmin  merupakan level yang paling tinggi dalam hak acess aplikasi, superadmin dapat mengakses semua menu dan semua data. Biasanya superadmin tidak digunakan untuk transaksi tapi hanya digunakan untuk setting-setting saja dan sebagai pemberi fasilitas.
  • Kasir
Kasir merupakan level yang menjalankan transaksi, acess ini biasa digunakan untuk transaksi sehari-hari. 
  • Gudang
Gudang memiliki akses yang lebih ke kontrol barang dan ketersedian barang di gudang. Bagian gudang tidak bisa acess seperti kasir begitupun bagian kasir tidak bisa acess bagian gudang
  • Pengguna Umum
Level pengguna umum merupakan level awal ketika pengguna baru mengacess system. Setelah pengguna login maka dia bisa melihat riwayat pengobatan dan melihat jadual dokter jaga. sehingga dia bisa mengetahui penyakit apa yang pernah di detita dan obat apa yang pernah diberikan.
Tampilannya kira-kira sebagai berikut:

gb. form admin

 gb. form kasir
gb.form gudang

gb. form pengguna umum

Untuk lebih jelas silahan di download projeknya pada link dibawah ini :

Klik Tombol Dibawah Untuk Memunculkan Link Download :


Tutorial Cara Download File :

untuk login ke aplikasi gunakan password dibawah ini.
username : admin
password : admin

Untuk databasenya terdapat pada filder DB
Selamat mencoba ......
Jika ada pertanyaan silahkan isi pada kolom komentar.


Thursday, October 13, 2016

Mencegah Spasi Kosong Pada Input Text HTML

Ketika saya mengerjakan sebuah projek tiba tiba muncul error array list, setelah di periksa ternyata isinya tidak sesuai. Usut demi usut ketemulah ternyata ada code yang mengunakan spasi kosong. Setelah saat itu baru mikir gimana ya caranya supaya mencegah input dengan spasi kosong.
 Ada beberapa cara untuk mengatasi spasi kosong, kita bisa mengunakan replace caracter, sebelum data disimpan spasi kosong itu dihapus dulu. Namun cara ini ada kelemahan, apa kelemahannya? akan sangat mungkin user merasa kaget. Dia memasukan kalimat dengan tambahan spasi tapi ketika tersimpan tidak ada spasinya, hal seperti ini bisa membuat user bertanya-tanya. jadi sebaiknya tidak mengunakan cara ini atau secara langsung menghapus spasinya tanpa ada informasi kepada user.
yang kedua kita juga bisa mengunakan replace carakter mengunakan javascript namun hal ini juga jangan langsung hilangkan tanpa pemberitahuna kepada pengguna.

Dibawah ini akan kita coba buat validasi input, jika user menambahkan spasi kosong maka akan muncul pesan peringatan tapi tanpa kita langsung menghapusnya. Halaman tidak akan jadi disubmit tapi akan di kembalikan ke halaman input supaya pengguna memperbaikinya terlebih dahulu.

Cara seperti ini saya rasa lebih informatif bagi pengguna, karena yang menghilangkan spasi tadi pengguna langsung, system hanya memberikan peringatan bahwa tidak boleh ada spasi kosong.

walaupun hal seperti ini juga ada kelemahan diantaranya user bisa melakukan inspect element dan melakukan edit pada palidasi java script.

kelemahan kedua juga jika user melakukan inactive javascript validasi ini juga tidak akan bekerja.

Mari kita mulai untuk membuatnya, disini kita akan mengunakan HTML dan JAVASCRIPT
  1. Kita buat HTML file. 
Untuk pembuatannya saya mengunakan Notepad ++ supaya lebih mudah karena dibatu pewarnaan, berikut codenya.


 <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
<form name="myForm">
 Nama : <input type="text" name="name" id="name">
 <input type="button" value="submit" onclick="checkName();">
</form>
</body>
</html>

Selanjutnyakita tambahkan code javascript untuk melakukan validasi tepat dibawah tag <body>


  <script>
function checkName() {
    var x = document.myForm;
    var input = x.name.value;
    var errMsgHolder = document.getElementById('nameErrMsg');
    if (input.length < 3) {
        alert("pajang kurang dari 3");
        return false;
    } else if (!(/^\S{3,}$/.test(input))) {
        alert("Tidak boleh ada spasi");
        return false;
    } else {
        alert("Berhasil !");
        return undefined;
    }
}
</script>

Code Lengkapnya sbb:

  <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
<script>
function checkName() {
    var x = document.myForm;
    var input = x.name.value;
    var errMsgHolder = document.getElementById('nameErrMsg');
    if (input.length < 3) {
        alert("pajang kurang dari 3");
        return false;
    } else if (!(/^\S{3,}$/.test(input))) {
        alert("Tidak boleh ada spasi");
        return false;
    } else {
        alert("Berhasil !");
        return undefined;
    }
}
</script>
<form name="myForm">
 Nama : <input type="text" name="name" id="name">
 <input type="button" value="submit" onclick="checkName();">
</form>
</body>
</html>

 Hasil tampilan ketika kita melakukan input salah sebagai berikut

Cara Memasukan Code Program Kedalam Postingan Blog Dengan Tampilan Seperti Pada Editor Code

Hai blogger semua pernahkan anda melihat postingan source code orang lain seperti pada editor (ada pewarnaan), postingan kali ini saya mau share cara membuat yang seperti itu. Kita akan mengunakan SyntaxHiglighter  sebagai pluginnya. Sebenarnya ada banyak cara untuk membuat seperti itu tetapi ini menurut saya yang paling mudah. Langkah-langkahnya adalah sebagai berikut.

  1. Login ke akun blogger anda.
  2. Masuk ke menu Tempalte -> Edit Html 
  3. Cari code </head> copy dan pastekan code dibawah ini tepat di atas code </head>
  4. <script src="https://drive.google.com/open?id=0Bzv7Rxeq_p6HSVBnM25ESEVlcEk"></script>
    hljs.initHighlightingOnLoad();
    

  5. Cari kode ]]></b:skin> atau </style>
    Keterangan : Pilih salah satu, jika tidak bekerja apabila diletakkan pada ]]></b:skin> maka letakkan pada </style>
  6. Copy CSS di bawah ini dan paste di atas kode]]></b:skin> atau </style>
  7. pre,i[rel="pre"] {padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:11px;color:#839496;font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;line-height:1.4em;position:relative;white-space: pre;word-wrap: normal;white-space:pre;overflow:auto}
    pre.line-number {background:#2f3741 url(https://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none;}
    pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute;}
    pre[data-codetype="CSS"]{border-left-color:#5fbbba}
    pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
    pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
    pre[data-codetype="JQuery"]{border-left-color:#99c262}
    pre.line-number[data-codetype]:before {content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:12px;text-transform:uppercase;background-color:#41749f;color:white}
    pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
    pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
    pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
    pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
    code {font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color: #d14;}
    #comments code {color:#bbbb6d;}
    pre code {padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block;}
    pre .line-number {float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}
    pre .comment,
    pre .template_comment,
    pre .diff .header,
    pre .doctype,
    pre .pi,
    pre .lisp .string,
    pre .javadoc {color: #586e75;font-style: italic;}
    pre .keyword,
    pre .winutils,
    pre .method,
    pre .addition,
    pre .css .tag,
    pre .request,
    pre .status,
    pre .nginx .title {color: #859900;}
    pre .number,
    pre .command,
    pre .string,
    pre .tag .value,
    pre .rules .value,
    pre .phpdoc,
    pre .tex .formula,
    pre .regexp,
    pre .hexcolor {color: #7195a3;}
    pre .title,
    pre .localvars,
    pre .chunk,
    pre .decorator,
    pre .built_in,
    pre .identifier,
    pre .vhdl .literal,
    pre .id,
    pre .css .function {color: #569dcf;}
    pre .attribute,
    pre .variable,
    pre .lisp .body,
    pre .smalltalk .number,
    pre .constant,
    pre .class .title,
    pre .parent,
    pre .haskell .type {color: #aa985a;}
    pre .preprocessor,
    pre .preprocessor .keyword,
    pre .shebang,
    pre .symbol,
    pre .symbol .string,
    pre .diff .change,
    pre .special,
    pre .attr_selector,
    pre .important,
    pre .subst,
    pre .cdata,
    pre .clojure .title,
    pre .css .pseudo {color: #509a55;}
    pre .deletion {color: #dc322f;}
    pre .tex .formula {background: #073642;}
    
  8. Untuk mengaktifkan syntax highlighter di dalam komentar tambahkan JavaScript di bawah ini di atas kode</body>
  9. <script type='text/javascript'>
      $(&#39;;i[rel=&quot;pre&quot;]&#39;).replaceWith(function() {
        return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;);
        });
    </script>
    
  10. Kemudian simpan template. 
  11. Setelah disimpan kita sudah bisa mengunakannya, caranya tambahkan tag dibawah ini pada postingan code kita

    <code><pre>...Simpan kodenya disini...</pre></code>
    

    Selamat mencoba....

Monday, January 27, 2014

System Perawatan Aset Dengan Java MySql diengkapi barcode

Aplikasi ini saya buat mengunakan Java dan MySQL. Teknologi yang digunakan adalah persintance, aplikasi ini dilengkapi juga dengan barcode jadi bisa di buat barcodenya dan dibaca dengan barcode reader. Aplikasi ini sebenarnya awalnya hanya untuk nyobain barcode saja, eh ternyata ada yang butuh juga.
untuk tampilan loginnya kira-kira seperti berikut :

Untuk process login di lengkapi dengan keamanan yaitu enkripsi password, jadi jika kita lihat langsung dari database password yang digunakan tidak bisa langsung kita pakai untuk login
Pada bagian atas halaman utama terdapat menu utama yang dapat diacess berdasarkan level pengguna, pengguna yang login sebagai admin dengan penguna biasa akan berbeda.
Kita lihat menu application, menu ini berisi ubah password logout dan keluar dari aplikasi.
Selanjutnya kita masuk ke menu master data, menu ini berisi data data yang digunakan sebagai master penunjang process transaksi. Dalam menu ini diantraranya terdapat master alat, master employee dan untuk generate barcode.
Menu selanjutnya adalah menu utama atau inti dari aplikasi ini, pada menu ini terdapat tools request, material request dan loan tools. Mari kita bahas satu persatu.
  1. Tools Request.
Menu ini digunakan untuk melakukan request alat-alat yang dibutuhkan tetapi belum ada di gudang alat, jika setiap kebutuhan alat dilakukan request disini maka setiap akhir bulan atau awal bulan kita bisa menyiapan stok alat.
      2. Material Request
Menu ini digunakan untuk request material penunjang pekerjaan seperti ampelas gemuk dll. Pada prinsipnya ini sama dengan Tools request.
      3. Loan Tools
Menu ini digunakan untuk mencata keluar masuk alat dari gudang, untuk processnya kita bisa membuat barcode pada alat dan barcode pada ID Cart Employee


Ada dua menu lagi yang belum kita bahas yaitu menu management dan report, menu management ini digunakan untuk melakukan audit alat tiap bulannya apakah ada yang hilang atau ada yang rusak.
Ini contoh pada menu report peminjaman.
Ini contoh reprt barcode alat sengaja nama companynya saya tutupi :D
Contoh ID Cart yang dilengkapi barcode
Untuk lebih jelasnya silahkan download pada link di bawah, jika ada kesulitan silahkan sampaikan pada kolom komentar.


Klik Tombol Dibawah Untuk Memunculkan Link Download :


Untuk login ke aplikasi gunakan password dibawah ini.
username    : asep
password   : asep

Tutorial Cara Download File :


Bagi anda yang akan mengembangkan atau memodifikasi bisa mengunakan Netbeans sebagai IDE, karena aplikasi ini dibuat dengan netbeans.