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

Pada tutorial Part 4, Anda telah berhasil membuat form tambah berita (add-news.php) dan menampilkan data login admin. Nah, dalam tutorial Part 5 kali ini, Anda akan belajar bagaimana:

Java Web Media: Web Design and Web Programming Course Depok

Java Web Media: Web Design and Web Programming Course Depok

  • Menampilkan listing berita yang tersimpan dalam database MySQL

Menampilkan listing/daftar berita yang tersimpan dalam database MySQL (index.php)

Anda akan bekerja pada file index.php. Di halaman ini Anda akan belalajar bagaimana menampilkan listing berita yang telah tersimpan dalam database MySQL, menambahkan link untuk melihat berita, link edit berita dan link delete berita.

Membuat Recordset (rsBerita):

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 index.php dengan Dreamweaver Anda. Di sana Anda akan melihat tabel dummy yang akan kita gunakan untuk menampilkan data berita. Ubah Workspace Dreamweaver Anda menjadi Design View.
  2. Klik Insert > Data Objects > Recordset. Jendela Recordset akan muncul
  3. Name: rsBerita
  4. Connection: cms_blog
  5. Table: post
  6. Sort: updated, lalu opsi di sampingnya ubah menjadi Descending. Biarkan yang lainnya sesuai default.
  7. Klik OK untuk menyelesaikannya (Lihat Gambar di atas).

Untuk menyamakan persepsi, kita samakan workspace terlebih dahulu:

  • Klik Windows,
  • Lalu pastikan hanya menu Properties, CSS Styles, BindingsAppiclation Bar dan file index.php yang diberi tanda check (checked), jika ada selain menu-menu tersebut, silakan dinonaktifkan dengan mengklik/unchecked pada menu tersebut.
  • Menu Bindings akan muncul di sebelah kanan workspace Anda, di sana Anda juga akan menemukan tombol tanda plus (+).

Memahami jendela Panel Bindings:

Anda telah berhasil membuat Recordset (rsBerita), maka di panel Bindings Anda akan melihat Recordset (rsBerita) telah muncul di sana.

Untuk melakukan expansi Recordset (rsBerita), klik tanda plus (+) yang ada di sampingnya.

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

Gambar Panel Binding Java Web Media: Web Design and Web Programming Course Depok

 

Menampilkan listing berita dari database MySQL ke halaman web:

Langkah selanjutnya adalah menampilkan data berita yang tersimpan dalam database MySQL ke halaman index.php. Sebelum melangkah ke bagian ini, pastikan Anda telah mengaktifkan panel binding dengan Recordset (rsBerita) yang telah diexpand (Lihat Gambar Panel Binding Java Web Media: Web Design and Web Programming Course Depok).

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.  Buka halaman index.php.
  2. Di Design View, pada tabel kolom News title Anda akan melihat tulisan “News title goes here”. Hapus tulisan tersebut, di sana nanti Anda akan menampilkan judul berita.
  3. Dari panel Bindings, klik kolom title (dengan tanda petir) di samping kirinya. Lalu drag dan tahan menuju ke area yang tulisannya baru saja Anda hapus tadi (lihat langkah 2). Untuk lebih jelasnya silakan lihat Gambar di atas.
  4. Pada tabel kolom Updated, Anda akan melihat tulisan “2001-10-22 09:00″, hapus tulisan tersebut.
  5. Dari panel Bindings, klik kolom updated, lalu drag dan tahan menuju area tulisan yang tadi Anda hapus (langkah ke-4). Lihat ilustrasi gambar agar lebih jelas.
  6. Simpan kembali hasil pekerjaan Anda.
Menampilkan 10 berita terakhir dengan Repeat Region dan teknik paging dengan Dreamweaver

Langkah selanjutnya adalah menampilkan 10 berita terakhir dengan Repeat Region. Dreamweaver menggunakan looping do while untuk menampilkan data.

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

Java Web Media: Web Design and Web Programming Course Depok

Java Web Media: Web Design and Web Programming Course Depok

  1. Ubah workspace Anda ke Code View
  2. Cari kode di bawah ini (terletak di sekitar baris ke-141 sampai ke-145). Lihat gambar di atas untuk lebih jelasnya.
  3. <tr>
    <td width=”50%”><?php echo $row_rsBerita[‘title’]; ?></td>
    <td width=”25%”><?php echo $row_rsBerita[‘updated’]; ?></td>
    <td width=”25%”>Edit | Delete</td>
    </tr>
  4. Klik Insert > Data Objects > Repeat Region. Jendela Repeat Region akan keluar.
  5. Recordset: rsBerita
  6. Show: 10 Records at a Time. Ini artinya berita akan ditampilkan 10 listing berita perhalaman.
  7. Klik OK untuk menyelesaikannya.
  8. Letakkan kursor Anda pada tabel baris ketiga.
  9. Ubah kembali Workspace Anda ke Design View.
  10. Klik Insert > Data Objects > Recordset Paging > Recordset Navigation Bar. Jendela Recordset Navigation Bar akan keluar.
  11. Recordset: rsBerita
  12. Display using: Text
  13. Klik OK untuk menyelesaikannya
  14. 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.

  

35 thoughts on “Membuat CMS PHP MySQL Menggunakan Dreamweaver CC, CS6, CS5, CS4, CS3 (Part 5)

  • January 5, 2012 at 3:33 am
    Permalink

    mas saya mau tanya artikel sebelum’y yaitu part 4 anda hanya membuat kategory di halaman add-news.php tp cara memasukkan kategory’y bagaimana ya mas karena kalo belum ada kategory saya coba tidak bisa membuat posting selalu meminta kategory dr drop down menu kategory itu mohon bantuan’y master

    Reply
  • January 5, 2012 at 4:37 am
    Permalink

    Mantap Mas Bro. Sampe Part5 sudah sy praktekkan dan Lancar Jaya. Trims Share Ilmunya. Tutorial Selanjutnya kapan mo diupload lagi neh?

    Reply
  • January 24, 2012 at 1:26 pm
    Permalink

    mau tanya mas pada kondisi logout kok kita masih bisa melihat dashbord…apa memang seperti itu

    Reply
  • Pingback: Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 6) | Blog Java Web Media

  • April 23, 2012 at 11:08 am
    Permalink

    makasih mas sebelumnya atas tutorialnya.

    saya masih bingung soal menampilkan data user yang login, coba ikuti cara di atas, dan pertama saya login dengan username: admin, tidak masalah karena username admin yang muncul pada pemanggilan username. tapi setelah saya logout dan masuk dengan username yang lain (abzalom) yang muncul pada pemanggilan username tetap username admin bukan username yang saya login, ini yang buat saya bingung, sudah saya utak atik sampe di hapus dan di set ulang tetap hasilnya sama saja.
    mungkin mas andoyo ada solusinya??
    Mohon bantuannya! :)

    Reply
      • May 3, 2012 at 4:11 pm
        Permalink

        gini mas, maksud saya..kalo di wordpress setelah kita login, username kita akan di tampilkan pada sudut atas seperti ini “Howdy, (username)”. ini yang saya maksud untuk di tampilkan, karena ketika saya logout dari username admin dan login dengan username lain yang muncul tetap saja masih nama admin seperti ini “Welcome back, Admin” –> padahal saya login dengan username abzalom.
        kira-kira begitu maksud saya mas andoyo.
        mohon bantuannya. :)

        Reply
  • October 4, 2012 at 8:29 am
    Permalink

    Salam,

    Kok repeat region saya record-nya ke kolom bukan ke baris bawah yah ?
    Mohon pencerahan-nya….

    Thanks

    Reply
  • October 23, 2012 at 8:00 pm
    Permalink

    gan… cara upload file yg sudah jadi ke web hosting gimana ya… gw coba berkali2 gak nyambung melulu, gw pake masterweb gan…

    mohon nasehatnya….

    Reply
    • October 29, 2012 at 2:34 am
      Permalink

      Langkah-langkahnya:
      1. Upload semua file web ke hosting (bisa di zip atau rar)
      2. Import database SQL yang ada di localhost
      3. Buat database di hosting Anda (ingat username, password dan nama databasenya)
      4. Export database ke hosting (database yang telah Anda buat)
      5. Konfigurasi koneksi ada di folder Connections. Ubah username, password dan databasenya sesuai dengan yang Anda buat online
      6. Website sudah siap

      Reply
  • November 7, 2012 at 4:48 am
    Permalink

    mohon ijin untuk mempelajari nya mas.
    tulisan nya bermanfaat buat saya
    terima kasih.

    Reply
  • February 20, 2013 at 3:58 pm
    Permalink

    mas mau tanya . itu kan recordset updatenya muncul formatnya tanggal sama jam doang.. untuk jadiin hari tanggal sama jam gmna mas.. terimakasih

    Reply
    • March 4, 2013 at 12:02 pm
      Permalink

      Anda bisa gunakan DATE_FORMAT, misalnya:
      SELECT DATE_FORMAT(kolomtabel,’%d/%d/%Y’) AS tanggal
      FROM berita
      ORDER BY id DESC.

      Format tanggal di atas adalah dd/mm/YYYY. Selamat mencoba.

      Reply
      • April 19, 2013 at 7:07 am
        Permalink

        mas baru sempet coba .. itu database ga ada yg dirubah kan tapi.. ? kode nya di tulis dimana itu.. maaf mas masi newbie ga ngerti..

        Reply
  • March 8, 2013 at 6:19 pm
    Permalink

    oke ‎​terimakasih .

    Reply
  • April 19, 2013 at 7:09 am
    Permalink

    mas mau (tanya lagi.. untuk repat region itu kan biasa kebawah .. kalo di urutin ke samping bisa ga mas? terimakasih

    Reply
  • May 14, 2013 at 5:36 pm
    Permalink

    lebih asik yg mana yaa .. atau kalo berkenan bisa di jelasin keduanya mas? tolong bantuannya . terimakasih

    Reply
  • August 1, 2013 at 4:22 am
    Permalink

    mas nanya.. gimana caranya kalo bkin paging nya tiap halaman d kasih nomor misalnya ada 4 record jadi tiap record ada nomornya [1][2][3][4]
    mohon pencerahanya..

    Reply
  • August 14, 2013 at 3:27 pm
    Permalink

    file donlotnya bertipe .exe semua y mas ?? ke detect virus,, gimana mas? ada file laennya g ?

    Reply
  • Pingback: Membuat CMS PHP MySQL Menggunakan Dreamweaver CC, CS6, CS5, CS4, CS3 (Part 9) | Blog Java Web Media

  • March 25, 2014 at 4:07 pm
    Permalink

    Anda bisa gunakan DATE_FORMAT, misalnya:
    SELECT DATE_FORMAT(kolomtabel,’%d/%d/%Y’) AS tanggal
    FROM berita
    ORDER BY id DESC.

    Format tanggal di atas adalah dd/mm/YYYY. Selamat mencoba.

    itu gmn gan ?
    itu kan ane tanggal kolom tinggal seret aja nah itu gmn biar format gtu…
    makasih

    Reply
  • November 30, 2014 at 12:49 pm
    Permalink

    gan klo me repeatnya kesamping gak kebawah gimana gan.,…? minta jawabanya yah gan>>>thnks <<<<

    Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Social Widgets powered by AB-WebLog.com.