Tutorial Membuat Sistem Informasi Kepega PDF

Tutorial Membuat Sistem Informasi
Kepegawaian Berbasis MySQL dan

Dreamweaver untuk Pemula
Oleh:
Dwi Yulianto
Seluruh isi dalam dokumen ini dapat digunakan, dimanfaatkan dan disebarluaskan secara bebas
untuk tujuan pendidikan, pembelajaran dan bukan komersial (non profit), dengan syarat tidak
menghilangkan, menghapus atau mengubah atribut penulis dokumen ini dan pernyataan dalam
lisensi dokumen. Tidak diperbolehkan melakukan penulisan ulang atau mengkomersialkan buku
ini kecuali mendapatkan ijin dulu dari penulis.
Daftar Isi
HALAMAN JUDUL --------------------------------------------------------------------------------------- 1

DAFTAR ISI ----------------------------------------------------------------------------------------------- 2
1. Membuat Database Baru ------------------------------------------------------------------------- 3

2. Membuat Site baru -------------------------------------------------------------------------------- 7
3. Koneksi Dreamweaver dan MySQL ----------------------------------------------------------- 11
4. Memulai Halaman Baru ------------------------------------------------------------------------- 13
5. Membuat Form Login---------------------------------------------------------------------------- 14
6. Membuat Input Data ---------------------------------------------------------------------------- 21
7. Membuat Home User---------------------------------------------------------------------------- 30
8. Membuat Restrict Halaman -------------------------------------------------------------------- 37
9. Membuat Menu Logout ------------------------------------------------------------------------- 39
10. Membuat Menu Pembuka---------------------------------------------------------------------- 40
11. Membuat Halaman Ubah Password ---------------------------------------------------------- 42
12. Membuat Halaman Show Data ---------------------------------------------------------------- 47
13. Membuat Halaman Update Data-------------------------------------------------------------- 51
14. Uji Coba (Bagian 1) ------------------------------------------------------------------------------- 56
15. Membuat Halaman Login Admin -------------------------------------------------------------- 62
16. Membuat User Management ------------------------------------------------------------------ 67
17. Membuat Repeat Region ----------------------------------------------------------------------- 70
18. Membuat Show Data Admin ------------------------------------------------------------------- 71
19. Membuat Edit Data Admin --------------------------------------------------------------------- 74
20. Membuat Delete Data --------------------------------------------------------------------------- 77
21. Setting User Management ---------------------------------------------------------------------- 78
22. Membuat Halaman Ubah Password ---------------------------------------------------------- 84
23. Uji Coba (Bagian 2) ------------------------------------------------------------------------------- 89
24. Membuat Upload File dan Galeri-------------------------------------------------------------- 94
25. Uji Coba (Bagian 3) ------------------------------------------------------------------------------ 106
26. Membuat Gallery Administrator ------------------------------------------------------------- 108
27. Uji Coba (Bagian 4) ------------------------------------------------------------------------------ 112
28. Tentang Penulis ---------------------------------------------------------------------------------- 115
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula Halaman 2
Pada tutorial kali ini saya asumsikan bahwa..
Di komputer yang Anda gunakan sudah terinstall dengan baik PHP, Apache, MySQL dan
Macromedia Dreamweaver karena dalam tutorial ini kita akan menggunakan keempat
software tersebut.
Anda mengetahui bagaimana cara login ke MySQL berikut informasi user dan password
yang dapat digunakan.
Membuat Database
1) Pertama pastikan service dari Apache,MySql dan FileZilla dalam keadaan running seperti gambar di
bawah ini.
2) Buka Dreamweaver dan browser

3) Pada address bar ketikkan http://localhost/phpmyadmin.
4) Buat database baru untuk memulai membuat Sistem Informasi Kepegawaian.beri nama dengan
db_peg atau yang lain terserah anda.
5) Lalu klik Create.
6) Langkah selanjutnya adalah membuat table.disini saya membuat 2 tabel terlebih dahulu yaitu table
admin dan table data.
7) Buat table admin dan isi berapa banyak field nya.
8) Isi field seperti gambar di bawah ini.
Untuk Level defaultnya isikan dengan angka 0 (nol).

9) Jangan lupa pada id kita centang pada Auto Increment agar data otomatis terurutkan.
10) Setelah itu klik Save dan muncul seperti gambar di bawah ini.
11) Langkah selanjutnya buat table satu lagi beri nama dengan data.
12) Lalu kemudian klik Go.

13) Tampilannya seperti gambar di bawah ini,isi sesuai dengan kebutuhan.
Pada level jangan lupa mengaturnya dengan “As defined” dan isikan dengan angka 1 (satu)
Karena ini berbeda level dengan admin yang tadi telah dibuat.
14) Setelah di save muncul konfirmasi seperti gamabr di bawah ini.
Membuat Site Baru
1) Setelah itu kita beralih ke Dreamweaver.

2) Buka Dreamweaver lalu klik menu Site untuk mengatur Site sebelum kita memulai bekerja dengan
Dreamweaver.
3) Klik New untuk membuat Site baru.

4) Beri nama misalnya dengan “Pegawai”
Local root folder isi dengan alamat dimana “project” yang sedang kita garap.
Default images folder menunjukkan dimana tempat penyimpanan gambar untuk project
kita.biasanya berada di subfoldernya (../Pegawai/Images)
Untuk HTTP address isikan sama dengan Local root folder.
5) Pada remote Info pilih Access = Local/Network
Pada Remote folder isikan sesuai dengan gambar di bawah ini.
6) Lalu pada Testing Server isikan Server model dengan PHP MySQL
Access nya Local/Network
Testing server folder isikan sesuai dengan gambar di bawah ini
Untuk URL prefic diisi sama seperti Testing server folder.
7) Klik OK untuk melanjutkan.

8) Site Pegawai telah dibuat.
9) Klik Done
10) Jika masih terdapat error coba lagi seperti cara di atas.
Koneksi Dreamweaver dan MySQL
Sekarang waktunya membuat koneksi antara Dreamweaver dengan memanfaatkan tools

yang sudah tersedia di Macromedia Dreamweaver. Jangan lupa pastikan bahwa Site Definition
di Dreamweaver sudah dibuat dengan benar, karena keberhasilan dari koneksi ke MySQL juga
bergantung dari site definition tersebut
1) Klik tanda (+) Plus pada Application Databases
2) Klik MySQL Connection

3) Isikan sesuai gambar di bawah ini.
4) Default username adalah root dan passwordnya kosong.

5) Klik select untuk memilih database
6) Pilih nama database yang tadi dibuat lalu klik OK.
7) Sekarang Dreamweaver dan MySQL telah berhasil terkoneksi
Membuat Halaman Baru
Sekarang buat tempilan web dinamis (berekstensi PHP) lalu desainlah sesuai dengan gaya
masing-masing.
1) Simpanlah dengan nama index.php pada folder ../xampp/htdocs/pegawai.
2) Halaman itu nantinya akan menjadi halaman utama pada saat di browser diketikkan
http://localhost/pegawai
3) Tempilannya kurang lebih seperti berikut ini.
4) Jangan lupa save as lah index.php menjadi register.php,news.php,about.php dan help.php

5) Jangan lupa beri judul (Title)
6) Buka kembali ke index.php
Membuat Form Login
1) Buat form login untuk login pegawai.

2) Buat table baru dengan 2 kolom dan 4 baris lalu aturlah sedemikian rupa seperti gambar di bawah
ini(gunakan fasilitas Merge Center).
3) Beri judul dengan Login Pegawai
4) Untuk Username dan Password menggunakan Text Field dengan cara:
5) Untuk menambahkan tombol login atau reset lihat gambar berikut.
6) Beri nama dengan Login
7) Jangan lupa pada TextField properties isikan dengan username untuk textfield username dan isikan
password untuk textfield password.
8) Untuk TextField password jangan lupa mengubahnya ke mode “password” agar setiap karakter yang
diketik muncul bulatan-bulatan.
9) Untuk mengaktifkan form login dengan cara menambahkan User Authentication Log In User
10) Isikan seperti gambar di bawah ini.
11) Menggunakan table data dengan Username dan password Column seperti di atas
Setelah login sukses maka akan diarahkan ke halaman user_home.php dan jika login aggal maka
akan diarahkan ke user_failed.php.
Untuk pengaturan restrict menggunakan username dan password
12) Setelah itu klik OK
13) Form Login telah aktif
14) Untuk mempercantik Form Login maka tambahkan Place Holder dengan cara klik TextField pada
Username kemudian klik tombol Quick Tag Editor dan tambahkan sehingga menjadi seperti gambar.
15) Lakukan hal yang sama pada TextField Password
16) Tampilan pada browser seperti gambar ini.
Membuat Input Data
1) Hubungkan kata disini dengan halaman register.php (save as index.php menjadi register.php)
2) Hubungkan kata Administrator? Dengan halaman admin/admin_login.php (untuk login

administrator).
3) Save As index.php menjadi register.php
4) Setelah koneksi ke database MySQL berhasil dilakukan, maka selanjutnya kita akan membuat
halaman untuk melakukan input data pegawai ke database MySQL. Pada dasarnya untuk
membuat aplikasi input data, kita harus membuat form inputan terlebih dahulu. Namun dengan
bantuan Macromedia Dreamweaver, kita akan memanfaatkan fasilitas yang sudah tersedia,
sehingga tidak perlu membuat form terlebih dahulu
5) Hapus semua pada bagian body.
6) Kita akan membuat RecordSet terlebih dahulu.
7) Klik tanda (+) Plus pada Server Behaviors lalu pilih Recordset
8) Beri nama Recordset kita dengan menggunakan koneksi pegawai dan table data.
9) Pilih Column = All,Filter = None,dan Sort = None
10) Klik OK.satu recordset telah dibuat.

11) Kita akan membuat form untuk pendaftaran (input/insert)
12) Klik menu Insert Application Objects Insert Record Insert Record From Wizard
13) Isikan setelah memasukkan data akan diarahkan ke sukses_register.php?file=uploaded
Id dihilangkan
Username dan Password disembunyikan (Hidden Field)
Level dihidden dan diisi default value dengan 1 (satu)
Untuk Jenis kelamin Display As radio Group dengan pengaturan sebagai berikut
Untuk Alamat Display As Text Area

14) Setelah selesai klik OK dan akan muncul tampilan seperti gambar di bawah ini
15) Pada Foto klik TextField dan hapus lalu diganti dengan FileField dengan cara klik Insert Form
File Field lalu beri nama field tersebut dengan foto.
16) Klik Show Code View lalu cari

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
17) Setelah ketemu tambahkan script di bawah ini
$target = "upload_foto/"; //hasil upload mau ditaruh dimana???//
$target = $target . basename( $_FILES['foto']['name']);
upload_foto adalah folder dimana hasil upload foto diletakkan.
18) Ubah ($_POST [‘foto’], “text”)) menjadi ($_FILES[‘foto’][‘name’],
“text”))
19) Lalu tambahkan script ini dibawahnya.
if(move_uploaded_file($_FILES['foto']['tmp_name'], $target))
{
20) Cari header(sprintf("Location: %s", $insertGoTo)); lalu tambahkan script ini
dibawahnya
}else{
header(sprintf("Location: failed_register.php?file=error"));
}
21) Untuk mendesain lebih lanjut kita bisa membuat link css di setiap halaman agar mempermudah kita
dalam mendesain tampilan tanpa mengubahnya satu persatu.
22) Editlah form register seperti gambar di bawah ini (optional.wkwkwk)
23) Tampilan pada browser
Membuat User Home
1) Save As index.php menjadi user_home.php seperti gambar di bawah ini.
2) Lalu buat sebuah Recordset baru
3) Beri nama Recordset tadi dengan nama misalnya rsHome
Pada filter lihat seperti gambar di bawah ini.
4) Sebuah Recordset telah dibuat
5) Buat sebuah kata-kata yang menujukkan kalau user telah Login
6) Masuk ke Mode Bindings lalu pilih nama dan Drag (seret) dan lepaskan seperti pada gambar.ini
menunjukkan nantinya nama bersifat dinamis.
7) Buat script php yang menujukkan Hari dan tanggal
<?php $namahari =
array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu");
$namabulan =
array("","Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus
","September","Oktober","November","Desember");
echo $namahari[date("w")].", ".date("j")." ".$namabulan[date("n")]."
".date("Y");?>
8) Buat table baru dengan 7 baris dan 2 kolom untuk Menu.
9) Hasilnya seperti gambar di bawah ini.
10) Insert gambar dan text untuk menu agar lebih serasi
11) Pilih file gambar yang akan digunakan
12) Menu Home telah selesai dibuat
13) Lakukan pada semua baris dan kolom hingga seperti gambar di bawah ini.
Membuat Restrict Halaman
1) Agar yang dapat mengakses seuatu halaman beserta isinya hanyalah memberi yang terdaftar maka
perlu dibuat sebuah restrict dengan cara
2) Apabila seseorang mencoba mengakses tanpa mempunyai hak akses maka akan diarahkan ke
halaman forbidden.php
3) Tampilannya seperti di bawah ini
4) Hubungkan (beri link)
Home dengan user_home.php
Show Data dengan user_data.php
Edit Data dengan user_edit.php
My Files dengan user_files.php
Forum dengan user_forum.php
News dengan user_news.php
Logout dengan authentication logout
Semua halaman sudah terinclude restrict.
Membuat Menu Logout
1) Untuk memberikan sebuah Authentication Logout dengan cara menyeleksi dahulu kata logout lalu
klik (+) User Authentication Log Out User
2) Isikan halaman ketika logout sukses
Membuat Menu Pembuka
1) Buatlah sebuah kalimat pembuka pada saat User berhasil login.misalnya seperti di bawah ini
2) Untuk membuat nama menjadi dinamis maka lakukan drag pada nama seperti gambar di atas.
3) Tambahkan gambar foto dari user yang login agar terlihat lebih ng-jreng.
4) Fotonya masih statis.kita akan buat menjadi dinamis

5) Drag foto ke dalam sembarang tempat pada project Dreamweaver lalu pilih mode split untuk
melihat sumber code.nah setelah didapat source code dari foto tersebut maka Cut lah.
6) Kembali pada foto statis tadi
7) Klik foto lalu pada src(source) masukkan upload_foto/<?php echo $row_rsHome['foto'];
?>
8) Maka gambar tadi akan berubah.lihat gambar
Membuat Halaman Ubah Password
1) Untuk menambahkan fasilitas mengedit username dan password maka buatlah halaman dengan
alamat user_ubah_password.php (untuk mengedit username dan password) dan
user_konfirmasi.php (untuk konfirmasi data terbaru)
2) Buka halaman user_ubah_password.lalu buat sebuah Recordset
3) Setelah itu pilih Insert Record From Wizard
4) Semua field di hidden field kecuali username dan password.
5) Setelah klik OK maka tampilannya seperti gambar di bawah ini.
6) Llau buka halaman user_konfirmasi.php lalu buat table seperti di bawah ini.untuk menampilkan foto
sudah saya jelaskan sebelumnya.
7) Setelah itu klik save.
8) Buka user_home.php tambahkan link untuk menuju ke user_ubah_password.php
9) Pilih user_ubah_password.php lalu klik parameter nya
10) Pada Name isikan id dan pada value nya pilih id.lihat gambar
11) Klik OK
Membuat Halaman Show Data
1) Langkah selanjutnya adalah membuka hasil save as yaitu user_data.php

2) Pada halaman user_data.php buat Recordset baru
3) Setelah itu buat sebuah table dengan rincian sebagai berikut
4) Ubah Align menjadi center.
5) Setelah itu ubahlah table tadi menjadi lebih menarik missal seperti gambar di bawah ini.termasuk
gambar kosongan yang nantinya untuk foto setiap member
6) Seperti yang telah di bahas sebelumnya.lakukan drag drop dari Bindings Recordset menuju ke kolom
dan baris yang inginkan.
7) Untuk foto terlebih dahulu drag ke sembarang tempat,ambil source code nya lalu masukkan pada
src gambar.lihat gambar di bawah ini.
8) Kalau sudah selesai di simpan
Membuat Halaman Update Data
1) Untuk selanjutnya adalah membuat sebuah form untuk mengedit data.

2) Buka user_edit.php lalu buat sebuah Recordset
3) Lalu menambahkan Update Record From Wizard
4) Untuk id dihilangkan
Untuk username,password,dan level di hidden field.klik OK
5) Maka akan terbentuk seperti gambar di bawah ini.
6) Karena disini juga mengupdate foto maka pengaturan lebih lanjut diperlukan
7) Hapus textField ada foto untuk digantikan dengan FileField.lalu filefield name beri nama dengan foto
8) Ubah ke Mode Code
9) Cari if ((isset($_POST["MM_update"])) && ($_POST["MM_update"] == "form2")) {
10) Lalu tambahkan script ini dibawahnya

$target = "upload_foto/"; //This is the directory where file will be
uploaded//
Pastikan folder ini sama dengan folder waktu pendaftaran user
11) Kemudian tambahkan if(move_uploaded_file($_FILES['foto']['tmp_name'],
$target))
{
12) Setelah di update berhasil akan dibawah ke user_data.php?file=uploaded dan jika gagal akan
dibawa ke user_data.php?file=error
13) Setelah itu di save
Uji Coba (Bagian 1)
1) Sekarang melakukan percobaan dengan mendaftarkan user baru.
2) Klik register
3) Isikan data kalau sudah klik Register
4) Pendaftaran user baru sukses dan bisa untuk login
5) Login dengan username dan password yang telah didaftarkan
6) Tampilan pembuka setelah berhasil login
7) Untuk menampilkan biodata user klik Show Data
8) Untuk mengedit data klik Edit Data.
9) Misal saya mengedit menjadi Dwi Yulianto Is The Best dengan Tempat Lahir dan Alamat diganti
dengan Yogyakarta.
10) Maka tampilan setelah di edit menjadi seperti gambar di bawah ini.
11) Untuk mengubah username dan password masuk ke user_home.php dan klik Ubah Password?
12) Ketikkan username atau password yang baru
13) Username atau password telah berhasil di ubah.
Membuat Halaman Login Admin
1) Untuk admin saya masukkan halaman-halamannya di folder admin
2) Buat sebuah halaman baru untuk login admin.lalu buat table untuk form loginnya
3) Tampillannya kira-kira seperti ini.
4) Dengan sedikit perubahan hingga menjadi seperti ini.
5) Jangan lupa TextField nya masing-masing di beri nama username dan password.
6) Buat Log In User seperti gambar.
7) Kali ini menggunakan table admin
8) Setelah selesai kira-kira seperti di bawah ini.
9) Jika login berhasil maka akan dibawa ke admin_home.php dan jika gagal akan muncul seperti
ini.
10) Buka admin_home.php sedemikian rupa dan jangan lupa untuk membuat Restrict sesuai dengan
penjelasan sebelumnya.kemudian Save As dari user_home.php menjadi:
admin_user_mgmt.php
admin_web_mgmt.php
admin_gallery_mgmt.php
admin_file_mgmt.php
admin_news_mgmt.php
admin_show_user.php
admin_edit_user.php
Membuat User Management
1) Setelah selesai lalu buka admin_user_mgmt.php dan buat sebuah table seperti gambar di bawah ini.
2) Setelah itu akan tampil tabelnya.
3) Hiaslah table tersebut hingga kira-kira seperti ini.
4) Tambahkan gambar dan keterangan.
5) Buat sebuah Recordset baru dengan nama rsAdminShowUser
6) Klik OK kalau sudah.lalu buka mode Bindings dan lakukan drag drop
Membuat Repeat Region
1) Seleksi satu baris paling bawah.lalu buka mode Server Behaviors dan klik (+) Repeat Region
2) Pilih All records lalu klik OK.
3) Tampilannya seperti di bawah ini.
Membuat Show Data Admin
1) Untuk selanjutnya buka halaman admin_show_user.php lalu buat tabel dengan rincian sebagai
berikut.
2) Lalu buat sebuah Recordset beri nama rsShowAdminUser.Filter yang dipakai adalah id
3) Tabel yang dibuat kirakira seperti ini.tinggal di permak pakai sentuhan CSS.
4) Klik menuju ke Bindings.lalu drag Recordset tadi ke kolom dan baris yang sesuai.
Untuk foto lakukan seperti pada saat penjelasan saya sebelumnya.
5) Setelah itu save halaman admin_show_user.php
Membuat Edit Data Admin
1) Selanjutnya buka admin_edit_user.php untuk membuat form pengeditan.

2) Buat Recordset lagi dengan nama rsAdminEditUser.filter yang digunakan adalah id
3) Buat update record dengan cara:
4) Aturlah sedemikian rupa sehingga muncul tampilan seperti di bawah ini.
5) Save halaman admin_edit_user.php
Membuat Detele Data
1) Buat sebuah halaman delete_user.php (save as dari admin_home.php)

2) Pada halaman tersebut buatlah delete record
3) Lakukan pengaturannya seperti di bawah ini.setelah ada perintah delete maka akan kembali ke
admin_user_mgmt.php
Setting User Management
1) Setelah semuanya di save,kembalilah ke admin_user_mgmt.php untuk pengaturan lebih

lanjut.seleksi kata Show lalu beri link.lihat gambar
2) Saya akan hubungkan dengan halaman admin_show_user.php tetapi saya perlu mengatur
parameternya terlebih dahulu.
3) Kemudian pada Name isikan id dan pada value nya pilihlah id.klik OK
4) Setelah selesai giliran kata Edit diseleksi kemudian dihubungkan dengan admin_user_edit.php
5) Atur parameternya juga.
6) Pada Name isikan id dan pada value pilihlah id.lihat gambar.klik OK
7) Dan yang selanjutnya adalah menyeleksi kata Delete untuk di hubungkan dengan halaman
admin_delete_user.php
8) Pilih admin_delete_user.php dan atur parameternya
9) Untuk Name pilih id dan pada Value pilih id.

10) Masih di admin_user_mgmt,saya ingin membuat setiap foto berbeda tiap user.maka lakukan seperti
pada langkah-langkah sebelumnya.
11) Klik foto,drag pada sembarang tempat.lalu buka Code View dan Cut code script PHPnya.
12) Klik foto 35px X 35px lalu atur menjadi dinamis.
Membuat Halaman Ubah Password
1) Untuk menambah fasilitas ubah username dan password langkah-langkahnya sebagai berikut.
2) Buat kata-kata misalnya Ganti User Password.

3) Buat halaman pengeditan username dan password dan halaman konfirmasi perubahan yang
dilakukan.
4) Buka halaman admin_edit_password.php lalu buat sebuah Recordset dengan nama
rsAdminUbahPassword.filter yang digunakan adalah id
5) Buat Update Record From Wizard
6) Lalu sembunyikan semua field kecuali username dan password
7) Tampilan pada Dreamweaver
8) Selanjutnya adalah membuka admin_password_berhasil.php alu buat sebuah Recordset baru

seperti berikut ini.
9) Pengaturan filter adalah id
10) Langkah selanjutnya adalah membuat tabel baru seperti gambar di bawah ini.
11) Kemudian seperti panduan saya sebelumnya untuk men-drag drop recordset ke dalam tabel seperti
gambar di atas.jangan lupa untuk foto dengan cara sebagai berikut.
12) Setelah itu simpan halaman.
13) Pada tutorial ini sudah include kan Restrict Page di setiap halaman.
Uji Coba (Bagian 2)
1) Buka halaman index.php lalu klik Administrator? yang nantinya akan dibawa ke admin_login.php
2) Tampilan login seperti gambar di bawah ini.
3) Login dengan username dan password dari admin.

4) Setelah berhasil maka akan dibawah ke halaman seperti di bawah ini.
5) Buka halaman User Management untuk mengatur pengaturan user-user yang terdaftar.
6) Pada daftar di atas sudah terlihat user-user yang telah terdaftar.
7) Untuk menampilkan Biodata User maka klik Show.
8) Nanti akan terlihat seperti di bawah ini.saya mencoba menampilkan user dari Adib Rahmanudin
9) Di atas sudah muncul tampilan biodata dari Adib Rahmanudin.
10) Untuk mengubah atau mengupdate username dan password dari User Adib Rahmanudin maka klik
Ganti User Password.
11) Maka akan muncul tampilan seperti gambar di bawah ini.
12) Ketikkan username atau password yang baru
13) Setelah terupdate maka muncul tampilan seperti berikut ini yang menandakan bahwa username dan
password telah berhasil diubah.
14) Setelah itu mencoba untuk mengedit atau mengupdate data dari user lainnya mislanya Andi
Kurniawan..
15) Klik Edit maka muncul tampilan seperti gambar di bawah ini.
16) Editlah data misalnya seperti gambar di bawah ini.
17) Maka setelah di edit tampilannya seperti di bawah ini.
Membuat Upload File dan Galeri
1) Setelah itu saya akan membuat upload file pada User.

2) Pertama buat tabel baru pada database
3) Buat seperti gambar di bawah ini
4) Akan muncul tampilan tabel yang telah dibuat
5) Nanti akan tambahan saatu pada database Pegawai.
6) Kita perlu merefresh MySQL Connectionnya
7) Buka halaman user_file.php lalu buat Recordset baru menggunakan tabel myfile.
8) Field id dihilangkan.
9) Setelah itu klik OK
10) Buat Insert Record From Wizard
11) Setelah deskripsi diganti dengan Text Area

Id dihilangkan
Setelah di upload maka akan langsung menuju ke upload_success.php?file=uploaded
12) Klik OK
13) Nanti akan muncul tampilan form input data seperti berikut ini.
14) Jika dilihat dari browser seperti berikut ini

15) Ganti textfield diganti dengan file field
16) Sehingga menjadi seperti ini.
17) Field file diberi nama dengan foto.
18) Masuk ke View Code.
Temukan if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] ==
"form1")) {
(tergantung memakai form1,form2,dst)
19) Lalu tambahkan script ini
$target = "upload/"; //This folder ini temat gue menampung hasil upload //
Ubah ($_POST [‘foto’], “text”)) menjadi ($_FILES[‘foto’][‘name’], “text”))
Lalu tambahkan script ini dibawahnya.
if(move_uploaded_file($_FILES['foto']['tmp_name'], $target))
Cari header(sprintf("Location: %s", $insertGoTo)); lalu tambahkan script ini

dibawahnya
}else{
header(sprintf("Location: upload_file.php?file=error"));
}
Lihat gambar di atas.
20) Pada upload_file.php tambahkan sebuah Recordset baru dengan filter none dan pengurutan dari id
Ascending.tampilan scriptnya seperti berikut ini.
21) Copy script recordset tadi di atas $editFormAction = $ SERVER[‘PHP_SELF’];
22) Kemudian tambahkan script di bawah ini di atas Form input data tadi ditambah dengan tag
<div></div>
<?php if(isset($_GET['file']) && ($_GET['file']=="uploaded")) { ?>
<h1 class="style5">Terimakasih, file Anda berhasil diupload</h1>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="23%" rowspan="3"><span class="style5"><strong><img
src="upload/<?php echo $row_rsGalery['nama_file']; ?>" width="63"
height="73"></strong></span></td>
<td width="27%"><span class="style8">Nama</span></td>
<td width="3%"><span class="style5">:</span></td>
<td width="47%"><span class="style47"><span class="style53"><?php echo
$row_rsGalery['judul_file']; ?></span></span></td>
</tr>
<tr>
<td><span class="style8">Keterangan</span></td>
<td><span class="style5">:</span></td>
<td nowrap><span class="style47"><span class="style53"><?php echo
$row_rsGalery['deskripsi_file']; ?></span></span></td>
</tr>
<tr>
<td><span class="style8">Uploaded By </span></td>
<td><span class="style5">:</span></td>
<td nowrap><span class="style54"><?php echo $row_rsHome['nama'];
?></span></td>
</tr>
</table>
<h3 class="style5"><span class="style5">
<?php }elseif(isset($_GET['file']) && ($_GET['file']=="error")) { ?>
</span></h3>
<h1 class="style5">Mohon maaf, terjadi error dalam proses upload file</h1>
<p class="style5"><img src="images/attention-icon.png" width="32"
height="32"></p>
<p class="style5"><a href="upload_file.php">Ulangi upload file</a></p>
<span class="style5">
<?php }else{ ?>
23) Lihat gambar biar jelas.hehe
24) Dibawah ini menggunakan logika if else
25) Dan tambahkan penutupnya di bawah Form input script di bawah ini.
<?php } ?>
Lihat gambar di bawh ini.jangan lupa tempatkan penutup </div> setelah <form>
26) Tampilan sementara halaman upload_file.php menjadi seperti gambar di bawah ini.
27) Kalau upload berhasil dan gagal nanti aka nada notifikasinya.
28) Setelah itu masuk ke halaman user_files.php untuk membuat daftar foto yang telah di upload oleh
user yang terdaftar.
29) Buat tabel baru 2 bari dan 3 kolom
Desain semenarik mungkin
30) Lalu pada kolom Nama File diisi dengan recordset dari nama file,untuk preview diisi dengan
PlaceHolder yang di link kan dengan Recordset foto sedangkan Action dikosongkan karena user tidak
berhak mengedit foto.
Lihat gambar
31) Setelah itu buat Repeat Region pada baris kedua.
32) Sebelumnya anda harus buat recordset terlebih dahulu.

Hasilnya seperti berikut ini
33) Setelah itu buat sebuah link menuju ke upload_file.php
34) Simpan hasil pekerjaan kita.
Uji Coba (Bagian 3)
1) Kita uji upload file tadi.login terlebih dahulu pada salah satu akun user biasa.
2) Masuk ke menu User File klik Upload New
3) Sekarang mencoba untuk login dan mengupload sebuah file.
4) Nanti jika berhasil muncul seperti ini.
5) Apabila gagal muncul penampakan seperti gambar berikut.
35) Nanti akan muncul galeri seperti gambar di bawah ini.
Membuat Gallery Administrator
1) Setelah itu saya akan membuat gallery untuk Administrator

2) Pertama buat file php baru
3) Copykan script di bawah ini lalu simpan dengan nama paging.class.php di folder ../htdocs/pegawai
<?php
class Display {
function pagination($rows, $per_page, $current_page, $page_link) {
global $core,$C;
// Create a Page Listing

$this->pages = ceil($rows / $per_page);
// If there's only one page, return now and don't bother

if($this->pages == 1) {
return;
}
// Pagination Prefix
$output .= "";
$output = "Pages: ";
// Should we show the FIRST PAGE link?

if($current_page > 2) {
$output .= "<a href=\"". $page_link ."?page=1\"
title=\"First Page\">First</a>";
}
// Should we show the PREVIOUS PAGE link?

if($current_page > 1) {
$previous_page = $current_page - 1;
$output .= " <a href=\"". $page_link ."?page=".
$previous_page ."\" title=\"Previous Page\">Prev</a>";
}
// Current Page Number

$output .= "<strong>[ ". $current_page ." ]</strong>";
// Should we show the NEXT PAGE link?

if($current_page < $this->pages) {
$next_page = $current_page + 1;
$output .= "<a href=\"". $page_link ."?page=". $next_page
."\" title=\"Next Page\">Next</a>";
}
// Should we show the LAST PAGE link?

if($current_page < $this->pages - 1) {
$output .= " <a href=\"". $page_link ."?page=". $this-
>pages ."\" title=\"Last Page\">Last</a>";
}
// Return the output.

return $output;
}
}
4) File paging.class.php di atas pengaturan page pagination
5) Setelah itu buat file php baru isikan dengan script di bawah ini.beri nama dengan thumb.php
<?
isset($_GET['img']) or die('NO IMAGE');
include "includes/thumbnail.class.php";
$thumb = new T10Thumbnail;
$thumb->setMaxWidth(100); // lebar maksimal untuk setiap image adalah
80px
$thumb->getThumbnail($_GET['img']); // generate thumbnail image
?>
6) File thumb.php untuk pengaturan thumbnail gambar.simpan sejajar dengan index.php dan
paging.class.php
7) Untuk selanjutnya download script untuk gallery.disini menggunakan thickbox.download pada
halaman resminya .
8) Setelah di download lalu extract folder includes sejajar dengan index.php
9) Setelah itu masuk pada halaman Gallery Management lalu tambahkan script di bawah ini masuk
pada Code View
10) Lalu tambahkan script berikut ini pada tempat yang diinginkan galeri akan muncul.
<?
$dir = "upload/"; // tentukan folder dimana anda menyimpan image
if ($handle = opendir($dir)) {
$data = array();
while (false !== ($file = readdir($handle))){ // looping untuk
mendapatkan daftar file pada suatu folder
if($file == '.' || $file == '..') continue; // kalau bukan
file gambar dihiraukan
#if($x%4==0) echo '</tr><tr>'; // apabila sudah looping gambar
sebanyak 4x maka buat baris baru
$path = $dir.$file;
/*
Perhatikan pada tag <a> ada class="thickbox" --> agar
ketika gambar ini di tekan akan terbuka
preview gambar tsb pada layar thickbox.
Perhatikan juga ada attribute rel="mygallery" -->
agar dari gambar satu ke gambar lain terhubung
dan pada layar thickbox terdapat link navigator untuk
slideshow gambar.
Untuk lebih jelas ttg thickbox silahkan melihat
manual disini
http://jquery.com/demo/thickbox/
*/
$data[] = array(
'filepath' => $path
);
#echo '<td><a href="'.$path.'" class="thickbox"
rel="mygallery"><img src="thumb.php?img='.$path.'" border="0"
/></a></td>';
#$x++;
}
$x = 0;
$totaldata = count($data);
$image_per_halaman = 12;
include 'paging.class.php';
$display = new Display(); // class dari paging
$page = isset($_GET['page']) ? $_GET['page'] : 1; // posisi page
saat ini
if(isset($data[$page])){ // cek apakah ada data pada halaman paging

ini
echo '<table border=0><tr>';
// looping berdasar row array
$start_data = ($page-1) * $image_per_halaman;
for($xpage = $start_data;$xpage < $start_data +
$image_per_halaman; $xpage++){
if($x%4==0) echo '</tr><tr>'; // apabila sudah looping
gambar sebanyak 4x maka buat baris baru
echo '<td align="center">';
if(isset($data[$xpage]))
echo '<a href="'.$data[$xpage]['filepath'].'"
class="thickbox" rel="mygallery">'.$data[$xpage]['filename'].'<br /><img
src="thumb.php?img='.$data[$xpage]['filepath'].'" border="0"
title="'.$data[$xpage]['filename'].'" /></a>';
else
echo ' ';
echo '</td>';
$x++;
}
echo '</tr></table>';
}else echo "Data pada halaman ini kosong.Upload yang baru bro !";
echo $display->pagination($totaldata,$image_per_halaman,$page,"");
closedir($handle);
}
?>
11) Lakukan pengaturan script sesuai kbutuhan dan keinginan :D
12) Simpan pekerjaan kita.
Uji Coba (Bagian 4)
1) Login Administrator
2) Lalu buka menu Gallery Management.disana akan ditampilkan semua file (gambar) yang berada
pada alamat ../htdocs/pegawai/upload
3) Klik salah satu file maka akan muncul tampilan seperti gambar di bawah ini.
4) Klik Next untuk gambar selanjutnya.
5) Tiap halaman saya atur menjadi 8 gambar.dan menggunakan Page Navigasi.
Tutorial di atas hanya dasar-dasarnya saja.Anda bisa mengembangkannya lebih lanjut.
Sekian dulu tutorial dari saya
saya,nantikan kelanjutan tutorial dari saya ini pada ebook selanjutnya.
selanjutnya
Kunjungi Blog http://the-xp.blogspot.com
xp.blogspot.com untuk tips trik komputer dan artikel komputer lainnya.
To be Continued…
Tentang Penulis
Dwi Yulianto. Lahir di Magelang,31 Juli 1994.Memulai pendidikan dasar di

SD Negeri 1 Candimulyo,Kemudian melanjutkan pendidikan menengah
pertama di SMP Negeri 1 Candimulyo,dan saat ini tengah menempuh
pendidikan di SMK Negeri 1 Magelang jurusan Teknik Komputer dan
Jaringan.
Mulai tertarik di dunia komputer sejak mengenyam pendidikan di SMK
Kegiatan sehari-hari
sehari hari belajar di sekolah dan belajar ilmu komputer dengan
fasilitas seadanya .
Blogging.Penulis memiliki blog utama http://the-xp.blogspot.com
Tertarik juga di dunia Blogging xp.blogspot.com yang berisi
kumpulan tips trik komputer internet dan ebook.
Informasi lebih lanjut mengenai penulis bisa didapat melalui:

Facebook : http://facebook.com/dwix.xp
Blog : http://the-xp.blogspot.com
http://the
Email : dwixboy@yahoo.co.id

Tutorial Membuat Sistem Informasi Kepega PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial Membuat Sistem Informasi Kepega PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Tutorial Membuat Sistem Informasi

Kepegawaian Berbasis MySQL dan

HALAMAN JUDUL --------------------------------------------------------------------------------------- 1

1. Membuat Database Baru ------------------------------------------------------------------------- 3

2) Buka Dreamweaver dan browser

8) Isi field seperti gambar di bawah ini.

Untuk Level defaultnya isikan dengan angka 0 (nol).

12) Lalu kemudian klik Go.

1) Setelah itu kita beralih ke Dreamweaver.

3) Klik New untuk membuat Site baru.

7) Klik OK untuk melanjutkan.

Sekarang waktunya membuat koneksi antara Dreamweaver dengan memanfaatkan tools

2) Klik MySQL Connection

4) Default username adalah root dan passwordnya kosong.

4) Jangan lupa save as lah index.php menjadi register.php,news.php,about.php dan help.php

1) Buat form login untuk login pegawai.

4) Untuk Username dan Password menggunakan Text Field dengan cara:

15) Lakukan hal yang sama pada TextField Password

2) Hubungkan kata Administrator? Dengan halaman admin/admin_login.php (untuk login

10) Klik OK.satu recordset telah dibuat.

Untuk Alamat Display As Text Area

16) Klik Show Code View lalu cari

22) Editlah form register seperti gambar di bawah ini (optional.wkwkwk)

23) Tampilan pada browser

1) Save As index.php menjadi user_home.php seperti gambar di bawah ini.

2) Lalu buat sebuah Recordset baru

4) Sebuah Recordset telah dibuat

9) Hasilnya seperti gambar di bawah ini.

11) Pilih file gambar yang akan digunakan

3) Tampilannya seperti di bawah ini

2) Isikan halaman ketika logout sukses

4) Fotonya masih statis.kita akan buat menjadi dinamis

3) Setelah itu pilih Insert Record From Wizard

9) Pilih user_ubah_password.php lalu klik parameter nya

1) Langkah selanjutnya adalah membuka hasil save as yaitu user_data.php

3) Setelah itu buat sebuah table dengan rincian sebagai berikut

1) Untuk selanjutnya adalah membuat sebuah form untuk mengedit data.

3) Lalu menambahkan Update Record From Wizard

10) Lalu tambahkan script ini dibawahnya

1) Sekarang melakukan percobaan dengan mendaftarkan user baru.

5) Login dengan username dan password yang telah didaftarkan

7) Untuk menampilkan biodata user klik Show Data

13) Username atau password telah berhasil di ubah.

1) Untuk admin saya masukkan halaman-halamannya di folder admin

3) Tampillannya kira-kira seperti ini.

2) Setelah itu akan tampil tabelnya.

4) Tambahkan gambar dan keterangan.

5) Buat sebuah Recordset baru dengan nama rsAdminShowUser

2) Pilih All records lalu klik OK.

3) Tampilannya seperti di bawah ini.

1) Selanjutnya buka admin_edit_user.php untuk membuat form pengeditan.

3) Buat update record dengan cara:

1) Buat sebuah halaman delete_user.php (save as dari admin_home.php)

1) Setelah semuanya di save,kembalilah ke admin_user_mgmt.php untuk pengaturan lebih

5) Atur parameternya juga.

9) Untuk Name pilih id dan pada Value pilih id.

2) Buat kata-kata misalnya Ganti User Password.

5) Buat Update Record From Wizard

8) Selanjutnya adalah membuka admin_password_berhasil.php alu buat sebuah Recordset baru

3) Login dengan username dan password dari admin.

9) Di atas sudah muncul tampilan biodata dari Adib Rahmanudin.

11) Maka akan muncul tampilan seperti gambar di bawah ini.

12) Ketikkan username atau password yang baru