Setelah anda memahami dengan baik library Extjs. Saatnya kita memanfaatkan Extjs untuk membuat suatu aplikasi yang sedikit kompleks. Artikel ini akan membahas pembuatan aplikasi Perpustakan menggunakan PHP, Extjs dan Mysql.
- Buat Tabel-tabel yang akan digunakan di Mysql (bisa menggunakan PHPMydmin) untuk sekedar contoh disini ada 2 buah tabel dan berelasi satu sama lain seperti gambar dibawah :
- buat struktur tabel lengkapnya dengan mendumping sql dibawah ini ke Mysql
-- phpMyAdmin SQL Dump
-- version 3.2.0.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Waktu pembuatan: 29. Desember 2009 jam 10:27
-- Versi Server: 5.1.37
-- Versi PHP: 5.3.0
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- Database: `dbbuku`
--
-- --------------------------------------------------------
--
-- Struktur dari tabel `ext_buku`
--
CREATE TABLE IF NOT EXISTS `ext_buku` (
`id_buku` int(11) NOT NULL AUTO_INCREMENT,
`judul_buku` varchar(128) NOT NULL,
`penerbit_buku` varchar(128) NOT NULL,
`tahun_terbit` int(11) NOT NULL,
`id_jenis` int(11) NOT NULL,
PRIMARY KEY (`id_buku`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
--
-- Dumping data untuk tabel `ext_buku`
--
-- --------------------------------------------------------
--
-- Struktur dari tabel `ext_jenis`
--
CREATE TABLE IF NOT EXISTS `ext_jenis` (
`id_jenis` int(11) NOT NULL AUTO_INCREMENT,
`jenis_buku` varchar(128) NOT NULL,
`keterangan` varchar(128) NOT NULL,
PRIMARY KEY (`id_jenis`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
--
-- Dumping data untuk tabel `ext_jenis`
--
- Buat Folder Baru di htdocs anda. terserah namanya apa. didalam folder tersebut buat struktur folder seperti dibawah ini
Keterangan
- Buku Project adalah folder root anda. tergantung dari nama folder yang anda buat. dalam hal ini saya pakai nama extbuku. kenpa yang muncul buku project? karena saya menggunakan Eclipse Editor. tetapi sebenarnya nama foldernya adalah extbuku
- Folder Class digunakan untuk menyimpan file class-class dalam bentuk file php
- Folder handle digunakan sebagai tempat file-file php yang merespon permintaan dari interface Extjs kita (ajax)
- Folder images digunakan untuk menyimpan gambar
- Folder Js digunakan untuk menyimpan script-script javascript untuk interface dengan pengguna. (misal Form Master Buku dll
- Membuat file config.php
File config.php diletakkan diroot directory aplikasi. didalamnya adalah berbagai configurasi aplikasi yag harus anda sesuaikan dengan PHP anda. isi file tersebut adalah :
1
2
3
4
5
6
7
8 |
$url_web ="http://xcoder.comoj.com/extbuku/";
$ext_folder = "../ext-3.1.0";
$host_mysql ="localhost";
$user_mysql ="root";
$pass_mysql ="";
$db_mysql = "dbbuku";
?> |
- Buat Folder index.php dan simpan di root folder aplikasi
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 | ("config.php"); ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Aplikasi Buku</title>
<link rel="stylesheet" type="text/css" href="/resources/css/ext-all.css">
<script type="text/javascript" src="/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-all.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = "/resources/images/default/s.gif"</script>
<script type="text/javascript" src="js/index.js"> </script>
<script type="text/javascript" src="js/start.js"> </script>
<style type="text/css">
body {
font-family:'lucida grande',tahoma,arial,sans-serif;
font-size:11px;
/*outline: none; */
}
.app_icon {
background-image:url(images/computer.png) !important
}
.master_icon {
background-image:url(images/application_form.png) !important
}
.tr_icon {
background-image:url(images/book_open.png) !important
}
</style>
</head>
<body>
<div style="display:none;">
<div id="start-div" >
<div style="float:left;" ><img src="images/gnome-fs-client.png" /></div>
<div style="margin-left:100px;">
<h2>Aplikasi Buku</h2>
<hr />
<p>Created and Development By http://xcoder.comoj.com</p>
</div>
</div>
</div>
</body>
</html> |
- Buat file index.js difolder js. File ini adalah untuk membuat Layout Tampilan Utama dan menu-menu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55 | /* Modul Utama Javascript
* Untuk Membuat Layout Panel dan Menu
*/
Ext.onReady(function(){
Ext.QuickTips.init();
var content_panel = {
title:'Aplikasi Buku',
iconCls:'app_icon',
bodyStyle:'padding: 10px;',
region:'center',
border:true,
margins:'10 10 10 10',
frame:false,
layout:'card',
activeItem:0,
items:[
start
],
tbar: [
{
text:'Setup Master',
iconCls:'master_icon',
menu:[
{
text:'Master Buku'
},{
text:'Master Jenis Buku'
}
]
},{
text:'Transaksi',
iconCls:'tr_icon',
menu:[
{
text:'Peminjaman'
},{
text:'Pengembalian'
}
]
}
]
}
main_panel = new Ext.Viewport({
border:false,
id:'main_panel',
layout:'border',
items: [
content_panel
],
renderTo:Ext.getBody()
});
}); |
- Buat file start.js dan letakkan di folder js. File ini adalah tampilan awal pertama kali masuk aplikasi buku kita
1
2
3
4
5
6
7 | var start = {
title: 'Halaman Depan',
iconCls:'app_icon',
layout: 'fit',
bodyStyle: 'padding:10px',
contentEl: 'start-div' // pull existing content from the page
}; |
Setelah Semua File dan Folder tersusun dan tersimpan. jalankan browser menuju alamat root aplikasi anda. Jika semua benar maka akan muncul tamplan seperti dibawah ini
Source code lengkap program bisa anda download disini
Tampilan utama sudah kita buat dan untuk selanjutnya adalah membuat bagian dari menu setup master buku yang akan dilanjutkan pada posting berikutnya. sabar ya..
kalo ada pertanyaan silahkan dikomentari.,
mantabzzz
BalasHapus