PROJECT UAS MKDU

PEMROGRAMAN WEB BERBASIS CMS

Disusun Oleh :

Okta Fitriani (2011102431247)

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 Kulit

Link Website : https://dev-molpibeautycare.pantheonsite.io/

Youtube : https://youtu.be/W8bnBUq7U_0

Screenshoot halaman utama/home :

Nama : Okta Fitriani

NIM : 2011102431247
 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 ataupun kulit yang mungkin berguna untuk
pembaca. Manfaat website yang saya buat yaitu dapat memberikan informasi ataupun
rekomendasi seputar brand Nature Republic ini, entah itu perawatan kulita atau
perawatan wajah. Pembaca juga dapat melihat review-review dari para pengguna
brand Nature Republic 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 situs “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) :

Karena Wordpress nya dalam bentuk rar, maka kita ekstrak file tersebut. Lalu nama
file yang awalnya Wordpress kita bisa ubah dengan nama yang sesuai dengan konten
yang akan kita buat.
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.

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 (jika ada peringatan Windows
Security Alert, di Allow access saja) :

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 “molpibeautycare.id” lalu klik
buat.
Lalu akan mucul popup “database molpibeautycare.id telah berhasil dibuat”. dan
dibawah menu “baru” akan ada folder “molpibeautycare.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.

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 “molpibeautycare”. 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” :

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 : Okta Fitriani

Sandi nya : molpi231002_

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 octafitriani88@gmail.com
jadi kita tulis saja octafitriani88@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 :

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.

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.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
adamenu status dan visibilitas, permalink, kategori, tag, gambar andalan dan lain-lain.

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 :
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.

Kita coba lagi untuk membuat laman. Pembuatan laman/halaman tidak berbeda jauh
dari pos, yang berbeda hanya difungsinya saja. Lama biasa digunakan untuk membuat
halaman disamping atau dibawah home atau postingan, seperti kontak, galeri, privacy
policy, dan sebagainya.

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 Chic 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.
Setelah diaktifkan, kita akan dibawa pada tampilan dibawah ini, di tampilan ini kita
dapat mengatur atau mempratinjau isi ataupun tampilan dari web kita.
Kita pindah dari pengaturan tema, kita ke pengaturan menu. Pada bagian ini kita dapat
mengatur pos, kategori, atau laman yang akan muncul dalam menu diwebsite kita.

Setelah dirasa sudah mengatur semua yang akan muncul pada website yang kita buat.
Kita akan menghosting atau mengaktifkan web yang akan kita buat agar dapat dilihat
oleh orang lain atau para pembaca.

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 yang saya inginkan yaitu
molpibeautycare dan website ini dibuat guna pengerjaan projek mata kuliah
pemograman web berbasis cms. molpibeautycare dibuat pada tanggal 2 2
D e s e m b e r 2 0 2 1 . Pemberian atas tema yang akan di paparkan di dalam
wordpressnya beranega ragam, tidak hanya mengankan satu topik saja namun
berbagai topik. Contohnya tentang profil perusahaan, tentang skin care, face care, dan
mereview penggunaan produk. Konten yang disuguhkan didalamnya menggunakan
berbagai macam media seperti teks, gambar dan video.