Anda memasuki Part 11 dari rangkaian tutorial Pembuatan Aplikasi CMS/Berita sederhana. Pastikan Anda mengikuti tutorial-tutorial Part 1-Part 10 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. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 10)
  13. Mendownload source code Part 10: cms_blog_part10

Pada tutorial Part 11 ini, Anda akan belajar membuat link Read more pada posting. Ada beberapa pendekatan yang bisa kita lakukan untuk melakukan hal ini. Misalnya dengan menggunakan fungsi query MySQL, menggunakan fungsi strrpos atau sub_str yang ada di PHP. Opsi lainnya menggunakan fungsi PHP_EOL.

Teknik Pertama:
Memotong string dengan query MySQL

Ini adalah cara termudah yang bisa Anda lakukan. Anda memotong string content posting yang panjang dan menampilkan ringkasannya. Katakanlah Anda ingin menampilkan 100 karakter pertama

SELECT ID, title, LEFT(content, 100) AS ringksan100
FROM post ORDER BY updated DESC

Berikut adalah langkah-langkahnya:

    1. Buka file index.php (yang ada dalam folder utama) melalui Dreamweaver Anda.
    2. Simpan file tersebut dengan nama index2.php. Untuk antisipasi jika terjadi kesalahan. Jika proses pembuatan file index2.php sudah selesai, Anda dapat menyimpannya kembali menjadi index.php.

Klik Windows > Server Behaviors. Di sana Anda akan melihat Recordset (rsDetail).

  1. Double klik Recordset (rsDetail) tersebut, maka Anda akan diarahkan pada jendela Recordset.
    Advanced Recordset: Java Web Media, Web Design Course Depok

    Advanced Recordset: Java Web Media, Web Design Course Depok

  2. Klik atau pilih tombol Advanced pada jendela Recordset. Jendela Advanced Recordset akan muncul.
  3. Pada menu Database items: yang ada di bagian bawah. Klik tanda plus (+)  yang ada pada menu Tables. Lalu klik tanda plus (+) lagi pada tabel post. Di sana akan menampilkan semua field/kolom yang ada pada tabel post..
    Di sisi sebelah kanan Anda juga akan melihat tiga buah tombol, yaitu SELECT, WHERE dan ORDER BY. Ketiga tombol ini adalah yang paling sering digunakan ketika Anda membuat query database. SELECT untuk menyeleksi kolom tabel, WHERE adalah kondisi/logika yang digunakan dan ORDER BY berfungsi untuk mengurutkan data hasi query.

    Advanced Recordset: Java Web Media, Web Design Depok

    Advanced Recordset: Java Web Media, Web Design Depok

  4. Klik kolom ID pada tabel post, lalu klik SELECT. Hal ini akan menambahkan ke query SQL (Lihat bagian atas) berupa SELECT post.ID. Lakukan hal yang sama untuk kolom title, category, content dan updated. Lihat gambar illustrasi di atas.
  5. Lakukan sekali lagi pada kolom content. Klik kolom tersebut lalu klik SELECT. Query terakhir inilah yang nanti kita potong menjadi 100 karakter (Anda bisa mengubah jumlah karakter yang ingin dijadikan ringkasan).
  6. Melalui jendela SQL, lakukan modifikasi pada query SQL post.content menjadi LEFT(post.content, 100) AS ringkasan.
  7. Klik Test untuk memeriksa apakah Query database MySQL yang Anda buat benar atau tidak. Jika muncul error, silakan periksa kembali dan bandingkan dengan script di sini.
  8. Klik OK untuk menyelesaikan.
  9. Simpan kembali hasil pekerjaan Anda.

Menampilkan potongan artikel dan menambahkan link Read More…

Langkah selanjutnya adalah menerapkannya pada halaman web Anda. Cari kode di bawah ini:

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

Lalu ubah menjadi:

 <?php echo nl2br($row_rsDetail['ringkasan']); ?>  -  <a href="news.php?view=<?php echo $row_rsDetail['ID']; ?>">Read moree...</a><hr>

Penjelasan:

  • nl2br (new line to break) adalah fungsi untuk menambahkan spasi pada teks atau <br/>
  • Ada penambahkan link Read More.

Kasus pada kata yang tidak terpotong dengan lengkap

Teknik ini akan menyebabkan beberapa kata tidak terpotong dengan lengkap. Untuk mengatasinya, Anda bisa menggunakan teknik ini.

<?php
 // Mencetak string
 $text = nl2br($row_rsDetail['ringkasan']);
 $kata_lengkap = strrpos($text, ' ');
 //Mencetak dan menambahkan ...
 echo substr($text, 0, $kata_lengkap)."...";
 ?>
 - <a href="news.php?view=<?php echo $row_rsDetail['ID']; ?>">Read moree...</a><hr>
Membuat Read More: Java Web Media, Web Design Course Depok

Membuat Read More: Java Web Media, Web Design Course Depok

Kedua hal di atas akan menghasilkan potongan string yang berbeda. Lihat gambar illustrasi di atas.

Teknik Kedua:
Menggunakan fungsi PHP_EOL untuk memotong satu paragraph secara lengkap.

Lalu bagaimana jika ternyata form Input berita Anda menggunakan text editor, misalnya TinyMCE atau CKEditor. Hal ini akan menghasilkan input teks yang diwrap dengan tag-tag paragraph. Lalu Anda ingin menampilkannya sebagai paragraph ringkasan.

Lihat illustrasi berikut ini. Pada gambar berikut, diasumsikan Anda menggunakan tag paragraph untuk menampilkan berita (open tag <p> dan closing tag </p>)

Java Web Media: Tutorial CMS PHP MySQL, Web Design Depok

Java Web Media: Tutorial CMS PHP MySQL, Web Design Depok

Anda bisa menggunakan trik ini:

<?php
 // Memotong satu paragraph utuh
 echo substr($row_rsDetail['content'], 0, strpos($row_rsDetail['content'], PHP_EOL));
 ?>
 - <a href="news.php?view=<?php echo $row_rsDetail['ID']; ?>">Read more...</a><hr>
Web Programming PHP MySQL Course in Depok

Web Programming PHP MySQL Course in Depok

Ingat, Ada banyak trik untuk membuat ringkasan. Kedua cara di atas bisa Anda jadikan pilihan.

Jika Anda sudah yakin dengan hasilnya, maka Anda dapat menyimpan file index2.php menjadi index.php.

Selamat mencoba

  

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

  • May 11, 2012 at 2:14 pm
    Permalink

    wah akhirnya keluar jg part 11
    ini untuk teritorialnya sendiri msh lama selesainya ya mas???, maklum lg semangat”nya buat cms website hehehe

    Reply
    • May 12, 2012 at 12:21 am
      Permalink

      Ga juga, rencana sih maksimal 13 Part aja. Part 12 terkait dengan installasi Text Editor tinyMCE pada form Insert dan Update berita. Part 12 terkait dengan aspek keamanan web dan pemasangannya secara online…

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

    Wah saya sangat tertarik dengan tutorial yang agan buat ini, dari part 1 s/d part 10 sudah sya download,,thanqiu buat agan yang mau berbagi ilmu nya..

    sukses truss buat JWM
    ditunggu lanjutan nya.

    Reply
  • May 12, 2012 at 12:00 am
    Permalink

    sya newbie mas. sya slalu mengikuti tutorial di web ini, salut dan sya sekarang udh dikit2 bisa buat web mas. thnks maju terus n ditunggu kelanjutannnya…..

    Reply
  • May 13, 2012 at 12:18 am
    Permalink

    akhirnya muncul juga artikel yang di tunggu2. makasih mas sudah saya coba dan sukses.

    Reply
  • May 13, 2012 at 2:44 am
    Permalink

    thx brada atas semua ilmu yang kau share neh, ane masih menyimak seh dan karena keterbatas internet maka saya ijin untuk mengcopy tutorial yang telah kau buat neh,smoga ilmu kau tambah bermanfaat gan Thx
    terharu

    Reply
  • May 14, 2012 at 8:43 am
    Permalink

    mantafff …sangat membibimbing untuk pemula seperti sy…..
    dan akhirnya sy bisa bikin web juga berkat JWM silahkan kunjungi http://www.agatumai.com asli 90% dapat ilmunya dari JVM makanya di foternya sy dah kasih credit to JVM juga…
    sy masih nunggu artikel2 berikutnya….semoga aja ada artikel buat page Koment, biar CMSnya semakin komplit…
    di tunggu ya….

    Reply
      • May 19, 2012 at 9:23 am
        Permalink

        Saya tunggu part berikutnyakalau bisa usulan tutor buat form komentya…..
        Udah muter-muter nggak dapat ilmunya….kebanyakan masih pakai aplikasi pihak ke tiga…..
        thx before…

        Reply
  • May 14, 2012 at 1:37 pm
    Permalink

    Akhirnya yang ditunggu keluar juga…
    makasih yo mas :)

    Reply
  • May 16, 2012 at 6:09 am
    Permalink

    gimana yas caranya merubah bentuk tulisan langsung pada website bukan dari halaman editor….

    Reply
    • May 20, 2012 at 1:19 pm
      Permalink

      Silakan baca artikel tentang Aplikasi Form Berita: Installasi CKEditor dan KCFinder (Text Editor WYSIWYG dan File Manager). Di sana dijelaskan tentang installasi text editor dan file manager terkait.

      Selamat mencoba

      Reply
  • May 20, 2012 at 2:51 am
    Permalink

    mas saya belum menjadi master…saya selalu membuat database dengan mysql,,,contohnya saya sedang membuat database sistem pendataan kependudukan warga desa se kelurahan,,,hampir 85 % selesai,,cuman saya yang bodohnya hanya pembuatan templeatenya krn saya kurang paham dengan css….selallu berantakan hasil tampilan index.php..apakah ada temleate yang bisa saya pelajari…mohon bisa di kririm ke email saya…makasih semuanya…….

    Reply
  • May 25, 2012 at 1:50 pm
    Permalink

    Sblmnya sya ucapkan bnyk terima kasih mas atas tutorialnya. Perlu mas ketahui tutorial ini sngat membantu dlm pnyelesain TA skrpsi sya. stelah sya cba tutorial mengenai READ MORE n berhasil sya mendapat kesulitan dlm pembuatan detail nya (untuk menampilkan data yg dipilih). maap mas sya bru blajar pemrograman web n blm memiliki dasar2 php, mysql yg kuat. mohon pencerahannya. terima kasih…

    Reply
  • May 25, 2012 at 6:47 pm
    Permalink

    mas bisa kasih link download sourcnya yg part 11 nih nda,,aku pengen lht mas sourcnya,,mksh sdh bantu ajar website mas,,sy sudah mengerti dgn adanya postingan ini

    Reply
  • May 28, 2012 at 9:53 pm
    Permalink

    mas mau tanya lagi nih,,gimana cara nampilin jumlah artikel yang ada di dalam kategori tertentu,,misalnya tuh saya lihat di kategori Dreamweaver (26) < nah cara nampilin jumlah 26nya itu gmn mas,,mohon bantuannya

    Reply
  • August 29, 2012 at 7:51 am
    Permalink

    terimakasih mas sudah berbagi ilmu kapan part selanjutnya keluar?

    Reply
  • September 8, 2012 at 10:07 am
    Permalink

    Mas cara merubah gambar yang sudah ada biar ganti ke gambar baru itu gmana caranya yah mas…????

    Reply
  • September 23, 2012 at 9:07 am
    Permalink

    wehhh…. akhirny…
    slesai jg ane baca ni tutorial….
    keren bgt gan….

    masih ad lnjutannya gak gan….?? :)

    Reply
  • October 10, 2012 at 7:27 pm
    Permalink

    Saya pribadi sangat mendukung jika tutorial ini dijadikan sebuah buku, sangat bermutu dan membantu khususnya buat pemula seperti saya ini. Semoga ALLAH senantiasa melimpahkan Rahmat dan Hidayah-Nya buat kita semua amin. . . . . . . . . .

    jika bukunya sudah terbit mohon email ke saya ya. . . . . . . . . . . . .

    sukses terus javawebmedia

    Reply
  • February 5, 2013 at 5:35 am
    Permalink

    terimakasih JWM
    akhirnya tugas kampus saya kelar juga,,,,
    :)

    lope lope lope JWM
    master JWM klo ada waktu ajarin cara membuat website seperti pembelian barang secara online ya, hehehe

    klo berkanan add facebook saya dunk munawar_adaband@yahoo.co.id

    Reply
  • March 2, 2013 at 7:58 am
    Permalink

    mas mau tanya nieh , ini menyimpang dari artikel diatas… gimana membuat POS STATUS di publis apa tidak , mohon pencerahannya..terima kasih.

    Reply
  • March 14, 2013 at 8:21 pm
    Permalink

    mas.. sy ingin tanya ,, ada gak tutorial seperti di atas yang menggunakan video??
    makasih.

    Reply
  • April 2, 2013 at 2:41 am
    Permalink

    thanks.. tutorialnya.. like this.. :D

    Reply
  • May 25, 2013 at 2:57 pm
    Permalink

    mas tolong bahas pembuatan event calender melalui dreamwaever dong

    Reply
  • June 4, 2013 at 3:15 am
    Permalink

    maaf mau nanya nh mas.., kalau kita membuat insert data ke database, dan form hanya yang wajib yang kita pilih saja itu gmna ya… ???
    Software Pembuat Rumah

    Reply
  • June 19, 2013 at 1:12 am
    Permalink

    Yah,kayanya jarang yang pemurah mengupas detil tentang membuat web cms. Sepertinya kebanyakkan di jadikan sumber dana gitu apa yah…… Kalau iya sih tak apa,itu hak sah2 saja kok. Tapi kalau ada yang mau share terbuka apa salahnya,salahnya apa…malahan bagus kan….Tank gan saya lagi nyari2 sekata 2 kata,sambil di rangkai agar bisa paham nih (masalahnya saya agak lemot).

    Reply
  • July 14, 2013 at 10:38 pm
    Permalink

    gan, kan aq buat file baru nih
    tanpa isi, lalu aq coba trik nya, tp d index.php kok cuma muncul script kayak gini ya???
    penjelasannya dong!!!!!!!!!

    – <a href="news.php?view=”>Read moree…

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

    mas.. bisa minat file dari part 1 sampe part 12 ?? versi pdf gtu ?

    Reply
  • November 6, 2013 at 5:33 pm
    Permalink

    mas ko gambarnya ga muncul yahh.? :(

    Reply
  • December 12, 2013 at 10:31 am
    Permalink

    makasih, kalau punya saya udah jadi untuk mengenang jasa ossan sama, saya akan membuat posting tentang blog/. JAVAWEBMEDIA,,, hehehe jangan di anggap lebay yaa

    Reply
  • Pingback: Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 13) – Installasi Text Editor TinyMCE | Blog Java Web Media

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.