ADI WIJAYA
3116290003
ii
LEMBAR PENGESAHAN
Penguji 1 Penguji 2
Pimpinan PalComTech
Mei Sutrisno
NIP : 44.PCT.09
iii
HALAMAN MOTTO
Motto :
1. Mulailah melangkah, berpikir adalah faktor utama penghambat
keberhasilan.
2. Kaya bukan cuma soal materi, pengalaman merupakan
sesunggunya kekayaan sejati.
3. Pendidikan bukan hanya sekedar membaca ataupun menulis,
pendidikan adalah konsep pertemuan pendidikan terhadap
lingkungan.
4. Dream is a half success of real.
Ku persembahkanuntuk :
1. Allah SWT selalu menyertai dalam langkahku.
2. Ibu, Ayah dan saudara/saudari selalu memberi saya dukungan,
cinta, dan pengorbanan.
3. Seseorang yang spesial Miss Sita Handayani selalu medukung.
4. Pimpinan PalComTech Lahat Bapak Mei Sutrisno yang
mendukung dalam pembuatan laporan ini.
5. Pemimbing Miss Vivi Nilam Sari, terima kasih atas bimbingan,
saran dan nasihat.
6. Staff dan Instruktur PalComTech Lahat.
7. Teman seperjuangan dan almamater.
KATA PENGANTAR
iv
Puji syukur penulis panjatkan kepada Tuhan yang Maha Esa,
berkat rahmat dan karunia-Nya penulis dapat menyelesaikan laporan
(Thread Cases Study) TCS tepat pada waktunya. Laporan tugas akhir ini
yang berjudul “Desain Web SMA Negeri 3 Kikim Timur dengan
Menggunakan Wordpress” disusun untuk memenuhi persyaratan dalam
menyelesaikan program Professional 1 Tahun Pendidikan Komputer dan
Internet di PalComTech Lahat. Dalam kesempatan ini penulis
mengucapkan terima kasih kepada:
1. Bapak Mei Sutrisno selaku pimpinan PalComTech Lahat.
2. Miss Vivi Nilam Sari selaku pembimbing.
3. Staff dan Instruktur PalComTech Lahat.
4. Teman-teman seperjuangan khususnya kelas GSO29A.
Selama proses laporan ini, penulis menyadari banyak pihak yang
telah membantu proses pembuatannya dan juga menyadari laporan ini
masih jauh dari kata sempurna. Maka, penulis mengharapkan kritik dan
saran yang bersifat membangun untuk dapat menjadi lebih baik
kedepannya.
Penulis
DAFTAR ISI
HALAMAN JUDUL....................................................................... i
v
HALAMAN PERSETUJUAN........................................................... ii
HALAMAN PENGESAHAN........................................................... iii
HALAMAN MOTO DAN PERSEMBAHAN...................................... iv
KATA PENGANTAR...................................................................... v
DAFTAR ISI.................................................................................. vi
DAFTAR GAMBAR....................................................................... vii
BAB I PENDAHULUAN
1.1 Latar Belakang................................................................ 1
1.2 Tujuan dan Manfaat TCS................................................ 3
DAFTAR PUSTAKA
LAMPIRAN
RIWAYAT HIDUP
DAFTAR GAMBAR
vi
Gambar 2.3 Tampilan Logo Adobe Photoshop............................ 9
Gambar 2.4 Tampilan Logo Yahoo.............................................. 10
Gambar 2.5 Tampilan Logo Idhstinger........................................ 11
Gambar 2.6 Tampilan Kerangka Website.................................... 13
Gambar 2.7 Tampilan Taksbar.................................................... 14
Gambar 2.8 Tampilan halaman depan yahoo............................. 14
Gambar 2.9 Tampilan Sign In...................................................... 15
Gambar 2.10 Tampilan Form Daftar............................................ 15
Gambar 2.11 Tampilan Verifikasi nomor telepon........................ 16
Gambar 2.12 Tampilan Kunci Akun............................................. 16
Gambar 2.13 Tampilan Sign In.................................................... 17
Gambar 2.14 Tampilan Halaman Depan Hostinger..................... 18
Gambar 2.15 Tampilan Login...................................................... 18
Gambar 2.16 Tampilan Form Daftar Akun Hostinger................... 19
Gambar 2.17 Tampilan Konfirmasi Akun di Yahoo...................... 20
Gambar 2.18 Tampilan Depan Hostinger.................................... 20
Gambar 2.19 Tampilan Order Web Hosting................................ 21
Gambar 2.20 Tampilan Checkout Order...................................... 21
Gambar 2.21 Tampilan Submit Order......................................... 22
Gambar 2.22 Tampilan Order berhasil........................................ 22
Gambar 2.23 Tampilan Aktivasi Akun di Yahoo........................... 23
Gambar 2.24 Tampilan Configurasi Order................................... 23
Gambar 2.25 Tampilan Pengaturan Order Hosting...................... 24
Gambar 2.26 Tampilan Konfirmasi Order Hosting sukses............ 24
vii
Gambar 2.27 Tampilan Web Hosting.......................................... 25
Gambar 2.28 Tampilan Auto Installer......................................... 25
Gambar 2.29 Tampilan Konfigurasi Instalasi WordPress............. 26
Gambar 2.30 Konfigurasi Instalasi WordPress Sukses................. 26
Gambar 2.31 Tampilan Konfirmasi Auto Installer di Yahoo......... 27
Gambar 2.32 Tampilan Login WordPress.................................... 28
Gambar 2.33 Tampilan Dashboard............................................. 28
Gambar 2.34 Tampilan Appearance Menu.................................. 29
Gambar 2.35 Tampilan Add News Themes................................. 29
Gambar 2.36 Tampilan Upload Themes...................................... 30
Gambar 2.37 Tampilan Choose File............................................. 30
Gambar 2.38 Tampilan Directory File.......................................... 31
Gambar 2.39 Tampilan Instal File................................................ 31
Gambar 2.40 Tampilan Active File.............................................. 32
Gambar 2.41 Tampilan Appearance Menu.................................. 32
Gambar 2.42 Tampilan Setting Themes...................................... 33
Gambar 2.43 Tampilan Add New Image...................................... 33
Gambar 2.44 Tampilan Select Files............................................. 34
Gambar 2.45 Tampilan Save & Publish....................................... 34
Gambar 2.46 Tampilan Pages..................................................... 35
Gambar 2.44 Tampilan Add New Page........................................ 35
Gambar 2.45 Tampilan Publish................................................... 36
viii
BAB I
PENDAHULUAN
1
seperti aplikasi. Oleh sebab itu, kedua jenis ini membuat website
menjadi sangat populer.
Pada era modern, ada banyak website yang bermunculan
misalnya saja website sekolah. Dalam pembuatan website
dilakukan melalui aplikasi blog. Ada begitu banyak aplikasi blog
yang ditawarkan saat ini. WordPress merupakan diantara aplikasi
blog yang ada dan juga salah satu jenis CMS yang tergolong dalam
aplikasi open source. Dengan kata lain, WordPress adalah website
dinamis. Artinya klien dengan mudah memperbarui atau
memodifikasi website sesuai keinginannya.
Berdasarkan sejarahnya, SMA Negeri 3 Kikim Timur berdiri
pada tahun 2015. Sekolah ini berdiri di lahan dengan Luas Areal
29.200 m2 yang beralamat di Desa Sukoharjo Kecamatan Kikim
Timur Kabupaten Lahat Provinsi Sumatera Selatan. Dengan kata
lain, sekolah ini masih berkembang.
Dari penjelasan di atas, setelah penulis melakukan observasi.
Penulis membuat desain website dinamis sekolah. Website ini
bertujuan untuk memperkenalkan sekolah tersebut. Tidak hanya
itu, penulis berharap dengan adanya website ini dapat bersaing di
era modern sekarang. Dalam pembuatan website, penulis
menggunakan WordPress sebagai aplikasi blog. Ini dipilih karena
aplikasi yang ditawarkan oleh WordPress sesuai dengan project
yang akan dikerjakan penulis. Oleh karena itu, penulis mengambil
laporan akhir Thread Cases Study (TCS) dengan judul Desain
2
Website SMA Negeri 3 Kikim Timur dengan Menggunakan
WordPress.
3
BAB II
ANALISA DAN PEMBAHASAN
4
akan digunakan di dalam halaman web yang akan dibuat.
Contoh image editor : Adobe Photoshop.
1. Google Chrome
5
peluncuran untuk semua sistem operasi Google Chrome
diperkirakan telah berhasil meraih presentase 25-28% dari
keseluruhan pengguna browser dunia, dan diperkirakan
membuatnya sebagai web browser kedua atau juga ketiga
paling banyak di gunakan setelah Mozilla Firefox.
2. WordPress
7
9. Tersedianya struktur permalink yang
memungkinkan mesin pencari mengenali
struktur blog dengan baik.
10. Mampu mendukung banyak kategori untuk satu
artikel.
11. Fasilitas format teks dan gaya teks.
12. Halaman statis.
13. Mempunyai kemampuan optimaliasasi yang baik
pada mesin pencari (search engine optimizer).
3. Adobe Photoshop
8
Gambar 2.3 Tampilan Logo Adobe Photoshop
9
lunak editor buatan Adobe Systems dikhususkan pengeditan
foto/gambar dan pembuatan efek.
4. Yahoo Email
10
yang dimiliki oleh website mereka ini, akhirnya pada tanggal 1
Maret 1995, Yahoo diresmikan sebagai badan hukum. Pada
bulan Juli 2012, Yahoo mendapatkan seorang CEO baru yang
merupakan bekas salah satu petinggi saingan
mereka, Google, Marissa Mayer. Kelebihan yang ditawarkan
oleh yahoo adalah pengguna dapat melakukan web cam. Selain
itu kekurangan terdapat di yahoo bahwa tidak ada ruang atau
room bagi pengguna selurh dunia.
5. Idhostinger
6. Kerangka Website
Sebelum tahap pembuatan website, penulis menjelaskan
kerangka website. Hal ini dibutuhkan untuk memudahkan
11
penulis dalam pengerjaanya. Tata letak seperti menu bar
berada posisi atas, kemudian diikuti header, conten berada
diposisi kiri, sidebar berada diposisi kanan dan terakhir footer
berada di bawah. Untuk selengkapnya dapat dilihat pada
gambar 2.6.
12
Gambar 2.6 Tampilan Kerangka Website
14
d. Maka akan tampil Form Daftar Yahoo. Isi form dengan
benar klik Lanjutkan. (note: form yang harus di isi seperti
nama depan, nama belakang, alamat email, password,
nomor ponsel, tanggal lahir dan jenis kelamin)
15
Gambar 2.11 Tampilan Verifikasi nomor telepon
f. Masukan 5 digit kunci verifikasi akun yang telah dikirim
melalui SMS ke nomor telpon anda klik Verifikasi.
16
Disini penulis membahas pembuatan akun hostinger dan
pembuatan domain.
A. Membuat akun hostinger
a. Siapkan email yang akan digunakan. Disini penulis
menggunakan yahoo email.
b. Ketik www.hostinger.co.id di taskbar. Kemudian muncul
Tampilan halaman depan hostinger. Selanjutnya, klik
Login untuk membuat akun hostinger.
d. Setelah itu, isi form dibawah ini dengan benar. Lalu, klik
Selanjutnya. (note: form yang harus di isi seperti
alamat email, password, nama depan, nama
17
belakang,negara/wilayah, alamat, kode pos, nomor
telpon)
18
Gambar 2.16 Tampilan Form Daftar Akun Hostinger
19
e. Tunggu sampai loading selesai. Kemudian, pemberitahuan
dari hostinger dikirim melalui email bahwa akun siap
digunakan.
20
Gambar 2.19 Tampilan Order Web Hosting
22
f. Buka aktivasi akun yang dikirim melalui email. Klik link
yang ditawarkan.
23
Gambar 2.25 Tampilan Pengaturan Order Hosting
3. Menginstal WordPress
24
a. Pilih menu hosting, Pilih submenu website, klik 2x Auto
Installer.
25
Gambar 2.29 Tampilan Konfigurasi Instalasi WordPress
26
Gambar 2.31 Tampilan Konfirmasi Auto Installer di Yahoo
4. Pengelolahan Website
Di WordPress ada 2 (dua) alamat yang dapat dikunjungi,
yaitu:
Front-end (untuk pengunjung)
Back-end/Dashboard (untuk admin) caranya ketik
nama_website/wp-admin.
Dibagian ini penulis menjelaskan langkah-langkah dalam
pengolahan website meliputi login WordPress, Mengatur
theme, Mengatur header, Mengatur menu dan Posting.
A. Login WordPress.
a. Siapkan Username dan Password, kemudian kunjungi back-
end website, setelah form di isi klik Login.
27
Gambar 2.32 Tampilan Login WordPress
B. Mengatur thema
28
a. Login ke WordPress, pilih menu appearance, pilih submenu
themes.
29
Gambar 2.36 Tampilan Upload Themes
30
Gambar 2.38 Tampilan Directory File
C. Mengatur header
a. Posisi di tampilan dashboard, pilih menu appearance
lalu pilih submenu customize.
31
Gambar 2.41 Tampilan Appearance Menu
b. Maka, akan muncul tampilan setting themes, seperti
gambar dibawah ini. Lalu klik header image.
32
Gambar 2.43 Tampilan Add New Image
33
Gambar 2.45 Tampilan Save & Publish
34
Gambar 2.47 Tampilan Add New Page
35
36
BAB III
SIMPULAN DAN SARAN
3.1 SIMPULAN
Berdasarkan hasil pengamatan penulis, maka dapat disimpulkan
sebagai berikut :
1. Pengoprasian WordPress dan menu-menu didalam dashboard
sangatlah mudah untuk dipahami terkhususnya bagi pemula.
2. WordPress memiliki template tema dan plugin gratis dan bisa
di download.
3. WordPress bersifat open source, sehingga dapat dimodifikasi
sedemikian rupa oleh admin.
3.2 SARAN
Saran yang dapat penulis berikan untuk Lembaga Pendidikan
Komputer PalComTech sendiri adalah :
1. Membuat kegiatan dimana peserta didik tidak hanya belajar
tetapi memahami manfaat dan hasil serta mampu
berkomunikasi dengan baik.
37
2. Pelayanan dan infrastruktur agar di sesuaikan dengan biaya
wajib peserta didik keluarkan.
3. Dalam pembuatan website terkhususnya untuk pembaca,
diharap menyiapkan terlebih dahulu konsep, seperti website
apa yang ingin dibuat, tujuan pembuatan website, dan manfaat
yang ditimbulkan dari pembuatan website.
38
DAFTAR PUSTAKA
http://rpl-yes.blogspot.co.id/2013/12/hosting-gratis-indonesia-
terbaik.html, diakses pada tanggal 10 April 2017
LAMPIRAN
Tampilan Home
RIWAYAT HIDUP
Penulis bernama lengkap Adi Wijaya dilahirkan pada tanggal 07 April
1993, putra dari pasangan Bapak Jumadi dan Ibu Siti Zahara, anak ke
2 dari 4 bersaudara. Riwayat Pendidikan dimulai dari
TK Bhayangkari Gunung Gajah, kemudian melanjutkan
Pendidikan di SD Negeri 48 Gunung Gajah, lalu
kejenjang Sekolah Menengah Pertama SMP Negeri
1Lahat. Setelah lulus SMP, penulis melanjutkan
Pendidikan ke jenjang Sekolah Menengah Kejuruan PGRI 2 Lahat. Pada
tahun 2016, penulis melanjutkan Pendidikan di PalComTech. Selama di
palcomtech penulis aktif mengikuti kegiatan yang ditawarkan oleh
PalComTech dan terakhir kali penulis mengikut program Thread Cases
Study (TCS) dan membuat laporan dengan kategori Desain Web,
berjudul Website SMA Negeri 3 Kikim Timur dengan Menggunakan
WordPress.