Menampilkan data diri dan edit profil setelah
melakukan log in
Dalam
aplikasi website, misalnya Facebook.com, ketika Anda berhasil melakukan log in,
maka data diri Anda akan ditampilkan di halaman profil. Di halaman tersebut,
Anda juga dapat melakukan editing profil yang Anda miliki.
Lalu bagaimanakah caranya kita
membuat halaman log in yang setelah kita berhasil melakukan log in, maka data
diri Anda ditampilkan dan dapat mengubah profil kita seperti contoh Facebook di
atas?
Pada tutorial kali ini, Anda akan
mempelajarinya.
Sebelum memasuki tutorial ini,
pastikan Anda telah:
Ada empat (4) file dan satu (1)
tabel data yang akan kita gunakan dalam tutorial ini. Keempat file tersebut
adalah:
- login.php,
sebagai halaman untuk log in.
- login_sukses.php, halaman yang akan terbuka setelah log in berhasil
dilakukan. Di halaman ini juga terdapat link dinamis untuk edit profil
orang yang melakukan log in.
- login_gagal.php, halaman yang akan terbuka jika proses log in
mengalami kegagalan, misalnya username dan passwordnya salah.
- edit_profil.php,
adalah halaman untuk edit profil orang yang log in.
Dan berikut adalah tabel data MySQL
yang selanjutnya kita sebut tabel users:
CREATE
TABLE IF NOT EXISTS `users` (
`id` int(5) NOT NULL AUTO_INCREMENT,
`nama` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`username` varchar(32) NOT NULL,
`password` varchar(32) NOT NULL,
PRIMARY KEY (`id`)
)
ENGINE=MyISAM DEFAULT CHARSET=latin1
AUTO_INCREMENT=2 ;
INSERT INTO `users` (`id`, `nama`, `email`, `username`,
`password`) VALUES
(1, 'Andoyo', 'contact@javawebmedia.com', 'andoyo', 'andoyo');
Berikut source code awal dari
keempat file di atas dan proses aktivasinya:
login.php
<html><head><title>Form
Log In</title></head>
<body>
<h1>Form Log In Member: </h1>
<form name=”form1″ method=”post” action=”">
<p><strong><label>Username: <input type=”text”
name=”username” id=”username”></label></strong></p>
<p><label><strong>Password</strong>:<input
type=”password” name=”password” id=”password”></label></p>
<p><input type=”submit” name=”submit” id=”submit” value=”Log
In”></p>
</form>
<p> </p>
</body>
</html>
Java Web Media
Berikut adalah proses aktivasinya:
- Buka file login.php melalui Dreamweaver Anda
- Klik Insert > Data Objects > User
Authentication > Log In User. Window Log In akan keluar. Isikan
beberapa parameter berikut ini.
- Get input form form: form1
- Username field: username
- Password field: password
- Validate using connection: search_engine (hal ini tergantung dari nama file connection yang Anda
buat)
- Table: users
- Username column: username (pilih dengan mengklik pop-up menu)
- Password column: password (pilih dengan mengklik pop-up menu)
- If login succed go to: login_sukses.php (pilih dengan mengklik Browse lalu
pilih file login_sukses.php)
- Beri tanda CHECK pada pilihan Go to previous
URL if exist. Menu ini adalah menu dimana jika Anda membuka sebuah
halaman yang diproteksi password, maka Anda akan dialihkan ke halaman
untuk log in. Setelah Anda melakukan log in, maka Anda akan dialihkan
kembali ke halaman yang diproteksi password sebelumnya Anda buka.’
- If login failedd go to: login_gagal.php (pilih dengan mengklik Browse lalu pilih file login_gagal.php)
- Klik OK jika sudah selesai
- Simpan kembali file login.php. Lakukan
percobaan melalui browser Anda dengan melakukan log in (ketik alamat
URL http://localhost/search_engine/login.php). Cobalah dengan melakukan login dengan username: andoyo
dan password: andoyo.
Java Web Media
Jika Anda
lihat pada Code View maka Anda akan menemukan dua variable session yang
akan digenerate ketika kita melakukan log in. Variable session tersebut adalah:
- $_SESSION['MM_Username'] = $loginUsername; (Ini adalah variabel session untuk menampilkan nama dan
profil yang lain)
- $_SESSION['MM_UserGroup'] = $loginStrGroup; (Ini adalah variabel session untuk proteksi halaman
berdasarkan hak akses)
NOTE:
Awalan huruf MM pada kedua variable di atas sebenarnya adalah singkatan
Macromedia (nama pembuat program Dremweaver sebelum diakuisisi oleh Adobe).
login_sukses.php
Login_sukses.php
adalah halaman yang akan menampilkan
nama user yang melakukan log in dan sekaligus memberi link dinamis yang
memungkinkan user yang melakukan log in untuk mengedit profilnya sendiri.
Berikut source code awalnya:
<html><head><title>Halaman
Dashboard</title></head>
<body><p>Hi <em><strong>NAMA
ANDA</strong></em>, Anda telah berhasil Log In | <a
href=”edit_profil.php”>Edit Profil Anda</a> |
<em><strong>Log Out</strong></em><strong></strong></p><p>Bagian
Administrator di sini</p></body></html>
Berikut adalah langkah-langkahnya.
Membuat Recordset (SessionUser),
menampilkan data user dan menambah link dinamis :
- Buka file login_sukses.php melalui Dreamweaver
Anda
- Klik Insert > Data Objects > Recordset.
Window Recordset akan muncul. Isi beberapa parameter berikut ini.
- Name: SessionUser,
ketik secara manual.
- Connection: search_engine, bisa jadi berbeda, tergantung dari nama file connection
yang Anda buat.
- Table: users,
pilih dengan mengklik pop-up menu.
- Columns: All
- Filter: username, sebelumnya
adalah None, pilih dengan mengklik pop-up menu.
- URL Parameter, ubahlah
menjadi Session Variable, pilih dengan mengklik pop-up menu.
Biarkan tanda sama dengan (=) tetap seperti semula. Anda
tidak harus melakukan perubahan pada bagian ini.
- username, ubahlah
menjadi MM_Username, lakukan dengan
mengetikkannya secara manual (Lihat penjelasan variable session dalam login.php
di atas). Pastikan besar kecilnya huruf
sesuai dengan contoh di atas.
- Klik OK jika sudah selesai.
- Klik Bindings > tanda plus (+) pada Recordset
(SessionUser)
- Melalui Design View, seleksi
tulisan “NAMA ANDA”
- Dari Bindings panel, klik dan tahan field/kolom nama
(yang bergambar petir), lalu drag menuju tulisan “NAMA ANDA”
tadi. Ini artinya Anda mengubah static text menjadi dynamic text.
- Melalui Design View, seleksi
tulisan “Edit profil Anda”, lalu klik kanan > Change
Link. Window Select File akan keluar. Cari pilihan URL dan
Parameters yang berada pada bagian bawah dari Window tersebut.
- Klik Parameters, maka window Parameters akan
muncul. Secara otomatis muncul menu Name akan berisi teks field.
- Pada menu Name, ketik id, lalu pada menu Value, klik area putih segaris dengan tulisan id.
Java Web Media
- Klik Tanda Petir, maka window Dynamic
Data akan keluar.
- Expand Recordset (SessionUser) dengan
mengklik tanda plus (jika belum diexpand). Lalu pilih id (yang ada
tanda petirnya).
- Klik OK sebanyak tiga (3) kali untuk
menyelesaikan proses pembuatan dynamic link tersebut.
- Dynamic Link dan menampilkan data user yang
log in telah berhasil Anda lakukan.
- Simpan kembali file login_sukses.php.
Java Web Media
Menambahkan proteksi halaman dan
link log out
- Buka file login_sukses.php lagi
- Klik Insert > Data Objects > User
Authentication > Restrict Access To Page. Window Restric Access
To Page akan keluar.
- Restrict access based on: Username and password
- If access denied, go to: login_gagal.php, klik Browse lalu pilih file login_gagal.php.
- Klik OK jika sudah selesai
- Selanjutnya seleksi tulisan “Log Out”
,
- Klik Insert > Data
Objects > User Authentication > Log Out User. Window Log Out User akan keluar.
- Log out when: Link clicked
- When done, go to: login.php, klik Browse lalu pilih file login.php.
- Klik OK. Halaman ini telah diproteksi dengan
password dan telah diberi link untuk log out.
- Simpan file login_sukses.php kembali
edit_profil.php
Pada
halaman ini, orang yang melakukan log in dapat melakukan pengeditan profilnya.
Berikut adalah basic source code awalnya.
<html><head><title>Edit
Profil</title></head>
<body><h1><strong>Edit
Profil Anda:</strong></h1><p>Form edit profil Ada di
sini</p><hr/><a href=”login_sukses.php”>Kembali ke dashboard
</a></body></html>
Java Web Media
Berikut langkah-langkah selanjutnya:
- Buka file edit_profil.php melalui
Dreamweaver Anda
- Buatlah Recordset (SessionUser) seperti pada
halaman login_sukses.php di atas.
- Proteksi halaman dengan Restrict Access To Page seperti
yang telah dijelaskan pada halaman login_sukses.php di
atas
- Seleksi tulisan “Form edit profil Ada di sini”,
lalu hapus.
- Klik Insert > Data Objects > Update Record
> Record Update Form Wizard. Window Record Update Form akan
keluar.
- Connection: search_engine, klik pop-up menu untuk memilih
- Table: users, klik
pop-up menu untuk memilih
- Select record from: SessionUser, klik pop-up menu untuk memilih. Ini adalah Recordset
yang telah Anda buat sebelumnya.
- Unique key column: id, numeric
- After updating, go to: login_sukses.php, klik Browse untuk mencari file tersebut.
- Pada menu Form fields, maka Anda
akan melihat Column, Label, Display As, dan Submit As.
- Pilih Column yang berisi id,
klik id tersebut, lalu klik tanda minus (-) yang ada di
atasnya.
- Selanjutnya, seleksilah Column yang
berisi password, pada Display as: Password field. Lakukan
perubahan tersebut dengan mengklik pop-up menu yang semula berisi Text
field. Lalu pada Default value:, klik tanda petir, jendela Dynamic
data akan keluar. Pilihlah Recordset (SessionUser), lalu pilih
field password.
- Klik OK jika sudah selesai
- Simpan kembali file edit_profile.php
Java Web Media
Berikut ini adalah hasil pembuatan
form edit_profil.php
Java Web Media
login_gagal.php
File ini hanya berisi link untuk
kembali ke halaman log in. Berikut source code-nya:
<html><head><title>Log
In Gagal</title></head>
<body><h1><strong>Anda
mengalami kegagalan log in:</strong></h1><p><a
href=”login.php”>Kembali ke halaman log
in</a></p></body></html>
(Anda
telah berhasil menyelesaikan tutorial ini)
