CARA MEMBUAT DESAIN LAYOUT DENGAN EASY UI

Hallo Pembaca,
Mohon maaf kemarin saya belum sempat nulis, maklumlah persiapan bersih-bersih menjelang hari lebaran, kali ini saya akan membahas bagaimana cara membuat desain layout menggunakan css dan jquery easy ui. Hasil akhir yang kita buat nanti akan seperti gambar dibawah ini :



1. Silahkan anda ambil dulu plugin jquery disini dan css nya disini, untuk forlder css nya terdiri dari folder icon dan image, kemudian file demo.css, easyui.css, icon.css, dan style.css. Dan untuk folder js nya terdiri dari file jquery.easyui.min.js dan file jquery.min.js.

2. Buat folder nama web/aplikasi anda, sebagai contoh saya menggunakan folder layout, taruh file yang sudah kita ambil tadi didalamnya, untuk lebih jelasnya anda bisa lihat gambar dibawah ini :

 3. Setelah kita meletakkan file - file tersebut kita buat halaman indexnya, di file inilah kita nanti akan memanggil fungsi - fungsi dari plugin didalam folder css dan folder js, untuk lebih jelasnya anda bisa lihat skrip index.php dibawah ini :
 ---------------------------------------------------------------------------------------------------------------------------------
 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Layout - jQuery EasyUI</title>
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script>
        function addTab(title, url){
            if ($('#tt').tabs('exists', title)){
                $('#tt').tabs('select', title);
            } else {
                var content = '<iframe frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
                $('#tt').tabs('add',{
                    title:title,
                    content:content,
                    closable:true
                });
            }
        }
    </script>
    <style type="text/css">
<!--
.style1 {font-size: large}
-->
    </style>
</head>

<body class="easyui-layout">
    <div data-options="region:'north',border:false" style="height:70px;background:#A9FACD;padding:5px">
        <table width="574" style="height:40px">
            <tr>
                <td width="43"  style="padding-left:15px" ><img src="img/logo.png"/></td>
                <td width="519" ><h3 class="style1">JUDUL SISTEM APLIKASI</h3></td>
            </tr>
      </table>
    </div>
    <div data-options="region:'west',split:true,title:'MENU'" style="width:180px;padding:10px;">
        <div class="easyui-panel" title="DATA" collapsible="true"  style="width:150px;height:auto;padding:10px;">
            <a href="#" class="easyui-linkbutton" iconCls="icon-user" plain="true" onClick="addTab('Data Petugas','frmPetugas.php')">User</a><br />
            <a href="#" class="easyui-linkbutton" iconCls="icon-in" plain="true" )">Penerimaan</a><br />
            <a href="#" class="easyui-linkbutton" iconCls="icon-rkam" plain="true" >RKAM</a><br />
            <a href="#" class="easyui-linkbutton" iconCls="icon-out" plain="true" >Pengeluaran</a>
        </div>
        </br>
        <div class="easyui-panel" title="LAPORAN" collapsible="true"  collapsed="true" style="width:150px;height:auto;padding:10px;">
            <a href="#" class="easyui-linkbutton" iconCls="icon-tahunan" plain="true" onClick="addTab('Laporan Penjualan','laporan/penjualan/pilih_lap.php')">Tahunan</a><br />
            <a href="#" class="easyui-linkbutton" iconCls="icon-triwulan" plain="true" onClick="addTab('Laporan Pembelian','laporan/barang_masuk/pilih_lap.php')">Triwulan</a>
        </div>
    </div>
    <div style="height:50px;background:#A9FACD;padding:20px;" data-options="region:'south',border:false" align="center"><strong>&copy; IT Support 2016</strong></div>
    <div data-options="region:'center'" id="tt" class="easyui-tabs">
        <div title="Selamat Datang" style="padding-top:10px; text-align:center; background-repeat:no-repeat; background:img/hapus.png; background-color:#FFF;">
              <div class="frametabel">
                <table align="center" bordercolor="#A9FACD" id="toolbarTable" style="height:540px">
                    <tr>
                        <td id="titlebar" >
                            SELAMAT DATANG,
                            Anda login sebagai Administrator
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>


---------------------------------------------------------------------------------------------------------------------------------
 4. Simpan file tesebut, sekarang jalankan file index.php di dalam folder layout, jika berhasi maka hasilnya akan seperti gambar paling atas.

5. Untuk penjelasan skrip index.php diatas anda bisa perhatikan dibawah ini :
-  Memanggil plugin didalam folder css dan folder js
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>


-  Java Script untuk memanggil atau menjalankan halaman Tab
  <script>
        function addTab(title, url){
            if ($('#tt').tabs('exists', title)){
                $('#tt').tabs('select', title);
            } else {
                var content = '<iframe frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
                $('#tt').tabs('add',{
                    title:title,
                    content:content,
                    closable:true
                });
            }
        }
    </script>


- Header
<div data-options="region:'north',border:false" style="height:70px;background:#A9FACD;padding:5px">
        <table width="574" style="height:40px">
            <tr>
                <td width="43"  style="padding-left:15px" ><img src="img/logo.png"/></td>
                <td width="519" ><h3 class="style1">JUDUL SISTEM APLIKASI</h3></td>
            </tr>
      </table>
    </div>


- Menu
<div data-options="region:'west',split:true,title:'MENU'" style="width:180px;padding:10px;">
        <div class="easyui-panel" title="DATA" collapsible="true"  style="width:150px;height:auto;padding:10px;">
            <a href="#" class="easyui-linkbutton" iconCls="icon-user" plain="true" onClick="addTab('Data Petugas','frmPetugas.php')">User</a><br />
            <a href="#" class="easyui-linkbutton" iconCls="icon-in" plain="true" )">Penerimaan</a><br />
            <a href="#" class="easyui-linkbutton" iconCls="icon-rkam" plain="true" >RKAM</a><br />
            <a href="#" class="easyui-linkbutton" iconCls="icon-out" plain="true" >Pengeluaran</a>
        </div>
        </br>
        <div class="easyui-panel" title="LAPORAN" collapsible="true"  collapsed="true" style="width:150px;height:auto;padding:10px;">
            <a href="#" class="easyui-linkbutton" iconCls="icon-tahunan" plain="true" onClick="addTab('Laporan Penjualan','laporan/penjualan/pilih_lap.php')">Tahunan</a><br />
            <a href="#" class="easyui-linkbutton" iconCls="icon-triwulan" plain="true" onClick="addTab('Laporan Pembelian','laporan/barang_masuk/pilih_lap.php')">Triwulan</a>
        </div>
    </div>


Anda bisa perhatikan, dalam menu ini untuk memanggil halaman yaitu terdapat pada <a href="#" class="easyui-linkbutton" iconCls="icon-user" plain="true" onClick="addTab('Data Petugas','frmPetugas.php')">User</a>

- Footer
<div style="height:50px;background:#A9FACD;padding:20px;" data-options="region:'south',border:false" align="center"><strong>&copy; IT Support 2016</strong></div>

- Content / Isi
<div data-options="region:'center'" id="tt" class="easyui-tabs">
        <div title="Selamat Datang" style="padding-top:10px; text-align:center; background-repeat:no-repeat; background:img/hapus.png; background-color:#FFF;">
              <div class="frametabel">
                <table align="center" bordercolor="#A9FACD" id="toolbarTable" style="height:540px">
                    <tr>
                        <td id="titlebar" >
                            SELAMAT DATANG,
                            Anda login sebagai Administrator
                        </td>
                    </tr>
                </table>
            </div>
        </div>


Selesai sudah penjelasan dari saya, saya kira sudah cukup jelas. Apabila masih belum jelas, anda bisa mencobanya dan mempelajari menggunakan skrip yang lengkap yang bisa diambil disini

Terimakasih
Selamat belajar

0 Response to "CARA MEMBUAT DESAIN LAYOUT DENGAN EASY UI"

Post a Comment