Di kesempatan ini kita akan belajar bagaimana membuat website perusahaan secara profesional. Artinya kita akan membuat website tsb dengan menggunakan nama domain dan hosting yang berbayar, tidak gratisan. Kita akan gunakan platform wordpress untuk membuat website.
Website standar sebuah perusahaan umumnya mencakup beberapa menu dan halaman antara lain :
- Home
- Products
- Services
- About
- Contact Us
Dalam latihan kali ini kita akan membuat website sebuah perusahaan Software yang memiliki beberapa produk dan service sebagai bisnis utamanya.
Tampilannya akan kita buat seperti gambar dibawah ini.
Langkah 1. Pilih Nama Domain dan Hosting
Pilihlah nama domain yang sesuai dengan kebutuhan blog kita. Misal blog pribadi yang berisikan segala hal tentang kita, bisa menggunakan nama domain sesuai nama kita sendiri, misal bukuharianku.com . Cek ketersediaan nama domain tersebut, jika sudah dipakai pihak lain, akan ada informasi tersebut atau pilihan alternatif nama domain yang lain, ganti nama domain yang kita inginkan untuk di cek ulang lagi.
Contoh proses pilih domain di salah satu hosting provider di Indonesia
Kemudian pilih paket hosting yang sesuai dengan kebutuhan kita. Paket hosting beragam harga dan specnya. Banyak provider yang menyediakan paket hosting dengan harga yang wajar dan terjangkau. Beberapa provider yang ada di Indonesia antara lain :
Dewaweb
Masterweb
Contoh proses pilih paket hosting di salah satu hosting provider di Indonesia
Setelah kita melakukan pembayaran untuk sewa nama domain dan hosting di prodiver tersebut, maka konfirmasi berisi informasi cara login ke CPanel akan dikirimkan ke email kita.
Contoh page checkout untuk pembayaran sewa nama domain dan hosting provider di Indonesia
CPanel adalah fasilitas atau alat bantu untuk mengatur segala hal tentang kebutuhan blog/website kita nantinya. CPanel berbentuk web aplikasi dengan beragam fitur, yang utama dan akan kita pelajari antara lain setting email dan setup blog.
Langkah 2. Setup WordPress
Login ke CPanel menggunakan username dan password yang sudah diinfokan via email oleh provider Hosting. Setelah login berhasil akan masuk ke halaman CPanel yang berisikan banyak fitur dan fasilitas dalam pengaturan website, email, file dan database. Kita akan fokus ke Setup WordPress saja.
Contoh CPanel pada posisi pilihan software installer ( Softalucous App Installer )
Pilih icon WordPress di bagian Softaculous App Instaler, klik dan isi form inputan yang tampil
Pada bagian Software Setup :
- Choose the version you want to install, isi dengan versi terakhir dari yang ada di list pilihan
- Choose Protocol, isi dengan pilihan https:// ( standar website cukup http:// )
- Choose Domain, isi dengan pilihan namadomainanda ( default )
- In Director, kosongkan
- Site Name, isi dengan nama website Anda, bebas
- Site Description, isi dengan deskripsi singkat website Anda, bebas
- Enable Multiple (WPMU), kosongkan
- Admin Username : isi dengan nama Anda atau gunakan default yaitu Admin
- Admin Password : isi dengan password, usahakan kombinasi antara angka huruf besar huruf kecil
Setelah proses installasi selesai maka akan tampil link URL untuk masuk ke dashboard dari website kita, URLnya : http://namadomain.com/wp-admin/
Klik pada URL tersebut, lakukan login untuk masuk ke dashboard dan siap untuk melakukan setting dan kustomisasi pada blog yang baru saja kita buat.
Langkah 3. Memilih Themes Untuk Tampilan Website
Website yang baru saja kita buat, tampilannya diatur oleh Themes. Tampilan awal website setelah proses installasi akan tampak seperti gambar dibawah ini
Untuk mengubah themes menjadi lebih bagus, wordpress sudah menyediakan banyak sekali pilihan themes gratis yang bisa dipakai pada website kita. Cara mengubahnya dengan mengakses menu di dashboard : Appearance >> Themes
Lalu klik tombol Add New. Di halaman berikutnya akan tampil banyak pilihan themes yang telah tersedia. Themes dikelompokkan dalam beberapa kategori, yaitu Featured, Popular, Latest, Favourites dan juga bisa difilter misal berdasar industri atau layout themesnya. Silahkan pilih themes sesuai kebutuhan kita.
Dalam latihan kali ini, kita akan pilih dan install theme yang bernama Uptown Style.
Klik tombol Install untuk melakukan proses instalasi theme tsb, kemudian setelah proses selesai, klik tombol Active untuk mengaktifkan theme yang baru saja kita install.
Setelah themes aktif, kita akan coba untuk mengisi deskripsi tentang website ini. Pilih menu :
Setting >> General
Kemudian isi beberapa informasi website tsb sesuai dengan tema dan tujuan dari website kita. Yang perlu diisi adalah kolom isian Site Title, Tagline dan Email address ( otomatis terisi )
Setelah itu klik tombol Save Changes
Langkah 4. Membuat Halaman atau Page
Kemudian kita akan coba membuat Halaman atau Page Products, Services, About Us dan Contact Us
Klik Pages >> Add New
Kemudian akan tampil form page yang siap untuk diisi konten sesuai dengan rancangan awal yaitu
- Home
- Products
- Services
- About
- Contact Us
Ini adalah sebuah page / halaman kosong yang akan kita isi dengan penamaan page dan konten sesuai dari nama menunya
Kolom Add title adalah tempat untuk menulis judul Page. Kita isi dengan “Product”
Kolom yang ber-info Start writing or type /to choose a block adalah tempat untuk isi konten berupa text kalimat gambar, video dan lain sebagainya, di dalam sebuah page / halaman.
Kita akan mengisi page/halaman Products ini dengan beberapa produk yang berisi nama produk, image produk dan keterangan produk. Ada 3 blok yang perlu kita siapkan untuk setiap produk yang kita tuliskan.
Icon (+) pada kiri atas adalah fasilitas-fasilitas untuk menunjang kontent pada halaman/page yang akan kita isi. Klik pada icon (+) untuk menambahkan blok dibawahnya. Pilih attribut Paragraph untuk nama produk
Kemudian ketik di blok tsb nama dari produk software kita, misal “Software Absensi Karyawan”
Kemudian tambahkan gambar/image dari produk software tsb. klik icon (+) pada kiri atas, pilih attribut image.
Kemudian akan tampil form untuk upload image atau pilih image dari media gallery. Jika belum pernah upload image sebelumnya, maka klik tombol Upload dan pilih image/gambar/photo yang ada di lokal laptop/komputer kita untuk diupload mengisi blok image, disisi lain photo tsb juga akan tersimpan ke media gallery atau library, untuk suatu saat bisa diambil tanpa harus upload kembali dari laptop/komputer lokal kita.
Image/gambar/photo yang kita upload akan tampil seperti gambar dibawah ini. Kemudian atur posisi image ke sebelah kiri (align left), caranya klik seperti pada panah di gambar bawah ini.
Kemudian tambahkan kalimat informasi dari produk software tsb. klik icon (+) pada kiri atas, pilih attribut Paragraph.
Kemudian ketikkan informasi produk software pada blok paragraph yang baru tsb.
Ulangi langkah mengisi konten page/halaman Products ini untuk memperbanyak produk software yang kita tawarkan di website ini. Disini saya mengisi sebanyak 3 (tiga) produk software.
Tips : setiap elemen blok posisinya bisa di pindah ke atas dan kebawah menggunakan fungsi Move Up dan Move Down yang ada di setiap elemen blok.
Setelah informasi terisi, kita akan membuat page/halaman ini menjadi full lebar tanpa ada sidebar di kanan maupun kiri. Pada bagian kanan klik link/tab Document – Layout , klik radio button Custom lalu pilih layout sesuai arah panah.
Hasilnya akan terlihat seperti gambar di bawah ini. Nama , image dan informasi produk software terlihat tersusun rapi sesuai blok masing-masing. Page/halaman juga full width tidak ada sidebar kanan maupun kiri.
Kita telah berhasil membuat page/halaman Products. Kemudian untuk melengkapi website, lakukan dengan cara yang sama untuk membuat page/halaman lainnya yaitu : Service, About dan Contact. Hanya isi atau kontennya saja yang disesuaikan dengan page/halamannya. Jika page Service maka tentu isi kontennya adalah service yang ditawarkan oleh perusahaan kita, page About isinya konten yang menjelaskan tentang apa dan siapa, visi misi dari perusahaan. Lalu page Contact berisi informasi alamat, email, no teleopon atau apapun informasi untuk customer atau pelanggan menghubungi perusahaan kita.
Jangan lupa kita belum membuat page/halaman utama yaitu Home
Untuk membuat page/halaman Home langkahnya sama saja dengan pembuatan halaman Products. Hanya saja disini kita akan menambahkan gambar photo product dan service yang terhubung, saat di klik akan mengarah ke page Product dan Service.
Seperti biasa, klik menu Page – Add New kemudian isi title/judul dengan Home dan tambahkan blok elemen heading 
Kemudian diisi dengan ucapan selamat datang untuk pengunjung website dengan ukuran H3
Dilanjutkan dengan menambahkan beberapa informasi berupa blok element paragraf
Kemudian tambahkan blok element berupa element column untuk diisi contoh 2 (dua) image product dan service untuk bisa ditautkan ke kedua halaman tersebut, yaitu halaman products dan services
Setelah element column diklik, maka akan tampil 2 (dua) element column yang siap untuk diisi oleh element lain yang dipilih. Dalam hal ini kita akan pilih element image
Tampilan setelah element image dipilih. Kemudian pilih 2 (dua) image dari media Library, yang mewakili services dan products
Setelah image dipilih, lalu lengkapi caption (text) pada image tsb, dan isi link URL sesuai dengan URL page services atau products yang sebelumnya sudah pernah kita buat, lalu klik tombol Apply. Lakukan langkah yang sama dengan image product di sebelahnya.
Kemudian jangan lupa untuk membuat halaman Home ini full width tanpa ada sidebar di kanan maupun kiri. Pada bagian kanan klik link/tab Document – Layout , klik radio button Custom lalu pilih layout sesuai arah panah.
Kemudian untuk menyimpan semua perubahan di halaman Home tadi, klik tombol update dikanan atas.
Untuk menampilkan halaman Home ini didepan saat website diakses pengunjung, kita harus melakukan setting pada menu Setting – Reading
Kemudian akan tampil Reading Setting, pada bagian Your homepage displays pilih A Static Page, pada Homepage pilih page Home lalu klik tombol Save Changes
Langkah 5. Mengatur Menu Atas
Sekarang kita sudah mempunyai 5 (lima) pages utama yaitu : Home, Services, Products, About dan Contact. Tampilan menu atas website masih tidak sesuai alias berantakan. Kita akan susun menu atas sesuai dengan rencana awal dengan posisi : Home, Services, Products, About dan Contact.
Klik pada menu : Appearance – Menus
Maka akan tampil form menu yang siap kita susun. Isi Menu Name dengan “Menu Atas” lalu klik tombol Create Menu.
Kemudian pada bagian Add Menu Item, centang semua Page yang sudah kita buat lalu klik tombol Add to Menu.
Maka page yang tadi kita pilih akan berpindah ke bagian Menu Structure. Disini kita bisa geser (drag) setiap page sesuai dengan sususan menu yang kita rancang dari awal yaitu : Home, Services, Products, About dan Contact
Lalu pada Menu Setting centang isian Auto add pages dan di bagian Display Location centang Primary Menu. Lalu klik tombol Save Menu
Setelah menu disusun, maka menu atas pada tampilan website pun sudah sesuai
Sampai sini kita sudah berhasil membuat sebuah website perusahaan dengan menampilkan informasi standar, yaitu home, products, service, about dan contact, dimana itu sudah cukup untuk merepresentasikan profile perusahaan yang kita publish.
Selamat mencoba dan terus semangat belajar !