Agus Membangunweb2

16

Click here to load reader

Transcript of Agus Membangunweb2

Page 1: Agus Membangunweb2

Membangun website dinamis berbasis PHP-mySQL (2)

Agus [email protected]://multigraphica.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.

PendahuluanSetelah 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

1Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

Lisensi Dokumen:Copyright © 2011-2015 IlmuKomputer.ComSeluruh 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.

Page 2: Agus Membangunweb2

1. index.php 5. header.php2. db.php 6. ew.js3. function.php 7. pop calendar.js4. footer.php 8. sub-folder imagesIni 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.php2. beritalist.php3. beritaview.php4. beritaedit.php5. beritadelete.php

Fungsi file index.php, adalah mengkoneksikan browser dengan halaman web kita.

Listingnya sbb.:

1. <?php2. 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.

2Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

Page 3: Agus Membangunweb2

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 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:

3Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

Page 4: Agus Membangunweb2

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.

4Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

Page 5: Agus Membangunweb2

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 meng”klik” 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)

5Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

Page 6: Agus Membangunweb2

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

Baris-baris selanjutnya kita edit/modifikasi misalnya

Listing aslinya Setelah diubah

6Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

Page 7: Agus Membangunweb2

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.:

7Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

Page 8: Agus Membangunweb2

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:

8Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

Page 9: Agus Membangunweb2

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:

9Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

Page 10: Agus Membangunweb2

PenutupUntuk 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

.

10Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

Page 11: Agus Membangunweb2

Biografi PenulisAgus 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.

11Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com