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

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. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 3)
  6. Mendownload Source Code Part 3. Silakan di download di link ini.

Menampilkan data login admin

Dalam tutorial sebelumny Anda telah berhasil membuat Recordset (rsSession) dalam tutorial Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 3). Pada Part 4 ini, Anda akan belajar bagaimana menampilkan data orang yang telah melakukan login.

Pada kode Login User yang digenerate oleh Dreamweaver, Anda akan melihat dua buah $_SESSION variable yang dibuat, yaitu $_SESSION[‘MM_Username’] DAN $_SESSION[‘MM_UserGroup’].

Dalam tutorial kali ini Anda hanya akan menggunakan $_SESSION[‘MM_Username’]. Variabel session inilah yang didaftarkan ke server ketika Anda melakukan login. Variabel session ini pula yang kita tangkap dengan Query Recordset (rsSession) yang telah dibuat pada bagian akhir tutorial Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 3).

Dengan variable session ini pula nanti Anda dapat menyimpan foreign key dari admin untuk disimpan dalam tabel post.

Pada tutorial Part 4 ini, tangan Anda akan sedikit kotor dengan koding manual PHP. Untuk menampilkan data login admin, berikut adalah 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

 

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. 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 <h2>Hai Nama Kamu, Anda berhasil login</h2>menjadi <p>Hai Nama Kamu, Anda berhasil login</p>)
  3. Lalu pada tulisan “Nama Kamu” ubahlah menjadi kode PHP seperti ini: <a href=”#”><strong><?php echo $row_rsSession[‘name’]; ?></strong></a>
  4. Simpan kembali file Anda. Anda telah berhasil menampilkan data login admin

Membuat Form tambah berita (add-news.php)

Langkah selanjutnya adalah membua form tambah berita. Di sini Anda akan lebih banyak  bekerja dengan Design View. 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 kembali file add-news.php
  2. Seleksi tulisan “Form add news goes here”. Hapus tulisan tersebut
  3. Klik Insert > Form > Form
  4. Klik Insert > Spry > Spry Validation Text Field. Spry berfungsi untuk validasi input. Jendela Input Tag akan keluar.
  5. ID: title
  6. Label: Judul berita:
  7. Klik OK. Form text field akan muncul di Design View Anda. Letakkan kursor Anda setelah text field tersebut lalu tekan ENTER.
  8. Klik Insert > Spry > Spry Validation Select. Jendela Input Tag akan keluar
  9. ID: category
  10. Label: Kategori berita:
  11. Klik OK. Form select akan keluar. Letakkan kursor Anda setelah form select tersebut lalu tekan ENTER
  12. Klik Insert > Spry > Spry Validation Text Area
  13. ID: content
  14. Label: Isi berita:
  15. Klik OK untuk menyelesaikannya. Form text area akan muncul, letakkan kursor sesudahnya lalu tekan ENTER.
  16. Klik Insert > Form > Button
  17. ID: submit. ==> Label tidak perlu Anda isi.
  18. Klik OK
  19. Seleksi tombol Submit tersebut, lalu copy dan paste di sampingnya.
  20. Seleksi tombol Submit yang baru saja Anda paste tadi, lalu melalui panel Properties ubah menjadi Reset Form.
  21. Seleksi form input title yang Anda buat pada langkah ke-4 sampai ke-7, lalu melalui panel Properties, ubah Char width: 50. Ini untuk memperlebar ukuran text field yang telah Anda buat (secara default Dreamweaver tidak mendefinisikan lebar karakter textfield, jadi kira-kira hanya 30 karakter).
  22. Lakukan hal yang sama pada form input content. Ubah Char width: 60 (semula 45) dan Num lines: 10 (semula 5)
  23. Letakkan kursor Anda di samping tombol Reset 
  24. Simpan kembali file add-news.php. Jika Ada pertanyaan Copy Dependent File? Klik OK sajaAnda telah berhasil membuat form tambah berita.

Membuat kategori berita menjadi dinamis

Anda telah membuat form berita dengan sempurna. Anda juga telah membuat Spry Validation Select pada langkah ke-8 sampai ke-10.

Langkah selanjutnya adalah bagaimana membuat form select tersebut menjadi dinamis sesuai dengan isi database tabel category. Berikut adalah langkah-langkahnya:

Membuat Recordset kategori berita

Berikut adalah langkah-langkahnya:

Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok
  1. Klik Insert > Data Objects > Recordset
  2. Name: rsCategory (ubahlah defaultnya yang semula Recordset1 menjadi rsCategory)
  3. Connection: cms_blog
  4. Table: category
  5. Columns: All
  6. Filter: None
  7. Sort: category, Ascending
  8. Klik OK untuk menyelesaikannya.
  9. Simpan kembali hasil pekerjaan Anda.

Membuat kategori berita menjadi dinamis

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

Langkah selanjutnya adalah mengaplikasikan recordset (rsCategory) yang telah Anda buat tadi ke form input select tadi. 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. Melalui Design View seleksi form input select yang telah Anda buat, maka panel Properties akan memunculkan menu List Values dan Dynamic... (dengan gambar petir)
  2. Klik Dynamic… (dengan tanda petir). Jendela Dynamic List/Menu akan keluar.
  3. Pada menu Static Options: klik tanda plus (+). Jendela Static option akan muncul tulisan Value dan Label.
  4. Klik pada tulisan Value tersebut lalu hapus. Pada tulisan Label ubah menjadi Pilih kategori…
  5. Lalu pada menu Option from recordset: rsCategory (klik po-up menu untuk memilihnya). Menu Values dan Labels akan berubah.
  6.  Pada menu Values: category (klik pop-up menu untuk memilihnya)
  7. Pada menu Labels: category (klik po-up menu untuk memilihnya)
  8. Klik OK untuk menyelesaikannya. Simpan kembali pekerjaan Anda.

Mengaktifkan form tambah berita (add-news.php)

Langkah selanjutnya adalah mengaktifkan form tambah berita. Nantinya berita diketik/dientry melalui form, lalu klik Submit dan berita akan tersimpan dalam database MySQL.

  1. Buka kembali file add-news.php
  2. Klik Insert > Data Objects > Insert Record > Insert Record. Jendela Insert Record akan keluar.
  3. Submit values from: form1
  4. Connection: cms_blog
  5. Insert table: post (klik pop-up menu untuk menggantinya)
  6. Columns: pastikan title, category dan content mendapatkan value, selain itu tidak.
  7. After inserting, go to:index.php (klik Browse untuk mencari file index.php)
  8. Klik OK untuk menyelesaikannya. Lalu simpan kembali file Anda

Melakukan uji coba memasukkan berita

Form tambah berita Anda telah berhasil diaktifkan. Anda dapat melakukan uji coba untuk melakukan entry berita. Ketika Anda berhasil menambahkan berita, maka Anda akan dialihkan ke halaman index.php (yang akan kita kerjakan pada tutorial Part 5 nanti).

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

Anda dapat mengecek hasil entry berita Anda dengan melihat database MySQL secara langsung, misalnya melalui PHPMyAdmin.

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.

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

  1. tanya mas? apakah ini berlaku untuk semua halaman? .
    jika halaman lain ingin menampilkan data user yang sedang login apakah harus melakukan pengulangan sebagaimana part3 (bagian akhir) sampa part 4 bagian awal. trims

  2. mas saya mau nanya pas kita login dari localhost , kok ga masuk ke index nya
    malah ada tulisan “no table test user” .mohon pencerahannya thx

  3. mas, kok udah saya ikutin caranya dibagian “Hai Nama Kamu, Anda berhasil login” bagian “nama kamu” ga berubah yah, alias kosong jadi “Hai , Anda berhasil login”

    nama username yg login ga muncul

  4. mas, saya udah ngikutin artikel sampai cara pembuatan berita , terus saya mau buat supaya bisa menambahkan komentar di setiap artikel yg udah tampil tadi, itu caranya seperti apa supaya setiap artikel hanya komentar bersangkutan yang bisa ditampilkan ?
    kemaren saya sudah coba bikin tapi komentarnya selalu tampil di setiap artikel yang di postingkan . .
    mohon bantuannya mas

  5. Sebenarnya sederhana. Biasanya ketika Anda menampilkan data berita menggunakan variable $_GET, katakanlah $_GET[‘id’] dengan asumsi “id” adalah primary key dari tabel berita Anda.

    Pada tabel komentar, Anda tentu membuat sebuah kolom foreign key yang menyimpan variable primary key dari tabel berita. Nah gunakan hal tersebut untuk memanggil berita sekaligus juga untuk memanggil komentar.

    Jika komentar tidak ada, Anda hanya tinggal menampilkan pesan bahwa komentar tidak tersedia.

  6. kalo saya baca di artikel http://utamaandri.wordpress.com/2010/06/21/cara-membuat-foreign-key-relasi-tabel-dan-referential-integrity-di-phpmyadmin/
    itu ada cara membuat foreign keynya dan di artikel tersebuat memberikan asumsi bahwa harus menggunakan storage enginenya “innoDb” agar dapat membuat sebuah foreign key…
    jadi yang mau saya tanyakan lagi apakah tabel post storage enginenya diganti menjadi “innoDb” atau tetap “MyISAM”

    kemudian untuk penampilan komentar saya masih dalam proses mencoba mas lain..
    terimakasih atas pencerahan yg sudah diberkan mas sampai sejauh ini…

    1. Iya, memang benar. InnodDB lebih support terhadap relational. Akan tetapi ada kekurangannya juga, beberapa hosting provider suka menon-aktifkan engine ini karena dianggap memberatkan server.
      Jika kita membuat foreign key dengan engine MyISAM juga bisa, bedanya kita harus mengakali di script PHP-nya. Artinya relational database MyISAM akan menggunakan script PHP-nya…

      Terimakasih juga.

  7. nah mas….
    sekarang saya sudah bisa membuat komentar artikelnya dengan menggunkan MyISAM dengan cara membuat sebuah tabel pada komentarnya itu Id_Artikel..
    kemudian saya coba berhasil Id_Artikel itu terisi datanya berdasarkan artikel yg sedang diberi komentar…
    tapii saya masih ada permasalahan untuk menampilkan komentarnya…
    saya bingung bagaimana supaya komentar yg sudah masuk pada database itu supaya bisa saya tampilkan pada setiap halaman yg artikelnya bersangkutan…
    komentarnya yg saya buat sudah saya tampilkan berdasarkan Id_Artikel tersebut tapi malah semua Id_Artikel tersebut yg ditampilkan…

    mohon bantuannya sekali lg mas

    1. Biasanya setiap artikel ditampilkan satu persatu dengan variable $_GET. Gunakan hal ini untuk memanggil artikel sekaligus komentar. Asumsikan bahwa kolom id_artikel di tabel komentar sama dengan kolom id_artikel di tabel komentar.

      Maka selanjutnya Anda hanya tinggal memanggilnya, misalnya untuk Query tabel berita:
      < ?php $id_artikel = "-1"; if(isset($_GET['id_artikel'])) { $id_artikel = $_GET['id_artikel']; } $SQL = "SELECT * FROM berita WHERE id_artikel = '$id_artikel'"; ?>

      Lalu untuk komentar:
      < ?php $komentar = "-1"; if(isset($_GET['id_artikel'])) { $komentar = $_GET['id_artikel']; } $SQL = "SELECT * FROM komentar WHERE id_artikel = '$id_artikel'"; ?>

      Ini hanya illustrasi saja, query lengkap bisa Anda buat sendiri. Prinsipnya sederhana, yaitu menggunakan WHERE pada id_artikel yang sama. Jika kosong, maka Anda dapat menampilkan pesan bahwa komentar kosong.

      1. saya masih bingung mas hehe . .
        soalnya saya masih kurang mahir dengan koding PHP MySQL . .
        dan yang saya pelajari baru pembuatan guestbook dan bagaimana caranya memasukkan data kedalam database dengan cara wizard di dreamweaver 8 mas hehehe . . .
        pada part selanjutnya kita2 ada ga mas cara membuat komentar artikel sampai bagaimana cara menampilkannya ?

          1. saya tunggu2 terbitan artikel JWM yg terbaru menyangkut pembuatan komentar artikel beritanya mas . .

            terimakasih atas fadeback yg sudah diberikan . .

  8. Mas, saya sedang mengikuti tutorial ini (maklum newbie :D). Rencananya sih akan mengikuti sampai tutorial terakhir. Masalahnya:
    1) pada bagian ini saya tidak bisa untuk menambah berita, pesan error-nya selalu “please select an item” pada bagian pilih kategori
    2) Seharusnya pada kalimat “hai teman….” akan terupdate dengan nama user yang login, ternyata tidak muncul…
    Sebenarnya apa masalahnya.
    Catatan: Karena niat untuk belajar, maka saya berupaya untuk membuat dari nol artinya tanpa menggunakan script yang ditawarkan untuk didownload di atas.

    1. Berikut beberapa jawabannya:
      1. Sekilas, proses dynamic select menu sudah ok LABEL-nya, tapi pada VALUE tidak OK. Value atau nilai dari option yang harusnya masuk ke database belum belum mas masukkin.
      2. Terdapat kesalahan pada prosesnya.

      Untuk mendownload file sangat saya sarankan meskipun Anda belajar dari nol. Fungsinya sebagai pembanding jika terdapat kesalahan pada proses yang mas lakukan.

      Senang Anda belajar dengan sungguh-sungguh…

      1. Wah… benar juga (hehehe..) jadi malu nich mas…maklum newbie. Saya kurang teliti. Benar, ada kesalahannya dalam database. Ini nanti saya temukan saat pembuatan categorynya mas (kalo gak salah Tutorial 8).
        OK deh mas, makasih yah, jangan pernah bosan kalo kami bertanya yah. Walaupun demikian di situs ini saya mulai mengerti apa itu PHP, dengan kata lain dari situs ini merupakan gerbang awal saya untuk belajar. Ijin lanjut yah mas…? masih ada 8 tutorial lagi 😀 😀 :D.
        NB: Kalo punya alamat email, tolong dikirim ke inbox saya.

  9. Sangat berguna sekali …..
    Senang sekali masih ada orang seperti anda yg membagi ilmu dengan gratis….
    ………….
    Pertanyaan saya, Bagaimana mengaktifkan tombol resetnya agar bisa meng clearkan semua tulisan yg sudah di ketik baik di title, category dan post ?

    Thanks.

  10. mas nanya.. saya ingin menampilan misalx menu profil perusahan yg bsa di update. saya mencoba tutor mas tentang membuat news.
    misalx saya membagi catgegory menjadi:
    1.news
    2.profil
    bagimana menampilkan yang hanya berkategory news di menu news
    dan hanya kategory profil yg tampil di menu profil

    1. Buat recordset:
      1. Klik Insert > Data Objects > Recordset
      2. Ketik nama recordsetnya
      3. Pilih koneksinya
      4. Pilih Nama tabelnya
      5. Columns, pilih All saja.
      6. Filter ==> Pilih category ==> URL Parameter ubah jadi Entered value. Lalu tulisan category ubah menjadi news (kalau dia berita) atau profil (kalau dia profil).
      7. Sort ==> id_news ==> Descending
      8. Klik OK

      Jika dibuat secara manual melalui ADVANCED RECORDSET:
      SELECT *
      FROM news
      WHERE category = ‘profil’
      ORDER BY id_news DESC

  11. Assalamu’alaikum mas saya udah cobain dan praktekin tapi kendala Di part 4 dan 8

    Kalo part 4 masalahnya nama login nya ga muncul yg ada “hai anda berhasil login” seharusnya kn “hai, javawebmedia anda berhasil login”

    Saya udh ikuti step by stepnya bahkan saya ulang berkali2 ttep ga muncul nama loginnya

    N utk part 8 yg ga berfungsi adalah edit category, delete category nya berfungsi

    Mngkin mas ralat lagi artikelnya penting banget bagi saya utk skrpsi TA, mohon balesannya mas
    Mdh2an ilmunya bermanfaat utk kmaslahatan umat amiin

    Nnt saya kirim kodingannya suoaya mas biaa lihat lgsg pmecahan masalah kodingannya..

  12. Hi there, You’ve got done an admirable job. I most certainly will unquestionably stumbleupon that plus in my see recommend to help my local freinds. I know they will be benefited from this web site. Hi there, You’ve got done an admirable job. I most certainly will unquestionably stumbleupon that plus in my see recommend to help my local freinds. I know they will be benefited from this web site.

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.