.: Membangun Website untuk Pemula ibnuzeinhamzah :.
Membangun Website untuk Pemula oleh: Mohammad S a.k.a ibnuzeinhamzah
Pendahuluan Perlu diketahui bahwa ada 2 jenis website yang dibedakan berdasarkan dari cara pengelolaan content, yaitu website statis dan website dinamis. Dari namanya dapat kita ketahui bahwa sebuah website statis hanya menampilkan informasi atau content yang tidak dapat berubah secara otomatis. Perubahan pada website statis biasanya dilakukan dengan melakukan perubahan pada filefile website. Dapat dibayangkan website sebesar detik.com yang dalam 1 harinya dapat berubah beberapa kali, jika detik.com menggunakan pola website statis anda dapat membayangkan pekerjaan seorang website administrator yang harus merubah filefile website tersebut seiring dengan perubahan content yang akan ditampilkan. Berbanding terbalik dengan website dinamis yang dapat menampilkan content yang bisa berubah secara otomatis tanpa harus merubah isi dari filefile website. Biasanya sebuah website dinamis akan mempunyai database untuk menyimpan contentcontent yang ditampilkan, dan filefile website dinamis akan membaca database tersebut untuk mendapatkan content yang akan ditampilkan, sehingga jika ada perubahan pada database tersebut (penambahan, pengeditan dan penghapusan content) maka secara otomatis content yang ditampilkan filefile website akan berubah pula. Untuk membangun sebuah website ada beberapa hal yang perlu diketahui oleh web developer (seorang yang membangun website). Sebuah website untuk dapat ditampilkan di browser (firefox, mozilla, ie, safari, netscape, opera, konqueror, dll) haruslah ditulis dalam bahasa yang dimengerti oleh browser, yaitu HTML (Hyper Text Markup Language). OK, sekarang kita akan membuat 1 file html, tuliskan kode dibawah ini kedalam notepad atau wordpad.
File HTML Hallo, Saya sedang belajar membuat file HTML.
Lalu, simpan file tersebut dengan nama apa saja, namun ekstensinya haruslah .html atau .htm dan setelah kita lihat di windows explorer, file tersebut akan memiliki icon web browser (ie atau firefox atau yg lainnya). Untuk kasus diatas kita bisa langsung menjalankan file tersebut dengan mengklik 2 kali pada file tersebut. Setelah kita klik 2 kali maka akan terbuka browser dan akan muncul tulisan Hallo, Saya sedang belajar membuat file HTML. Jika kita lihat source code nya dari browser, dengan cara klik kanan didalam browser dan pilih View Page Source , maka akan terlihat isi file yang telah kita tulis. Sekarang jika tampilan website diatas harus berubah, maka file tersebut harus diubah pula sesuai dengan isi yang akan ditampilkan. 1
.: Membangun Website untuk Pemula ibnuzeinhamzah :.
Website Dinamis Setelah kita mengetahui sedikit tentang website dinamis, akan kita lanjutkan membahasa website dinamis, untuk membuat suatu website dinamis, diperlukan beberapa aplikasi, jika pada website statis kita dapat langsung membuat file website statis dan langsung menjalankannya, maka pada website dinamis kita tidak dapat langsung menjalankan file website dinamis. Suatu website dinamis biasanya ditulis dengan menggunakan bahasa pemrograman web, seperti PHP, ASP, JSP, Ruby, Python, dll. Dan suatu website dinamis akan menyimpan content nya didalam database, seperti MySQL, SQL Server, Oracle, PostgreSQL, Microsoft Access, dll. Dan pada website dinamis dibutuhkan sebuah web server (Apache, IIS, dll) untuk mengartikan bahasa pemrograman menjadi bahasa HTML. Baiklah, langsung saja kita install aplikasiaplikasi yang dibutuhkan untuk membangun suatu website dinamis. Kita dapat menginstall aplikasiaplikasi tersebut secara terpisah/satusatu, tapi penulis sarankan untuk menginstall aplikasi yang sudah menggabungkan semua aplikasiaplikasi tersebut seperti WAMP (Windows Apache MySQL PHP), XAMPP, dll. Dalam tulisan ini penulis menggunakan WAMP. Langkah langkah untuk instalasi WAMP tinggal mengikuti instruksi yang diberikan oleh instalasi WAMP. Setelah instalasi WAMP selesai, maka yang harus diperhatikan adalah folder dibawah folder c:wamp, didalam folder tersebut ada folder www, folder tersebut adalah tempat folder website dinamis, kita dapat membuat sebanyak mungkin website dinamis dengan membuat folder nya didalam folder www. Sekarang kita akan membuat website dinamis bernama test, maka kita akan membuat folder test didalam folder www. Sebelum membuat dan menjalankan website dinamis, WAMP haruslah dijalankan terlebih dahulu. Jika WAMP sudah berjalan maka akan terdapat icon di bawah kanan (systray) berwarna putih. Jika icon tersebut terdapat warna merah atau kuning, maka belum semua aplikasi WAMP berjalan, untuk menjalankan semua aplikasi WAMP, klik di icon tersebut dan pilih start all application.
Bahasa Pemrograman PHP PHP (PHP: Hypertext Preprocessor), adalah salah satu bahasa pemrograman web. Sekarang mari kita coba membuat file website seperti diatas namun dengan menggunakan bahasa PHP. Buat file index.php didalam folder test yang telah kita buat didalam folder www, yang isinya seperti dibawah ini:
Setelah file tersebut disimpan, buka browser Anda dan ketikkan localhost di bagian tempat menulis alamat web, dibagian bawah halaman localhost terdapat folder test. Klik folder tersebut, dan akan ditampilkan tulisan seperti tulisan yang didalam tanda “ “ yang telah kita buat. Setelah sukses membuat contoh pertama file .php akan kita lanjutkan dengan membuat database sederhana dengan menggunakan database MySQL.
2
.: Membangun Website untuk Pemula ibnuzeinhamzah :.
Database Karyawan dengan MySQL Calam contoh database ini, akan kita buat sebuah database sederhana database karyawan dari suatu departemen. Dalam suatu departemen, seorang karyawan akan dicatat informasinya seperti dibawah ini, 1. 2. 3. 4. 5. 6. 7. 8.
Nama Depan Nama Belakang NIP Tempat Lahir Tanggal Lahir Alamat Jabatan Nama Departemen
kita akan membuat database karyawan tersebut dengan menggunakan phpMyAdmin, yaitu aplikasi yang memudahkan kita dalam membuat database di MySQL. Untuk menjalankan phpMyAdmin, buka browser Anda dan ketikkan localhost di url bar, dan pilih phpMyAdmin dihalaman tersebut, maka akan tampil halaman phpMyAdmin.
Tampilan Localhost
3
.: Membangun Website untuk Pemula ibnuzeinhamzah :.
Tampilan phpMyAdmin
Tuliskan departemen di kotak isian Create new database dan klik Create. Akan muncul tampilan database departemen. Saat ini database departemen belum mempunyai tabel apapun, maka kita akan membuat sebuah tabel bernama karyawan dengan jumlah field sebanyak 8 seperti yang sudah kita definisikan diatas.
Tampilan database departemen tanpa tabel.
4
.: Membangun Website untuk Pemula ibnuzeinhamzah :.
Isikan nama tabel yaitu karyawan dikotak isian Create new table on database departemen dan isikan angka 8 di kotak isian Number of fields seperti gambar diatas, lalu akan muncul tampilan seperti dibawah ini.
Tampilan isian field dari table karyawan yang baru dibuat.
Setelah itu, kita masukkan fieldfieldnya sesuai dengan yang telah kita definisikan sebelumnya. 1. 2. 3. 4. 5. 6. 7.
Nama Depan → Field: nama_depan, Type: Varchar, Length: 50, Null: Not Null Nama Belakang → Field: nama_belakang, Type: Varchar, Length: 50, Null: Not Null NIP → Field: nip, Type: Varchar, Length: 11, Null: Not Null Tempat Lahir → Field: tempat_lahir, Type: Varchar, Length: 50, Null: Null Tanggal Lahir → Field: tgl_lahir, Type: Date, Null: Null Alamat → Field: alamat, Type: Text, Null: Null Jabatan → Field: jabatan, Type: Varchar, Length: 50, Null: Null
5
.: Membangun Website untuk Pemula ibnuzeinhamzah :.
8.
Nama Departemen → Field: departemen, Type: Varchar, Length: 50, Null: Null
Setelah itu klik Save. Tampilannya akan seperti berikut:
Lalu kita akan memasukkan beberapa data karyawan ke dalam tabel karyawan. Klik di Insert, akan muncul tampilan seperti berikut:
6
.: Membangun Website untuk Pemula ibnuzeinhamzah :.
Lalu kita isikan di kotak isian dengan data berikut: 1. 2. 3. 4. 5. 6. 7. 8.
Nama Depan: Suhariadi Nama Belakang: Bho NIP: 1234567890 Tempat Lahir: Jakarta Tanggal Lahir: 1 Januari 1978 Alamat: Jalan Jambu RT 02 RW 05 Jagakarsa Jakarta Selatan Jabatan: IT Administrator Departemen: Analisa Statistik
Sesuai dengan fieldnya seperti gambar dibawah ini:
7
.: Membangun Website untuk Pemula ibnuzeinhamzah :.
Lalu klik Go dibagian bawah halaman tersebut. Jika sukses memasukkan datanya, kita dapat melihat data yang telah kita masukkan tadi dengan mengklik Browse.
Koneksi dari file .php ke Database MySQL Untuk dapat melihat/menampilkan data yang terdapat di database MySQL ke browser melalui file .php, maka dibutuhkan koneksi dari file .php ke database MySQL. Sekarang kita akan membuat sebuah file .php yang akan melakukan koneksi ke database MySQL dan membaca data yang terdapat didalam tabel karyawan. Buat file bernama karyawan.php dan tuliskan script php dibawah ini: ”.mysql_error(); // Jika tidak berhasil melakukan koneksi // ditampilkan pesan errornya exit(); // dan keluar, tidak melanjutkan proses dibawahnya } $query = “SELECT * FROM karyawan”; // menulis perintah SQL untuk melihat/mengambil // semua (* artinya semua data) data dari tabel karyawan
8
.: Membangun Website untuk Pemula ibnuzeinhamzah :. $res = mysql_query($query); // menjalankan perintah query diatas dan menyimpan // hasilnya ke variable $res while($r = mysql_fetch_array($res)){ // melakukan penterjemahan data yang disimpan // divariabel $res dan menyimpannya ke variabel $r // karena yang digunakan adalah perintah mysql_fetch_array // maka hasilnya akan dalam bentuk array. // table karyawan mempunyai 8 field, sehingga variabel arraynya akan dimulai // dari 0 sampai 7 echo 'Nama Depan: '.$r[0].'
'; echo 'Nama Belakang: '.$r[1].'
'; echo 'NIP: '.$r[2].'
'; echo 'Tempat Lahir: '.$r[3].'
'; echo 'Tanggal Lahir: '.$r[4].'
'; echo 'Alamat: '.$r[5].'
'; echo 'Jabatan: '.$r[6].'
'; echo 'Departemen: '.$r[7].'
'; } mysql_free_result(); // Melakukan pembebasan memory yang dipakai mysql_close(); // memutuskan koneksi ?>
9