Adapun persiapan awal membuat web portofolio dengan PHP adalah:

1. Install XAMPP sebagai web server dan database server.

Untuk panduan install XAMPP dapat ditemukan pada tulisan penulis di kaskus. Setelah itu jalankan apache dan mysql pada XAMPP control panel dengan klik tombol start, dan buatkan folder "portofolio" tanpa tanda petik pada C:/XAMPP/htdocs. dan ketikkan url "localhost/portofolio" tanpa tanda petik pada browser (mozzilla atau google chrome). Jika Langkah Anda benar maka akan seperti gambar di bawah ini:



2. Persiapan Tampilan

Untuk tampilan penulis menggunakan template buatan dari www.dzyngiri.comyang bersifat free dan bebas digunakan. Bisa download template disini kemudian extract ke folder portofolio yang kita buat tadi. Sehingga seperti gambar di bawah ini:



dan saat dijalankan di browser dengan mengetikkan url "localhost/portofolio" tanpa tanda petik akan jadi seperti ini:

Untuk membuat database, ada beberapa langkah yang harus dilakukan. Yang paling utama adalah memastikan bahwa mysql pada XAMPP control panel telah jalan.

Mulailah dengan mengetikkan url "localhost/phpmyadmin" pada browser. Kemudian klik "Database" dan isi nama database yang akan dibuat, dalam hal ini portofolio. Apabila langkah Anda benar, maka akan seperti dibawah ini:


kemudian klik "create". sehingga pada bagian sebelah kiri terbuatlah database anda, yaitu portofolio.

Selanjutnya adalah membuat tabel profil pada database portofolio yang barusan di buat, caranya klik databasenya, kemudian masukan nama tabel dan jumlah kolom, adapun akan diterangkan oleh gambar dibawah ini:



setelah di tekan "go" maka akan membuat kolom sejumlah 4 yang akan kita isi dengan struktur tabel profil kita. Untuk memudahkan dapat dilihat dan diisikan struktur sesuai dengan gambar dibawah ini:


Kemudian klik tombol save atau simpan. maka anda sudah memiliki tabel profil dalam database. Langkah sealanjutnya adalah mengisi tabel profil pada database dengan cara klik tabel profil, kemudian pilih menu insert atau sisipkan. isikan sesuai gambar dibawah ini:



kemudian klik tombol go, sehigga saat ini kita mempunya sebuah data dalam sebuah tabel profil dalam sebuah database portofolio seperti gambar di bawah ini:


Untuk materi database penulis cukupkan disini. Untuk materi selanjutnya adalah menampilkan data dari database dari tabel profil ke dalam halaman utama website.

Konsep Pemrograman OOP saat ini tengah banyak digunakan dan di support oleh banyak bahasa pemrograman seperti java dan juga PHP. Konsep pemrograman OOP dalam PHP memiliki banyak kelebihan bila dibandingkan dengan konsep pemrograman prosedural. Dalam artkel bagian ini, penulis banyak mengutip dari buku "Trik Mudah Menguasai OOP Dengan PHP" terbitan dari lokomedia.

OOP dan prosedural adalah METODE MENULIS PROGRAM.

OOP memiliki banyak kelebihan bila dibandingkan dengan teknik pemrograman prosedural. Antara lain:

Reusable, artinya kode yang diimplementasikan pada bagian tertentu dapat digunakan kembali pada bagian lainnya. Misal pada halaman utama web, programmer menggunakan "program user" untuk menampilkan data dari tabel profil dari database portofolio dan juga pada halaman profil web programmer ingin menampilkan data yang sama, maka programmer cukup memanggil "program user" tadi. Adapun "program user" yang penulis maksud adalah class user yang berisi method atau function milik user.
Manageable, artinya kode program yang telah dibuat dapat lebih mudah dimaintenance atau diatur. Misal ada perubahan pada business process pada suatu proyek, maka yang diubah adalah bagian itu saja, tidak perlu membongkar aplikasi.
Dua hal diatas adalah kelebihan OOP dalam PHP yang dirasakan penulis, bahkan blog.teamtrainit.com pun dibangun mengunakan metode OOP.

Bila anda mengalami kesulitan memahami OOP, jangan panik dulu, nanti pada saat memasuki bagian 4 dari "BIkin Web Portofolio Dengan PHP" akan membantu anda lebih memahami lagi. Pada bagian 4 nanti kita akan membuat class.php.

Sebelum memulai menulis skrip penulis akan memperkenalkan code editor, atau aplikasi yang digunakan untuk menulis kode PHP. Dalam hal ini penulis menggunakan "gedit" semacam notepad bawaan linux ubuntu. Bagi Anda pengguna Windows dapat menggunakan notepad++.

Pada bagian ini penulis akan membuat file class.php dimana di dalamnya berisi query ke database. Maksudnya adalah skrip yang digunakan untuk mengoperasi database, baik itu menampilkan, menambahkan, mengubah maupun menghapus data dalam database.

Pada bagian sebelumnya penulis membahas pembuatan tabel profil dalam database portofolio yang sudah diisi dengan data atau profil kita (berupa nama dan lain-lain). Pada kali ini penulis akan coba membuat skrip dalam class.php yang berguna menampilkan data tersebut pada halaman utama website.

Ada 2 hal yang penulis perhatikan pada kasus ini, yaitu:

Kita akan melakukan operasi pada database sehingga membutuhkan class database dalam class.php
Kita akan menampilkan profil sehingga membutuhkan class profil dalam class.php
Adapun isi dari class.php seperti pada gambar dibawah ini:



Kemudian simpan dengan nama file class.php pada folder utama proyek (C:/XAMPP/htdocs/portofolio). atau seperti pada gambar di bawah ini:


Poin dari pembahasan kali ini adalah membuat class untuk menampilkan data profil. Di pembahasan selanjutnya kita akan menampilkan profil pada halaman utama website.

Pada pembahasan sebelumnya penulis telah membahas pembuatan class database dan profil, maka pada pembahasan kali ini adalah menampilkan data profil pada halaman utama website dari class profil yang kita buat pada pembahasan sebelumnya.

Kita akan menampilkannya pada halaman utama ini:

Namun bila kita perhatikan lebih lanjut, bagian header dan footer dari website ini selalu sama meskipun konten berubah-ubah.

Maka kita bisa membuat skrip percabangan disini.

Logikanya seperti ini:

Bila kondisi "halaman ada", Maka

Bila kondisi halaman skills, maka tampilkan skills.php (yang berisi skill kita)
Bila kondisi halaman work, maka tampilkan work.php (yang berisi karya kita)
Bila kondisi halaman resume, maka tampilkan resume.php (yang berisi resume kita).
Bila kondisi halaman tidak ada, maka tampilkan profile.php yang berisi profil kita

Langkah Pertama adalah buat file profile.php, skills.php, work.php, resume.php sehingga susunan file dalam folder seperti di bawah ini:



Setelah itu buka file index.php dan kita modifikasi pada bagian yang nantinya berubah-ubah. Adapun bagian yang akan berubah-ubah kontennya adalah:

sehingga pada index.php kita akan mengubah bagian itu dengan skrip PHP berdasarkan logika yang kita buat diatas.

pada baris ke 26 sampai ke 65 di index.php skripnya kita cut, dan kita paste di file profile.php kemudian save profile.php dan pada index.php bagian skrip yang kita cut tadi kita ganti dengan ini:



selanjutnya pada file skills.php, resume.php, work.php kita hapus skrip bagian header dan footer (sebagaimana file profile.php). Mengapa demikian? karena bagian header sama footer kita sudah pakai miliknya index.php. Inilah kelebihan dari model percabangan dalam membagi halaman.

Setelah file skills.php, resume.php, work.php kita rapihkan dengan cara membuang bagian header sama footernya, maka selanjutnya kita memodifikasi link halamannya.



Karena kita sudah melakukan percabangan halaman sehingga bagian menu hanya ada di file index.php dan kita hanya perlu memodifikasi file index.php bagian menu. kita ubah seperti gambar dibawah ini:



Bagian yang diubah adalah yang saya blok. Bila sudah selesai selanjutnya tes halaman anda dengan klik satu persatu menu dari halaman utama website anda.

Selanjutnya kita akan menampilkan profil kita pada file profile.php. Langkah utama adalah memodifikasi bagian index.php dan kita buat skrip seperti di bawah ini:



tambahkan skrip sesuai dengan yang saya blok pada bagian atas sendiri file index.php

Setelah itu kita modifikasi file profile.php menjadi seperti gambar dibawah ini:



dan kemudian lihat hasilnya pada localhost/portofolio



Well Done, kita telah menyelesaikan bagian menampilkan data dari tabel profil pada database portofolio menggunaka teknik OOP PHP

Pada pembahasan sebelumnya kita telah menampilkan profil kita pada halaman utama website, untuk pembahasan kali ini penulis masih ingin membahas hal yang sama namun pada tempat berbeda, yaitu penulis mencoba menampilkan data work pada halaman website di menu work seperti pada gambar di bawah ini:


Dan apabila di klik salah satu gambar, maka akan keluar pop up gambar yang lebih besar, seperti pada gambar di bawah ini:




Apabila punya anda tidak muncul, jangan khawatir, pada bagian akhir artikel ini penulis akan lampirkan work.php agar mudah dipahami oleh Anda.

Langkah awal yang harus disiapkan adalah membuat tabel work beserta isinya pada database portofolio dengan susunan struk tabel seperti pada gambar di bawah ini:



dan diisi dengan data seperti di bawah ini:

pada tabel work saya isi sebanyak 5 data yang berupa nama dan gambar yang nantinya akan kita tampilkan pada halaman work.

Langkah selanjunya adalah membuat class work dan fungsi tampilWork() untuk menampilkan work di class.php



NB: class profil sudah kita buat sebelumnya.

Setelah itu kita modifikasi file index.php seperti gambar dibawah ini:


Bagian yang saya tambahkan adalah bagian yang saya blok.
Untuk selanjutnya yaitu modifikasi file work.php sehingga seperti gambar di bawah ini:


bila diperhatikan skrip yang penulis blok, ternyata skrip yang menampilkan foto pada halaman work adalah skrip yang sama (berada dalam tag HTML li) sehingga penulis hapus skrip itu dan sisakan satu yang nantinya akan dilakukan perulangan, sehingga gambar yang nampil tetap banyak sebanyak data yang ada di tabel work pada database. sehingga skrip menjadi seperti di bawah ini:



Langkah terakhir penulis melakukan coding PHP pada bagian yang dimodifikasi sehingga skripnya menjadi seperti pada gambar di bawah ini:



NB: bagian yang dimodifikasi adalah bagian yang penulis blok.
Dan hasilnya adalah:



dan pop up nya:



NB: penulis menggunakan gambar yang sama yang dimasukkan di tabel work pada database. pada pop up nya tampil tulisan 'kerjaan2' yang diambil dari nama gambar (ada pada tabel work di database).

Dan yang terakhir penulis berikan skrip work.php bagi Anda yang gagal dalam memodifikasi file work.php



ini sumbernya gans.. SUMBER