Wednesday, December 28, 2016

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

Tags
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

Tags
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

Tags
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

Tags

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...

Video Tutorial HTML



Assalamualaikum Wr. Wb...
Pada kesempatan ini saya akan sharing tutorial mengenai HTML. Tidak bisa kita pungkiri HTML ini memegang peranan yang sangat penting untuk pembuatan Web Aplikasi. Sebelumnya saya mohon maaf jika dalam penyajiannya sangat jauh dari kata sempurna, tetapi saya berharap dengan dibuatnya ini dapat membatu sahabat yang membutuhkan. Selamat menyimak.
  • Pengenalan HTML
Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini    : file PPT

  •  HTML Dasar

Berkas latihan bisa didownload disini : file latihan 
Berkas PPT bisa didownload disini    : file PPT

  • Atribute HTML

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini    : file PPT

  • HTML Style

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini    : file PPT

  • HTML Formating

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini    : file PPT

  • HTML Kutipan

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini    : file PPT

  • Komentar Pada Tag HTML

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini    : file PPT

  • HTML Warna

Berkas latihan bisa didownload disini : file latihan
Berkas PPR bisa didownload disini    : file PPT

  • HTML CSS

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini    : file PPT

  • HTML Table

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini    : file PPT

  • HTML List

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini     : file PPT

  • HTML  Block

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini     : file PPT

  • HTML Class

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini     : file PPT

  • HTML IFrame

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini     : file PPT

  • HTML Javascript

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini     : file PPT

  • HTML Layout

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini     : file PPT

  • HTML Responsive


Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini     : file PPT

  • HTML Form

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini     : file PPT


Brsambung........

Membuat Search Data Dengan Mengunakan Popup Dialog Javascript

Assalamualaikum Wr. Wb....
Bogger semua kesempatan ini saya mau sharing cara membuat pencarian data yang nantinya data itu kita add kedalam input text yang kita inginkan. Untuk percobaan ini saya mengunakan PHP dengan Databasen MySql.

Untuk Persiapan kita buat folder searchdata dan didalamnya dibuatkan dua file yaiu index.php dan search.php
Struktur filenya kira-kira sebagai berikut :

Sekarang kita akan mengisi code pada file index.php



 <!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Search Employee</title>
 <script type="text/javascript">
  function popupwindow(url, title, w, h) {
         var left = (screen.width/2)-(w/2);
         var top = (screen.height/2)-(h/2);
         return window.open(url, title, 'scrollbars=1,status=1, resizable=1, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
     }
 </script>
</head>
<body>
 <table>
  <tr border="0" cellpadding="0" cellspacing="0">
   <td colspan="2" align="center">Contoh search employee</td>
  </tr>
  <tr>
   <td>Employee</td>
   <td><input type="text" name="txtId" id="txtId"><input type="text"  name="txtNama" id="txtNama"><input type="button" name="Search" value="Search" onclick='javascript:popupwindow("search.php","Seach Employee",950,600);'></td>
  </tr>
 </table>
</body>
</html>

Selanjutnya kita akan mengisi code pada file search.php dengan code sbb:



 <script type="text/javascript">
 function changeparent(doc,doc2){
        var input1=doc;
        var input2=doc2;
        window.opener.document.getElementById('txtId').value=input1;
        window.opener.document.getElementById('txtNama').value=input2;
        window.close();
    }
</script>
<h3>Data Employee</h3>
<table cellpadding="3" cellspacing="0" border="1" width="80%" id="tblMain">
 <tr>
  <td>Employee Id</td>
  <td>Nama</td>
  <td>Alamat</td>
 </tr>
<?php
function getConnection() {
    $usr="root";
    $pwd="";
    $database="searchdata";
    $host="localhost";
    $connection=  mysql_connect($host, $usr, $pwd);
    mysql_select_db($database)or die("Database tidak ditemukan !");
    return $connection;
}

$conn=getConnection();
$sql="select * from employee";
$dataQry  =  mysql_query($sql, $conn)or die("Query error :".  mysql_error());
while ($dataRow=  mysql_fetch_array($dataQry)){  
?>
<tr onClick="javascript:changeparent('<?php echo $dataRow['emp_id']; ?>','<?php echo $dataRow['nama']; ?>');">
 <td><?php echo $dataRow['emp_id'];?></td>
   <td><?php echo $dataRow['nama'];?></td>
   <td><?php echo $dataRow['alamat'];?></td>
</tr>
<script language="javascript">
    var tbl = document.getElementById("tblMain");
    if (tbl != null) {
        if (tbl.rows[0] != null) {
            tbl.rows[0].style.backgroundColor = "#365890";
            tbl.rows[0].style.color = "#FFFFFF";
        }
        for (var i = 1; i < tbl.rows.length; i++) {

            tbl.rows[i].style.cursor = "pointer";
            tbl.rows[i].onmousemove = function () { this.style.backgroundColor = "#cccccc"; this.style.color = "#FFFFFF"; };
            tbl.rows[i].onmouseout = function () { this.style.backgroundColor = ""; this.style.color = ""; };
        }
    }
</script>
<?php
}
?>
</table>

Sebelum menjalankan kita harus membuat databasenya terlebih dahulu, kita buat database baru dengan nama searchdata atau sesuaikan dengan keinginan anda


Selanjutnya kita membuat tabel dengan nama employee. filed tabel employee bisa dilihat pada gambar diatas.
Sekarang kita isi tabel yang sudah kita buat dengan cara menjalankan script SQl dibawah ini :


 insert into employee values
('00001','asep Komarudin','Jakarta'),
('00002','Rizal maulana','Bandung'),
('00003','Nilam Ayu','Bekasi')


Sekarang kita coba menjalankannya, tampilannya kurang lebih sbb:

Selamat mencoba....

Klik Tombol Dibawah Untuk Memunculkan Link Download :




Tutorial Cara Download File :

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

Sunday, October 16, 2016

Enkripsi Dan Dekripsi String Pada PHP dengan Fungsi MCRYPT

Tags
Assalamualikum Wr. Wb.....
Sabat blogger semua pada kesempatan ini saya akan sharing cara encripsi dan decripsi string pada PHP dengan fungsi MCRYPT Langkahnya adalah sbb:

Kita buat folder encripsi pada folder www (wamp server) atau htdoc (xampp) dan buat duabuah file php dengan nama encripsi.php dan index.php

Ini isi code untuk encripsi.php



 <?php
  function encrypt_decrypt($action, $string) {
   $output = false;

   $key = 'Ini adalah password saya';

   // initialization vector 
   $iv = md5(md5($key));

   if( $action == 'E' ) {
       $output = mcrypt_encrypt(MCRYPT_RIJNDAEL_256, md5($key), $string, MCRYPT_MODE_CBC, $iv);
       $output = base64_encode($output);
   }
   else if( $action == 'D' ){
       $output = mcrypt_decrypt(MCRYPT_RIJNDAEL_256, md5($key), base64_decode($string), MCRYPT_MODE_CBC, $iv);
       $output = rtrim($output, "");
   }
   return $output;
 }

Dan ini untuk code index.php


  <?php
include_once 'encripsi.php';
echo 'hasil encripsi = '.encrypt_decrypt('E','asep').'<br>';

echo 'hasil decrip = '.encrypt_decrypt('D','3HJqP9w0IhP+1oTILIEgUZFaY3t2dmLK1nOPV4MsbDQ=');


Metode ini bisa kita gunakan untuk encripsi dan decripsi password login ke aplikasi yang kita buat. Sebenarnya masuh banyak cara yang bisa kita lakukan untuk encripsi dan decripsi string, ini hanya salah sarunya.
Jika kita lihat keluarnaya adalah sbb :





Selamat Mencoba...

Klik Tombol Dibawah Untuk Memunculkan Link Download :


Tutorial Cara Download File :


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

Friday, October 14, 2016

Sistem Informasi Klinik Dengan PHP Dan MySql

Tags
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....