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

Posting ini adalah lanjutan dari Posting sebelumnya. Oleh karena itu sebelum membaca posting ini, pastikan Anda telah membaca dan mengikuti artikel-artikel sebelumnya. Pada bagian ini, Anda akan menampilkan listing berita:

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. Mendownload Source Code Part 8. Silakan di download di link ini.

Pada tutorial Part 9 ini, Anda akan belajar:

  • Menampilkan berita
  • Menampilkan listing berita

Menampilkan listing berita di halaman index.php

Java Web Media: Web Design Company in Depok
Java Web Media: Web Design Company in Depok
Web Education Depok
Web Education Depok

Pada tahap ini, Anda akan menampilkan daftar berita yang berada di sisi sidebar. Bukalah file index.php yang berada di folder utama. Lalu hapus list lainnya dan sisakan satu list berita saja. Lihat gambar sebagai illustrasi di atas.

Membuat recordset untuk listing berita (rsNews):

Untuk menampilkan listing berita, Anda harus membuat query/recordset untuk memanggil data berita yang disimpan dalam tabel post.

Java Web Media: Web Design Company in Depok
Java Web Media: Web Design Company in Depok
  1. Klik Insert > Data Objects > Recordset
  2. Name: rsNews
  3. Connection: cms_blog
  4. Table: post
  5. Columns: All
  6. Filter:, biarkan sesuai default.
  7. Sort: ID, lalu ubah Ascending menjadi Descending.
  8. Klik OK.

Menampilkan listing berita

Melalui mode Code View, cari kode di bawah ini:

<ul>
 <li><a href="#">Lorem ipsum dolor sit amet</a></li>
 </ul>
Web Design Course Depok
Web Design Course Depok
  1. Klik panel Bindings (Anda dapat mengaksesnya melalui menu Windows > Bindings). Di jendela Bindings Anda akan melihat recordset (rsNews) yang telah Anda buat. Klik ikon/tanda plus untuk melakukan expand.
  2. Seleksi tulisan “Lorem ipsum dolor sit amet”, lalu dari panel Bindings, drag kolom “title” ke area teks tersebut. Dreamweaver otomatis akan mencetak script PHP: <?php echo $row_rsNews[‘title’]; ?>.
  3. Lalu pada tag <a href=”#”> ubah menjadi: <a href=”news.php?view=<?php echo $row_rsNews[‘ID’]; ?>”>.
  4. Simpan kembali hasil pekerjaan Anda

Menggunakan looping untuk menampilkan lebih banyak listing berita

Langkah selanjutnya adalah melakukan looping untuk menampilkan data berita yang lebih banyak. Katakanlah, di sini akan ditampilkan 10 listing berita. Seleksi kode di bawah ini:

<li><a href="news.php?view=<?php echo $row_rsNews['ID']; ?>"><?php echo $row_rsNews['title']; ?></a></li>
  1. Klik Insert > Data Objects > Repeat Region
  2. Recordset: rsNews
  3. Show: 10
  4. Klik OK
  5. Simpan kembali hasil pekerjaan Anda. Hal ini akan menghasilkan seperti gambar berikut.
Java Web Media: Web Design Course Depok
Java Web Media: Web Design Course Depok
Untuk menambahkan navigasi listing, Anda dapat mempelajarinya dari tutorial part sebelumnya.

Menampilkan daftar berita detail

Buka kembali halaman index.php. Melalui Design View, hapus pada konten berita yang ada dan sisakan satu listing saja, sehingga terlihat seperti ini.

Java Web Media: Web Design Course Depok
Java Web Media: Web Design Course Depok

Sehingga yang tersisa hanya judul dan teks berikut ini:

Java Web Media: Web Design Service in Depok
Java Web Media: Web Design Service in Depok

Langkah selanjutnya adalah membuat query/recordset (rsDetail) untuk menampilkan detail berita, langkah-langkahnya adalah sebagai berikut:

  1. Klik Insert > Data Objects > Recordset 
  2. Name: rsDetail
  3. Connection: cms_blog
  4. Table: post
  5. Columns: All
  6. Filter:, biarkan sesuai default.
  7. Sort: ID, lalu ubah Ascending menjadi Descending.
  8. Klik OK.
  9. Simpan pekerjaan Anda.

Menampilkan data berita

Anda telah berhasil membuat Recordset (rsDetail). Lihat di tab menu Bindings, lalu klik icon plus untuk melakukan expand kolom tabel post Anda.

Menampilkan judul berita dan link dinamisnya:

Melalui mode Code View, cari kode di bawah ini:

<h2><a href="#">Halaman Websitenya Andoyo</a></h2>

Lalu lakukan perubahan menjadi:

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

Menampilkan isi berita:

Untuk menampilkan isi berita Anda dapat menggunakan mode Code View atau mode Design View, dalam contoh ini akan digunakan mode Design View.

Graphic Design: Web Design Course Depok
Graphic Design: Web Design Course Depok
  1. Seleksi tulisan di area isi berita (lihat gambar)

    Graphic Design: Web Design Course Depok
    Graphic Design: Web Design Course Depok
  2. Melalui panel/tab Bindings, klik kolom/field content lalu drag menuju tulisan yang telah Anda seleksi. Lihat gambar di atas untuk melihat hasil akhirnya.
  3. Simpan kembali hasil pekerjaan Anda.

Looping/perulangan berita

Langkah selanjutnya adalah melakukan looping terhadap judul dan content berita dari tabel post. Anda akan mengerjakananya melalui mode Code View. Cari kode di bawah ini:

<h2><a href=”news.php?view=<?php echo $row_rsDetail[‘ID’]; ?>”><?php echo $row_rsDetail[‘title’]; ?></a></h2>
<p><?php echo $row_rsDetail[‘content’]; ?></p>

Seleksi kode tersebut di atas, lalu:

  1. Klik Insert > Data Objects
  2. Klik Insert > Data Objects > Repeat Region
  3. Recordset: rsDetail
  4. Show: 5
  5. Klik OK
  6. Simpan kembali hasil pekerjaan Anda.

Anda telah selesai menampilkan daftar listing berita dan daftar berita terbaru.

Java Web Media: Web Design, Web Programming dan Graphic Design Course Depok
Java Web Media: Web Design, Web Programming dan Graphic Design Course Depok

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.

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

  1. mas, yang repeat region detail nya ga bisa di eksekusi, dikarenakan udah ada repeat region sebelum nya yang news. yang saya begitu mas. knp ya?

  2. mas, mau nanya lagi, kalau mau menampilkan Tanggal Posting dan Pembuat postingan gmn ya?
    pake timestamper ato gmn? trims

  3. Mas mau nanya. kan itu tampil di index.php kan lebih dari satu berita.
    nah jika kita clik title berita nya, kan langsung menuju news.php yang di folder utama.

    tp news.php kan belom di apa-apain mas, gimana caranya biar bisa tampil 1 berita aja dari yang kita click di index.php ke news.php?

    apa harus pake spry set ya?
    soalnya saya coba pake recodset dan binding, yang tampil itu-itu saja, gak sesuai dengan yang kita click.
    terus spryset nya, ane gak tahu gimana buat nampilin berita tanpa text area.

    mohon info nya yak, makasih.

    1. Problem Solved.

      ternyata ane salah ngasih nama filter di news.php.

      dimana seharusnya, nama filter di news.php harus sama dengan nama parameter di index.php.
      dan untuk sort, ane pake ID,Descending.

      thx. semoga membantu.

      1. mas, saya mau tanya, yang mas maksud nama filter di news.php harus sama dengan parameter index.php gimana ya mas?
        di rsDetail?
        soalnya ketika saya menambahkan filter & parameter di rsDetail, si data malah g tampil pas di running.
        dan permasalahan saya skrg, si news.php cuma bisa nampilin 1 data terbaru, bukan data yang saya panggil.

        bagi siapapun, saya minta tolong sebesar2nya untuk permasalahan tsb. trims.

  4. Mas, mau nanya dong.
    Gimana caranya biar posting yang tampil di index.php hanya sepotong saja.
    jika mau baca selanjutnya ada link Read More…

    gimana ya? tlong info nya ya, makasih.

  5. mas, mau nanya lagi untuk cara membuat tampilan berita ditampilkan hanya 250 huruf dan ada “readmorenya” lalu ketika di klik langsung menuju ke detail-news misal.
    bagaimana mas kira2?

    1. gini mas maksud saya, ketika saya mengklik title, langsung nge direct ke news.php, nah setelah itu title yang saya klik tampil sesuai dengan nomor ID nya. gmn ya mas? trims selalu membantu

      1. sama seperti yang di komen sama Joko mas.
        coba aj, semoga bisa ngebantu..

        tp ane jg pengen nanyain biar bisa nampilin berita di index.php hanya 250 huruf, terus di sambung dengan link readmore gmn ya?

  6. alhamdulillah ketemu juga referensi buat tgs akhir kuliah ane…. MAKASIHHHH BANYAK javawebmedia … THAT JUST MORE THAN SOLUTION…. very best….. let go to the work…..

  7. gan saya banyak berterimakasih ma agan…
    dah banyak bagi-bagi tutorial…
    mari kita terus berkarya untuk negeri ini… nggak lebay kan????

  8. Mas mo tanya. Cara buat form inputan dan nampilin data inputannya pada halaman yang sama gimana ya… biar low browsernya di click refresh datanya ga ke input lagi ke database

  9. mas,
    link untuk download part8 (Mendownload Source Code Part 8. Silakan di download di link ini.) tidak ketemui.. bagaimana ye.. mohon pertolongan dapatkan link tersebut.

  10. Mas, klo masuk ke /admin kan harus melalu login.php ya? bagaimana caranya itu? agar orang tidak langsung masuk ke panel halaman admin

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.