Membuat CMS PHP MySQL Menggunakan Dreamweaver CC, CS6, CS5, CS4, CS3 (Part 3)

Posting ini adalah lanjutan dari Posting sebelumnya. Oleh karena itu sebelum membaca posting ini, pastikan Anda telah membaca dan mengikuti artikel-artikel sebelumnya:

  1. Membuat Site Definition di Dreamweaver CS5, dan
  2. Membuat koneksi database PHP MySQL dengan Dreamweaver CS5
  3. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 1)
  4. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 2)
  5. Mendownload Source Code Part 2. Silakan di download di link ini.

Melindungi halaman admin dengan Username dan Password

Halaman website yang tersimpan dalam folder admin sifatnya adalah rahasia. Semua halaman hanya dapat diakses jika seseorang telah melakukan login dengan username dan password. Oleh karena itu Anda harus melindungi halaman-halaman admin tersebut.

Setiap aktivitas membuka file di halaman admin yang tanpa melalui login dengan username dan password yang benar, maka Anda akan dialihkan ke halaman login. Berikut langkah-langkahnya:

Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok
  1. Buka file admin.php dengan Dreamweaver Anda
  2. Klik Insert > Data Objects > User Authentication > Restric Access To Page. Jendela ini akan keluar, lakukan beberapa setingan berikut ini
  3. Restric based on: Username and Password
  4. If access denied, go to: login.php. Klik Browse lalu pilih file login.php. Ini artinya ketika halaman admin.php ingin Anda buka dan Anda belum melakukan login dengan username dan password yang benar, maka Anda akan dialihkan ke halaman login.php.
  5. Klik  OK untuk menyelesaikannya. Lalu simpan hasil pekerjaan Anda

Lakukan ke-5 langkah di atas untuk melindungi seluruh halaman website yang tersimpan di folder admin, kecuali halaman login.php. Anda tidak harus melindungi halaman login.php dengan username dan password.

Menambahkan dan mengaktifkan link Log Out

Langkah selanjutnya adalah mengaktifkan link Log Out yang ada di halaman admin.php. Berikut adalah langkah-langkahnya.

Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok

 

Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok
  1. Buka file admin.php 
  2. Cari dan seleksi (blok) tulisan Log Out yang berada di sudut kiri bawah sidebar  halaman website Anda. Gunakan Design View untuk melakukannya. Di sana Anda akan menemukan tulisan Log Out dengan gambar merah beserta link berisi tanda kres (#).
  3. Klik Insert > Data Objects > User Authentication > Log Out User. Jendela Log Out User akan keluar lalu lakukan konfigurasi.
  4. Log Out when: Link Clicked
  5. When done, go to: login.php. Klik Browse lalu cari file login.php, ini artinya ketika proses Log Out berhasil dilakukan Anda akan dialihkan ke halaman login.php
  6. Klik OK untuk menyelesaiaknnya. Simpan kembali file Anda.

Lakukan ke-6 langkah di atas untuk menambahkan link Log Out ke seluruh halaman website yang tersimpan di folder admin, kecuali halaman login.phpAnda tidak harus menambahkan link Log Out pada halaman login.php.

Membuat halaman login (login.php)

Anda telah berhasil melindungi semua halaman website yang tersimpan dalam folder admin dengan username dan password (kecuali halaman login.php). Langkah selanjutnya Anda akan membuat halaman login dan mengaktifkannya. Bagian ini akan terdiri dari dua tahap, yaitu:

  • Membuat form login
  • Mengaktifkan form login

Membuat form login:

Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok

 

Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok
  1. Buka halaman login.php melalui Dreamweaver Anda.
  2. Di sana Anda akan menemukan tulisan “Form login di sini”. Hapus tulisan tersebut, di sana Anda akan membuat form login tersebut
  3. Klik Insert > Form > Form
  4. Klik Insert > Spry > Spry Validation Text Field. Jendela Input Tag akan muncul, lalu isi dengan data berikut ini.
  5. ID: username, lalu Label: Username:<br>. Lalu klik OK. Letakkan kursor Anda setelah text field, lalu tekan ENTER
  6. Klik Insert > Spry > Spry Validation Password. Jendela Input Tag akan keluar. Lakukan konfigurasi berikut ini
  7. ID: password, lalu Label: Password:<br>. Klik OK, letakkan kursor Anda setelah password field, tekan ENTER
  8. Klik Insert > Form > Button
  9. ID: submit, biarkan Label-nya kosong. Klik OK
  10. Klik tombol Submit tersebut, lalu Copy, letakkan kursor Anda di samping kanan dari tombol tersebut, lalu Paste
  11. Klik tombol Submit yang baru saja Anda Paste tadi, lalu melalui panel Properties ubah menjadi Reset form
  12. Simpan kembali hasil pekerjaan Anda.
  13. Mengaktifkan form login

Mengaktifkan form login

Langkah selanjutnya adalah mengaktifkan form login sehingga dapat digunakan dengan baik. Berikut adalah langkah-langkahnya:

Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok

 

Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok
  1. Pastikan file login.php masih Anda buka
  2. Klik Insert > Data Objects > User Authentication > Log In User. Jendela Log In User akan muncul. Lakukan konfigurasi seperti di bawah ini.
  3. Get input from form: form1
  4. Username field: username
  5. Password field: password
  6. Validate using connection: cms_blog, klik pop-up menu untuk memilihnya
  7. Table: users
  8. Username column: username
  9. Password column: password
  10. If login succeds, go to: index.php, ini artinya jika proses login Anda sukses dan benar, maka Anda akan dialihkan ke halaman index.php. Anda dapat mengklik Browse untuk mencari file index.php
  11. Beri tanda checked/centang pada pilihan Go to previous URL (If exists)
  12. If login fails, go to: login.php. Ini artinya ketika proses login Anda mengalami kegagalan, Anda akan dikembalikan ke halaman login.
  13. Klik OK untuk menyelesaiakannya. Simpan  kembali pekerjaan Anda.
  14. Halaman login telah berhasil Anda selesaikan. Jika muncul jendela peringantan Copy Dependent File, klik OK saja

Membuat form tambah berita dan mengaktifkannya (add-news.php)

Anda telah dapat melindungi halaman admin dengan username dan password. Anda juga telah dapat menambahkan dan mengaktifkan link Log Out. Langkah berikutnya adalah bagian utama dari tutorial ini, yaitu aplikasi berita. Akan ada 3 tahap dalam hal ini, yaitu:

  • Menampilkan data login, sehingga nantinya siapa yang melakukan posting dan edit berita akan terekam secara otomatis
  • Membuat form tambah berita
  • Mengaktifkan form tambah berita

Menampilkan data login (siapa yang melakukan login dan menampilkan detailnya) ==> Materi $_SESSION Variable

Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok
  1. Buka file add-news.php
  2. Klik Insert > Data Objects > Recordset. Jendela Recordset akan muncul
  3. Name: rsSession (ubahlah defaultnya yang semula Recordset1 menjadi rsSession)
  4. Connection: cms_blog
  5. Table: users
  6. Columns: All
  7. Filter: username
  8. Ubah URL Parameter menjadi Session Variable
  9. Ubah tulisan username menjadi MM_Username (perhatikan besar kecil huruf)
  10. Klik OK untuk menyelesaikannya.
  11. Simpan kembali hasil pekerjaan Anda.

BERSAMBUNG

Note: Tema yang lebih Advanced terkait dengan proses membuat CMS ini diajarkan dalam Kursus yang diselenggarakan oleh Java Web Media. Segeralah mendaftar untuk membuat CMS sendiri dengan lebih baik.

Java Web Media: Web Design di Kota Depok

Java Web Media adalah perusahaan yang bergerak di bidang web design, web programming, web application, web education, graphic design dan graphic education yang berbasis di kota depok.

46 thoughts to “Membuat CMS PHP MySQL Menggunakan Dreamweaver CC, CS6, CS5, CS4, CS3 (Part 3)”

  1. Mas, User Authentication cuma berhasil untuk masuk index.php selanjutnya otomatis masuk ke login.php untuk nulis username dan password lagi untuk masuk ke link lain

  2. Blog yg mencerahkan.. saya ingin menanyakan. Bagaimana menyembunyikan tulisan “logout” jika si pengakses belum login?? ataukah saya ketinggalan didalam blog ini… maklum saya baru menemukan blog ini. Salam dari Surabaya

      1. script “gunakan IF” ini di tulis lg pd login.php, apa diedit pd “$_SESSION[‘MM_Username’] = $loginUsername;” dan cara buat script Tampilkan/tidaknya link logout gimana mas.thx

  3. Mas pengen tanya donk, yang form Admin Page itu kok edit dengan delete sama aja ya? klo klik delete cm bedanya kyk form edit Admin tp kosong, sintaxnya kurang atau apa? terima kasih.

  4. mas pada Klik Insert > Data Objects > Recordset. Jendela Recordset akan muncul

    apa benar Jendela Recordsetnya muncul seperti ini?

    Name: rsSession (ubahlah defaultnya yang semula Recordset1 menjadi rsSession)
    Connection: cms_blog
    Table: users
    Columns: All
    Filter: username?

    saya udah berpuluh2 kali ngulang tetep gk ada jendela kyk gitu… yang ada cuma Name, Connection, SQL, dll..

  5. saya mau tanya ne, saya kan memakai DW cc ne, tp ngak ada data objectnya..
    kalau database saya ada…
    kalau boleh tahu, gimana supaya ada data objectnya..
    terima kasih.

  6. permisi gan mau tanya ini kan ada source code yg harus di download terlebih dahulu, itu source code nya di download semua dulu trus digabungin atau gimana ya ??

    maaf saya bingung

  7. 1. Buka file add-news.php
    2. Klik Insert > Data Objects > Recordset. Jendela Recordset akan muncul
    3. Name: rsSession (ubahlah defaultnya yang semula Recordset1 menjadi rsSession)
    4. Connection: cms_blog
    5. Table: users
    6. Columns: All
    7. Filter: username
    8. Ubah URL Parameter menjadi Session Variable
    9. Ubah tulisan username menjadi MM_Username (perhatikan besar kecil huruf)
    10. Klik OK untuk menyelesaikannya.
    11. Simpan kembali hasil pekerjaan Anda.

    PAS SAYA SAVE DAN LIHAT HASILNYA GADA NAMANYA MAS GIMANA YAH?
    SAYA UDAH IKUTI TUTORIALNYA, PLEASE DONG PENCERAHANNYA
    DAN KETIKA SAYA COBA LANJUTANNYA YANG INI

    Buka file add-news.php
    Dengan menggunakan fitur Design View, letakkan kursor Anda sebelum tulisan “Add News:” lalu tekan ENTER. Kemudian ketikkan tulisan “Hai Nama Kamu, Anda berhasil login” lalu melalui panel Properties ubah formatnya yang semula Heading 2 menjadi Paragraph. (Anda juga bisa mengubahnya melalui Code View yang semula Hai Nama Kamu, Anda berhasil loginmenjadi Hai Nama Kamu, Anda berhasil login)
    Lalu pada tulisan “Nama Kamu” ubahlah menjadi kode PHP seperti ini:
    Simpan kembali file Anda. Anda telah berhasil menampilkan data login admin

    TETEP GA MUNCUL NAMA ORG YANG SEDANG LOGIN!!!!!!!!!!

  8. Un alt folosite și poprawianym sunt routere Juniper că software-ul
    nostru Junos Perioada da poziție sistem confortabil și context.
    Configurare a acestor routereProiectdistribui un linkextremsimplu, eu totuși mă nu fi familiarizat lasfaturi instrument sau în site-ul site-ului.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.