Tutorial Membuat Sistem Informasi Kepega (1)
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.
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.
Membuat Database Baru ------------------------------------------------------------------------- 3
Membuat Site baru -------------------------------------------------------------------------------- 7
Koneksi Dreamweaver dan MySQL ----------------------------------------------------------- 11
Memulai Halaman Baru ------------------------------------------------------------------------- 13
Membuat Form Login---------------------------------------------------------------------------- 14
Membuat Input Data ---------------------------------------------------------------------------- 21
Membuat Home User---------------------------------------------------------------------------- 30
Membuat Restrict Halaman -------------------------------------------------------------------- 37
Membuat Menu Logout ------------------------------------------------------------------------- 39
Membuat Menu Pembuka---------------------------------------------------------------------- 40
Membuat Halaman Ubah Password ---------------------------------------------------------- 42
Membuat Halaman Show Data ---------------------------------------------------------------- 47
Membuat Halaman Update Data-------------------------------------------------------------- 51
Uji Coba (Bagian 1) ------------------------------------------------------------------------------- 56
Membuat Halaman Login Admin -------------------------------------------------------------- 62
Membuat User Management ------------------------------------------------------------------ 67
Membuat Repeat Region ----------------------------------------------------------------------- 70
Membuat Show Data Admin ------------------------------------------------------------------- 71
Membuat Edit Data Admin --------------------------------------------------------------------- 74
Membuat Delete Data --------------------------------------------------------------------------- 77
Setting User Management ---------------------------------------------------------------------- 78
Membuat Halaman Ubah Password ---------------------------------------------------------- 84
Uji Coba (Bagian 2) ------------------------------------------------------------------------------- 89
Membuat Upload File dan Galeri-------------------------------------------------------------- 94
Uji Coba (Bagian 3) ------------------------------------------------------------------------------ 106
Membuat Gallery Administrator ------------------------------------------------------------- 108
Uji Coba (Bagian 4) ------------------------------------------------------------------------------ 112
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.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 3
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.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 4
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.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 5
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.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 6
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.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 7
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 8
Untuk URL prefic diisi sama seperti Testing server folder.
7) Klik OK untuk melanjutkan.
8) Site Pegawai telah dibuat.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 9
9) Klik Done
10) Jika masih terdapat error coba lagi seperti cara di atas.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 10
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.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 11
7) Sekarang Dreamweaver dan MySQL telah berhasil terkoneksi
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 12
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 13
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:
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 14
5) Untuk menambahkan tombol login atau reset lihat gambar berikut.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 15
6) Beri nama dengan Login
7) Jangan lupa pada TextField properties isikan dengan username untuk textfield username dan isikan
password untuk textfield password.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 16
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Log In User
Halaman 17
10) Isikan seperti gambar di bawah ini.
11) Menggunakan table data dengan Username dan password Column seperti di atas
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 18
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 19
16) Tampilan pada browser seperti gambar ini.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 20
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).
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 21
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 22
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 23
13) Isikan setelah memasukkan data akan diarahkan ke sukses_register.php?file=uploaded
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 24
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 25
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.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 26
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"));
}
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 27
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 28
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 29
Membuat User Home
1) Save As index.php menjadi user_home.php seperti gambar di bawah ini.
2) Lalu buat sebuah Recordset baru
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 30
3) Beri nama Recordset tadi dengan nama misalnya rsHome
Pada filter lihat seperti gambar di bawah ini.
4) Sebuah Recordset telah dibuat
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 31
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
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.
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.
Membuat Database Baru ------------------------------------------------------------------------- 3
Membuat Site baru -------------------------------------------------------------------------------- 7
Koneksi Dreamweaver dan MySQL ----------------------------------------------------------- 11
Memulai Halaman Baru ------------------------------------------------------------------------- 13
Membuat Form Login---------------------------------------------------------------------------- 14
Membuat Input Data ---------------------------------------------------------------------------- 21
Membuat Home User---------------------------------------------------------------------------- 30
Membuat Restrict Halaman -------------------------------------------------------------------- 37
Membuat Menu Logout ------------------------------------------------------------------------- 39
Membuat Menu Pembuka---------------------------------------------------------------------- 40
Membuat Halaman Ubah Password ---------------------------------------------------------- 42
Membuat Halaman Show Data ---------------------------------------------------------------- 47
Membuat Halaman Update Data-------------------------------------------------------------- 51
Uji Coba (Bagian 1) ------------------------------------------------------------------------------- 56
Membuat Halaman Login Admin -------------------------------------------------------------- 62
Membuat User Management ------------------------------------------------------------------ 67
Membuat Repeat Region ----------------------------------------------------------------------- 70
Membuat Show Data Admin ------------------------------------------------------------------- 71
Membuat Edit Data Admin --------------------------------------------------------------------- 74
Membuat Delete Data --------------------------------------------------------------------------- 77
Setting User Management ---------------------------------------------------------------------- 78
Membuat Halaman Ubah Password ---------------------------------------------------------- 84
Uji Coba (Bagian 2) ------------------------------------------------------------------------------- 89
Membuat Upload File dan Galeri-------------------------------------------------------------- 94
Uji Coba (Bagian 3) ------------------------------------------------------------------------------ 106
Membuat Gallery Administrator ------------------------------------------------------------- 108
Uji Coba (Bagian 4) ------------------------------------------------------------------------------ 112
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.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 3
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.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 4
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.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 5
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.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 6
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.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 7
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 8
Untuk URL prefic diisi sama seperti Testing server folder.
7) Klik OK untuk melanjutkan.
8) Site Pegawai telah dibuat.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 9
9) Klik Done
10) Jika masih terdapat error coba lagi seperti cara di atas.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 10
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.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 11
7) Sekarang Dreamweaver dan MySQL telah berhasil terkoneksi
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 12
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 13
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:
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 14
5) Untuk menambahkan tombol login atau reset lihat gambar berikut.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 15
6) Beri nama dengan Login
7) Jangan lupa pada TextField properties isikan dengan username untuk textfield username dan isikan
password untuk textfield password.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 16
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Log In User
Halaman 17
10) Isikan seperti gambar di bawah ini.
11) Menggunakan table data dengan Username dan password Column seperti di atas
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 18
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 19
16) Tampilan pada browser seperti gambar ini.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 20
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).
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 21
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 22
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 23
13) Isikan setelah memasukkan data akan diarahkan ke sukses_register.php?file=uploaded
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 24
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 25
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.
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 26
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"));
}
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 27
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
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 28
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 29
Membuat User Home
1) Save As index.php menjadi user_home.php seperti gambar di bawah ini.
2) Lalu buat sebuah Recordset baru
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 30
3) Beri nama Recordset tadi dengan nama misalnya rsHome
Pada filter lihat seperti gambar di bawah ini.
4) Sebuah Recordset telah dibuat
Sistem Informasi Kepegawaian Berbasis Dreamweaver dan MySQL untuk Pemula
Halaman 31
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