Membuat Aplikasi User Authentication
Dalam Tutorial Ini Diasumsikan…
Bahwa:
1. 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.
2. Anda mengetahui bagaimana cara login ke MySQL berikut informasi user dan password yang dapat digunakan.
3. Anda sudah membuat Site Definition pada Dreamweaver, berikut bagaimana mengkolaborasikan Dreamweaver dengan PHP-MySQL.
4. Anda sudah cukup mengerti bagaimana membuat database, membuat dan memanipulasi tabel di MySQL baik melalui console maupun dengan front-end seperti PHPMyAdmin dan MySQLFront.
5. Anda sudah cukup mengerti beberapa perintah SQL dasar (DDL, DML).
Mempersiapkan Database dan Tabel MySQL
Langkah pertama dalam membuat aplikasi web berbasis PHP dan MySQL dengan menggunakan Dreamweaver adalah mempersiapkan database dan tabel yang akan digunakan. Dalam tutorial ini akan digunakan DBMS MySQL. Tutorial ini hanyalah sebagai contoh sederhana bagaimana membuat proses entri, edit, delete dan tampil ke database MySQL dengan bantuan Dreamweaver. Namun demikian, jika Anda sudah memahami tutorial ini dengan baik, untuk aplikasi yang lebih kompleks tidaklah berbeda jauh. Pertama kali buatlah database di MySQL. Selanjutnya buatlah tabel di MySQL dengan nama admin dan dengan spesifikasinya sebagai berikut:
Bahwa:
1. 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.
2. Anda mengetahui bagaimana cara login ke MySQL berikut informasi user dan password yang dapat digunakan.
3. Anda sudah membuat Site Definition pada Dreamweaver, berikut bagaimana mengkolaborasikan Dreamweaver dengan PHP-MySQL.
4. Anda sudah cukup mengerti bagaimana membuat database, membuat dan memanipulasi tabel di MySQL baik melalui console maupun dengan front-end seperti PHPMyAdmin dan MySQLFront.
5. Anda sudah cukup mengerti beberapa perintah SQL dasar (DDL, DML).
Mempersiapkan Database dan Tabel MySQL
Langkah pertama dalam membuat aplikasi web berbasis PHP dan MySQL dengan menggunakan Dreamweaver adalah mempersiapkan database dan tabel yang akan digunakan. Dalam tutorial ini akan digunakan DBMS MySQL. Tutorial ini hanyalah sebagai contoh sederhana bagaimana membuat proses entri, edit, delete dan tampil ke database MySQL dengan bantuan Dreamweaver. Namun demikian, jika Anda sudah memahami tutorial ini dengan baik, untuk aplikasi yang lebih kompleks tidaklah berbeda jauh. Pertama kali buatlah database di MySQL. Selanjutnya buatlah tabel di MySQL dengan nama admin dan dengan spesifikasinya sebagai berikut:
Membuat Koneksi ke MySQL di Dreamweaver
Selanjutnya kita akan mengkoneksikan PHP dengan MySQL 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.
Berikut ini langkah-langkahnya:
1. Buatlah file dengan nama index.php sebagai halaman untuk login ke menu utama.
2. Aktifkan (buka) panel Application yang berada di sebelah sisi window utama Dreamweaver (lihat gambar)
3. Buka tab Databases pada panel Application tersebut.
4. Klik tombol [+] yang terdapat di dalam tab Databases dan pilih sub-menu MySQL Connection.
5. Akan ditampilkan window isian MySQL Connection (Lihat gambar). Isi nama koneksi, host mysql, username, dan password MySQL dengan benar (1), lalu klik tombol Select… untuk memilih database yang akan digunakan (2) dan klik tombol OK (3) untuk menyimpan konfigurasi koneksi MySQL.
Selanjutnya kita akan mengkoneksikan PHP dengan MySQL 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.
Berikut ini langkah-langkahnya:
1. Buatlah file dengan nama index.php sebagai halaman untuk login ke menu utama.
2. Aktifkan (buka) panel Application yang berada di sebelah sisi window utama Dreamweaver (lihat gambar)
3. Buka tab Databases pada panel Application tersebut.
4. Klik tombol [+] yang terdapat di dalam tab Databases dan pilih sub-menu MySQL Connection.
5. Akan ditampilkan window isian MySQL Connection (Lihat gambar). Isi nama koneksi, host mysql, username, dan password MySQL dengan benar (1), lalu klik tombol Select… untuk memilih database yang akan digunakan (2) dan klik tombol OK (3) untuk menyimpan konfigurasi koneksi MySQL.
6. Jika koneksi berhasil maka pada panel Application tab Databases akan ditampilkan informasi database berikut tabel-tabel yang terdapat dalam database tersebut.
Membuat Halaman untuk Login
Setelah koneksi ke database MySQL berhasil dilakukan, maka selanjutnya kita akan membuat halaman untuk melakukan login. Pada dasarnya untuk membuat halaman login, kita harus membuat form login terlebih dahulu. Berikut ini langkah-langkahnya:
1. Buatlah file dengan nama index.php sebagai halaman untuk login.
2. Buat form dan beri komponen text field dengan nama admin dan password. Kemudian tambahkan button untuk tombol login.
3. Pilih menu insert –> data objek –> user authentication –> log in user.
4. Masukkan data-data pada jendela Log In User sesuai dengan gambar 7. OK.
Setelah koneksi ke database MySQL berhasil dilakukan, maka selanjutnya kita akan membuat halaman untuk melakukan login. Pada dasarnya untuk membuat halaman login, kita harus membuat form login terlebih dahulu. Berikut ini langkah-langkahnya:
1. Buatlah file dengan nama index.php sebagai halaman untuk login.
2. Buat form dan beri komponen text field dengan nama admin dan password. Kemudian tambahkan button untuk tombol login.
3. Pilih menu insert –> data objek –> user authentication –> log in user.
4. Masukkan data-data pada jendela Log In User sesuai dengan gambar 7. OK.
Membuat Halaman Utama Administrator
Untuk membuat halaman yang menampilkan menu utama administrator, caranya cukup mudah. Kita akan menggunakan frame sebagai halaman menu utama. Berikut ini langkah-langkahnya:
1. Buatlah file dengan nama menu_utama.php untuk menampilkan halaman utama.
2. Untuk membuat frame pilih menu insert –> HTML –> frames –> Top Nested Left.
3. Buka tampilan code untuk merubah tampilan frame.
4. Ubahlah :
a. frameset rows menjadi frameset rows = “7%, *, 5%”Untuk membuat halaman yang menampilkan menu utama administrator, caranya cukup mudah. Kita akan menggunakan frame sebagai halaman menu utama. Berikut ini langkah-langkahnya:
1. Buatlah file dengan nama menu_utama.php untuk menampilkan halaman utama.
2. Untuk membuat frame pilih menu insert –> HTML –> frames –> Top Nested Left.
3. Buka tampilan code untuk merubah tampilan frame.
4. Ubahlah :
b. atribut name dari mainFrame menjadi name = “home”.
c. Tambahkan baris frame untuk frame bagian bawah.
frame src="bawah.html" scrolling="no" noresize="noresize"
d. Kode lihat gambar 10
5. Buatlah file-file yang akan digunakan untuk ditampilkan dalam frame.
6. Buatlah file baru dengan nama menu.php. Pilih menu Insert –> Spry –> Spry Menu Bar.
7. Pilih layout vertical untuk membuat menu menyamping.
8. Ubahlah properties menu antara lain text, link dan target. Lihat gambar 15.
7. Pilih layout vertical untuk membuat menu menyamping.
8. Ubahlah properties menu antara lain text, link dan target. Lihat gambar 15.
Membuat Restrict Access to Page
Halaman administrator adalah halaman untuk mengakses data-data penting. Untuk bisa masuk ke halaman administrator kita harus login terlebih dahulu. Untuk mencegah orang lain masuk ke halaman administrator tanpa melalui login terlebih kita perlu menggunakan hak akses. Restrict Access to Page adalah pemberian hak akses kepada orang yang terdaftar sebagai admin. Sehingga untuk dapat mengakses halaman administrator harus melalui login terlebih dahulu. Penggunaan Restrict Access to Page berlaku untuk semua halaman yang berada di dalam halaman administrator, jadi kita harus memberikan satu persatu setiap halaman yang dapat diakses di dalam administrator.
1. Buka file “menu_utama.php”.
2. Pilih menu Insert –> Data Objek –> User Authentication –> Restrict Access To Page.
Halaman administrator adalah halaman untuk mengakses data-data penting. Untuk bisa masuk ke halaman administrator kita harus login terlebih dahulu. Untuk mencegah orang lain masuk ke halaman administrator tanpa melalui login terlebih kita perlu menggunakan hak akses. Restrict Access to Page adalah pemberian hak akses kepada orang yang terdaftar sebagai admin. Sehingga untuk dapat mengakses halaman administrator harus melalui login terlebih dahulu. Penggunaan Restrict Access to Page berlaku untuk semua halaman yang berada di dalam halaman administrator, jadi kita harus memberikan satu persatu setiap halaman yang dapat diakses di dalam administrator.
1. Buka file “menu_utama.php”.
2. Pilih menu Insert –> Data Objek –> User Authentication –> Restrict Access To Page.
3. Pilih Restrict based on –> username and password, kemudian isikan nama file “logout.php” pada kolom if access denied, go to.
4. Ulangi langkah 2 s.d 3 pada semua file-file lainnya yang berada di folder admin.
4. Ulangi langkah 2 s.d 3 pada semua file-file lainnya yang berada di folder admin.
Membuat Halaman Log Out
Halaman Log Out digunakan untuk keluar dari halaman administrator. OK. Langsung saja ke TKP. Berikut langkah-langkahnya :
1. Buat file baru dengan nama “logout.php”.
2. Pilih menu Insert –> Data Objek –> User Authentication –> Log Out User.
3. Pilih link clicked, kemudian isikan nama file “index.php” pada kolom when done, go to. OK.
Halaman Log Out digunakan untuk keluar dari halaman administrator. OK. Langsung saja ke TKP. Berikut langkah-langkahnya :
1. Buat file baru dengan nama “logout.php”.
2. Pilih menu Insert –> Data Objek –> User Authentication –> Log Out User.
3. Pilih link clicked, kemudian isikan nama file “index.php” pada kolom when done, go to. OK.
Kesimpulan
Dalam tutorial ini hanya disampaikan langkah-langkah dasarnya, untuk tampilan yang lebih bagus, dan modifikasi kode kita bisa mengembangkannya sendiri.
Download Materi
Download Materi
Komentar
Posting Komentar