1 BAB 1 PENDAHULUAN 1.1 Konsep Dasar Membuat Website2 1.1.1 Website yang ada saat ini3 1.1.2 Pengumpulan Data4 1.1.3 Memahami Tujuan5 1.1.4 Mulai Mera...
Seperti telah diuraikan pada bab sebelumnya, perangkat lunak untuk mengolah citra bervariasi. Namun dalam buku ini, Penulis membatasinya menggunakan perangakat lunak Adobe Photoshop CS hingga CS6 untuk mendesain tampilan web yang indah. Penulis tidak akan menjelaskan konsep dasar dan cara penggunaan tool dalam Adobe Photoshop namun langsung ke pokok bahasan. Jika masih merasa kesulitasan dalam mengoperasikan Adobe Photoshop, silakan mempelajari terlebih dulu melalui internet atau buku-buku yang sudah banyak beredar.
2.1
Sistem Grid
Dengan memanfaatkan sistem ini, seorang web designer akan bekerja lebih cepat dengan hasil optimal. Sistem grid membantu konsistensi tata letak (layout) setiap halaman dalam sebuah website. Selain itu, dengan sistem grid akan mempermudah dalam menterjemahkan ke dalam bahasa program web (Cascading Style Sheet). Sebelum muncul sistem grid, sebagian besar membuat secara manual dengan garis bantu (ruler) yang disediakan oleh software tersebut. Selain hasilnya kurang maksimal, juga dapat menghambat pekerjaan karena harus membuat grid terlebih dulu.
41
Gambar 2.1 Contoh penggunaan sistem grid
Namun sekarang sudah banyak yang menyediakan template dalam format PSD, CDT, AI, dan lain-lain atau extension/plugin dalam format ATN (format file untuk action dalam Adobe Photoshop). Salah satu penyedia template sistem grid ini adalah 960 Grid System (http://960.gs/).
Gambar 2.2 Contoh grid dengan 12 kolom
1. Cara menggunakan grid tersebut relative mudah. Sebagai contoh, bukalah salah satu file template dalam format PSD yang berada di dalam CD buku ini. Folder Asset > Template > Photoshop > 960_grid_8_col.psd (Lihat Gambar 2.3.). Jika ingin menggunakan format file lain, silakan buka dokumen sesuai aplikasi yang digunakan. 2. Selain template dalam gambar, penulis menyediakan dalam format plugins. Untuk meng-install, baca petunjuknya (Lihat Gambar 2.4).
42
Gambar 2.3 Membuka template grid delapan kolom
3.4
2.2
Petunjuk instalasi plugin 960 Grid di Adobe Photoshop
Persiapan Awal
Banyak para web designer yang meninggalkan standar ukuran lebar 960 pixel (ukuran screen monitor 1024 x 768 pixel) dan menggunakan ukuran lebar monitor 1140 hingga 1200 pixel ketika mendesain sebuah website. Pertimbangannya, saat ini sebagian besar screen monitor menggunakan resolusi tinggi, di atas 1027 x 768 pixel. Menentukan lebar area website sejak awal menjadi hal yang penting. Dengan menggunakan lebar area di atas 1140 pixel dapat memberi nilai tambah untuk sebuah website yang kompleks. 43
1.
Diasumsikan, telah membuka (960_grid_8_col.psd).
template
dengan
8
kolom
Gambar 2.5 Tampilan template grid 8 kolom
2.
Template tersebut masih perlu dimodifikasi panjang atau tinggi area tersebut. Untuk mengubah ukuran tinggi, pilih menu Image > Image Size atau tekan tombol Alt + Ctrl + I secara bersama-sama (lihat Gambar 2.6).
3.
Ubah ukurannya 1020 x 2100 pixel seperti gambar berikut. Setelah selesai, klik tombol OK (lihat Gambar 2.7).
4.
Ukuran dokumen kanvas sudah berubah. Simpan dokumen tersebut dengan nama lain, pilih menu File > Save As.
44
Gambar 2.6 Mengubah ukuran gambar
Gambar 2.7 Kotak dialog Image Size
2.3
Top Navigation
Penempatan menu yang tepat dapat memberikan dampak terhadap website yang dikunjungi. Umumnnya, menu utama ditempatkan di bagian atas, karena posisi tersebut sejajar lurus dengan mata pengunjung ketika website pertama kali dibuka sehingga posisi tersebut menjadi fokus utama. Untuk masalah warna latar belakang (background) menu navigasi diserahkan sepenuhnya kepada para web designer atau pembaca.
45
1
Pertama kali, pilih warna yang akan dijadikan background navigasi.
Gambar 2.8 Tool untuk memilih warna Foreground
2
Setelah muncul kotak dialog Color Picker, masukkan kode warna #242424.
Gambar 2.9 Kotak dialog Color Picker
3
Aktifkan Rectangle Tool.
Gambar 2.10 Mengaktifkan Rectangle Tool
46
4
Pada Option bar, pilih Shape untuk tipe objek dan Stroke = None .
Gambar 2.11 Mengatur Shape melalui Option bar
5
Agar lebih akurat ketika menempatkan objek, aktifkan Snap. Pilih menu View > Snap. Centang (aktifkan) semua pilihan Snap To.
Gambar 2.12 Mengatur Snap
6
Buatlah navigasi dari kiri kemudian seret (drag) ke kanan dengan dimensi area 940 x 40 pixel.
Gambar 2.13 Membuat objek navigasi
47
2.4
Insert Text
Pemilihan jenis, ukuran dan warna huruf memiliki peran penting dalam sebuah website. Warna font yang panas (merah atau kuning) dapat mengganggu pandangan ketika membaca informasi yang disajikan. Pilih warna font yang menyejukkan mata, misal abu-abu, hijau tua, hitam, dan lain-lain. Namun semua itu tergantung latar belakang (background) yang digunakan. Jika warna latar belakang gelap, maka gunakan font yang terang missal kuning, putih, grey, hijau muda, dan lain-lain. 1.
Untuk menyisipkan teks ke dalam navigasi, aktifkan Horizontal Type Tool.
Gambar 2.15 Mengaktifkan Horizpntal Type Tool
2.
Aktifkan ikon Foreground color untuk memilih warna.
Gambar 2.16 Kotak dialog Color Picker untuk memilih warna teks
3.
Setelah muncul kotak dialog Color Picker, masukkan kode warna #FFFFFF (lihat Gambar 2.17).
4.
Pada option bar, tentukan type, style dan size (lihat Gambar 2.18).
5.
Ketik teks sesuai keinginan dan letakkan posisinya agar lebih menarik (lihat Gambar 2.19).
48
Gambar 2.17 Kotak dialog Color Picker untuk memilih warna teks
Gambar 2.18 Pengaturan Horizontal Type Tool pada option bar
Gambar 2.19 Membuat nama domain
6.
Buat teks lain sebagai menu utama seperti nampak pada gambar berikut.
Gambar 2.20 Nama domain dan menu utama sudah selesai dibuat
2.5
Insert Separator
Setelah membuat nama institusi dan menu utama, langkah berikutnya adalah membuat garis pemisah antar menu. Sebenarnya ini tidak wajib, karena tujuannya adalah untuk mempercantik tampilan saja. Menu-menu yang disediakan memiliki efek yang berbeda-beda tergantung desainer. Posisi mouse hover, active, visited, dan default akan dibahas dalam Cascading Style Sheet (CSS). 49
1. Untuk membuat garis pemisah, aktifkan Line Tool.
Gambar 2.21 Mengaktifkan Line Tool
2. Klik ikon Set Foreground Color untuk memilih warna. Setelah muncul kotak dialog Color, masukkan kode warna #646464 seperti nampak pada gambar berikut.
Gambar 2.22 Memilih warna Foreground
3. Buatlah garis lurus dari atas ke bawah. Agar menghasilkan garis tegak lurus, tekan tombol Shift saat membuat garis.
Gambar 2.23 Membuat garis pemisah antar menu
4. Dalam palet Layer akan muncul layer baru dengan nama Shape 1. Untuk mengganti warna garis, klik ganda (double click) pada kotak objek tersebut. Jika sudah muncul kotak dialog Color Picker, pilih warna yang diinginkan. 50
Gambar 2.24 Mengganti warna garis pemisah
5. Buatlah duplikasi garis pembatas tersebut dengan cara menekan tombol Shift + Alt secara bersama-sama.
Gambar 2.25 Menduplikasi garis pemisah
6. Pada palet Layer akan muncul secara otomatis layer baru dengan nama Shape 1 copy.
Gambar 2.26 Layer hasil duplikasi
51
7. Buatlah duplikasi garis lagi sehingga tiap teks menu utama terdapa tanda garis pemisah seperti nampak pada gambar berikut.
Gambar 2.27 Hasil akhir nama website dan menu utama
2.6
Search Box
Fitur penting dalam sebuah website adalah tersedianya form pencarian. Bentuk kotak pencarian bermacam-macam, tergantung selera desainer. Dengan teknologi CSS3, form pencarian sederhana dapat dimodifikasi efek blur, bayangan (shadow), corner, outline dan efek lainnya yang biasanya hanya bisa dilakukan dalam photoshop, kini dapat dilakukan secara mudah menggunakan teknologi CSS3. 1.
Aktifkan Rounded Rectangle Tool.
Gambar 2.28 Mengaktifkan Rounded Rectangle Tool
2.
Pada Option baru, aturlah spesifikasi seperti gambar berikut.
Gambar 2.29 Mengatur spesifikasi Shape untuk objek
3.
52
Aturlah radius lengkung. Semakin besar nilainya maka semakin lengkung pada tiap sudutnya. Beri tanda centang pada pilihan Align Edges agar setiap sudutnya sama rata.
Gambar 2.30 Mengatur radius lengkung tiap sudut
4.
Buatlah kotak form pencarian dengan cara mengklik posisi awal sebelah kanan bawah kemudian seret (drag) ke kiri atas. Jika membatalkan hasil menggambar, tekan tombol tombol Ctrl + Alt + Z kemudian mulailah menggambar kembali.
Gambar 2.31 Membuat searching box dari sebelah kanan
5.
Hasilnya seperti gambar berikut.
Gambar 2.32 Search box sederhana
6.
Untuk memberikan efek Inner Bevel, klik ikon Add a new layer style di bagian bawah panel Layers (mirip huruf f). Kemudian pilih opsi Bevel & Emboss.
Gambar 2.33 Menambahkan efek pada Layer (layer style)
Hasilnya seperti nampak pada gambar berikut, efek inner bevel di dalam kotak form memberi kesan lebih impresif.
Gambar 2.35 Tampilan searching box sudah diberi efek
9.
54
Tambahkan teks pada kotak form pencarian, pilih warna teks gray atau warna lain sesuai keinginan.
Gambar 2.36 Menambahkan teks pada kotak pencarian (searching box)
10.
Untuk mempercantik tampilan, tambahkan ikon search yang dapat ditemukan di internet. Berikut contoh ikon search yang disediakan oleh website Icon Archive (http://www.iconarchive.com/).
Gambar 2.37 Beberapa contoh ikon search dari web penyedia gambar
11.
Klik teks PNG untuk menyimpan gambar ikon search dalam format PNG.
Gambar 2.38 Menyimpan gambar dalam format PNG
55
12.
Buka file ikon search dengan Adobe Photoshop kemudian klik dan seret (click & drag) ke dokumen Desain Web. Hasilnya tampak di sebelah kanan.
Gambar 2.39 Memasukkan gambar ke dalam dokumen
13.
Modifikasi ukuran agar lebih proporsial dengan cara menekan tombol Ctrl + T secara bersama-sama kemudian seret titik pada bagian sudut. Agar bentuknya proporsional, tekan tombol Shift ketika memperkecil ukuran gambar. Setelah selesai tekan tombol Enter atau klik tanda centang
di bagian Option bar.
Gambar 2.40 Mengubah ukuran gambar
14.
Atur posisinya di sebelah kanan menggunakan Move Tool (
Gambar 2.41 Hasil akhir fitur kotak pencarian (searching box)
56
).
15.
Proses pembuatan form pencarian dan menu utama sudah selesai. Untuk mempermudah proses pekerjaan selanjutnya, sebaiknya membuat Group secara terpisah untuk tiap bagian. Ini untuk mengantisipasi banyaknya objek dalam dokumen, sehingga akan mudah ketika mengedit kembali. Untuk membuat Group baru, seleksi semua layer yang berada di kelompok Top Navigation. Caranya, klik layer paling bawah kemudian tekan tombol Shift. Sambil tetap menekan tombol Shift, aktifkan layer paling atas.
Gambar 2.42 Menyeleksi beberapa layer
16.
Pilih menu Layer > Group Layer atau tekan tombol Ctrl + G secara bersama-sama. Secara otomatis layer yang aktif akan menjadi satu kelompok dengan nama Group 1 (gambar sebelah kiri). Ganti nama Group 1 menjadi Top Navigation dengan cara menekan dua kali pada teks tersebut.
57
Gambar 2.43 Mengganti nama Grup
2.7
Featured
Dalam sebuah website, informasi yang ditampilkan dikelompokkan dalam blok tertentu. Umumnya, informasi penting atau yang diutamakan akan ditampilkan di halaman utama dan letaknya di bawah setelah Menu Utama atau Header. Pengaturan blok dapat dilakukan melalui berbagai cara misalnya dengan memberi warna latar belakang, memberi nama judul blok yang tebal, menambahkan garis pemisah dan cara lain sesuai kreasi desainer. Pada bagian ini, akan dibahasa teknik pembuatan blok untuk informasi khusus atau informasi utama (Featured). 1. Aktifkan Group 8 Col Grid, tujuannya adalah ketika membuat objek baru maka secara otomatis posisi layer baru akan berada di atas Group tersebut.
Gambar 2.44 Mengaktifkan Layer 8 Col Grid
58
2. Letakkan mouse di area Ruler kemudian klik dan seret ke bawah untuk membuat garis bantu sejauh 252 pixel. Perlu diketahui, nilai 0 pixel dihitung dari garis diagonal kiri ke kanan dan atas ke bawah pada sudut sebelah kiri (crosshair). Untuk memindahkan garis bantu (Guideline) cukup mengklik dan menggeser ke tempat lain sesuai keinginan.
Gambar 2.45 Membut garis bantu horisontal
3. Buatlah judul blok Featured. Pertama kali, aktifkan Horizontal Type Tool.
Gambar 2.46 Mengaktifkan Horizontal Type Tool
4. Pilih tipe huruf (font type) pada Option Bar. Tentukan pula ukuran (size) huruf (lihat Gambar 2.47). 5. Pilih warna teks dengan cara mengaktifkan ikon Set the text color di Option bar (lihat Gambar 2.48).
59
Gambar 2.47 Menentukan jenis dan ukuran huruf
Gambar 2.48 Mengaktifkan Set the text color untuk menentukan warna teks
6. Setelah muncul kotak dialog Color Picker, masukkan kode warna #077777.
Gambar 2.49 Kotak dialog Color Picker
7. Klik mouse di bawah nama institusi, lalu masukkan judul Featured. Atur posisinya agar tampilan lebih menarik. Tambahkan pula aksesoris lain setelah judul Featured (misal: RESEARCH OF THE MONTH). Aturlah posisinya menggunakan Move Tool, dan untuk mempercantik tampilan tambahkan aksesoris lain seperti kotak atau tanda panah. 60
BAB 3 KONVERSI PROTOTIPE MENJADI KODE CSS3
.
3.1
File Management
Pengelolaan berkas sangat penting dilakukan sejak awal dengan tujuan mempermudah dalam pekerjaan. Begitu pula pengelolaan file dalam merancang sebuah website. File pendukung dalam website bervariasi yaitu: gambar, kode (script), ikon, dan lain-lain. File dalam bentuk gambar sebaiknya dipisah dengan kode atau file lainnya agar mudah ditemukan kembali ketika melakukan perbaikan. Berikut ini cara pengelolaan berkas, meskipun belum ada standar yang baku namun dapat meminimalisasi kesalahan. 1. Buatlah folder baru dengan nama iknow di bawah folder xampp/htdocs. 2. Buka folder iknow, lalu buat sebuah folder dengan nama assets.
Gambar 3.1 Letak pembuatan folder baru
103
3. Buka folder assets, lalu buat tiga buah folder : css, fonts, dan images.
Gambar 3.2 Mempersiapkan folder untuk menyimpan data
Folder css berfungsi untuk menempatkan file kode dengan format cascading style sheet (css3), folder font berfungsi untuk menampung berkas dengan format web open font format (woff), sedangkan folder images berfungsi untuk menampung semua berkas dalam format image (png, jpg, ico, dll).
3.2
Mengunduh Web Open Font Format
Agar desain awal (mockup) tidak berbeda jauh dengan proses konversi ke bahasa pemrograman web, sangat disarankan mempersiapkan jenis huruf yang digunakan saat mendesain dalam Adobe Photoshop atau aplikasi pengelolah gambar lain. Tidak semua klien memiliki jenis huruf yang digunakan oleh seorang web designer saat mendesain tampilan web. Untuk mengantisipasinya, Google menyediakan beberapa jenis huruf yang mirip dengan font tertentu. Sebagai contoh, ketika seorang web designer menggunakan tipe font : Gill Sans MT Condensed maka harus mencari alternatif untuk tipe font tersebut. Pada bagian ini akan membahas teknik mengunduh beberapa font yang disediakan oleh Google. 1. Jalankan salah satu browser (Mozilla, Chrome, Opera, Netscape, dll) kemudian ketikkan alamat URL http://www.google.com/fonts. 2. Pada bagian Filter, centang hanya huruf tipe Sans (lihat Gambar 3.3). 3. Pada bagian Style, tampilkan semua style (lihat Gambar 3.4). 104
Gambar 3.3 Menyaring jenis yang akan diunduh
Gambar 3.4 Menampilkan pilihan style yang tersedia
4.
Aktifkan tab Word, lalu ketikkan teks “IKNOW-RESEARCH.NET” pada kolom Preview Text.
Gambar 3.5 Mengganti teks sebagai contoh huruf yang dipilih
5. Pilih salah satu font yang sesuai dengan tampilan desain yang telah dibuat. Sebagai contoh, penulis memilih jenis font PT Sans. Klik tombol Add to Collection.
Gambar 3.6 Mengaktifkan tombol pilihan
105
6. Centang semua pilihan.
Gambar 3.7 Memberi tanda centang pada jenis font dan style yang tersedia
11. Perhatikan baris src: local........ URL(http://themes.googleuser......). Alamat tersebut mengacu ke sebuah file dengan format web open font format (woff) di server milik Google. Dengan alasan kenyamanan, sebaiknya download font tersebut dan simpan di server atau PC lokal. Caranya, seleksi URL tersebut hingga batas .woff dan letakkan di alamat browser.
Gambar 3.11 Memasukkan alamat URL untuk mengunduh font yang telah dipilih
12. Akan muncul kotak dialog untuk menyimpan file.
Gambar 3.12 Kotak dialog untuk menyimpan dokumen
13. Simpan file tersebut dengan nama PTSans-Regular.woff di dalam folder fonts. Ulangi tahap 5 untuk mengunduh beberapa jenis font yang digunakan. Untuk nama file, sesuaikan dengan nama local tanpa spasi (contoh: PTSans-Bold). Jika sudah selesai mengunduh semua tipe font yang digunakan, maka tampilan di folder seperti gambar berikut. 108
Gambar 3.13 Daftar font yang telah diunduh dari server Google
font-weight: 400; src: local('PT Sans Narrow'), local('PTSans-Narrow'), url(../fonts/PTSans-Narrow.woff) format('woff'); } @font-face { font-family: 'PT Sans Narrow'; font-style: normal; font-weight: 700; src: local('PT Sans Narrow Bold'), local('PTSansNarrowBold'), url(../fonts/PTSans-NarrowBold.woff) format('woff'); }
3.3
Beginning Development
Dengan memanfaatkan tag DIV maka pekerjaan seorang web development akan sangat mudah karena halaman website akan terbagi berdasarkan pengaturan dalam division tersebut tanpa mempengaruhi bagian lain. Selain tag DIV, ada pula tag SPAN yang fungsinya hampir sama, di mana letak perbedaannya ? Berikut penjelesannya. Tag DIV berfungsi untuk membuat suatu kelompok tertentu atau membuat suatu divisi yang bertujuan untuk pengelompokan konten HTML menjadi beberapa bagian sesuai dengan tempatnya agar sehingga mempermudah para web developer memberi gaya tertentu pada setiap bagiannya. Tag DIV sering digunakan ketika mengelompokkan halaman web dalam beberapa bagian, diantaranya divisi heading, divisi top menu, divisi left content, divisi, footer, dan lain-lain. Tag SPAN fungsinya hampir sama dengan tag DIV, namun perbedaan yang mendasar yaitu SPAN hanya mengatur konten atau isi sebuah website tanpa membagi halaman web menjadi kelompok tertentu, artinya ketika membagi sebuah website dengan tag SPAN maka akan ditampilkan dalam satu baris, sedangkan jika menggunakan DIV akan ditampilkan dalam beberapa bagian sesuai pengaturan. Perhatikan script berikut: Page Title <style type="text/css"> body{
Apabila tag DIV diganti dengan tag SPAN maka akan menghasilkan tampilan seperti gambar berikut. 111
Gambar 3.15 Tampilan dengan metode SPAN
Jika sudah memahami fungsi tag DIV, langkah selanjutnya membuat divisi terhadap desain yang sudah dibuat sebelumnya menggunakan Adobe Photoshop.
Gambar 3.16 Merancang pembagian class
3.4
Top Navigation
Oleh karena gambar desain beserta pembagian div terlalu besar dan tidak cukup untuk ditampilkan, maka akan dibahas secara bertahap. Diawali dari bagian paling atas yaitu top navigation yang berisi Logo, Top Menu dan Menu Pencarian. 1. Pertama kali, jalankan aplikasi Text Editor (Notepad++, EditPlus, PSPad, Komodo, dll). Jika mengikuti pembasahan dalam buku ini, gunakan aplikasi Komodo Edit. 2. Buatlah file baru dengan cara memilih menu File > New > HTML5.
112
BAB 4 MEMBUAT DATABASE DENGAN PHPMYADMIN
.
4.1
Merancang Database
Sebagai seorang web developer dituntut untuk bisa menterjemahkan hasil rancangan website ke dalam website. Informasi yang ditampilkan harus diuraikan satu persatu, termasuk relasi antar tabel. Relasi antar tabel sangat penting, karena dapat menghindari redudansi. Selain menentukan table dan kolom (field), yang tidak kalah penting adalah tipe data dari kolom tersebut. Misalnya dalam table research terdapat kolom id_res, title_res, dan content_res. Tipe data apa yang cocok untuk id_res, apakah INT, VARCHAR, REAL, atau tipe data lain. Nah, di sinilah tugas seorang dabatase analyst. Tiap tabel juga harus memiliki primary key yang dapat berfungsi sebagai kolom untuk relasi ke tabel lain. Berikut ini contoh sederhana rancangan database sebelum membuatnya di dalam halaman MySQL. TABLE article id_art title_art content_art id_cat date_pub image hits
1. Aktifkan salah satu browser http://localhost/phpmyadmin.
156
kemudian
masukkan
URL
Gambar 4.1 Tampilan halaman phpMyAdmin
2.
Untuk membuat database baru, klik menu Databases.
Gambar 4.2 Menu Databases
3. Masukkan nama database lalu pilih Collation = latih_general_ci. Klik tombol Create jika sudah selesai.
Gambar 4.3 Membuat database baru
4. Akan muncul jendela notifikasi, dababase sudah berhasil dibuat.
157
Gambar 4.4 Notifikasi pembuatan database berhasil
5. Database yang baru dibuat akan muncul di daftar Databases..
Gambar 4.5 Daftar database
4.2
Membuat Table
Setelah berhasil membuat database, langkah berikutnya adalah membuat tabel untuk menyimpan semua data yang diinput. Pada bagian sebelumnya sudah dicontohkan pembuatan tabel lengkap dengan kolom atau field. Meskipun dalam buku ini sudah disiapkan database lengkap dengan kolom dan record namun alangkah baiknya mengetahui cara pembuatan database dari awal. Untuk import database akan di bahas pada sesi yang lain dalam buku ini. 1. Untuk membuat tabel, aktifkan database yang dimaksud.
Gambar 4.6 Memilih database
2. Masukkan nama tabel (lihat kembali uraian pada bagian sebelumnya), dan masukkan jumlah kolom. Jika sudah yakin, klik tombol Go. 158
Gambar 4.7 Membuat tabel dan menentukan jumlah kolom
3. Pada bagian Name = nama kolom/field, Type = tipe data yang digunakan, Length/Value = panjang karakter atau nilai tertentu. Pilih Storage Engine = MyISAM dan Collatation = latin1_general_ci. Setelah selesai memasukkan beberapa isian, klik tombol Save.
Gambar 4.8 Mengisi kolom, tipe data, dan value
4. Tabel research sudah berhasil dibuat. langkah selanjutnya membuat tabel Category . Masukkan nama tabel pada kolom Name dan masukkan jumlah kolom pada bagian Number of columns. Setelah selesai, klik tombol Go untuk proses selanjutnya.
159
Gambar 4.9 Membuat tabel category
5. Masukkan nama kolom dan tipe data yang digunakan, jangan lupa memasukkan panjang karakter maksimal yang dapat ditampung ke dalam database. Lihat parameter lain seperti bagian sebelumnya.
Gambar 4.10 Membuat kolom untuk tabel category
6. Buat kembali tabel articles.
Gambar 4.11 Membuat tabel articles dan menentukan jumlah kolom
7. Isikan nama kolom, tipe data yang digunakan dan nilai ataun panjang karakter.
160
BAB 5 MEMBUAT TAMPILAN FRONT-END DENGAN PHP
. Pada bagian ini akan membahas teknik menampilkan halaman utama (front-end) website. Secara umum, script yang digunakan hampir sama dengan file index.html, yang membedakan adalah perintah query ke dalam database. Jika dalam file index.html bersifat statis, maka dalam file index.php bersifat dinamis karena langsung terhubung ke database. Perubahan yang terjadi dalam database akan sangat berpengaruh pada informasi yang ditampilkan di halaman utama. Berita atau informasi yang ditampilkan dalam website berbasis php akan berubah setiap saat bergantung input dari halaman administrator. Nah, itulah alasan PHP merupakan salah satu bahasa pemrograman yang dapat digunakan untuk membuat website secara dinamis.
5.1
Koneksi ke Database
Tindakan pertama kali yang harus dilakukan untuk menampilkan data dari database adalah membuat sebuah script yang berisi informasi nama user, password, dan nama database yang valid. Umumnya, script tersebut dibuat secara terpisah sehingga ketika ingin memanggil script untuk mengakses database, cukup memanggil nama file saja tanpa harus membuat script secara berulang. 1. Untuk persiapan awal, duplikasi file index.html menjadi index2.html. 171
Gambar 5.1 Menduplikasi file
2. Ganti extensions index.html menjadi index.php.
Gambar 5.2 Mengganti eksensi html menjadi php
3. Jika muncul notifikasi, pilih Yes.
Gambar 5.3 Pesan notifikasi
4. Untuk memudahkan pekerjaan, perlu mempersiapkan beberapa folder atau direktori. Buatlah beberapa folder (config, files, dan function).
Gambar 5.4 Membuat beberapa folder
172
5. Jalankan aplikasi text editor (Notepad++, KomodoEdit, PSEdit, dll) kemudian ketikkan script seperti berikut.
6. Simpan dengan nama connect_db.php dan letakkan di dalam folder config.
Gambar 5.5 File untuk koneksi ke database sudah dibuat
7. Aktifkan browser lalu masukaan alamat URL http://localhost/iknow/config/connect_db.php. Jika muncul teks “berhasil terhubung” artinya udah bisa melakukan query (input, update, dan delete) data ke database.
Gambar 5.6 Pesan di browser apabila berhasil terhubung ke database
173
5.2
Menampilkan Top Menu
Top menu merupakan bagian dari blok Navigation, di mana Logo dan Search Box juga berada di dalamnya. Dengan memanfaatkan query SQL dan pemrograman PHP, top menu yang sudah diinput dan tersimpan dalam database dapat diambil (dipanggil) kembali dan ditampilkan di halaman web. 1. Agar pesan koneksi ke database, sebaiknya dimdifikasi terlebih dulu file connect_db.php. Ubahlah menjadi teks biasa dengan cara menambahkan /* di awal dan */ di akhir. //Memeriksa koneksi ke database /*if($ok){ echo "berhasil terhubung"; } else { echo "gagal"; } */
2. Buka file index.php.
Gambar 5.7 Membuka file index.php
3. Letakkan kursor di awal paragaraf setelah tag . Sisipkan file connect_db.php dengan teknik include atau require_once. Jika mengikuti panduan buku ini berikut script-nya.
3. Buatlah statement IF ELSE di dalam class=detail.
if($_GET['mod']=='research'){ } else { }
4. Lakukan query ke tabel research if($_GET['mod']=='research') { $dr = mysql_query("SELECT * FROM research WHERE id_res = '$_GET[id]'"); while($qdr = mysql_fetch_array($dr)) { echo "
$qdr[title_res]
"; echo "
$qdr[content_res]
"; } }
5. Sekarang lakukan query ke tabel articles. else { $dn = mysql_query("SELECT * FROM articles WHERE id_art = '$_GET[id]'"); while($qdn = mysql_fetch_array($dn)){ echo "
$qdn[title_art]
"; echo "
$qdn[content_art]
"; } }
6.2
Membuat Fungsi SEO/SEF
SEF singkatan dari Search Engine Friendly yang berfungsi untuk meningkatkan peringkat atas dalam pencarian. Beberapa mesin pencari seperti Google, Altavista, Yahoo, Bing, dan lain-lain lebih menyukai alamat URL yang bersahabat, artinya tidak menggunakan kode rumit misalnya: detial.php?mod=research&id=12345789. Dengan alamat tersebut, website akan sulit dikenali oleh mesin pencari sehingga berdampak pada hasil pencarian, bisa jadi berada di halaman terakhir. Untuk memaksimalkan hasil pencarian (Search Engine Optimation), alamat URL perlu diubah menjadi SEF, misalnya: research-sistem-uji-
"; } ?>