1.ebook 5 hr mahir web company.pdf

5 Hari Mahir Membuat Website Company Profile 1

2 5 Hari Mahir Membuat Web Company Profile
5 HARI MAHIR MEMBUAT
WEBSITE COMPANY PROFILE
DENGAN MUDAH
Penulis :
Guntoro
Editor :
Meidiana Putri
Desain Cover :
Guntoro
Penerbit :
Badoy Studio
Rangkasbitung – Kabupaten Lebak -Banten
Hak Cipta dilindungi undang-undang
Dilarang mengcopy dan memperbanyak sebagian atau
seluruh isi buku ini dalam bentuk apapun tanpa seizin dari
penerbit.
All right reserved

Hak Cipta
Sanksi Pelanggaran Pasal 72
Undang - undang Nomor 19 Tahun 2002
Tentang Hak Cipta
1. Barang siapa dengan sengaja melanggar dan tanpa hak
melakukan perbuatan sebagaimana dimaksud dalam
Pasal 2 Ayat (1) atau Pasal 49 Ayat (1) dan Ayat (2)
dipidana dengan pidana penjara masing - masing
paling singkat 1 (satu) bulan dan/atau denda paling
sedikit Rp. 1.000.000,00 (satu juta rupiah), atau pidana
penjara paling lama 7 (tujuh) tahun dan/atau denda
paling banyak Rp. 5.000.000.000,00 (lima miliar
rupiah).
2. Barang siapa dengan sengaja menyiarkan,
memamerkan, mengedarkan atau menjual kepada
umum suatu ciptaan atau barang hasil pelanggaran hak
cipta atau hak terkait sebagaimana dimaksud pada
Ayat (1), dipidana dengan pidana penjara paling lama 5
(lima) tahun dan/atau denda paling banyak Rp.
500.000.000,00 (lima ratus juta rupiah).

Daftar Isi
Daftar Isi
Bab 1 Menginstall Web Server Xampp ........... 6
Bab 2 Membuat Database pada Xampp .......... 14
Bab 3 Menginstall dan Mengkonfigurasi
Wordpress ................................................ 21
Bab 4 Menginstall Tema untuk Web
Company Profil ....................................... 35
Bab 5 Mengimport Demo Website .................. 41
Bab 6 Menambahkan Logo Website ................ 45
Bab 7 Mendesain Jumbotron Website ............. 49
Bab 8 Mendesain About Section ....................... 58
Bab 9 Mendesain Project Section ...................... 64
Bab 10 Menambahkan Testimoni...................... 71
Bab 11 Menambahkan Produk / Layanan ....... 76
Bab 12 Menambahkan Artikel / Blog............... 85
Bab 13 Menambahkan Counter Section........... 98
Bab 14 Menambahkan Informasi Tim.............. 104
Bab 15 Menambahkan Informasi Kontak........ 110
Bab 16 Menambahkan Menu Utama ............... 115
Bab 17 Mengedit Footer Website...................... 123
Bab 18 Mengonlinkan Website ......................... 134

BAB 1
MENGINSTALL
WEB SERVER XAMPP

Pada ebook ini tidak lagi dijelaskan tentang apa
itu web server dan XAMPP. Anda bisa membaca
penjelasan tersebut pada ebook membuat website
sekolah.
Cara Install XAMPP pada OS Windows
Berikut ini adalah langkah-langkah menginstall
XAMPP pada OS Windows.
Download XAMPP
- Kunjungi situs resmi untuk mendownload :
https://www.apachefriends.org/index.html.
- Kita bisa mengklik langsung tombol
download untuk windows, linux, dan mac.

- Namun untuk mendownload versi yang lain
silahkan klik tombol Download : Click here
for other versions
- Pada tutorial ini kita memilih versi yang lain
untuk OS windows yaitu versi 7.0.32
- Klik download dan tunggu sampai dengan
selesai

Mulai Menginstall
- Jika sudah silahkan buka file.exe dari
XAMPP pada folder yang sudah terdownload
tadi.
- Klik kanan pada file exe lalu pilih run as
administrator, Selanjutnya pilih YES
- Proses awal penginstallan biasanya akan
ditampilkan icon bitnami. Klik OK pada
peringatan yang muncul

- Klik Next ketika jendela awal untuk
menginstall XAMPP sudah muncul
- Pastikan semua komponen seperti : Apache,
MySQL, Filezilla, Phpmyadmin, dan
lainnya harus kita centang. Lalu klik Next

- Pilih direktori yang akan kita gunakan untuk
menyimpan semua data-data XAMPP
(termasuk data web yang akan kita buat
nanti). Defaultnya yaitu direktori C. Jika
sudah klik Next
- Klik Next pada tampilan information
bitnami. Silahkan klik Next kembali pada
jendela Ready to Install

- Penginstallan akan dimulai dan tunggu sampai
selesai

- Jika sudah 100 persen maka proses install
akan selesai dan akan tampil gambar dibawah
ini
- Klik Finish, lalu jendela control panel
XAMPP akan mulai dijalankan. Pilih bahasa
yang akan digunakan lalu klik Save

BAB 2
MEMBUAT DATABASE
PADA XAMPP

Membuat Database
Di bab ini kita akan membuat database yang akan
menampung seluruh data website company
profile. Database dibuat menggunakan
phpMyAdmin.
Harap diikuti dengan step by step dan teliti.
Berikut langkah-langkahnya.
1. Jalankan XAMPP
- Buka aplikasi XAMPP yang sudah diinstall
pada bab pertama
- Running Apache dan MySQL dengan
cara klik tombol start pada bagian
Module.

2. Akses PhpMyAdmin
- Buka browser favorit yang sering anda
gunakan
- Kemudian ketikan pada url browser
yang sudah terbuka alamat :
http://localhost/phpmyadmin lalu tekan
tombol enter pada keyboard
- Dashboard utama PhpMyAdmin akan
terbuka seperti gambar berikut

3. Buat Database Baru
- Klik menu Database lalu isikan nama
database pada kolom database name,
jika sudah klik tombol Create
- Nama database yang dibuat pada tutorial
ini yaitu “ db_companyprofile”
- Lihat disamping kiri apakah database
sudah berhasil dibuat atau belum. Jika
sudah maka akan ditampilkan nama
database di atas seperti gambar berikut.

4. Setting Username, Password, dan
Hostname
Username, password, dan hostname pada
database nantinya akan dipakai untuk
menghubungkan wordpress pada saat
pemasangan cms wordpress.
- Klik database “ db_companyprofile”
lalu pilih menu Privileges
- Scroll ke bawah lalu klik Add user
account

- Pada form login information isikan :
User name : admin123
Host name : localhost
Password : adminperusahaan
Re type : adminperusahaan
- Scroll ke bawah pada bagian Global
Privileges beri centang Check all

- Scroll lagi ke bawah lalu tekan tombol
Go
- Akan muncul pesan seperti gambar di
bawah jika Account berhasil dibuat.

BAB 3
MENGINSTALL DAN
MENGKONFIGURASI
CMS WORDPRESS

Setelah membuat database dan mengkonfigurasi
account maka kita sudah bisa menginstall CMS
Wordpress pada server lokal. Caranya yaitu :
1. Download File CMS Wordpress
- Download terlebih dahulu file cms
wordpress yang berbentuk zip pada situs
resminya yaitu : wordpress.org.
- Di file pendukung ebook ini juga sudah
disertakan file wordpress yang berbentuk
zip.

2. Web_Company Profile pada Htdoc
- Klik start  Computer  Pilih Local
Disk yang terdapat folder Xampp
- Pada tutorial ini folder Xampp terdapat
pada Local Disk C
-
- Buka folder Xampp  Htdoc

- Buat folder baru dengan nama
“web_companyprofile”
- Copykan file wordpress dalam bentuk
zip yang sudah didownload di awal pada
folder “web_companyprofile”

- Extract file tersebut dengan cara klik
kanan  Extract Here
- Buka folder wordpress hasil ekstrak tadi.
Pilih semua file dengan cara tekan tombol
CTRL +A, lalu kita cut dengan cara klik
kanan Cut.

- Klik tombol back yang ada di samping kiri
atas
- Lalu pastekan semua file yang sudah di cut
pada folder web_companyprofile dengan cara
tekan tombol CTRL + V, sehingga semua
file wordpress sekarang berada di luar folder
wordpress.

- Untuk folder dan file wordpress dalam
bentuk zip silahkan dihapus saja.
- Dan hasilnya file-file yang ada di folder
web_companyprofile seperti gambar di
bawah ini.

- Pada gambar di atas terlihat tidak ada lagi
folder wordpress dan file wordpress zip.
3. Konfigurasi Wordpress dengan Database
- Cari file wp-config-sample.php pada
file wordpress yang sudah di ekstrak tadi
- Kemudian rename file tersebut menjadi
wp-config.php

- Buka file wp-config.php  isikan user
name, password, dan host name pada
bagian MySQL Settings sesuai dengan
yang dibuat pada bab 2.
- Ganti script-script berikut dengan
konfigurasi account di bab 2.
Script Ganti dengan
database_name_here db_companyprofile
username_here admin123
password_here adminperusahaan
- Jika sudah save dengan cara tekan tombol
CTRL+S atau klik icon Save.

- Sekarang tampilan kode-kode dari wp-
config.php menjadi seperti gambar
berikut

4. Menginstall CMS Wordpress
- Buka browser  ketikan alamat berikut
localhost/web_companyprofile pada
URL  tekan enter
- Lalu isikan informasi dasar seperti : judul
website (nama perusahaan),
username, password, dan alamat email.
- Jika sudah klik tombol Install
Wordpress. Dan tunggu beberapa saat
sampai gambar berikut muncul.

5. Login ke Dashboard Wordpress
- Klik tombol login isikan Username dan
Password sesuai dengan informasi yang
sudah diisi di atas.

- Dan inilah tampilan dashboard awal untuk
mengatur segala isi website company
profile yang akan kita buat.
6. Mengakses Website
- Untuk mengakses wordpress yang sudah
berhsil diinstall kita bisa caranya yaitu :
Arahkan kursor pada site title  klik
visit site

- Atau bisa juga langsung dengan cara
mengetikan alamat
localhost/web_companyprofile pada
url browser yang sedang kita pakai.
Hasilnya seperti gambar di bawah ini.

BAB 4
MENGINSTALL
TEMA WEB COMPANY
PROFILE

Agar website semakin menarik dan sesuai dengan
kategorinya maka kita akan mulai mendesain
website tersebut menggunakan template yang
sudah tersedia.
1. Mencari Tema Website yang Sesuai
Ada jutaan template yang siap kita gunakan
pada CMS wordpress, baik itu yang gratis
ataupun bebayar. Namun kita harus benar-
benar memilih mana yang sesuai dan memiliki
kredibilitas bagus. Cara mencari tema yang
sesuai yaitu :
- Pastikan xampp sudah running apache
dan MySQLnya
- Masuk ke dashboard wordpress dengan
cara mengakses alamat
localhost/web_companyprofile/admin
pada url browser anda
- Login menggunakan username dan
password.

- Jika sudah berhasil masuk ke dashboard
wordpress, pilih menu Appearance 
Themes
- Maka akan ditampilkan beberapa template

- Pastikan laptop atau komputermu sudah
terhubung dengan internet lalu klik Add
New untuk mencari template dan inilah
jendela untuk mencari, menginstall, atau
mengupload template.
- Untuk mencari tema kita tinggal ketikan
kata kuncinya pada kolom search themes.
Contoh kita ingin mencari tema untuk
website company profile maka akan
dimunculkan tema yang sesuai.

2. Menginstall Tema
Pada tutorial ini kita akan menggunakan tema
dengan nama illdy. Langsung saja kita
praktekan sekarang juga.
- Ketikan kata kunci “ Illdy” pada
pencarian tema
- Arahkan kursor ke tema tersebut lalu klik
tombol Install.

- Tunggu beberapa saat sampai template
berhasil diinstall. Tekan tombol Active
untuk mengaktifkan tema tersebut.
- Sampai di sini template sudah berhasil
diinstall dan dipasang. Ketika diakses
tampilan web akan seperti gambar di
bawah.

BAB 5
MENGIMPORT DEMO
WEBSITE

Ada beberapa tema yang sudah menyediakan
demo konten websitenya agar user bisa dengan
mudah dan cepat saat mengembangkan web
menggunakan tema tersebut.
Nah begitupun dengan tema yang digunakan
pada tutorial kali ini. Kita tidak harus susah payah
mendesain benar-benar dari awal. Melainkan kita
gunakan demo konten yang sudah disediakan lalu
tinggal edit-edit saja. Ikuti langkah-langkah
berikut ini.
1. Menginstall Plugin Bawaan Tema
- Masuk ke dashboard admin website anda
- Pilih Appearance  About Illdy

- Pilih tab Recommended Action 
tekan tombol install & Active Illdy
Companion. Lalu tunggu beberapa saat
sampai selesai.
2. Mengimport Demo Content
- Masuk ke dashboard admin website anda
- Pilih Appearance  About Illdy 
Recommended Action  Klik tombol
Import Demo Content
- Pastikan sudah terhubung ke internet, dan
tunggu beberapa menit sampai import
selesai.

- Jika pada tab recommended action pilihan
untuk import content sudah tidak ada
berarti import sudah berhasil dilakukan.
Sampai di sini coba akses website anda
dan tampilannya kurang lebih sudah
menjadi seperti gambar berikut ini.

BAB 6
MENAMBAHKAN LOGO
WEBSITE

Pada bab ini kita akan memasukan logo
perusahaan pada website yang sedang dibangun
ini. Cara menambahkannya yaitu :
- Masuk ke dashboard website
- Pilih Appereance  Customize
- Pilih General Options  Logo

- Masukan logo dengan cara mengklik tombol
Select Logo  Pilih logo dari komputermu
dengan cara klik tombol Select Files  jika
gambar sudah dimasukan pilih tombol Select
 Jika ukuran logo sudah sesuai pilih Skip
Cropping 

- Logo sudah berhasil ditambahkan
- Terakhir jangan lupa tekan tombol Publish.
Setiap selesai mengedit pastikan kita tekan
tombol tersebut.
- Sekarang coba buka tab baru pada browser
dan akses websitemu apakah sudah berubah
atau belum logonya.

BAB 7
MENDESAIN
JUMBOTRON

Jumbotron
Jumbotron merupakan style yang bisa digunakan
untuk melayout konten yang berukuran besar.
Contohnya seperti header dan gambar agar
tampilannya menjadi lebih menarik.
Biasanya bagian ini berada di paling atas sebuah
website, seperti gambar di berikut ini.
1. Mengedit Title pada Jumbotron
Tulisan Clean.slick.pixel percfect
merupakan title yang ada pada Jumbotron.
Untuk mengeditnya yaitu :

- Masuk ke dashboard websitemu
- Pilih Appearance  Customize
- Pilih Front Page Section
- Pilih Jumbotron Section

- Kemudian edit tulisan tersebut pada kolom
Title. Di sini saya mengeditnya dengan
tulisan “ Desain.Bagus.Murah”
2. Mengedit Deskripsi Singkat Company
Profile
Di bawah title atau tagline website company
profile yang sedang dibuat ini akan diisi
dengan deskripsi singkat. Cara
menambahkannya yaitu :

- Isikan deskripsi website pada kolom Entry
tepatnya berada di bawah kolom Title.
Untuk isian pada bagian ini saya
menggunakan kalimat “Layanan desain
grafis yang murah berkualitas untuk
bisnis, brand, startup, UMKM,
perusahaan, instansi, dan lain
sebagainya. Coba sekarang juga”

3. Mengedit Button
Di bawah deskripsi terdapat juga 2 tombol
yang jika diklik akan menuju ke link yang
sudah kita atur.
- Silahkan scroll ke bawah lalu isikan seperti
tabel di bawah :
First button
title
: Selengkapnya
First button
url
: Sesuaikan dengan
link yang dituju. Jika
belum ada link isikan
tanda # saja
Second button
title
: Hubungi Kami
Second button
url
: Sesuaikan dengan
link yang dituju. Jika
belum ada link isikan
tanda # saja

4. Mengganti Image Background
Selanjutnya kita ubah gambar latarnya dengan
cara :
- Klik tab Bacground yang berada isian
untuk edit Button  Type of
Backgroundnya pilih Image

- Klik Change image  Upload files 
lalu upload gambar yang akan dijadikan
background dari komputer atau laptop
yang kamu gunakan untuk membuat web
ini
- Tunggu sampai gambar terupload  Klik
tombol Choose Image
-

Jika titile, deskripsi, button, dan background
sudah diedit terakhir jangan lupa tekan tombol
Publish yang ada di bagian paling atas.
Untuk melihat perubahan desainnya, buka tab
baru pada browser lalu akses webnya. Hasilnya
kurang lebih seperti gambar berikut.

BAB 8
MENDESAIN
ABOUT SECTION

About Section
Di sini kita akan mendesain bagian yang berisi
tentang perusahaan. Selain deskripsi singkat
perusahaan pada about section juga kita bisa
menambahkan apa saja produk atau jasa yang
ditawarkan oleh sebuah perusahaan.
1. Mengganti Judul dan Deskripsi
Baik tanpa panjang lebar mari kita edit about
section ini.
- Pertama silahkan masuk ke dashboard
admin website
- Pilih Appearance  Customize

- Pilih Front Page Section  About
Section silahkan ubah Title dan
Entrynya sesuai dengan keinginan.

2. Menambahkan Skill
Selanjutnya kita edit skill atau jasa apa yang
kita akan tampilkan pada website perusahaan
ini. Caranya :
- Klik tombol + Add & Edit Skills yang
berada tepat di bawah kolom deskripsi

- Kemudian pilih dan edit skill yang sudah
ditampilkan. Contohnya seperti gambar di
bawah ini.
- Setelah itu klik tombol Apply
- Silahkan edit atau tambahkan skill yang
lainnya

Terakhir agar semua hasil editan about section ini
disimpan maka jangan lupa tekan tombol
Publish.
Dan hasilnya about section dari website yang
sedang dibangun ini akan tampil seperti gambar
di bawah ini.

BAB 9
MENDESAIN
PROJECT SECTION

Project Section
Di bagian ini kita akan menambahkan portofolio
atau projek yang pernah dikerjakan perusahaan.
Karena pada tutorial web dalam ebook ini
membahas perusahaan yang bergerak dibidang
jasa desain, maka yang akan ditampilkan pada
project section ini yaitu beberapa desain logo
yang pernah dikerjakan.
Baik tanpa panjang lebar mari kita edit about
section ini.
- Pertama silahkan masuk ke dashboard
admin website  Appearance 
Customize

- Pilih Front Page Section  Project
Section
- Selanjutnya ubah judul dan deskripsinya.
Contohnya seperti gambar di bawah.

2. Menambahkan Portofolio
Selanjutnya kita akan menampilkan beberapa
projek pada website yang sedang dibangun ini.
Berikut caranya :
- Klik Add & Edit Project yang berada di
bawah tepat kolom deskripsi

- Klik satu persatu pilihan project 1 – 4 untuk
mulai mengeditnya.
- Project yang akan ditampilkan bentuknya
pada tutorial ini yaitu berupa gambar. Maka
tinggal klik tombol Upload Image saja
untuk mulai menguploadnya. Jika ingin
video tinggal sertakan saja URL dari
youtube atau vimeo.

- Klik tombol Upload Image  pilih
gambar dari komputer / laptop
- Jika sudah klik Done
- Tambahkan project yang lainnya juga
dengan cara seperti di atas. Jika sudah jangan

lupa tekan tombol publish yang berada di
sebelah kanan atas
- Hasilnya project section sudah ditampilkan
tepat di bawah about section

BAB 10
MENAMBAHKAN
TESTIMONI

Testimonial Section
Testimonial Section yaitu bagian yang akan
menampilkan testimony-testimoni dari pelanggan
perusahaan.
Cara menambahkannya yaitu :
- Pastikan kita sudah masuk ke dashboard
admin website
- Pilih Appearance  Customize  Front
Page Section  Testimonials Section

- Edit titlenya sesuai keinginan. Contohnya
seperti gambar berikut
- Klik Add & Edit Testimonials  Edit
Nama, Foto, dan Testimoninya. Lalu klik
Done

- Tambahkan beberapa testimoni sesuai
kebutuhan. Di sini saya hanya menambahkan
dua testimoni.
- Jika sudah klik tombol Publish

- Hasilnya seperti gambar di bawah ini

BAB 11
MENAMBAHKAN
PRODUK/
LAYANAN

Services Section
Setiap perusahaan tentunya memiliki produk atau
jasa yang dijual. Nah pada bagian ini kita akan
menampilkan layanan tersebut pada website.
- Silahkan masuk ke dashboard admin
website  Appearance  Customize 
Front Page Section

- Pilih Services Section  Edit Title dan
Deskripsinya

2. Menambahkan Beberapa Layanan
- Klik Add & Edit Services
- Kemudian akan ditampilkan demo konten
seperti di bawah ini
-

- Silahkan pilih dan edit satu persatu
layanannya
Layanan 1
Title : Desain Kartu Nama
Icon : Card
Description : Kartu nama memiliki
fungsi untuk
meningkatkan personal
branding, memberikan
informasi untuk
perusahaan, dan banyak
lagi lainnya.
Color : #f18b6d

- Klik Apply jika sudah mengeditnya
Layanan 2
Title : Desain Website
Icon : Code
Description : Memiliki keahlian
pemrograman saja tidak
cukup untuk membuat
website. Dari pada

bingung mikirin desain
web yang ingin kamu buat
serahkan pada kami saja.
Color : #f1d204
Layanan 3
Title : Desain Aplikasi Android
Icon : Android
Description : Selain website, kami juga
menerima jasa untuk

mendesain atau membuat
mokcup aplikasi android
ataupun iOS.
Color : #6a4d8a
Jika semua layanan telah ditambahkan maka
terakhir kita harus tekan tombol Publish. Dan
hasilnya website yang sedang dibangun akan
memiliki tampilan seperti gambar berikut ini.

BAB 12
MENAMBAHKAN
ARTIKEL/ BLOG

Latest News Section
Pada bagian ini kita akan mempelajari bagaimana
cara menambahkan artikel dan menampilkannya
pada halaman utama website.
1. Mengganti Judul, Deskripsi, dan Tombol
Front Page Section

- Pilih Latest News Section  Edit Title
dan Deskripsinya
Title : Blog
Entry : Inspirasi, tips, dan
tutorial seputar desain.
Button Text : Lihat selengkapnya
Number of
Post
: 3 artinya hanya
menampilkan 3 artikel
terbaru saja

- Jika sudah silahkan tekan tombol Publish
yang ada di sisi kanan paling atas

2. Menghapus Artikel Hello World
Saat membuat web baru akan ada satu artikel
default yaitu artikel Hello World. Di sini kita
akan menghapus artikel tersebut.
- Masuk ke dashboard web
- Pilih Posts  All Posts
- Arahkan kursor ke Post Hello World lalu
klik Trash

- Jika sudah hasilnya seperti gambar di bawah
3. Menambahkan 3 Artikel Baru
Untuk menambahkan post/ artikel baru
caranya yaitu :
- Masuk ke dashboard web
- Pilih Posts  Add New

- Masukan judul artikel pada kolom Add title
dan artikel lengkapnya silahkan ketikan pada
kolom Strat writing….
- Contohnya seperti gambar di bawah ini :
Judul
Artikel
: Panduan Membuat Desain
Website Profesional
Isi Artikel : 1. Buatlah homepage
yang minimalis dan
sesuaikan dengan
fungsinya
Buatlah homepage yang
dapat dan mudah
dimengerti oleh
pengguna Anda.
Tindakan yang akan
memberikan keputusan
yang sesuai dengan

kebutuhan pengguna
Anda. Jadi
pastikan website Anda
sudah melalui tahapan
user experience (UX)
yang sesuai dengan
kebutuhan target Anda.
Pastikan tampilan
homepage situs web
Anda mudah diingat
dan pengguna akan
dapat menemukan
solusinya
dari website Anda. Jangan
lupa untuk
menampilkan kata kunci
yang sesuai dan
menggambarkan
keseluruhan dari yang
Anda tawarkan. Jangan
lupa untuk gunakan
icon atau gambar
sebagai alternatif untuk
mengomunikasikan
point website Anda

2. Desain yang eye
catching
Buatlah desain yang
sesuai pada setiap
perangkat karena
teknologi terus
berkembang pastikan
juga desainer Anda
merancang dan
mengatur konten secara
jelas dan langsung.
Karena hanya butuh
beberapa detik untuk
memikat pelanggan
melalui informasi yang
tertera. Pastikan juga
Anda tetap
memperhatikan
komposisi warna,
ukuran, sampai kontras
untuk memberikan
tampilan halaman yang
menarik perhatian.
Sumber :
dewanstudio.com

Featured
Image
:
- Tambahkan feature image untuk artikel
dengan cara klik Set featured image yang
terdapat pada tab document.

- Pilih dan upload gambar yang akan dijadikan
gambar utama artikel dari laptop/ komputer
yang sedang digunakan untuk membangun
web ini.

- Jika sudah terakhir klik tombol Publish.
Hasilnya :
- Satu artikel sudah berhasil dipublish,
sekarang silahkan tambahkan 2 artikel lagi
dengan cara yang sama seperti di atas.

- Pada gambar di bawah ini sudah saya
publish 3 artikel.

BAB 13
MENAMBAHKAN
COUNTER SECTION

Counter Section
Pada bagian ini kita akan menampilkan dalam
angka jumlah projek yang pernah diselesaikan
dan jumlah klien yang dimiliki. Caranya yaitu :
- Masuk ke dashboard website
- Pilih Appearance  Customize  Front
Page Section

- Pilih Counter Section
- Tentukan tipe background yang akan
dipakai. Pilihannya yaitu gambar atau
warna. Di sini saya menggunakan image
bawaan template saja

- Klik Add + Edit Counters untuk mulai
memasukan angkanya
- Kemudian isikan :
 Title : Diisi dengan judul
 Data from : Data dimulai dari
nomor berapa
 Data to : Dan berarkhir di angka
berapa
 Data speed : Kecepatan saat
menampilkan angka

- Contohnya :
- Jika sudah diisi pastikan tekan Done
- Isikan juga untuk jumlah client dan coffes
nya

- Tekan tombol Publish apabila semua pilihan
sudah terisi. Maka hasilnya website yang
sedang kita bangun menjadi seperti gambar di
bawah ini.

BAB 14
MENAMBAHKAN TIM/
PEGAWAI

Team Section
Dari namanya saja kita sudah pasti tahu apa itu
Team Section. Ya benar, bagian ini berisi tim
pada suatu perusahaan. Tujuan ditampilkannya
tim yaitu untuk meningkatkan kredibilitas.
1. Mengedit Judul dan Deskripsi
Front Page Section

- Pilih Team Section
- Edit judul dan deskripsinya. Misalnya
seperti contoh di bawah :
Title : Tim Kami
Entry : Inilah orang-orang
hebat dibalik dmb.co

2. Mengedit Member
- Klik tombol Edit & Add Members
- Edit satu persatu tim yang akan ditampilkan.
Pilih salah satunya kemudian isikan :
 Title : Berisi nama
 Image : Gambar atau foto yang
ingin ditampilkan di web
 Position : Berisi skill yang dimiliki
 Entry : Deskripsi dari seseorang
tersebut
 Social
Media
URL
: Isikan URL media
sosialnya jika ada

- Contohnya :
- Tentukan warna yang ingin digunaka untuk
teks position
- Klik Done jika sudah
- Edit juga untuk orang-orang yang lainnya
juga dengan cara yang sama seperti di atas,
dan jangan lupa klik tombol Publish untuk
menyimpan semua editan

- Hasilnya :

BAB 15
MENAMBAHKAN
INFORMASI KONTAK

Contact Us Section
Setiap website pasti memiliki informasi kontak.
Kontak biasanya berisi alamat kantor, email,
nomor telepon, dan media sosial. Pada bab ini
kita akan menambahkan informasi-informasi
tersebut.
1. Mengedit Informasi Title dan Deskripsi
Front Page Section

- Pilih Contact us Sections  General 
Edit Title, Entry, Address Title, dan
Customer Support Title

- Klik Tab Details lalu isikan URL media
sosial jika ada, alamat email, kantor, dan
nomor telepon.
- Terakhir klik tombol Publish jika semua
sudah diisi. Dan hasil dari Contact Us
Section yaitu seperti gambar berikut :

BAB 16
MENAMBAHKAN
MENU UTAMA

Pada bab ini kita akan menambahkan beberapa
menu agar memudahkan user mencari informasi
yang dicari saat membuka website.
Menu-menu yang akan dibuat pada website ini
yaitu :
- Tentang
- Portofolio
- Testimoni
- Layanan
- Blog
- Tim Kami
- Kontak
Saat menu-menu tersebut diklik nantinya tidak
akan berpindah atau menampilkan halaman lain,
melainkan akan diarahkan ke bagian-bagian yang
sudah kita buat di bab-bab sebelumnya.

Misal user mengklik menu testimoni maka akan
secara otomatis scroll ke bagian testimoni.
Begitupun dengan menu lainnya.
1. Membuat Menu
website  Appearance  Menus
- Isikan menu name dengan “ menu utama
“ lalu klik create menu

- Hapus menu-menu yang sudah ada. Caranya
klik salah satu menu  pilih Remove
- Sekarang semua menu sudah dihapus dan
Klik tombol Save Menu
2. Menambahkan Menu Items
- Pada bagian Add menu items, klik
custom link

- Ketikan nama item menu pada bagian link
text dan urlnya isikan dengan # saja. Lalu
klik Add to Menu
- Item menu tentang sekarang sudah
dimasukan ke dalam menu utama
- Silahkan tambahkan item-item di bawah ini
dengan cara yang sama :
 Portofolio
 Testimoni

 Layanan
 Blog
 Tim Kami
 Kontak
- Dan hasilnya :
3. Mengedit URL
- Agar ketika item menu diklik menuju ke
bagian tertentu maka harus ditambahkan
#title pada URLnya.
- Arahkan kursor ke icon tanda panah ke
bawah yang ada di setiap item menu 
lalu klik untuk mulai mengeditnya

- Lalu isikan URL nya dengan nama section
yang sudah ditentukan
- Selengkapnya yaitu :
Item Menu URL
Tentang #about
Portofolio #projects
Testimoni #testimonials
Layanan #services
Blog #latest-news
Tim Kami #team
Kontak #contact-us

- Terakhir tekan tombol Save Menu jika
semua URL sudah diedit
- Sekarang coba lihat hasilnya apakah menu
sudah ditambahkan dan berfungsi dengan
baik atau belum

BAB 17
MENGEDIT FOOTER

Footer Sidebar
Footer sidebar adalah ruang yang bisa kita
gunakan untuk menambahkan beberapa widget
yang berisi informasi tertentu.
Kita bisa menampilkan atau menonaktifkan fitur
tersebut pada sebuah website.
Edit Footer Sidebar
Cara mengedit footer sidebar yaitu :
- Masuk ke dashboard admin
- Pilih Appearance  Customize  Widget

- Pilih footer sidebar yang akan dipilihan lalu
masukan widget yang sesuai dengan
kebutuhan
- Misal, saya akan mengedit footer sidebar 1
dengan menampilkan widget kalender. Klik
footer sidebar 1

- Hapus widget yang sudah tersedia dengan
cara klik widgetnya lalu scroll ke bawah dan
klik Remove
- Untuk menambahkan widget baru silahkan
klik Add a Widget
- Pilih widget yang ingin digunakan, misal
kalender

- Isikan judul widget  klik Done 
Publish
- Hasilnya footer sidebar kalender sudah
berhasil ditambahkan

Menonaktifkan Sidebar Footer,
Mengaktifkan Icon Go To Top, dan
Mengubah Copyright
Pada tutorial ini footer sidebar tidak akan
ditampilkan. Cara disable footer sidebar yaitu :
- Pilih Appearance  Customize  General
Options
- Pilih Footer

- Off kan pada intruksi Show footer widget
area
- Lalu untuk mengaktifkan icon go to top,
silahkan ON kan pada intruksi enable go to
top icon
- Ubah juga tahun copyrightnya sesuai
keinginan.

- Terakhir klik tombol Publish, dan hasilnya
bagian footer website menjadi seperti gambar
di bawah ini.
- Footer sidebar atau widget footer sudah tidak
ada dan icon go to top sudah muncul di
samping kanan bawah

Menghapus Tulisan Tema pada Footer
Copyright website pada gambar di atas masih
terdapat tulisan theme : illdy, bisakah tulisan
tersebut dihilangkan? tentu saja bisa. Caranya :
- Pilih Appearance  Theme Editor
- Buka file footer.php pada bagian Theme
files

- Ubah baris kode 77
<span><?php printf( '%s <a href="%s" title="%s"
target="_blank">%s</a>.', __( 'Theme:', 'illdy' ), esc_url(
'http://colorlib.com/wp/themes/illdy' ), __( 'Illdy', 'illdy' ), __(
'Illdy', 'illdy' ) ); ?></span>
- Menjadi seperti berikut
<span><?php printf( '', __( '', '' ), esc_url( '' ), __( '', '' ),
__( '', '' ) ); ?></span>
- Jika sudah klik tombol Update File
- Tunggu beberapa saat sampai proses selesai

- Hasilnya tulisan Theme : Illdy sudah hilang

BAB 18
MENGONLINKAN
WEBSITE

Mengupload Website dari Localhost ke
Hosting
Setelah kamu membeli domain dan hosting, ini
saatnya mengupload website yang sudah kita buat
dari localhost ke hosting.
1. Buat Database di Cpanel
- Login ke akun Cpanel websitemu
menggunakan Username dan Password
yang sudah diberikan oleh penyedia
hosting.

- Pilih menu MySQL Database pada
kolom DATABASES
- Isikan nama database pada form
Create New Database, lalu klik Create
Database.

- Database sudah berhasil ditambahkan,
klik Go back untuk kembali ke menu
sebelumnya.
- Nama database secara default akan
mendapat nama awalan dari user
Cpanel.

- Lalu scroll ke bawah dan isikan form Add
New User
- Isikan data-data tersebut sesuai keinginan
dan pastikan anda mengingat username
dan passwordnya. Disini saya mengisi
username “companyprofile“ dan
passwordnya “adminperusahaan123”

- Klik tombol Create User. Jika sudah
berhasil klik Go Back
- Selanjutnya scroll lagi ke bawah, lalu pada
Add User to Database pilih User dan
Database yang sudah kita buat tadi.

- Lalu klik Add
- Pada User Manage Privileges, Klik All
Privileges
- Lalu klik Make Changes
- Tunggu beberapa saat sampai berhasil.
Setelah itu klik Go Back

- Sekarang database sudah terhubung
dengan Privileged Users yang kita buat
tadi

2. Backup Database Localhost
Langkah kedua setelah kita membuat database
di Cpanel yaitu membackup database yang
sudah dibuat menggunakan XAMPP. Caranya
yaitu :
- Buka XAMPP, start Apache dan
MySQL
- Buka browser lalu ketikan URL
http://localhost/phpmyadmin
- Klik nama Database yang sudah kita
buat di bab 3 yaitu database
“ db_companyprofile “

- Klik tab menu Export
- Setelah itu klik tombol Go, maka
database akan diimport ke komputer. File
tersebut biasanya akan masuk ke folder
download

3. Import Database dari Localhost ke
Cpanel
Sekarang kita importkan database yang tadi
sudah di export ke database yang ada di
Cpanel.
- Login ke akun Cpanel website anda
- Cari dan klik menu PhpMyAdmin
- Jika jendela PhpMyAdmin sudah terbuka,
klik database web companyprofile yang
sudah kita buat di bab sebelumnya.

- Lalu klik menu import
- Klik Choose File, lalu cari file database
yang sudah kita export di langkah ke
2.
- Scroll ke bawah lalu klik tombol Go

- Tunggu beberapa saat sampai database
sukses terimport. Bila berhasil
tampilannya yaitu :
4. Upload File Wordpress
Selanjutnya kita harus mengupload file
wordpress yang ada di komputer ke server
hosting. Caranya yaitu :
- Klik Start  Computer 
Local Disk C
- Buka folder XAMPP  folder htdoc

- Compress semua file web company
profile sehingga berbentuk file zip.
- Klik kanan pada folder
web_companyprofile lalu pilih Add to
archieve.
- Pilih format zip lalu klik Ok

- Tunggu sampai proses compress selesai
- Sekarang file sudah berbentuk zip

- File sudah siap untuk diupload ke server
hosting. Selanjutnya silahkan login
kembali ke akun Cpanel website
- Cari dan pilih File Manager
- Scroll dan cari folder Public_html yang
ada di samping kiri

- Klik menu Upload
- Klik select file, lalu pilih file yang sudah
di zip tadi
- Tunggu sampai dengan file terupload
100%

- Jika sudah selesai terupload (mencapai
100%), klik tombol Go back
- Lalu klik kanan pada file
web_companyprofile.zip dan pilih
Extract
- Sehingga sekarang ada 3 file yang tampil.

- Buka folder web_companyprofile 
klik select All  klik kanan  klik
move
- Lalu klik Move File(s). Jika sudah klik
tombol Back. Sehingga semua file
sekarang berada home/public_html

5. Settings file Wp-Config.php
Langkah berikutnya yaitu menghubungkan
database MySQL yang sudah dibuat pada
langkah pertama. Caranya yaitu :
- Cari file wp-config.php pada file web
sekolah di atas.
- Klik kanan pada file tersebut  Edit

- Masukan nama database, username,
dan password yang dibuat pada langkah
pertama, pada pengaturan berikut :
- Ubah dengan nama database, username,
dan password yang sudah kita buat yaitu :

- Jika sudah klik tombol Save Changes
yang ada di samping kanan.
6. Ubah URL pada Database di Cpanel
Disini kita harus mengubah URL yang ada
database PhpMyadmin. Caranya yaitu :
- Pastikan kamu sudah login ke akun
Cpanel, atau sudah berada di menu utama
Cpanel
- Pilih PhpMyAdmin

- Klik nama database website yang kita buat
- Kemudian klik table wp-options
- Ubah site URL dan home dengan cara
klik Edit.
- Ubah dengan alamat websitemu. Misal :
http://dmb.co. Namun karena disini saya
hanya menggunakan subdomain maka
URL yang saya tambahkan yaitu :
http://dmb.badoystudio.com/

- Setelah itu klik tombol Go
- Sekarang site URL dan home alamat URLnya
seperti gambar di bawah ini.
7. Website Sudah Online !
Terakhir, jika pengaturan database di wp-
config.php sudah benar. Silahkan akses
websitemu di tab baru, apakah sudah berhasil
online atau belum.

Penutup
Terimakasih karena telah membeli dan
mempelajari ebook ini. Mohon maaf atas segala
kekurangan, baik dari penulisan, penyajian, dan
hal lainnya yang mungkin saya tidak ketahui.
Karena hanya Allah lah yang Maha sempurna.
Sekali lagi saya ucapkan terimakasih karena anda
berkomitmen untuk tidak membagikan atau
menyebarluaskan kepada orang lain tanpa ijin
dari penulis.

Penulis
Halo, saya Guntoro.
Setelah hampir 7 tahun
mengajar di SMK, saya
memutuskan resign dan
fokus di dunia web &
mobile developer, SEO,
Blogger, dan pernah
menjadi trainer di London
School Technopreneur.
Karena jiwa saya bebas tidak ingin banyak di atur oleh
orang lain maka saya juga memilih menjadi freelancer
dalam bidang web dan mobile development.
Untuk menghubungi saya perihal pekerjaan, sekedar
menyapa, atau ingin memberikan kiritk dan saran
seputar ebook yang saya tulis, bisa melalui :
email : guntoroagun@gmail.com

1.ebook 5 hr mahir web company.pdf

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Similar to 1.ebook 5 hr mahir web company.pdf

Similar to 1.ebook 5 hr mahir web company.pdf (20)

1.ebook 5 hr mahir web company.pdf