Menampilkan data dan edit profil setelah melakukan log in diblogger

Daftar Isi [Tampilkan]

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:

Membuat Site Definition atau Site Setup untuk Server Model: PHP MySQL
Anda mampu dan bisa membuat, mengimport, mengeksport database dan tabel data MySQL. Ini artinya Anda dapat menggunakan phpMyAdmin
Telah membuat koneksi database MySQL

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