WORKSHOP E-COMMERCE

How To Build Your Own Web & Develop Your Online Shop

MODUL WEB HOSTING

Membuat IDHostinger dan
Menghubungkan ke Wordpress.

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop

Daftar isi

Daftar isi ...................................................................................................................................................... 3

Overview ...................................................................................................................................................... 4
Tujuan .......................................................................................................................................................... 4
Apa itu Hostinger ? ................................................................................................................................... 4
Apa keuntungan Hosting di IDHostinger ? .......................................................................................... 5
Apa saja web dalam Hostinger ?............................................................................................................ 6
Cara membuat ID-Hostinger ................................................................................................................... 7
Menghubungkan ID-Hostinger dengan Wordpress ......................................................................... 17

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop
Overview
Dalam modul ini akan dibahas bagaimana membuat Hosting dengan
IDHostinger, dan instalasi ke Wordpress, dengan memaksimalkan fitur gratis
yang tersedia.

Tujuan
Peserta

memiliki

pengetahuan

singkat

tentang

Hosting

dan

pengaplikasiannya

Apa itu Hostinger ?

Hostinger adalah penyedia jasa Hosting gratis dan berbayar terkemuka.
Perusahaan ini didirikan pada tahun 2007 di Texas, Amerika Serikat. Sejak
saat itu, Hostinger tumbuh dari sebuah perusahaan kecil yang hanya memiliki
satu server menjadi sebuah perusahaan penyedia jasa Hosting terkemuka di
dunia yang memiliki lebih dari 500 server.
Di tahun 2011, Hostinger telah membuka cabang di Indonesia dan dikenal
denga IDHostinger. Saat ini Hostinger memiliki lebih dari 50.000 pelanggan
di Indonesia dan mencatat lebih dari 200.000 website aktif di server.
Hostinger adalah salah satu perusahaan dengan pertumbuhan tercepat di
Indonesia karena setiap hari Hostinger mencatat lebih dari 300 pelanggan

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop
baru. Server Hostinger terletak di data center Icecolo, Manchester, UK
(Inggris). Icecolo sendiri merupakan salah satu data center terbaik di Eropa
serta memiliki koneksi tercepat ke semua Negara.

Apa keuntungan Hosting di IDHostinger ?

Generasi baru web Hosting gratis

Lupakanlah semua stereotip tentang layanan web Hosting gratis. Hostinger
berbeda, dia memberikan banyak fitur, layanan web Hosting yang handal
serta tim support yang fantastis. Uptime server Hostinger adalah 99,9%.

Tidak ada iklan maupun banner di website Anda

Tidak ada iklan teks, pop-ups maupun banner yang sangat mengganggu.
Website Anda 100% bebas dari iklan Hostinger selamanya!

Website builder yang mudah digunakan

Anda dapat membuat website dengan sangat mudah. Bahkan seorang pemula
pun dapat membuat website yang bagus dengan menggunakan website
builder kami. Silahkan pilih satu dari 100 template profesional Hostinger.

Support PHP dan MySQL

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop
Hostinger mendukung PHP dan MySQL tanpa batasan. PHP Hostinger hadir
dengan semua fungsi dan fitur diaktifkan. Anda dapat mengubah versi PHP
Anda dengan satu klik dan mengelola database dengan tool PhpMyAdmin.

Script Auto Installer

Hanya dengan melakukan beberapa klik, Anda dapat menginstall Wordpress,
Joomla, PrestaShop, phpBB, Drupal, and script-script lainnya. Sebuah website
profesional pun dapat Anda buat hanya dalam beberapa menit saja!

Apa saja web dalam Hostinger ?

Hosting gratis
Layanan Hosting gratis Hostinger sangat cocok untuk website kecil - pribadi,
Komunitas, forum, blog. Lebih dari 90% customer Hostinger mengaku puas dengan
layanan web Hosting gratis ! Namun, jika Anda memiliki website yang besar dan
banyak pengunjung serta membutuhkan garansi uptime dan backup harian, silahkan
Anda upgrade ke layanan Web Hosting Premium atau Bisnis Hostinger
Hosting premium
Layanan Web Hosting Premium adalah layanan web Hosting unlimited dan
gratis domain .COM! Anda dapat menikmati layanan web Hosting terbaik dan tanpa
larangan dengan harga yang sangat terjangkau. Hostinger memberikan batasan

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop
penggunaan CPU yang jauh lebih besar dan koneksi tanpa batas. Web Hosting
Premium juga jauh lebih cepat dan powerful. Layanan Web Hosting Premium juga
meliputi backup secara otomatis setiap minggu dan garansi pengembalian uang
selama 30 hari.
Hosting bisnis
Layanan Web Hosting Bisnis kami direkomendasikan untuk pemilik website
perusahaan dan website sibuk. Web Hosting Bisnis memiliki semua fitur web Hosting
terbaik dan juga dilengkapi dengan fitur e-commerce seperti Sertifikat SSL, IP
Dedicated, InnoDB, Akses SSH tak terbatas. Dengan memilih layanan Hosting Bisnis
maka Anda juga akan mendapatkan fitur backup harian dan garansi pengembalian
uang selama 60 hari.

Cara membuat ID-Hostinger

Sebelum membuat ID-Hostinger, anda harus memiliki akun facebook atau Gmail
sebagai persyaratan membuat akun di Hostinger.
Berikut ini adalah tata cara membuat ID-Hostinger
1. Buka halaman website Hostinger , http://www.idhostinger.com/. Klik Buat Akun.

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop

Gambar 1 : Halaman Utama Hostinger

Kemudian akan akan muncul form pendaftaran sebagai berikut :

Gambar 2 : Form Pendaftaran

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop
2. Anda bisa klik facebook, google (jika menggunakan Gmail) bila anda ingin
menggunakan akun yang sama untuk Hostinger. Bila tidak, anda bisa mengisi
form pendaftaran, Apabila anda menggunakan form pendataran, setelah seluruh
field pada form terisi, klik Saya setuju dengan ketentuan penggunaan layanan,
kemudian klik Buat Akun,
Setelah prosedur tersebut dilakukan kemudian akan muncul tampilan berikut ini:

Gambar 3 : Tampilan Beranda Akun Hostinger

3. Setelah berhasil masuk, Anda diminta untuk mengaktivasi akun dan verifikasi
alamat Email. Untuk aktivasi akun Hostinger, anda perlu membuka email yang
telah didaftarkan sebelumnya, dan lihat pesan dari Hostinger, kemudian klik link
yang ada pada pesan tersebut.

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop

4. Setelah teraktivasi, kembali ke halaman Hostinger, klik Hosting pada halaman

Hostinger.

Gambar 4, Langkah 1 Proses Order Hosting Gratis Baru

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

10

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop

5. Klik Order pada pilihan paket Hosting gratis, Anda akan dibawa untuk
melanjutkan pada tahap selanjutnya.

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

11

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop

Gambar 5 : Langkah 2 Proses Order Hosting Gratis Baru

6. Pilih

tipe

Domain

Subdomain,
7. Kemudian masukkan nama
subDomain

yang

Anda

inginkan
8. Klik

Hasilkan

menampilkan
default

domain

otomatis

untuk
password
Anda.

password

Secara
default

subdomain akan muncul ,

Gambar 6 : Langkah 2 Proses Order Hosting Gratis Baru

(Lanjutan)

9. Konfirmasi untuk menggunakan

password tersebut dengan klik
Lanjukan.
Selanjutnya menuju ke langkah 3 untuk order Hosting Baru Gratis
10. Isikan mengisi captcha, kemudian klik Saya setuju dengan ketentuan
penggunaan layanan,
11. Klik Order untuk konfirmasi bahwa anda telah mengisi form diatas.

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

12

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop

10

11

Gambar 7 : Langkah 3 Proses Order Hosting Gratis Baru

Selanjutnya muncul kotak informasi bahwa Akun Anda telah berhasil dibuat

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

13

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop

12

Gambar 8 : Akun Hostinger yang telah berhasil dibuat

Untuk melakukan pengaturan lebih lanjut pada Akun Hostinger anda sekaligus untuk
mengatur CMS yang akan digunakan nantinya pada website Anda, maka langkah
selanjutnya adalah sebagai berikut :
12. Klik pada website yang telah anda buat untuk memunculkan pilihan pengaturan.

13
Gambar 9 : Tampilan pilihan manajemen Akun

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

14

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop
13. Kemudian klik Kelola.
Agar dapat memodifikasi konten
untuk web kita nantinya, langkah
selanjutnya adalah menghapus
seting default dari Hostinger,
14

Langkahnya adalah sebagai berikut

:
14. Pada tampilan pengelolaan, klik File Manajer 2,

Maka akan muncul halaman Net2FTP seperti Gambar 11 di bawah ini:

Gambar 10 : Halaman Pengelolaan Akun

15
Gambar 11 : Halaman Net2FTP (1)

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

15

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop

17
Gambar 12 : Halaman Net2FTP (2)

16

15. Klik

dua

public.html,

kali

pada

folder

kemudian

pada

halaman new tab browser

akan

muncul

18

tampilan

sebagai berikut (Gambar 12)

16. Pilih default.php
17. Hapus default.php dengan
mengklik Delete.

Gambar 12 : Permintaan konfirmasi

menghapus default.php

18. Pastikan anda mengkonfirmasi perintah diatas dengan klik centang hijau.
Bila muncul Gambar 13 disamping ini, maka
default.php telah berhasil dihapus.

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

16

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop

ah berhasil

Menghubungkan ID-Hostinger dengan Wordpress

Setelah akun Hostinger Anda telah dibuat, maka langkah selanjutnya Anda
memilih CMS yang akan digunakan untuk mendesain web, CMS yang digunakan kali
ini adalah Wordpress. Tahap selanjutnya adalah menghubungkan Hostinger yang
telah anda buat dengan Wordpress, Langkah-langkahnya adalah sebagai berikut:

19

Gambar 14 : Pilihan pengaturan

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

17

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop

19. Kembali ke halaman Akun Hostinger kemudian Klik Auto Installer kemudian
muncul tampilan sebagai berikut:

20

Gambar 14 : Tampilan Akun Hostinger

dengan pilihan pengelolaan

20. Pilih Wordpress untuk menghubungkan Wordpress dengan Hostinger Anda.

Kemudian,

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

18

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop

21

Gambar 15 : Jendela input keterangan

22

untuk Wordpress

21. Pastikan anda mengisi pada kolom yang tersedia, untuk mengisi judul website,
dan tagline website dapat seperti contoh diatas atau , misalnya :
judul website
Tagline website

: kaskus/zalora
: the largest community/toko sepatu dan fashion online

22. Setelah anda selesai mengisi maka langkah selanjutnya klik Install.

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

19

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop
23. Tunggu proses instalasi anda selesai,sekitar 5-30 menit, ketika instalasi anda
berhasil dan Hostinger anda berhasil terhubung dengan Wordpress ditandai
dengan muncul jendela seperti gambar di bawah ini:

24

23

Gambar 15 : Hostinger telah terpasang

Wordpress

24. Klik kotak Detail yang berwarna biru, lalu muncul tampilan pop-up sebagai
berikut:
Pop-up yang muncul menunjukkan
Detail informasi alamat website
nantinya.

25

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

20

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop
26

Gambar 15 : Hostinger telah terpasang

Wordpress

25.
lik
Ur
l
unt
uk
me
mb
uka halaman website Anda

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

21

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop

Gambar 15 : Hostinger telah terpasang

Wordpress

26. Bila Anda ingin melakukan editing, Klik URL Admin agar Anda masuk sebagai

admin sehingga dapat mengedit website yang telah dibuat. Ketika anda masuk
sebagai admin, anda diminta untuk log in pada wordpress menggunakan
username yang tadi sudah dibuat saat menginstal wordpress.

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

22

WORKSHOP E-COMMERCE
How To Build Your Own Web & Develop Your Online Shop

Gambar 15 : Hostinger telah terpasang

Wordpress

Tampilan saat sudah log in sebagai admin. Anda bisa mulai memposting atau
mengedit website yang sudah anda buat.

UNIT PENGEMBANGAN KOMPUTER FAKULTAS EKONOMIKA & BISNIS UNDIP 2014

23