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

Anda memasuki Part 10 dari rangkaian tutorial Pembuatan Aplikasi CMS/Berita sederhana. Pastikan Anda mengikuti tutorial-tutorial Part 1-Part 9 di bawah ini:

Java Web Media: Web Design and Web Programming Course Depok

  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. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 4)
  7. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 5)
  8. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 6)
  9. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 7)
  10. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 8)
  11. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 9)
  12. Mendownload Source Code Part 9. Silakan di download di link ini. atau di sini: cms_blog_Part9

Pada tutorial Part 10 ini, Anda akan belajar:

  • Menampilkan detail berita (halaman news.php)
  • Menampilkan listing berita (halaman news.php)

Menampilkan item berita yang dipilih

Pada tutorial Part 9 sebelumnya, Anda telah membuat link dinamis ke:

<a href="news.php?view=<?php echo $row_rsNews['ID']; ?>"><?php echo $row_rsNews['title']; ?></a>

Link ini nantinya akan menghasilkan alamat URL http://wwww.website.com/news.php?view=1. Variable view adalah URL Parameter-nya sedangkan angka “1” adalah id yang tersimpan dalam database.

Membuat query data (recordset)

Maka langkah selanjutnya adalah membuat Query yang akan menampilkan detail berita yang dipanggil dengan URL Parameter tersebut. Berikut langkah-langkahnya:

Kursus Web Design Depok
Kursus Web Design Depok
  1. Buka file news.php
  2. Klik Insert > Data Object > Recordset
  3. Name: rsView
  4. Connection: cms_blog
  5. Table: post
  6. Columns: All
  7. Filter: id,  URL Parameter dan =.
  8. Pada tulisan id, ubah menjadi view
  9. Sort: , biarkan sesuai default.
  10. Klik OK.

Menampilkan detail berita

Sebelum Anda menampilkan detail berita yang akan dilihat, hapuslah text yang ada di halaman news.php. Sisakan  satu judul dan satu paragraph (Lihat illustrasi).

Kursus Web Design dan Web Programming (Menggunakan Adobe Dreamweaver)
Kursus Web Design dan Web Programming (Menggunakan Adobe Dreamweaver)

Anda telah menghapus beberapa artikel dan menyisakannya satu buah artikel. Langkah selanjutnya adalah menggantikan konten statis dengan konten dinamis dari database Anda.

Java Web Media: Web Design Service in Depok
Java Web Media: Web Design Service in Depok
  1. Klik Windows > Bindings. Panel Bindings akan muncul di sebelah sisi kanan layar kerja Anda.
  2. Klik icon plus yang ada pada Recordset (rsView). Semua kolom tabel post akan tertampil di sana.

    Java Web Media: Web Design Service in Depok
    Java Web Media: Web Design Service in Depok
  3. Seleksi judul “Halaman Websitenya Andoyo”. Di panel Properties bagian bawah, menu link sudah berisi link dengan tanda kres/pagar (#). Hapus tanda tersebut.
  4. Seleksi judul “Halaman Websitenya Andoyo” lalu dari panel Bindings klik kolom title lalu drag menuju teks judul yang telah diseleksi tersebut.

    Java Web Media: Web Design Service in Depok
    Java Web Media: Web Design Service in Depok
  5. Lakukan teknik yang sama untuk mengganti paragraph dengan kolom content. Hal ini akan menghasilkan seperti gambar di atas.
  6. Simpan kembali hasil pekerjaan Anda.
  7. Lakukan uji coba untuk mengklik Judul berita (yang ada di halaman index.php), maka Anda akan diarahkan ke halaman news.php?view=2 (Angka 2 tergantung dari id yang Anda pilih)

Menampilkan listing berita di sidebar

Untuk menampilkan listing berita di sidebar, ikuti tutorial Part 9 (halaman index.php). Tidak ada perbedaan yang signifikan di antara keduanya.

Mengcopy Recordset dari halaman index.php

Dreamweaver mengijinkan Anda untuk mengcopy recordset dari file yang berbeda. Di sini Anda akan mengcopy recordset yang telah dibuat di halaman index.php dan akan digunakan di halaman news.php.

Berikut adalah langkah-langkahnya:

Java Web Media: Kursus Web Design di Depok
Java Web Media: Kursus Web Design di Depok

Mengcopy Recordset (rsDetail) di halaman index.php lalu menggunakannya di halaman news.php

Java Web Media: Kursus Web Design di Depok
Java Web Media: Kursus Web Design di Depok
  1. Buka halaman index.php
  2. Klik Windows > Server Behaviors. Di sana Anda akan melihat Recordset (rsDetail)
  3. Klik kanan pada Recordset (rsDetail) tersebut lalu pilih Copy
  4. Buka file news.php, pastikan panel Server Behaviors terbuka. Klik kanan di sana, lalu pilih Paste.
  5. Simpan kembali file news.php

Menggunakan IF untuk menampilkan detail berita dan listing berita di halaman news.php

Anda akan sedikit menggunakan koding manual untuk menampilkan listing berita yang dijudulnya tersedia link untuk melihat detail berita dan kemudian menampilkannya di file yang sama sekaligus. Untuk melakukannya, ubah layar kerja Anda ke mode Code View lalu cari kode di bawah ini.

Java Web Media: Kursus Web Design di Depok
Java Web Media: Kursus Web Design di Depok

Langkah selanjutnya adalah menambahkan logika IF untuk menampilkan detail berita yang akan dipilih dengan mengklik link yang ada pada judul berita tersebut. Tambahkan kode di atas dan di bawah kode seperti yang terlihat di gambar.

Perubahan kode di atas bisa di lihat pada gambar di bawah ini:

Java Web Media: Kursus Web Design di Depok
Java Web Media: Kursus Web Design di Depok

Menampilkan daftar berita di halaman posting

Selanjutnya adalah melakukan repeat region pada daftar berita yang akan ditampilkan. Cari dan seleksi kode ini:

<h1><?php echo $row_rsDetail['title']; ?></h1>
 <?php echo $row_rsDetail['content']; ?>

Lalu ubah lembar kerja Anda ke mode Design View.

  1. Klik Insert > Data Objects > Repeat Region. Jendela Repeat Region akan keluar.
  2. Recordset: rsDetail
  3. Show: 10
  4. Klik OK untuk menyelesaikannya.
  5. Simpan kembali hasil pekerjaan Anda.

Menambahkan link dinamis di judul

Selanjutnya Anda akan menambahkan link dinamis pada daftar berita yang telah Anda buat. Ubah ke Code View, lalu cari kode di bawah ini:

<h1><?php echo $row_rsDetail['title']; ?></h1>

Lakukan perubahan sehingga menjadi:

<h1><a href="news.php?view=<?php echo $row_rsDetail['ID']; ?>"><?php echo $row_rsDetail['title']; ?></a></h1>

Simpan kembali hasil pekerjaan Anda.

Anda telah berhasil menampilkan detail dan daftar berita di halaman yang sama (news.php).

Note: Tutorial Advanced terkait dengan pembuatan CMS ini diberikan kepada siswa yang kursus Web Programming dan Web Development di Java Web Media.

 

 

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.

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

  1. Mau tanya nih mas…
    cara membuat read more/baca selengkapnya menggunakan dreamweaver gimana ya??

  2. mau tanya neh mas..
    cara membuat read more/baca selengkapnya dengan dreamweaver itu gimana ya??

  3. senang mas udah nyampe di tutorial ini, tapi..wah… apa lagi yang salah nih mas?
    steps di atas sudah dikerjakan koq saat preview browser posting gak nongol…. saat di klik di index.php seharusnya langsung ke detil berita. Di mana letak kesalahannya??? 🙁 🙁 🙁
    pliz show me, where is it the trouble?

  4. mohon pencerahannya
    saya ada sedikit problem,
    pada saat button onblur memanggil function dengan mengirimkan variabel, dan pada function tersebut, variabel yang diterima akan kita proses dalam script php, bagaimana deklarasi memberikan nilai variabel di php
    contoh nya

    function cekdata(var1, var2)
    <?php
    //memberi nilai proses 1 dari var1
    $proses1 = ….. <— bagaimana prosesnya ?

    terima kasih infonya

  5. mas saya mau tanya.
    cara menampilkan event dari database langsung ke website gimana mas?
    tolong bantu dong mas. saya masih pemula sekali.
    thanks sebelumnya

  6. mas bagus sekali web nya sangat membantu……
    buat tin dong tutorial login dengan 3 accses level
    gimana caranya kalau kita mau buat dengan 4 user dengan status berbeda

  7. Alhamdulillah …. zero to ten nehhhh…

    ada nngak yahhh bukunya info kan dech kalw ada buku tutorial 1-selesai….

    Wassalam….

  8. mas gimana ngatasin error pada saat membuat recordset

    pesan errornya gini ( the recordset scrift does not define the applayserverbahavior funciton)……

    Gimana mas solusinya………

  9. pak gimana caranya ya buat untuk sistem penerimaan PSB
    no reg= otomatis ditampilkan
    nama =otomatis ditampilkan
    Nilai = Dininputkan berdasarkan nilai ujian & no reg
    Keterangan = didapat dari inputan nilai kemudian keluar (Lulus, Tidak Lulus)

    gimana solusinya

  10. mas gimana ya caranya membuat di index “[1],[2],[3] >>Old Post ” kan postnya di limit sampai 5 agar post lain tampil dengan parameter misalnya ../index.php?page=2 , lha di page 2 itu menampilkan post yang belum tampil di page 1

    terimakasih

  11. Mass Juragan Sintax Diatas sudah benar atau belum ya??
    Disini Tertulis

    Parse error: syntax error, unexpected ‘}’, expecting ‘]’

    Mohon di cerahkan

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.