Membangun website dinamis berbasis PHP-mySQL (3)

Membangun website dinamis berbasis PHP-mySQL (3) Agus Subardjo multigraphica@yahoo.com http://multigraphica.com Lisensi Dokumen: Copyright 2011-2015 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com. Artikel kedua saya terdahulu Membangun website dinamis berbasis PHP-mySQL(2) telah menampilkan cara memodifikasi sebagian tampilan awal berita, dengan menambahkan header-image, news-image, tata letak list berita serta modifikasi judulnya. Pada artikel ini, masih membahas tampilan tersebut, namun pada bagian isi berita secara utuh, dengan memanfaatkan fasilitas View yang kita rubah menjadi Selengkapnya. Kita masih melanjutkan database kemarin dengan hanya 1 (satu) table, yaitu berita. Apabila sudah mahir nantinya dapat ditambahkan beberapa table lagi, misalnya artikel, buku tamu, video-player, MP3-player, atau lainnya. 1

Kita lihat tampilan terakhir kita kemarin seperti gambar dibawah ini: Sebelum kita memodifikasi tampilan berita secara keseluruhan melalui tombol View ( bisa diganti dengan button-image atau button-icon), coba perhatikan masih ada yang mengganjal yaitu teks menu berita, pernyataan yang dilihat adalah TABLE berita dan Quick Search. Menu, nanti itemnya agan kita modifikasi dengan CSS, pernyataan TABLE berita kita ganti menjadi BERITA PENDIDIKAN, dan Quick Search menjadi PENCARIAN JUDUL BERITA. Untuk menu, dalam file header.php kita tambahkan listing sbb, antara <head> </head>: 2

/background-color: #ff0000; background: #FF0000 url(mgcom2.gif) no-repeat right top; color: white; border-bottom: 1px solid black; </style>  Sedangkan pada Dari  yang terletak item-item menu mulai tag tr, tag td diubah <tr><td><font size="-1"><a href="beritalist.php">berita</a></font></td></tr> Menjadi <tr><td> <ul class="mgcompanels"> <li><a href="beritalist.php">berita</a></li> </ul> </td></tr> 4

Pada pernyataan TABLE berita, pada file beritalist.php diubah menjadi BERITA PENDIDIKAN (Apabila telah mahir, dapat diganti topic-image yang menarik, jadi bukan berupa teks.). Quick Search bisa diganti PENCARIAN JUDUL BERITA, ini bermanfaat bagi pengunjung untuk mencari judul-judul berita yang tidak terlihat pada halaman tersebut (apabila berita yang di-inputkan sudah begitu banyak). Tampilan akan menjadi seperti gambar dibawah ini Apabila cursor diletakkan diatas item menu (mouse-over), maka warna latar belakang item-menu akan berubah, dalam hal ini dengan scripts tersebut diatas warna menjadi merah. Anda bisa memodifikasi sendiri warna-warna yang dikehendaki, bahkan dengan background berupa gambar batik misalnya atau gambar dengan warna gradient, vector warna-warni sekalipun. Caranya mudah, buatlah dua buah gambar berukuran 180 X 30 px, yang warna atau coraknya berbeda, disimpan pada folder htdocs ((lain kali bida dikembangkan) dan dinamai mgco.gif dan mgcom2.gif (nama bisa dimodifikasi dengan merubah CSS-nya.). 5

Memodifikasi penampilan berita (melalui View) Fungsi fasilitas menu / tombol / navigasi View yang dapat kita ganti dengan Detail misalnya atau Baca selengkapnya, untuk mengajak pengunjung melihat berita secara utuh. Kalau dari halaman beritalist, kita hanya dapat membaca ringkasan beritanya (kita buat melalui database adalah 255 karakter), dalam beritaview kita dapat membaca seluruh berita tersebut. Buka file beritaview.php, dengan editor teks (biasa saya gunakan notepad) perhatikan baris-baris yang terdapat dalam file-tersebut. Tampilan aslinya, belum ada foto-berita, judul masih kecil, disebelah kiri masih ada table judul fieldnya dsbnya. 6

Kita perhatikan mulai baris ke-70 Yang kita beri tanda merah, dihapus saja., kemudian yang kami beri tanda biru, termasuk tag slash td yang berada dibelakang (tidak kelihatan.) sehingga menyisakan tag buka tr, td dan tag tutup td, tr. 7

Perhatikan hasil akhir modifikasi kita. Tampilan pada browser selanjutnya adalah sbb.: 8

Kalau sudah berhasil pada tampilan terakhir tersebut, sudah lumayan berhasil. Namun masih jauh dari sempurna. Untuk mencoba silahkan, berita-berita lainnya ditambahkan.caranya mudah saja, pilih berita di salah satu website, copy judulnya dipaste pada halaman add kolom judul, demikian pula Authornya, sedangkan lead dan isi kita ambilkan dari content beritanya (di-paste pada kolom lead dan isi sama), mengambil gambar gunakan teknik (salah satunya) klik kanan gambar, pilih copy kemudian di-pastekan pada word, baru kemudian diedit melalui editor gambar sambil disave dengan nama file yang dikehendaki, jangan lupa diupload (he.. he.. he wah gaya ) pada folder htdocs Insya Allah secara bertahap akan kami buat arikel-artikel selanjutnya. Tiga artikel ini saja kami buat ngebut nggak ada 24 jam, dan sekaligus kami upload. Satu persatu. Oleh karena itu apabila ada kesalahan ketik, penjelasan yang kurang pas, tatabahasa yang kurang mathuk, gambar yang amburadul, saya mohon maaf serta feedbacknya saya tunggu. Dapat melalui email swaramedia@gmail.com atau multigraphica@yahoo.com dengan sangat senang hati akan kami tanggapi. (20120624-14.40 wib) 9 Biografi Penulis Agus Subardjo. Menyelesaikan S1 di STMIK-Widya Pratama Pekalongan pada tahun 2006. Pernah ikut mengajar pada Sekolah Tinggi tersebut mulai tahun 2007, untuk mata Kuliah Pemrograman web, Design Publish dan Delphi. Karier di Birokrasi, dimulai tahun 1973 sebagai Juru Penerang di sebuah Kecamatan (Talun Kab.Pekalongan) yang dahulunya merupakan daerah terisolir. Tahun 1980 dipromosikan sebagai Kepala sub Seksi pada Kantor Deppen Kab.Pekalongan dan 1984 menjadi Kasi Penerangan Masyarakat.. Bubarnya Deppen RI, ditarik sebagai salah satu pejabat eselon IV Kantor PDE-Arsipda Kab.Pekalongan, dimana penulis ikut membidani kelahirannya. Tahun 2005 diangkat menjadi eselon III sebagai Kepala Kapeditel ( dulunya PDE-Arsipda ) dan pensiun pada September 2007.