Pojok Code

Home All posts

Sunday, July 15, 2018

Template Undangan Pernikahan Online Gratis

gb 1. Home

Undangan dalam acara pernikahan merupakan bagian yang sangat penting, orang akan senang dan respek jika dihargai apalagi kita mengharapkan kedatangannya. Jika undangan kita cetak secara manual (cetak kertas) tentunya membutuhkan biaya yang tidak sedikit jumlah akan berbanding lurus dengan harga yang harus dikeluarkan. Saat ini hampir semua orang sudah mengenal internet jadi sangat tepat sekali jika saat ini kita memanfaatkan teknologi untuk mengurangi biaya yang dikeluarkan. Berbeda dengan cetak manual, undangan yang dibuat online tidak berpengaruh terhadap jumlah orang yang akan kita undang. Untuk hal ini kami menyediakan template gratis Undangan Pernikahan Online.

Jika undangan online ini kita jalankan pertama kali, tampilan akan muncul seperti gb 1 Home diatas. Tampilan Home dapat anda edit, untuk background mengunakan image yang dapat anda ganti sesuai image yang anda kehendaki. Untuk menggantinya cari folder css dan cari file agency.css, seperti image dibawah ini.

gb 2. Folder CSS

Setelah anda temukan buka dengan mengunakan editor yang anda punya, bisa Notepad ++ ataupun yang lainnya. Cari code CSS header. Ubah bgaian code berikut sesuai image yang anda miliki.

header {
    text-align: center;
    color: #fff;
    background-attachment: scroll;
    background-image: url(../img/header-bg.jpg);
    background-position: center center;
    background-repeat: none;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

Selanjutnya untuk ubah data kedua pengantin, anda cari file index.html pada folder undangan

gb 3 Folser Index

Buka file index.html dengan editor anda, cari bisa dengan menekan tombol keyboard CTRL + F dan masukan key woard undangan pernikahan, pada bagian ini silahkan edit sesuai dengan undangan yang akan anda buat.

<div class="col-md-7 intro-text">
 <div class="intro-lead-in">Undangan Pernikahan</div>
 <div class="intro-heading">09-01-2015</div>
 <div class="col-sm-12 text-center" >
 <div class="col-md-5  ikhwan">
  <h4>Fulan</h4>
  <p>Fulan Fulan</p>
 </div>
 <div class="col-md-1">
  <h1>&</h1>
  </div>
  <div class="col-md-5 akhwat">
   <h4>Fulannah</h4>
   <p>Fulanah Fulanah</p>
  </div>
 </div>
 <div class="col-sm-12">
  <hr style="width:80%;">
 </div>
 <p class="surat"><b style="font-size: 18px;font-style:normal;">BISMILLAHIROHMANIROHIM</b><br>
  "Dan diantara tanda-tanda kekuasaan-Nya adalah diciptakan-Nya untukmu pasangan hidup dari jenismu sendiri,
  supaya kamu mendapat ketenangan hati dan dijadikan-Nya kasih sayang diantra kamu. Sesungguhnya yang demikian
  menjadi tanda-tanda kebesaran-Nya bagi orang-orang yang berfikir."<br>
 QS. Ar Rum : 21</p>
 <center>
  <div class="text-center"
  style="margin-top: 10px;
  width: 250px;
  height: 50px;
  padding 10px;
  text-align:center;
  border-radius: 25px;
  border: 2px solid #fed136;">
   Kepada YTH :<br> Fulan bin fulan
  </div>
 </center>
</div>

Tampilah Acara sebagai berikut.

Bagian ini adalah bagian data undangan, isinya adalah nama kedua calon pengantin dan ucapan-ucapan untuk mengundang. Bagian ini bisa kamu modifikasi sesuai dengan kebutuhan. Untuk edit bagian ini masih mengunakan file yang sama dengan bagian atas, untuk mencari bagian yang akan di edit tekan CTRL + F dan masukan maha suci allah, selanjutnya text editor akan mengarahkan ke bagian yang anda cari.

Monday, July 9, 2018

JAVASCRIPT

Jquery Fullcalendar Dengan Bootstrap PHP dan MariaDB

Unknown 9:29 PM Comment

Jquery Fullcalender sering kita gunakan terutama yang berhubungan dengan timeline, hal ini membuat tampilan aplikasi semakin menarik. Deangan adanya fullcalender anda bisa mengatur waktu dan terlihat sangat rapi.

Ini adalah tampilan month dari fullcalender yang sudah bisa process CRUD

Tampilan Month Jquery full calender menampilkan semua tanggal dalam satu bulan dalam satu halaman. Jika kita lihat jadual yang sudah dibuat pada tidap tanggal akan disusun sesuai dengan apa yang sudah kita buat pada tanggal tersebut.

Untuk menambahkan jadual baru kita bisa klik bagian tanggal, selanjutnya akan muncul popup input yang bisa kita isi untuk jadual baru.

Untuk edit jadual kita bisa melakukan klik 2 kali pada bagian list jadual yang tersusun pada tiap tanggalnya. Nanti akan muncul popup untuk melakukan edit. Pada saat yang sama kita juga bisa melakukan delete dengan ceklis fungsi delete pada popup yang muncul.

Jika kita ceklis pungsi delete dan kita lakukan submit maka jadual itu akan terhapus pada jquery full calender.

Baca Juga :

Ini adalah tampilan full calender day

Tampilan Day pada Jquery full calender lebih memperjelas jadual kita pada hari itu. Kotak-kotak warna yang muncul akan mencerminkan waktu jadual yang sudah kita setting. Untuk menampilkan ini kita tinggal klik tombol day pada bagian atas Jquery Full Calender.
Pada bagian ini kita juga bisa menambahkan mengedit dan menghapus jadual. Caranya hampir mitip dengan Tab bagian Month, Hanya saja pada bagian ini kita tidak bisa memilih tangal yang berbeda, kita hanya bisa meilih tangal yang sudah kita pilih saja.

Ini adalah tampilan full calender list

Bagian List Jquery Full Calender cukup menarik buat saya, karena kita bisa melihat list jadual yang kita buat yang di kelompokan setiap harinya dan disusun selama 1 minggu.
Pada bagian ini kita tidak bisa melakukan edit, pada bagian ini kita hanya bisa melihat list jadual yang sudah kita buat saja, Hal ini tidak menjadi maslah karena edit bisa kita lakukan di tab yang lain.

Untuk lebih jelasnya silahkan download dari tombol dibawah ini.

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Friday, July 6, 2018

HTML JAVASCRIPT

Template Toko Online Dengan Bootstrap

Unknown 4:07 AM Comment

Hai Blogger Semua, tidak bisa kita pungkiri saat ini orang-orang lebih suka belanja online dari pada dateng ke toko langsung. Banyak alasan yang di sampaikan, ada yang males karena macet ada yang males karena jauh panas dan lain sebagianya.

Untuk hal ini saya sediakan template toko online dengan bootstrap. Tadinya ini mau saya selesaikan terlebih dahulu tapi keburu banyak kerjaan, jadi di bagi aja dulu siapa tau ada yang mau melanjutkan dan share balik ke saya :D :D.

Template ini mengunakan Bootstrap dan library lainnya. Saya berharap kalian bisa mengembangkan template ini seperti market place yang popular saat ini, Jadi tidak hanya bisa jualan barang saja, Harapaanya bisa berkomunikasi dengan aplikasi lainya. Seperti pembayaran Listrik, Pean tiket kereta, pesan tiket peawat dan lain sebagainya.

Dan satu lagi untuk jenis pilihan pengiriman juga sebaiknya langsung otomatis sinkronisasi dengan API lainya seperti JNE, POS dan lain sebagainya.

Dari segi bahasa, toko online berasal dari dua suku kata, Toko dan Online. Menurut Kamus Besar Bahasa Indonesia, toko berarti sebuah tempat atau bangunan permanen untuk menjual barang-barang (makanan, minuman, dan sebagainya). Sedangkan Online yang terjemahan bahasa indonesianya adalah dalam jaringan atau disingkat daring, menurut Wikipedia adalah keadaan di saat seseorang terhubung ke dalam suatu jaringan ataupun sistem yang lebih besar. Jadi berangkat dari dua pengertian secara bahasa tersebut kita dapat mengartikan toko online sebagai tempat terjadinya aktifitas perdagangan atau jual beli barang yang terhubung ke dalam suatu jaringan dalam hal ini jaringan internet. Aktifitas ini biasa juga disebut Belanja Online.

Ketika kita melakukan transaksi di sebuah toko, kita bebas memilih barang yang akan kita beli. Terkadang kita perlu memasukkan barang yang kita beli ke dalam keranjang belanja lalu kita menyerahkan keranjang belanja tersebut kepada kasir untuk dihitung total belanja kita. Sama seperti transaksi di toko biasa, di toko online proses transaksi yang kita lakukan tidak jauh berbeda. Bila di toko biasa kita dilayani oleh manusia, di toko online kita dilayani oleh mesin.

Baca Juga :

File ini sudah ber extensi PHP jadi harus di buka selayaknya program PHP.

Beberapa hal yang perlu di perhatikan juga mungkin akan error jika di buka oleh versi PHP 7. Karena ketika dibuat masih mengunakan versi 5.4

Untuk lebih jelas silahkan langsung download dari link di bawah ini.

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Thursday, July 5, 2018

JAVASCRIPT PHP

Tree Menu Dinamis Dengan PHP MySQL dan JSTree

Unknown 1:51 AM Comment

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

MariaDB

Tutorial Maria DB / MySQL

Unknown 4:37 AM Comment

Persiapan Database Baru & Table Baru Insert, Update dan Delete Select Table Join Table Triger

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 :

Sistem Informasi Akademik atau Pondok Pesantren Dengan PHP dan MySql Jquery Fullcalendar Integrasi Dengan Bootstrap PHP dan MariaDB Kumpulan Ebook Android, Ajax, Corel, CSS, HTML, Javascript, Photoshop, PHP Dan Java Edit Jasper Report Dengan Ireport Plugin Netbeans

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

ireport Java

Edit Jasper Report Dengan Ireport Plugin Netbeans

Unknown 5:11 AM 1 Comment

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)

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

Unknown 10:33 PM Comment

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

Ebook Ajax

Baca Juga :

Ebook Android

Corel Draw

HTML

JavaScript

Photoshop

Java Desktop

Kumpulan Buku Java desktop

Java EE

Kumpulan Ebook Java EE

Ebook Java Yang Dikembangan JENI

Kumpulan Ebook Jeni

Friday, November 25, 2016

PHP Projek

Sistem Informasi Akademik Dengan PHP dan MySql

Unknown 3:08 AM 12 Comments

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

CSS

Mega Menu Toko Online Dengan CSS, HTML dan BOOTSTRAP

Unknown 11:41 PM Comment

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

CSS HTML

Membuat Form Login Unik Dengan HTML dan CSS

Unknown 11:46 PM Comment

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