PROJEK UAS WEB CMS

PEMOGRAMAN WEB BERBASIS CMS

Disusun Oleh :

Yeyen Afera (2011102431274)

Dosen Pengampu :

Abdul Rahim, S.Kom., M.Cs.

Program Studi S1 Manajemen Kelas MKDU T

Fakultas Ekonomi Bisnis dan Politik

Universitas Muhammadiyah Kalimantan Timur

2021
Topik web : Blogging tentang Perawatan Tubuh dan Rambut

Link web : https://dev-ferabeautycare.pantheonsite.io/

Link Youtube : https://youtu.be/eu5OpUhAOCY

Screenshot :

Nama : Yeyen Afera

Nim : 2011102431274
 BAB I
PENDAHULUAN

Latar belakang dan tujuan saya mengambil tema ini karena saya sangat senang
berbagi informasi dan ingin berbagi tentang berbagai macam informasi yang
berhubungan dengan perawatan wajah, tubuh ataupun rambut yang mungkin berguna
untuk pembaca. Manfaat website yang saya buat yaitu dapat memberikan informasi
ataupun rekomendasi seputar brand Scarlett ini, entah itu perawatan tubuh, rambut atau
perawatan wajah. Pembaca juga dapat melihat review-review dari para pengguna brand
Scarlett ini.

BAB II
DESAIN WEB
Tutorial pembuatan website :

CMS sendiri merupakan kepanjangan dari content management system, yang

berfungsi untuk memudahkan pada saat kita membuat sebuah website.

Pertama yang kita siapkan adalah xampp

XAMPP berfungsi sebagai web server secara lokal pada komputer atau laptop kita. kita
dapat download di apachefriends.org/index.htm. Karena kita menggunakan sistem
operasi windows maka kita klik yang xampp for windows, setelah itu proses download.
hasilnya ada di folder downloads, setelah itu kita install :
Muncul tampilan seperti ini, kita Oke saja kita next sampai selesai :

Proses Instalasi xmpp sesungguhnya hanya install lalu oke, next sampai selesai (ikuti
petunjuk saja) :
Untuk melihat folder installnya kita bisa lihat di direktori C lalu ada pada folder xampp :

Langkah selanjutnya yaitu kita download Wordpress

Nah kenapa WordPress karena WordPress ini sendiri adalah aplikasi CMS yang akan
kita gunakan Untuk membangun websitenya

Untuk mendownload WordPress. Kita bisa download pada situsi “id.

wordpress.com/download/” :

Tampilan website nya akan muncul link “Unduh WordPress”. biasanya langsung
Wordpress versi terbaru. :
Setelah di klik link download-nya Ditunggu saja sampai downloadnya selesai lalu kalau
sudah selesai kita buka file downloadnya biasanya ada di drive C di folder download
sesuaikan saja nama file yang sudah didownload file downloadnya itu sendiri biasanya
berbentuk (.rar) :

Langkah selanjutnya yaitu itu kita copy file yang telah yang telah kita download dalam
drive C => folder Xampp => folder htdocs Lalu paste file wordpress nya di
dalam folder htdocs :
Setelah itu file rar tadi kita ekstrak caranya Klik Kanan lalu pilih extract hereSetelah
itu pastikan bahwa foldernya sudah terekstrak nanti foldernya bernama Wordpress lalu
diganti dengan nama ferabeautycare.id

Langkah selanjutnya yaitu kita perlu mengaktifkan Apache dan My SQL nya yang ada
di Xampp control panel.

Caranya klik di menu search windows Lalu ketik “xmpp control panel” enter Setelah
muncul tampilan xampp control panel di situ ada menu modul mySQL, apache dll. kita
cukup perlu mengaktifkan modul mySQL dan modul Apache saja. Caranya dengan
mengubah status dari stop menjadi start :
Indikator aktifnya adalah nanti akan muncul angka-angka pada menu port. Dan perlu
dipastikan angka yang ada pada modul port Itu biasanya port 80. Namun di Tampilan
kali ini angkanya adalah 8080, kenapa angkanya 8080? karena sebelumnya itu sudah
pernah saya custom dan angka tersebut nanti akan berpengaruh saat kita membukanya
di web browser.

Oke Langsung saja kita coba buka pada web browser, bisa dengan Mozilla Firefox
ataupun Google Chrome. kita coba dengan google chrome setelah itu bisa diketikkan
pada kolom URL Yaitu “localhost:8080” Atau Caranya pada alamat url itu kan
sebelumnya localhost: 8080/dashboard diganti menjadi localhost:8080/phpmyadmin
lalu enter :
Dan akan muncul tampilan seperti pada gambar. ini adalah tampilan awal database kita.
untuk membuat database baru klik menu “baru” pada sebelah kiri atas tampilan. Setelah
itu kita beri nama. contohnya kita beri nama “ferabeautycare.id” lalu klik buat :

Lalu akan mucul popup “database ferabeautycare.id telah berhasil dibuat”. dan dibawah
menu “baru” akan ada folder “ ferabeautycare.id” (folder database yang baru kita buat)

Selanjutnya kita perlu install wordpress yang sebelumnya telah kita masukkan kedalam
folder htdocs. (ingat nama foldernya)

Caranya ketik localhost:8080/(nama folder) => localhost:8080/wordpress lalu enter

Dan akan muncul tampilan “selamat datang di wordpress”. ini adalah tampilan awal
wordpress kita. selanjut klik menu “ayo” pada tampilan tersebut :

Tampilannya akan berubah disini Dan kita perlu melengkapi setiap kolom data yang
diperlukan seperti nama basis data, nama pengguna, sandi, basis data dan prefiks tabel
Nah untuk nama basis data yang sendiri karena tadi folder yang kita bikin adalah
namanya itu CMS maka Kita sesuaikan dengan nama folder tersebut Lalu kita isi
menjadi kita Ubah menjadi “ferabeautycare.id”

Dan untuk nama penggunaannya secara default kita ubah menjadi “root” :

Dan untuk sandi kita kosongkan saja atau hapus default nya. Dan sisanya kita biarkan
saja host basis data dan prefix tabel kita biarkan seperti semula lalu kita Klik tombol
“kirim” :
Selanjutnya klik lagi “jalankan pemasangan” :

Nah akan muncul tampilan “Selamat datang” ya lalu kita isi juga data-data yang
dibutuhkan disini seperti judul situs, ini kita isi sesuai dengan kebutuhan kita atau
keinginan kita.

Nama pengguna dan Sandi ini nantinya akan digunakan sebagai username login pada
menu administrator CMS kita. agar memudahkan nama penggunanya ditulis saja :

nama pengguna : Yeyen Afera

Sandi nya : marvelsurabaya123__

Pastikan nama pengguna dan sandinya mudah diingat, jangan sampai lupa dan jangan
sampai ada orang lain yang tahu Karena jika orang lain mengetahui nama dan Sandi ini
maka nantinya bisa digunakan oleh user lain dan nanti bisa diubah-ubah website kita

Lalu isi email anda, nah sebelumnya saya sudah buat email yeyenafera61@gmail.com
jadi kita tulis saja yeyenafera61@gmail.com karena email ini harus bisa tervalidasi :

Lalu pastikan lagi semua kolom sudah kita isi dan jangan sampai lupa nama pengguna
dan Sandi setelah itu klik install Wordpress Kita tunggu prosesnya yang sedikit
membutuhkan waktu :
Nah jika berhasil, tampilannya akan berubah menjadi Seperti ini

Setelah diinstall “terima kasih dan selamat bekerja” Langsung saja kita coba login pada
menu log masuk kita klik saja, lalu muncul tampilan login dan kita hanya perlu mengisi
nama pengguna dan Sandi yang telah kita buat tadi

Nah selanjutnya kita coba buka website wordpress kita dengan mengubah alamat url
menjadi “localhost/ferabeautycareid/wp-admin/ enter :
Dan akan muncul tampilan dasboard. inilah yang disebut cms Atau content
management system. Disini ada beberapa menu, yang pertama beranda, pembaruan
lalu dibawahnya ada pos, media, laman komentar, tampilan, pengguna, peralatan,
pengaturan ini memiliki fungsi yang berbeda-beda :

Contohnya pada menu POS, Coba kita klik Lalu klik semua Pos lalu akan muncul
Semua post yang ada pada tampilan WordPress kita :
Nah ini Ada Judul halo dunia, lalu coba kita cek di tampilan WordPress kita, nah seperti
ini sama ya “halo dunia”

Kalau misalnya kita ingin mengubah judul tadi caranya mudah, cukup ceklis saja
disebelah judul lalu kita klik buang tong sampah dan otomatis akan terhapus

Lalu untuk menambahkan judul baru, disebelah kata POS itu ada menu “tambah baru”
kita klik saja menu tambah baru :

Lalu klik berikut dan ikuti sampai selesai, Lalu akan muncul tampilan “tambahkan
judul”, ini adalah menu untuk menambahkan judul konten yang akan kita buat, kita bisa
bebas menuliskan judul apa saja yang ingin kita tampilkan di tampilan WordPress kita
Contohnya kita tulis “judul konten” :

Dan dibawah judul konten setelah garis itu adalah isi konten web CMS nya ya bebas
mau ditulis apa saja sesuai konten. disini bisa kita tulis sebagai contoh adalah “isi
konten buat cms”

Lalu kita bisa mengubah seluruh tampilan webnya ya, caranya ada pada menu
pengaturan di pojok kanan atas kita klik saja pengaturan

Setelah itu ada 2 menu yaitu POS dan BLOCK Coba kita buka di menu POS situ ada
menu status dan visibilitas, permalink, kategori, tag, gambar andalan dll.
Status visibilitas dan permalink kita biarkan default saja :,

Coba kita buka menu Kategori, Nah kategori ini berguna untuk mengkategorikan
WordPress kita itu termasuk dalam kategori apa secara default menu kategori ini
biasanya awalnya tak berkategori. Kita bisa menambahkan kategorinya, caranya klik
“tambah kategori baru” lalu isi kolom-kolom yang dibutuhkan, seperti nama kategori
baru kita isi dengan Judul konten atau konten. pakai kategori induk lalu klik tambah
kategori baru dan akan muncul kategori “konten” yang baru saja kita buat. lalu kita
ceklist.

Lalu menu Tag, kita bisa menambahkan tag dalam website, contohnya kita ingin
menambahkan tag konten baru lalu untuk memisahkannya cukup dengan mengenter
“konten baru” enter lalu “terbaru” enter “baru” enter dan sudah ada beberapa tag.
Selanjutnya kita juga bisa menambahkan gambar pada menu gambar andalan klik saja
lalu tambahkan gambar bisa pilih berkas Pilih Saja gambar mana yang ingin kita jadikan
gambaran dalam Lan lalu open lik tetapkan gambar unggulan pada pojok kanan bawah.

Apabila telah selesai pengaturannya kita bisa klik menu terbitkan yang ada pada
tampilan pojok kanan atas di sebelah pengaturan klik terbitkan Apabila berhasil maka
akan ada notifikasi pos diterbitkan :
Nah kita bisa coba menampilkan post yang telah kita terbitkan tadi klik saja Tampilkan
pos nah ini akan muncul tampilan website kita seperti yang telah kita atur tadi judul
konten lalu ada gambarnya dan ada isi konten nya serta bisa ditambahkan komentar.

Pemilihan tema

Saya memilih template ini karena bagus, enak dilihat, dan menurut saya sesuai dengan
konten saya.
Selanjutnya kita bisa menetapkan tema pada menu tampilan. Pada menu tampilan ini
banyak pilihannya, salah satunya untuk mengatur tema.

Pilihan tema yang disediakan banyak ragamnya, maka pilihlah tema yang sesuai dengan
konten, terlihat bagus, rapi, dan sekiranya nyaman dan dapat memudahkan para
pembaca.
Pada website yang saya buat, saya memilih tema Blossom PinThis karena menurut saya
website jadi tidak terlalu tertlihat monoton itu-itu saja, nyaman dilihat ataupun
digunakan, dan sesuai dengan konten yang saya buat. Setelah ditetapkan tema apa yang
akan digunakan, klik instal dan akan langsung memasang secara otomatis, setelah
terpasang akan ada kolom untuk aktifkan, ikuti saja langkah-langkahnya.

Mengaktifkan Web

Untuk mengaktifkan, saya menggunakan web hosting yaitu Pantheon.io, kita bisa klik
web pantheon.io ini di google. Karena kita menggunakan yang gratis, maka klik yang
start for free.
Kita bisa sign up terlebih dahulua, dan mengisi apa-apa saja yang dibutuhkan dan
dicentang semua kolom untuk centang.

Setelah sudah semua untuk registrasi, kita akan masuk pada tampilan dashboard
pantheon.io ini, dan langsung saja klik create new site.

Kalian bisa lihat tampilan selanjutnya yaitu create pantheon site. Isi nama pantheon site
dan memilih region for the site kita pilih Australia, lalu continue.
Selanjutnya ada pilihan, kita pilih wordpress dan klik deploy. Lalu ditunggu sebentar untuk
proses deploying wordpress nya, lama atau tidaknya bisanya tergantung jaringan atau
kecepatan dari laptopnya.
Jika sudah selesai atau complete, klik visit your pantheon site dashboard. Lalu kita masuk
pada tampilan selanjutnya dan klik visit development site.
Pada tampilan selanjutnya kita akan disuguhkan untuk installasi wordpress kembali.
Mungkin disini kita lewati saja karena caranya sama seperti diawal pada saat
menginstall wordpress.

Setelah proses installasi selesai, kita akan masuk pada tampilan dashboard wordpress
kembali tetapi didalam link web yang berbeda. Langsung saja kita lanjut memasang
plugin terlebih dahulu, saya menggunakan all in one wp migration untuk pluginnya.
Kita memasang dua plugin, yaitu di web pantheon dan di localhost dengan plguin yang
sama dan dengan cara yang sama pula.

Kita klik new plugin untuk proses penginstallannya, selanjutnya klik unggah plugin,
Lalu pilih file yang sudah disebutkan sebelumnya, dan klik install sekarang. Setelah
terpasang klik aktifkan sekarang.

Setelah itu akan muncul dibagian bawa menu peralatan.

Selanjutnya all in one wp migration ini kita klik, pada localhost kita pilih ekspor dan
pada pantheon kita pilih impor. Tetapi lakukan satu persatu, ekspor yang di localhost
terlebih dahulu tunggu hingga selesai proses tersebut lalu download hasil eksportnya.
Selanjutnya kita pindah ke pantheon, klik all in one wp migration lalu klik impor, dan
pilih file yang sudah didownload sebelumnya.

Lalu tunggu sebentar sampai selesai proses impornya.

Setelah selesai proses pengimporan, website kita sudah selesai dihosting. Website kita sudah
aktif dan sudah dapat diakses.

BAB III

KESIMPULAN

Website ini berjudul sesuai dengan nama saya yaitu ferabeautycare.id agar
orang orang mengetahui bahwa saya yang membuat website ini dan dibuat guna
pengerjaan projek mata kuliah pemograman web berbasis cms, ferabeautycare.id
dibuat pada tanggal 2 2 D e s e m b e r 2021. Pemberian atas tema yang akan di
paparkan di dalam wordpressnya beranega ragam, tidak hanya mengankan satu topik
saja namun berbagai topik. Contohnya tentang tentang profil produk, yaitu tentang
body care, face care, hair care dan mereview penggunaan produk. Konten yang
disuguhkan didalamnya menggunakan berbagai macam media seperti teks, gambar
dan video.