Pojok Code: November 2016

Friday, November 25, 2016

Sistem Informasi Akademik Dengan PHP dan MySql

Penulis Unknown Diterbitkan 3:08 AM

Wednesday, November 16, 2016

Mega Menu Toko Online Dengan CSS, HTML dan BOOTSTRAP

Penulis Unknown Diterbitkan 11:41 PM

Tags

CSS

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 :

Aplikasi Inventori Dengan Java dan MySql Jquery Fullcalendar Integrasi Dengan Bootstrap PHP dan MariaDB Membuat Form Login Unik Dengan HTML dan CSS Sistem Informasi Akademik atau Pondok Pesantren Dengan PHP dan MySql

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

Penulis Unknown Diterbitkan 11:46 PM

Tags

CSS

HTML

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