Membangun website dinamis berbasis PHP-mySQL (2)

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.

Pada artikel saya yang pertama Membangun website dinamis berbasis PHP-mySQL(1) baru saya sampaikan hal yang paling mendasar menciptakan halaman web berbasis PHPmySQL dan merupakan penampilan yang sangat sederhana pula. Pada artikel yang kedua ini, marilah kita usakan, walaupun masih sederhana dengan beberapa tampilan yang menarik, misalnya dengan menambahkan image-header, foto berita (contoh database pada artikel tersebut) memisahkan edit data oleh admin, dan beberapa hal lainnya.

Pendahuluan
Setelah kita memproses database menjadi halaman website, akan terdapat file dan sub-folder default pada folder yang kita ciptakan dengan PHP-Maker. Misalnya folder yang kita buat berita, maka didalam folder tersebut akan terdapat file dan subfolder default 1 Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

1. index.php 5. header.php 2. db.php 6. ew.js 3. function.php 7. pop calendar.js 4. footer.php 8. sub-folder images Ini adalah file dan sub-folder default yang selalu te-generate oleh PHP-Maker. Sedangkan file-file yang tercipta oleh table database, tergantung banyaknya table dalam database tersebut dan masing-masing table menjadi 5 file. Karena kemarin kita hanya membuat sebuah table yaitu berita, maka file yang ada adalah 5 buah dengan suffix berita, yaitu: 1. beritaadd.php 2. beritalist.php 3. beritaview.php 4. beritaedit.php 5. beritadelete.php Fungsi file index.php, adalah mengkoneksikan browser dengan halaman web kita. Listingnya sbb.: 1. <?php 2. header("Location: beritalist.php"); 3. ?> Dari listing tersebut, menunjukkan bahwa yang ditampilkan pertama kali dalam halaman web kita adalah list berita yang jumlahnya sesuai dengan input yang kita masukkan dalam database. Andaikata baris kedua kita ganti : header("Location: beritaadd.php"); , maka yang muncul pertama kali adalah halaman input berita (prosedur ini nanti akan kita gunakan untuk misalnya membuat buku tamu, input data member, register member dlsbnya. Yang langsung dapat digunakan oleh pengunjungweb).

1. Modifikasi header dan halaman.

Untuk memodifikasi header, termasuk menu, menambah css-style, menetapkan lebar halaman, terletak pada file header.php. Untuk istilah tag . yang saya gunakan dalam artikel ini 2 Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

maksudnya adalah listing <>

Untuk membuat lebar halaman tetap ditengah-tengah browser, pada listing setelah tag body kita tambahkan tag div align=center, sedangkan lebar halaman pada tag table width=100% kita rubah misalnya width=900 untuk lebar 950px (pixel). Guna menambah image header, kita tambahkan tag img src=header.jpg: setelah tag td colspan=2 (apabila image header yang kita masukkan adalah header.jpg) yang diset sesuai lebar halaman, yaitu gambar tersebut mempunyai width=950 dan height (misalnya) 200px. Letak menu berada di left column, sedangkan content web akan otomatis berada pada right colomn.

Di atas ada gambar/image header.jpg dengan size 950x200px, maka untuk memuat dalam listing yang perlu dimodfikasi pada baris ke: 13 yaitu:

3 Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

Menjadi :

Kalau tampilan halaman web kita tadinya masih polos seperti gambar dibawah ini, setelah kita modifikasi listingnya dengan sebaris tag akan menjadi seperti gambar berikutnya.

4 Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

2. Modifikasi tampilan content

Pertama, yang kita modifikasi adalah list berita yang akan muncul pada awal halaman web kita. Seperti gambar tersebut.: Andaikata tampilan tersebut tidak dimodifikasi, maka pengunjung dapat menambah berita dengan mengklik menu berita, mengedit, melihat tampilan per data, maupun menghapusnya. Oleh karena itu fasilitas Add, Edit, Dellete harus kita hilangkan. Demikian juga row-Fieldnya. Kita buka beritalist.php denga notepad. Cari baris ke : 168 yaitu: mulai tag table , sampai tag /table kita hapus, ini untuk menghilangkan prosedur add atau penambahan data/berita.

Baris ke : 177 200 kita hapus untuk menghilangkan kepala-kolom field. (row-header)

5 Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

Baris ke 228 230 kita hapus untuk menghilangkan nomor id data/berita.

Baris-baris selanjutnya kita edit/modifikasi misalnya

Listing aslinya

Setelah diubah

6 Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

Yang ini perubahannya agak banyak (dihapus) karena untuk menghilangkan fungsi edit dan delete.

Menjadi sbb.:

Disini terlihat ada lebih kurang 12 baris yang dihapus, apabila halaman web kita dipanggil melalui browser akan mendapatkan tampilan sbb.:

7 Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

Tampilan diatas, foto berita belum dapat muncul walaupun filenya sudah tersimpan dalam database yaitu 001.jpg. Oleh karena itu listing dibawah ini yang diedit :

Menjadi sbb:

8 Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

Dan secara keseluruhan perubahan listing tampilannya adalah sbb.:

Perhatikan perubahannya, baik dalam memuat gambar/foto maupun tata letaknya. Tag br untuk spasi antar baris kata, tag img src untuk memanggil gambar, align=left meletakkan gambar disebelah kiri, hspace=10 untuk memberi jarak antara gambar dengan teks 10px, pernyataan View kita rubah menjadi Selengkapnya bias juga diubah dengan istilah lainnya, misalnya Detail, More, atau lainnya. Tampilan menjadi sbb:

9 Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

Penutup Untuk tulisan yang kedua ini, kita cukupkan disini, yang penting dalam men-develop web, kita harus teliti dalam meng-edit listingnya, karena kurang tanda titik, koma, tanda petik atau lainnya akan membuat halaman kita tidak sempurna. Dan yang lebih penting anda harus mengetahui fungsi-fungsi tag sehingga dalam mengedit dapat disesuaikan kebutuhannya.(dapat dicari pada artikel lain di ilmukomputer.com). 20120624-10.16 wib .

10 Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

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. Dirumah menjalankan perusahaan jasa dibidang computer dan masih memberikan bimbingan kepada mahasiswa (kebanyakan dari luar kota) yang membuat proyek utnuk skripsi S1 maupun D3.

11 Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com