Membuat Sistem Informasi Kepegawaian Berbasis Dreamweaver dan My SQL Untuk Pemula

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.

Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula Halaman 2

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


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.

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.

Membuat Database


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.


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.

Membuat Site Baru


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.


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.

Koneksi Dreamweaver dan MySQL


7) Sekarang Dreamweaver dan MySQL telah berhasil terkoneksi


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 Halaman Baru


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:

Membuat Form Login


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.


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).

Membuat Input Data


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_ins ert"] == "form1")) {

17) Setelah ketemu tambahkan script di bawah ini

$target = "upload_foto/"; //hasil upload mau ditaru h dimana???//

$target = $target . basename( $_FILES['foto']['nam e']);

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


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

2) Lalu buat sebuah Recordset baru

Membuat User Home


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")." ".$nam abulan[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.


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

Membuat Restrict Halaman


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.


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 Logout


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.

Membuat Menu Pembuka


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


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

Membuat Halaman Ubah Password


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


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

Membuat Halaman Show Data


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


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

Membuat Halaman Update Data


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_upd ate"] == "form2")) {

10) Lalu tambahkan script ini dibawahnya

$target = "upload_foto/"; //This is the directory w here file will be

uploaded//

$target = $target . basename( $_FILES['foto']['name ']);

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


1) Sekarang melakukan percobaan dengan mendaftarkan user baru.

2) Klik register

3) Isikan data kalau sudah klik Register

Uji Coba (Bagian 1)


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.


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.

Membuat Halaman Login Admin


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


1) Setelah selesai lalu buka admin_user_mgmt.php dan buat sebuah table seperti gambar di bawah ini.

2) Setelah itu akan tampil tabelnya.

Membuat User Management


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


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 Repeat Region


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

Membuat Show Data Admin


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


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:

Membuat Edit Data Admin


4) Aturlah sedemikian rupa sehingga muncul tampilan seperti di bawah ini.


5) Save halaman admin_edit_user.php


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

Membuat Detele Data


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.

Setting User Management


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.


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

Membuat Halaman Ubah Password


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.


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.

Uji Coba (Bagian 2)


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.


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.

Membuat Upload File dan Galeri


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_ins ert"] == "form1")) { (tergantung memakai form1,form2,dst)

19) Lalu tambahkan script ini

$target = "upload/"; //This folder ini temat gue menampung hasil upload // $target = $target . basename( $_FILES['foto']['name ']);

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=erro r"));

}

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']=="u ploaded")) { ?>

<h1 class="style5">Terimakasih, file Anda berhasil diupload</h1>

<table width="100%" border="0" cellspacing="0" cel lpadding="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></t d>

<td width="47%"><span class="style47"><span cla ss="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="s tyle53"><?php echo

$row_rsGalery['deskripsi_file']; ?></span></span></ td>

</tr>

<tr>

<td><span class="style8">Uploaded By </span></t d>

<td><span class="style5">:</span></td>

<td nowrap><span class="style54"><?php echo $ro w_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.p ng" 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.


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.

Uji Coba (Bagian 3)


35) Nanti akan muncul galeri seperti gambar di bawah ini.

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_pag e, $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 ." ]</stro ng>"; // 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>";

Membuat Gallery Administrator


} // 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 th umbnail 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 m enyimpan 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 suda h 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 naviga tor untuk

slideshow gambar.

Untuk lebih jelas ttg thickbox silahkan meli hat

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 suda h 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]['f ilename'].'<br /><img

src="thumb.php?img='.$data[$xpage]['filepath'].'" b order="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.


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.

Uji Coba (Bagian 4)


4) Klik Next untuk gambar selanjutnya.

5) Tiap halaman saya atur menjadi 8 gambar.dan menggunakan Page Navigasi.

Sistem Informasi Kepegawaian Berbasis

Tutorial di atas hanya

Sekian dulu tutorial dari saya

Kunjungi Blog http://the-xp.blogspot.com

Tentang Penulis

Dwi Yulianto. Lahir di Magelang,31 Juli 1994.Memulai pendidikan dasar di

SD Negeri 1 Candimulyo,Kemudian melanjutkan

pertama

pendidikan di SMK Negeri 1 Magelang jurusan Teknik Komputer dan

Jaringan.

Mulai tertarik di dunia komputer sejak mengenyam pendidikan

Kegiatan sehari

fasilitas seadanya

Tertarik juga di dunia Blogging

kumpulan tips trik komputer internet dan ebook.

Informasi lebih lanjut mengenai penulis bisa didapat melalui:

Facebook : http://facebook.com/dwix.xp

Blog : http://the

Email : [email protected]

Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula

hanya dasar-dasarnya saja.Anda bisa mengembangkannya lebih

Sekian dulu tutorial dari saya,nantikan kelanjutan tutorial dari saya ini pada ebook selanjutnya

xp.blogspot.com untuk tips trik komputer dan artikel komputer lainnya.


SD Negeri 1 Candimulyo,Kemudian melanjutkan

pertama di SMP Negeri 1 Candimulyo,dan saat ini


Jaringan.

Mulai tertarik di dunia komputer sejak mengenyam pendidikan

Kegiatan sehari-hari belajar di sekolah dan belajar ilmu komputer dengan

fasilitas seadanya .

di dunia Blogging.Penulis memiliki blog utama http://the-xp.blogspot.com

kumpulan tips trik komputer internet dan ebook.

Informasi lebih lanjut mengenai penulis bisa didapat melalui:

http://facebook.com/dwix.xp

http://the-xp.blogspot.com

[email protected]

Dreamweaver dan MySQL untuk Pemula Halaman 115

mengembangkannya lebih lanjut.

pada ebook selanjutnya.

dan artikel komputer lainnya.

To be Continued…


SD Negeri 1 Candimulyo,Kemudian melanjutkan pendidikan menengah

di SMP Negeri 1 Candimulyo,dan saat ini tengah menempuh


Mulai tertarik di dunia komputer sejak mengenyam pendidikan di SMK

hari belajar di sekolah dan belajar ilmu komputer dengan

xp.blogspot.com yang berisi

Membuat Sistem Informasi Kepegawaian Berbasis Dreamweaver dan My SQL Untuk Pemula

Documents

Transcript of Membuat Sistem Informasi Kepegawaian Berbasis Dreamweaver dan My SQL Untuk Pemula