Thursday, July 5, 2018

Tree Menu Dinamis Dengan PHP MySQL dan JSTree


Assalamualakum wr.wb...
Hai blogger semua, kesempatan ini  saya akan sharing cara membuat Three Menu Dinamis Dengan PHP MySQL dan JSTree.
Tampilan menu berbentuk pohon atau sering disebut tree menu dapat membuat menu yang begitu banyak lebih terlihat sedrhana, Cara ini banyak digunakan oleh para pengembang aplikasi atau pengembang software.
Oleh karena itu saya rasa share tutorial untuk membuat tree menu bisa bermanfaat buat yang membutuhkan, terutama bagi yang baru belajar pertman kali.
Tidak usah berlama lama langsung saja kita praktek.
Pertama buat database baru dengan nama dynamicmenu dan tabel baru dengan nama simmenu. Database dynamicmenu ini yang nanti akan kita gunakan untuk menyimpan tabel simmenu dan tabel simmenu ini yang akan kita gunakan untuk menampung seluruh data menu yang akan kita buat.
Pertanyaannya kenapa kita mengunakan tabel tidak ditulis manual saja pada sourcecode?

Alasannya dengan cara disimpan pada database ini atau tabel kita bisa membuat setting menu lebih dinamis. Kita bisa membuat relasi tabel dengan hak acess tiap pengguna. Dibandingkan dengan menyimpan langsung pada code program, Cara ini jauh lebih sederhana dan lebih mudah.

Detail silahkan download detail pada tombol dibawah.

Baca Juga:

Selanjutnya buat projek baru dengan susunan direktory seperti gambar berikut.

File DBConnection kita gunakan untuk melakukan koneksi dengan database dan tabel yang sebelumnya kita sudah buat. Oh iya untuk design tabel dan susunan field atau isi data bisa kamu langusng download saja pada file dibawah, jika di tulis disini rasanya akan terlalu panjang.

Source Code DBConnection.php


class DBConnection {

    //put your code here
    private $host = "localhost";
    private $dbName = "dynamicmenu";
    private $usr = "root";
    private $pwd = "root";

    public function getConnection() {
        try {
            $conn = new PDO("mysql:host=$this->host;dbname=$this->dbName", $this->usr, $this->pwd);
            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        } catch (PDOException $e) {
            echo "Connection failed: " . $e->getMessage();
        }
        return $conn;
       
    }
   

}

File MenuDao.php akan kita gunakan untuk melakukan manipulasi database diantaranya select, insert update dan delete kalau orang sering bilang CRUD. Cara ini mungkin bagi kamu yang tidak biasa mengunakan OOP akan sedikit bikin pusing, tapi jika sudah biasa cara ini malah membuat program kita menjadi lebih terstruktur. Tiap hal yang berhubungan dengan data acess object akan dilakukan disini (tidak ada select pada halaman tampilan).
Code MenuDao.php

class MenuDao {

    private $connection;

    //put your code here
    public function __construct() {
        $con = new DBConnection();
        $this->connection = $con->getConnection();
    }
    
    function __destruct() {
        $this->connection =null;
    }
    
    public function getMenuById() {
        try {
            $listmenu = array();
            $sql = "select * from simmenu where is_active=1 order by ordered";
            $stmt = $this->connection->prepare($sql);
            $stmt->execute();
            foreach ($stmt->fetchAll() as $k => $v) {
                $menu = new Menu();
                $menu->setMenuId($v['menu_id']);
                $menu->setMenuName($v['menu_name']);
                $menu->setParent($v['parent']);
                $menu->setIcon($v['icon']);
                $menu->setLink($v['link']);
                $listmenu[] = $menu;
            }
            return $listmenu;
        } catch (Exception $exc) {
            echo $exc->getTraceAsString();
        }
    }

}

File Menu.php kita gunakan untuk menampung objek menu, nantinya setiap process baik mengambil data atau mengirim data akan selalu melibatkan objek ini.
Code Menu.php

class Menu {
    //put your code here
    private $menuId;
    private $menuName;
    private $parent;
    private $icon;
    private $link;
    private $selected;
    
    function getSelected() {
        return $this->selected;
    }

    function setSelected($selected) {
        $this->selected = $selected;
    }
    
    function getMenuId() {
        return $this->menuId;
    }

    function getMenuName() {
        return $this->menuName;
    }

    function getParent() {
        return $this->parent;
    }

    function getIcon() {
        return $this->icon;
    }

    function getLink() {
        return $this->link;
    }

    function setMenuId($menuId) {
        $this->menuId = $menuId;
    }

    function setMenuName($menuName) {
        $this->menuName = $menuName;
    }

    function setParent($parent) {
        $this->parent = $parent;
    }

    function setIcon($icon) {
        $this->icon = $icon;
    }

    function setLink($link) {
        $this->link = $link;
    }

}

File index.php nah pada file ini baru akan dilakukan process penggabungan semuanya dari file-file yang suah kita buat sebelumnya sekaligus kita tampilkan hasilnya.
code index.php

    require_once './config/DBConnection.php';
require_once './model/Menu.php';
require_once './dao/MenuDao.php';
$menudao = new MenuDao();
$menuById = $menudao->getMenuById();
//untuk mendapatkan menu
function has_children($rows, $id) {
    foreach ($rows as $row) {
        if ($row->getParent() == $id)
            return true;
    }
    return false;
}

function build_menu($rows, $parent = 0) {
    $result = "
    "; foreach ($rows as $row) { if ($row->getParent() == $parent) { if ($row->getLink() == "") { $result .= "
  • {$row->getMenuName()}"; } else { $result .= "
  • getLink()}')\">{$row->getMenuName()}"; } if (has_children($rows, $row->getMenuId())) $result .= build_menu($rows, $row->getMenuId()); $result .= "
  • "; } } $result .= "
"; return $result; }




Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Thursday, October 5, 2017

Tutorial Maria DB / MySQL



Persiapan Yang Dibutuhkan

Sebelum kita memulai membuat database anda harus menyiapkan beberapa hal, daintaranya adalah installer MariaDB. Untuk mendapatkan installer maria DB anda bisa kunjungi link berikut
https://mariadb.org/download/
Jika anda sudah berhasil mendownloadnya selanjutnya lakukan penginstallan, caranya tinggal klik dua kali pada file installer dan ikuti langkah-langkahnya.
Jika sudah berhasil anda akan mendapatkan menu sebagai berikut
gb. Start Menu MariaDB
Anda akan mendapatkan HeidiSQL sebagai GUI tools untuk management MariaDB dan anda juga akan mendapatkan MariaDB CMD yang fungsinya sama tetapi caranya saja yang berbeda.

Baca Juga :

 

Tampilan awal Heidi SQL kita-kira seperti gambar diatas, selanjutnya kita tinggal memasukan credential MariaDB yang sudah kita buat ketika melakukan penginstalan.
Jika anda sudah berhasil login tampilannya sebagai berikut
Selanjutnya kita akan coba login dengan mengunakan MariaDB CMD dengan cara buka start menu dan pilih mariaDB CMD
Masukan password MariaDB, jika berhasil tampilannya sebagai berikut
Selanjutnya kita akan membuat database baru dan table baru

Sunday, October 1, 2017

Edit Jasper Report Dengan Ireport Plugin Netbeans

Assalamualaikum blogger semua, karena banyak yang bertanya bagaimana cara ubah report java dengan Netbeans dan Ireport.
Postingan ini adalah lanjutan dari sebelumnya mengenai Aplikasi Inventori Dengan Java dan Mysql
Ok kita mulai saja langkah-langkahnya
  • Siapkan plugin ireport untuk Netbeans
Silahkan download dari link sbb:
http://plugins.netbeans.org/plugin/4425/ireport

Atau anda bisa ketikan di mesin pencarian dengan key word  Ireport Netbeans Plugins
  • Selanjutnya kita integrasikan dengan netbeans
Baca Juga :

Selanjutnya tingal next next saja, dan jika sudah selesai tampilannya sbb:



  • Lakukan edit field report dengan ireport
Sebelumnya kita akan test tampilan report yang akan di edit, Kita akan ubah pada bagian header seperti ditunjukan pada gambar sbb.
selanjutnya kita buka file dengan nama LapAdmin.JRXML dengan cara double click.

Setelah melakukan pengeditan tekan tombol save
Selanjutnya adalah process yang paling penting yang sering orang banyak tanya kesaya yaitu kompile hasil edit.
Selanjutnya jalankan kembali programnya, dan hasilnya sbb:
Hasilnya sesuai dengan edit yang dilakukan. Selamat mencoba...





Silahkan juga lihat contoh program java dengan barcode  contoh program java dengan barcode




Wednesday, December 28, 2016

Ebook Android, Ajax, Corel, CSS, HTML, Javascript, PHP Dan Java

Assalamualakum Wr.Wb..
Pada kesempatan ini saya mau sharing ebook Teknik Informatika, mudah-mudahan berguna bagi yang membutuhkan
Baca Juga :

Friday, November 25, 2016

Sistem Informasi Akademik Dengan PHP dan MySql

Assalamualaikum Wr.Wb.
Setiap organisasi atau lembaga pasti membutuhkan system untuk mengatur supaya lebih tertata dengan baik, tidak terkecuali lembaga pendidikan atau pondok pesantren. Sebuah lembaga pendidikan atau pondok peantren akan lebih tertata jika sudah mengunakan system. Dengan system itu dia bisa mengatur siapa saja siswanya mengatur pengajaran penjadualan izin dan lain sebagainya. Tidak hanya sampai disitu dengan ananya sistem akan mempermudah management melakukan review baik setahun kebelakang atau beberapa tahun kebelakang. bayangkan jiak tanpa adanya system, kita butuh data beberapa tahun kebelakang mau cari dimana dari kertas-kertas mungkin saja tapi berapa lama dan belum tentu ada.
Pada kesempatan ini saya mau sharing sebuah aplikasi untuk mengatur pendidikan atau sering disebut Sistem Informasi Akademik (SIA)

Sistem Informasi ini masih sanget sederhana dan perlu dikembangkan lebih lanjut, tapi bagi kamu yang baru belajar ini sudah lumayan karena sudah ada data process dan report.

username  : asep
password : 1234

Baca Juga :


Tampilan Home
Tampilan Data Personal


Edit Data Personal
 Report Resume Personal

Selamat mencoba..
bagi kamu yang sudah berhasil mengembangkan aplikais ini jangan lupa dishare kembali, supaya lebih bermanfaat lagi.

Klik Tombol Dibawah Untuk Memunculkan Link Download :


Tutorial Cara Download File :

Wednesday, November 16, 2016

Mega Menu Toko Online Dengan CSS, HTML dan BOOTSTRAP

Assalamualaikum Wr.Wb...
Pada kesempatan ini saya mau sharing cara membuat mega menu untuk toko online dengan Bootstrap. Tidak bisa kita pungkiri penggunaan mega menu pada toko online sekarang ini banyak digunakan, selain karena menarik tapi juga pembuatannya tidak susah. Salah satu framework yang bisa kita gunakan adalah Bootstrap.
Mari kita mulai untuk membuatnya.
  • Kita buat file html dengan nama Menu.html



 <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 <title></title>
 <style type="text/css">
  .... disini kode CSS
 </style>
</head>
<body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
     .... disini kode javascript
    </script>
</body>
</html>


Kemudian kita tambahakn code untuk tampilan


 <div class="container" style="margin-top: 30px;">
   <nav class="navbar navbar-default">
     <div class="navbar-header">
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#">Toko Asep</a>
     </div>
     <div class="collapse navbar-collapse js-navbar-collapse">
       <ul class="nav navbar-nav">
         <li class="dropdown mega-dropdown">
           <a href="#" style="width:100px;" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th-list"></span>&nbsp;Koleksi</a>

           <ul class="dropdown-menu mega-dropdown-menu row">
             <li class="col-sm-3">
               <ul>
                 <li class="dropdown-header" style="text-align: center;">Koleksi Terbaru</li>
                 <div id="myCarousel" class="carousel slide" data-ride="carousel">
                   <div class="carousel-inner">
                     <div class="item active">
                       <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=Koleksi+Baru" class="img-responsive" alt="product 1"></a>
                       <h4><small>Baju Musim Panas</small></h4>
                       <button class="btn btn-primary" type="button">49,99 €</button>
                       <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Simpan Belanjaan</button>
                     </div>
                     <!-- End Item -->
                     <div class="item">
                       <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=Koleksi+Baru" class="img-responsive" alt="product 2"></a>
                       <h4><small>Baju Musim Dingin</small></h4>
                       <button class="btn btn-primary" type="button">9,99 €</button>
                       <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Simpan Belanjaan</button>
                     </div>
                     <!-- End Item -->
                     <div class="item">
                       <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=Koleksi+Baru" class="img-responsive" alt="product 3"></a>
                       <h4><small>Baju Pesta</small></h4>
                       <button class="btn btn-primary" type="button">49,99 €</button>
                       <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Simpan Belanjaan</button>
                     </div>
                     <!-- End Item -->
                   </div>
                   <!-- End Carousel Inner -->
                 </div>
                 <!-- /.carousel -->
                 <li class="divider"></li>
                 <li><a href="#">Tampilkan Semua Koleksi<span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
               </ul>
             </li>
             <li class="col-sm-3">
               <ul>
                 <li class="dropdown-header">Pakaian</li>
                 <li><a href="#">Anak Laki-Laki</a></li>
                 <li><a href="#">Anak Permepuan</a></li>
                 <li><a href="#">Perempuan Dewasa</a></li>
                 <li><a href="#">Laki-Laki Dewasa</a></li>
                 <li class="divider"></li>
                 <li class="dropdown-header">Topi</li>
                 <li><a href="#">Eiger</a></li>
               </ul>
             </li>
             <li class="col-sm-3">
               <ul>
                 <li class="dropdown-header">Jaket</li>
                 <li><a href="#">Eiger</a></li>
                 <li><a href="#">Avtect</a></li>
                 <li><a href="#">Bilabbong</a></li>
                 <li class="divider"></li>
                 <li class="dropdown-header">Sandal</li>
                 <li><a href="#">Eiger</a></li>
                 <li><a href="#">Avtect</a></li>
                 <li><a href="#">Bilabbong</a></li>
               </ul>
             </li>
             <li class="col-sm-3">
               <ul>
                 <li class="dropdown-header">Accessories</li>
                 <li><a href="#">Tambang</a></li>
                 <li><a href="#">Handuk</a></li>
                 <li><a href="#">Senter</a></li>
                 <li class="divider"></li>
                 <li class="dropdown-header">Informasi</li>
                 <form class="form" role="form">
                   <div class="form-group">
                     <label class="sr-only" for="email">MasukanEmail</label>
                     <input type="email" class="form-control" id="email" placeholder="Masukan Email">
                   </div>
                   <button type="submit" class="btn btn-primary btn-block">Kirim</button>
                 </form>
               </ul>
             </li>
           </ul>

         </li>
       </ul>
     </div>
   </nav>
 </div>

 <h1 class="c-text"> ini untuk isi web </h1>


tambahkan css pada bagian head


 <style type="text/css">
     @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
  body {
    font-family: 'Open Sans', 'sans-serif';
    background: #999;
  }

  h1,
  .h1 {
    font-size: 36px;
    text-align: center;
    font-size: 5em;
    color: #404041;
  }

  .navbar-nav>li>.dropdown-menu {
    margin-top: 20px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  .navbar-default .navbar-nav>li>a {
    width: 200px;
    font-weight: bold;
  }

  .mega-dropdown {
    position: static !important;
    width: 100%;
  }

  .mega-dropdown-menu {
    padding: 20px 0px;
    width: 100%;
    box-shadow: none;
    -webkit-box-shadow: none;
  }

  .mega-dropdown-menu:before {
    content: "";
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: absolute;
    top: -15px;
    left: 145px;
    z-index: 10;
  }

  .mega-dropdown-menu:after {
    content: "";
    border-bottom: 17px solid #ccc;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    position: absolute;
    top: -17px;
    left: 145px;
    z-index: 8;
  }

  .mega-dropdown-menu > li > ul {
    padding: 0;
    margin: 0;
  }

  .mega-dropdown-menu > li > ul > li {
    list-style: none;
  }

  .mega-dropdown-menu > li > ul > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #999;
    white-space: normal;
  }

  .mega-dropdown-menu > li ul > li > a:hover,
  .mega-dropdown-menu > li ul > li > a:focus {
    text-decoration: none;
    color: #444;
    background-color: #f5f5f5;
  }

  .mega-dropdown-menu .dropdown-header {
    color: #428bca;
    font-size: 18px;
    font-weight: bold;
  }

  .mega-dropdown-menu form {
    margin: 3px 20px;
  }

  .mega-dropdown-menu .form-group {
    margin-bottom: 3px;
  }
    </style>


hasilnya sbb:


Ketika kita klik menu koleksi maka muncul seperti gambar dibawah ini :


Kode lengkapnya silahkan download di bawah ini :

Baca Juga :


Klik Tombol Dibawah Untuk Memunculkan Link Download :


Tutorial Cara Download File :

Selamat Mencoba...
Jika ada pertanyaan silahkan input pada kolom komentar, terima kasih...

Wednesday, November 9, 2016

Membuat Form Login Unik Dengan HTML dan CSS

Assalamualaikum Wr. Wb...
Selamat siang blogger semua, pada kesempatan ini saya mau sharing bagaimana cara membuat form login yang unik dan menarik. Tidak bisa kita pungkiri setiap kita membuat aplikasi berbasis pengolahan data selalu membutuhkan acess login, namun jika kita membuat form login yang biasa saja terlihat agak membosankan, untuk itu mari kita mulai membuatnya
  • Buat File login.html
Codenya kira-kira sebagai berikut :




<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <div class="container">
    <h2>Form Login</h2>
    <form>
     <div class="group">      
       <input class="input-data" type="text" required>
       <span class="highlight"></span>
       <span class="bar"></span>
       <label>Email</label>
     </div>
     <div class="group">      
       <input class="input-data" type="password" required>
       <span class="highlight"></span>
       <span class="bar"></span>
       <label>Password</label>
     </div>
     <div class="group-button">
      <input class="bLogin" type="button" value="Login">
     </div>
   </form>
 </div>
</body>
</html>

Kemudian kita tambahkan kode css pada bagian headnya :



<style>
  * { box-sizing:border-box; }
  
  .container   { 
    font-family:'Roboto';
    width:400px; 
    margin:30px auto 0; 
    display:block; 
    background:#FFF;
    padding:10px 50px 50px;
    border: 1px solid #999999;
  }
  h2    { 
    text-align:center; 
    margin-bottom:50px; 
  }
  h2 small { 
    font-weight:normal; 
    color:#888; 
    display:block; 
  }

  /* untuk style form ------------------------------- */
  .group      { 
    position:relative; 
    margin-bottom:45px; 
  }

  .input-data{
   font-size:18px;
     padding:10px 10px 10px 5px;
     display:block;
     width:300px;
     border:none;
     border-bottom:1px solid #757575;
  }
  input:focus   { outline:none; }

  /* untuk label ======================================= */
  label      {
    color:#999; 
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }

  
  input:focus ~ label, input:valid ~ label   {
    top:-20px;
    font-size:14px;
    color:#5264AE;
  }

  /* untuk garis bawah ================================= */
  .bar  { position:relative; display:block; width:300px; }
  .bar:before, .bar:after  {
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;
    background:#5264AE; 
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }
  .bar:before {
    left:50%;
  }
  .bar:after {
    right:50%; 
  }

  input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
  }

  /* untuk HIGHLIGHTER ================================== */
  .highlight {
    position:absolute;
    height:60%; 
    width:100px; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
  }

  
  input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
  }

  /* membuat animasi ================ */
  @-webkit-keyframes inputHighlighter {
   from { background:#5264AE; }
    to  { width:0; background:transparent; }
  }
  @-moz-keyframes inputHighlighter {
   from { background:#5264AE; }
    to  { width:0; background:transparent; }
  }
  @keyframes inputHighlighter {
   from { background:#5264AE; }
    to  { width:0; background:transparent; }
  }
  .bLogin{
   font-size:18px;
     padding:10px 10px 10px 5px;
     width:150px;
     float: right;
     margin-bottom: 30px;
  }
  .group-button{
   padding-bottom: 30px;
  }
 </style>


Tailan inputsebagai berikut
Validasi ketika input kosong
Untuk kode lengkapnya silahkan download dibawah ini

Baca Juga :
Klik Tombol Dibawah Untuk Memunculkan Link Download :


Tutorial Cara Download File :

Jika ada pertanyaan silahkan isi pada kolom komentar
selamat mencoba.....


Wednesday, October 19, 2016

Aplikasi Inventori Dengan Java dan MySql

Assalamualakum wr. wb......
Sahabat blogger semua pada kesempatan ini saya mau sharing sebuah aplikasi inventory control dengan Java dan MySql metode yang digunakan adalah EOQ (economic order quantity). Teknologi yang digunakan bukan lagi client server tetapi tree tier. Apa itu tree tier silahkan baca kembali wikipedianya :D. Gambarannya kira-kira sebagai berikut.


Bagi anda yang masih bingung silahkan belajar lagi konsep ini.
Ok sekarang kita masuk ke aplikasinya, untuk tampilan login dan home kira-kira sebagai berikut :

Untuk process login gunakan account :
username   : asep
password   : asep

Baca Juga :

Selanjutnya kita masuk ke menu-menu yang dimiliki aplikasi ini  

  • Menu System
Menu ini terdiri dari tiga sub menu yaitu keluar pengguna, keluar aplikasi dan ubah password.
  • Menu Inventory
Menu ini terdiri dari enam sub menu yaitu pengguna, gudang, category, barang, pemasok dan pelanggan



  • Menu Transaksi
Menu ini terdiri dari empat sub menu yaitu penjualan, pembelian, return penjualan dan pembelian
  • Menu Management
Menu ini terdiri dari tiga sub menu diantaranya penyesuaian stok, lihat isi gudang dan management inventory
  • Menu Report
Menu ini digunakan untuk menampilkan report-report yang dibutuhkan dari system inventory

 Tampilan transaksi penjualan





Selanjutnya bagaimana cara menjalankan aplikasi ini
 
Jalankan aplikasi servernya terlebih dahulu
Tunggu sampai muncul tulisan Server berjalan..
Selanjutnya baru jalankan aplikasi clientnya





Klik Tombol Dibawah Untuk Memunculkan Link Download :


Tutorial Cara Download File :


Selamat mencoba...
Jika ada pertanyaan silahkan isi pada kolom komentar......

Karena banyak yang bertanya cara edit reportnya akhirnya saya buat postingan baru cara edit report dengan Ireport Designer, slihlakan kunjungi postingannya:








Tuesday, October 18, 2016

Valdasi Email dan Angka Mengunakan Javascript

Assalamualakum Wr. Wb......
Pada kesempatan ini saya mau haring cara membuat validasi Email dan Angka dengan Javascript. Sebenarnya untuk validasi email dan angka ada banyak cara, bisa dilakukan validasi sebelum process inser kedatabase mengunakan PHP, JAVA atau yang lainnya.
Validasi mengunakan Javascrip memiliki beberapa keuntungan diantaranya tidak perlu pindah form atau reload form, untuk lebih jelasnya mari kita mulai.

Pertama kita buat file degnan nama validasi.html.

Untuk validasi kita menggunakan scrip seperti dibawah ini :




     function validasi() {
   var email=document.getElementById('txtEmail').value;
   var jumah=document.getElementById('txtJumlah').value;
   var atpos = email.indexOf("@");
            var dotpos = email.lastIndexOf(".");
   if(email==""){
    alert('Email masih kosong');
    document.getElementById('txtEmail').focus();
   }else  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
    alert("Email tidak valid");
    document.getElementById('txtEmail').focus();
   }else if(jumah==""){
    alert("Jumlah masih kosong");
    document.getElementById('txtJumlah').focus();
   }else if(isNaN(jumah)==true){
    alert("Tolong masukan angka");
    document.getElementById('txtJumlah').focus();
   }else{
    //submit process
   }
  }


Kode lengkapnya sebagai berikut :


 <!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title></title>
 <script type="text/javascript">
  function validasi() {
   var email=document.getElementById('txtEmail').value;
   var jumah=document.getElementById('txtJumlah').value;
   var atpos = email.indexOf("@");
            var dotpos = email.lastIndexOf(".");
   if(email==""){
    alert('Email masih kosong');
    document.getElementById('txtEmail').focus();
   }else  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
    alert("Email tidak valid");
    document.getElementById('txtEmail').focus();
   }else if(jumah==""){
    alert("Jumlah masih kosong");
    document.getElementById('txtJumlah').focus();
   }else if(isNaN(jumah)==true){
    alert("Tolong masukan angka");
    document.getElementById('txtJumlah').focus();
   }else{
    //submit process
   }
  }
 </script>
</head>
<body>
 <h3>Input Data</h3>
 <table>
  <tr>
   <td>Email</td>
   <td><input type="email" name="txtEmail" id="txtEmail" placeholder="Email.."></td>
  </tr>
  <tr>
   <td>Jumlah</td>
   <td><input type="text" name="txtJumlah" id="txtJumlah" placeholder="Jumlah.."></td>
  </tr>
  <tr>
   <td></td>
   <td><input type="button" value="Submit" name="btnSUbmit" onclick="validasi();"></td>
  </tr>
 </table>
</body>
</html>


Hasil keluarannya sbb:
Pada saat email kosong :

Pada saat email salah

Pada saat angka kosong





Pada saat angka salah



Klik Tombol Dibawah Untuk Memunculkan Link Download :


Tutorial Cara Download File :

Selamat mencoba......

Monday, October 17, 2016

Membuat Dual List Box Dengan HTML dan Jquery


Assalamualaikum Wr. Wb....
Bogger semua pada kesempatan ini saya mau sharing cara membuat dual list box mengunakan HTMl dan JQuery. Dual list box ini biasanya kita jumpai ketika ada pemilihan yang lebih dari satu, seperti pemilihan employee dan lain sebagainya.
Untuk pembuatannya saya tidak seutuhnya membuat code sendiri, tetapi saya mengunakan library dari link berikut :

http://www.senamion.com/blog/jmultiselect2side.html

Silahkan anda download terlebih dahulu dari link diatas.Namun sayangnya library ini sudah tidak dikembangkan lagi dan hanya support sapai JQuery Versi 1.5 untuk versi diatasnya tidak support. Untuk link JQuery anda bisa mengunakan link berikut :

https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

Untuk Struktur filder pembuatannya kira-kira sebagai berikut






Kita cukup membuat satu file HTML dengan nama index.html untuk lib kita isi dengan jquery dan jmultiselect2side.
 Code lengkap untuk file index.html



 <!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Multi Select To Side</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 <script type="text/javascript" src="lib/jquery.multiselect2side.js" ></script>
    <link rel="stylesheet" href="lib/jquery.multiselect2side.css" type="text/css" media="screen" />
    <script type="text/javascript">
     $().ready(function() {
            $('#second').multiselect2side({
                selectedPosition: 'right',
                moveOptions: false,
                labelsx: '',
                labeldx: '',
                autoSort: true,
                autoSortAvailable: true
            });
     });
    </script>
</head>
<body>
 <h3>Data Employee</h3>
 <table>
  <tr>
   <td>Employee Id :</td>
   <td><input type="text" name="emp_id"></td>
  </tr>
  <tr>
   <td valign="top">Employee :</td>
   <td>
    <select name="searchable[]" id='second' multiple='multiple'">
     <option value="001">Asep komarudin</option>
     <option value="002">Ijal Maulana</option>
     <option value="003">Rudi Sujarwo</option>
     <option value="004">kafi Mohak</option>
     <option value="005">Yusuf Satriadi</option>
    </select>
   </td>
  </tr>
 </table>
</body>
</html>


Hasil keluarannya adalah sebagai berikut :




Klik Tombol Dibawah Untuk Memunculkan Link Download :


Tutorial Cara Download File :

Selamat mencoba......
Jika ada pertanyaan silahkan input pada kolom komentar...