Membangun Website Untuk Pemula

.: 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   file­file   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 file­file 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  file­file website. Biasanya sebuah website dinamis  akan  mempunyai database  untuk  menyimpan  content­content  yang  ditampilkan,   dan  file­file  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 file­file 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. 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 aplikasi­aplikasi yang dibutuhkan untuk membangun suatu website  dinamis. Kita dapat menginstall aplikasi­aplikasi tersebut secara terpisah/satu­satu, tapi penulis sarankan  untuk menginstall aplikasi yang sudah menggabungkan semua aplikasi­aplikasi 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 field­fieldnya 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 meng­klik 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 ­