UKK|2024

DOKUMEN PERANCANGAN
DAN MANUAL SINGKAT PENGGUNAAN
APLIKASI WEBSITE GALERI FOTO

(UJI KOMPETENSI KEAHLIAN)

SMK NEGERI 9 MEDAN

Di Susun Oleh :

SHANE JEREMYA VERNANDO

PASARIBU
0061307552/21.12328

KOMPETENSI KEAHLIAN :
REKAYASA PERANGKAT LUNAK
TAHUN PELAJARAN : 2023/2024

SMK Negeri 9 Medan

Jl. Patriot No. 20A Kp. Lalang – Medan Sunggal – Sumatera Utara – 20127
Telp. 061-8454350 Fax. 061-8454350
Website:www.smkn9medan.sch.id Email: smkn09medan@gmail.com
 KATA PENGANTAR

Puji syukur kepada Tuhan Yang Maha Esa, pada saat ini penulis dapat
menyelesaikan Dokumen Perancangan dan Manual Singkat Penggunaan Aplikasi ini guna
untuk mengikuti Uji Kompetensi Keahlian tahun pelajaran 2023/2024. Uji Kompetensi
Keahlian (UKK) dilaksanakan untuk mengukur kemampuan peserta uji dalam
mengerjakan tugas atau membuat suatu produk sesuai tuntutan standar kompetensi yang
telah ditetapkan oleh pemerintah. Hasil UKK dari peserta akan menjadi indikator
ketercapaian standar kompetensi lulusan dan pemberian sertifikat kompetensi yang
sangat bermanfaat di dunia kerja nantinya.

Dalam proses pembuatan Dokumen Perancangan dan Manual Singkat Penggunaan

Aplikasi ini, penulis mendapatkan banyak sekali dukungan dan bimbingan dari berbagai
pihak. Untuk itu penulis mengucapkan banyak terima kasih kepada :

1. Bapak M. Sofa Ananda S.Pd , M.Pd ,selaku Kepala Sekolah SMK Negeri 9 Medan
2. Bapak Ardiansyah, ST ,selaku Ketua Kompetensi Keahlian Rekayasa Perangkat Lunak
3. Ibu Annisah Husni Daulay, M.Kom ,selaku Guru Pembimbing penulis dalam
menyelesaikan Project UKK dan Dokumen ini.
4. Penguji Eksternal Bapak Suhardi Syahputra, S.Kom , selaku penguji dari Dunia Usaha
dan Industri.
5. Kedua Orang tua yang telah memberikan dukungan berupa moril dan materil.
6. Seluruh pihak yang telah membantu penulis dalam penyelesaian jobsheet ini. Yang
tidak dapat penulis sebutkan satu persatu.

Demikian Dokumen Perancangan dan Manual Singkat Penggunaan Aplikasi ini saya buat,
Atas perhatiannya saya ucapkan Terima Kasih.

Penulis,

Riandi Ghazwan

UKK-RPL-2024 Website Galeri Foto i

 LEMBAR PENGESAHAN PEMBIMBING

Dokumen Perancangan dan Manual Singkat Penggunaan Aplikasi

Uji Kompetensi Keahlian yang Berjudul:

APLIKASI WEBSITE GALERI FOTO

BERBASIS WEB
Disusun Oleh:

NAMA PESERTA : Shane Jeremya Vernando Pasaribu

NISN/NIS : 0061307552/21.12328
NO. PAKET SOAL : KM3063-P3-23/24
PAKET SOAL : PAKET - 3
KOMPETENSI KEAHLIAN : REKAYASA PERANGKAT LUNAK (RPL)

Telah memenuhi syarat untuk Mengikuti Uji Kompetensi Keahlian

Pada
Program Studi : Teknik Komputer dan Informatika
Kompetensi Keahlian : Rekayasa Perangkat Lunak (RPL)
SMK Negeri 9 Medan

Medan, 25 Maret 2024

Ketua Kompetensi Keahlian, Guru Pembimbing,

ARDIANSYAH, ST ANNISAH HUSNI DAULAY, M.KOM

NIP. 19831013 201001 1 015 NIP. 19841102 201101 2 002

Kepala SMK Negeri 9 Medan

M. SOFA ANANDA S.Pd., M.Pd

NIP. 19750201 200801 1 002

UKK-RPL-2024 Website Galeri Foto ii

 LEMBAR PENGESAHAN PENGUJI

Dokumen Perancangan dan Manual Singkat Penggunaan Aplikasi

Uji Kompetensi Keahlian yang Berjudul:

APLIKASI WEBSITE GALERI FOTO

BERBASIS WEB

NAMA PESERTA : Shane Jeremya Vernando Pasaribu

NISN/NIS : 0061971542/21.12308
NO. PAKET SOAL : KM3063-P3-23/24
PAKET SOAL : PAKET - 3
KOMPETENSI KEAHLIAN : REKAYASA PERANGKAT LUNAK (RPL)

TELAH DIPERIKSA DAN DIUJI PADA TANGGAL 25 MARET 2024

OLEH :

PENGUJI INTERNAL PENGUJI EKSTERNAL

ANNISAH HUSNI DAULAY, M.KOM SUHARDI SYAHPUTRA, S.KOM

NIP. 19841102 201101 2 002 NIK. 200176091701

UKK-RPL-2024 Website Galeri Foto iii

 DAFTAR ISI

KATA PENGANTAR ............................................................................................................................................ i

LEMBAR PENGESAHAN PEMBIMBING ....................................................................................................... ii
LEMBAR PENGESAHAN PENGUJI ................................................................................................................ iii

DAFTAR ISI ......................................................................................................................................................... iv

MENGENAL APLIKASI WEB GALERI FOTO ................................................................................................ 1

1.1. Defenisi Website Galeri Foto ................................................................................................................................ 1
1.2. Manfaat dan Tujuan Aplikasi................................................................................................................................ 1
1.3. Bahasa Pemrograman Yang digunakan ........................................................................................................... 2

KONSEP PEMODELAN APLIKASI .................................................................................................................. 4

2.1. Konsep Alur Perancangan Aplikasi.................................................................................................................... 4
2.2. Use Case Diagram Aplikasi .................................................................................................................................... 6
2.3. Activity Diagram Aplikasi ...................................................................................................................................... 7
2.4. DFD (Data Flow Diagram) Aplikasi.................................................................................................................... 8
2.4.1. DFD Context ................................................................................................................................................ 8
2.4.2. DFD Level 1 ................................................................................................................................................. 8
2.4.3. DFD Level 2 ................................................................................................................................................. 9

PERANCANGAN DATABASE ........................................................................................................................ 12

3.1. Physical Data Model (PDM) ............................................................................................................................... 12
3.2. Membuat Database................................................................................................................................................ 13
3.3. Perancangan Tabel ................................................................................................................................................ 14
3.3.1. Tabel User ................................................................................................................................................. 14
3.3.2. Tabel Album ............................................................................................................................................. 15
3.3.3. Tabel Foto ................................................................................................................................................. 15
3.3.4. Tabel KomentarFoto ............................................................................................................................ 15
3.4. BackUp (Export) dan Restore (Import) Database .................................................................................... 15

DESAIN RANCANGAN USER INTERFACE/USER EXPERIENCE (UI/UX) .......................................... 16

4.1. Login ........................................................................................................................................................................... 16
4.2. Halaman Dashboard Utama ............................................................................................................................... 16

UKK-RPL-2024 Website Galeri Foto iv

4.3. Menu Halaman Album ......................................................................................................................................... 17
4.3.1. Menu Tambah Data ......................................................................................................... 17
4.3.2. Menu Edit .................................................................................................................................................. 17
4.3.3. Menu Hapus..................................................................................................................... 18
4.3. Menu Halaman Foto .............................................................................................................................................. 18
4.3.1. Menu Upload Foto ........................................................................................................... 18
4.3.2. Menu Edit .................................................................................................................................................. 19
4.3.3. Menu Hapus..................................................................................................................... 19
4.5. Halaman Beranda .................................................................................................................................................. 20
4.6. Halaman Gallery ..................................................................................................................................................... 20
4.7. Halaman CRUD (Create, Read, Update, Delete).......................................................................................... 21
4.7.1. CRUD User ................................................................................................................................................ 21
4.7.2. CRUD Album ............................................................................................................................................ 22
4.7.3. CRUD Foto ............................................................................................................................................... 22
MANUAL SINGKAT PENGGUNAAN APLIKASI ........................................................................................ 23
5.1. Kebutuhan Alat dan Bahan................................................................................................................................. 23
5.2. Instalasi Aplikasi Pendukung............................................................................................................................ 24
5.3. Fitur-Fitur Minimal dan Pembagian Privilege dalam Aplikasi............................................................. 25
5.4. Cara Kerja Penggunaan Aplikasi ...................................................................................................................... 26

LINK DOKUMENTASI GITHUB .................................................................................................................... 28

PENUTUP .......................................................................................................................................................... 29

PROFIL PESERTA UJI KOMPETENSI KEAHLIAN

LEMBAR PEMBIMBINGAN UKK

UKK-RPL-2024 Website Galeri Foto v

UKK-RPL-2024 Website Galeri Foto vi
 MENGENAL APLIKASI WEB GALERY FOTO

1.1. Defenisi Website Galeri Foto

Website galeri foto adalah sebuah situs web atau platform online yang dirancang
khusus untuk menampilkan dan mengatur koleksi foto. Dengan adanya web gallery
foto, pengguna dapat dengan mudah mengakses dan menampilkan koleksi foto
mereka melalui internet, baik untuk kepentingan pribadi maupun untuk berbagi
dengan orang lain. Hal ini dapat memungkinkan pengguna untuk menyimpan dan
mengakses koleksi foto mereka dari mana saja dengan koneksi internet.

1.2. Manfaat dan Tujuan Aplikasi

Ada berbagai macam manfaat yang dapat diperoleh dari penggunaan aplikasi web
gallery foto, seperti :
1. Website gallery foto memungkinkan pengguna untuk menyimpan koleksi foto
secara digital, mengurangi risiko kehilangan atau kerusakan foto.
2. Dengan menggunakan website gallery foto, pengguna dapat mengakses koleksi
foto mereka dari mana saja dengan koneksi internet, baik melalui perangkat
komputer, tablet, atau ponsel cerdas.
3. Website gallery foto menyediakan fitur-fitur organisasi seperti kategori dan
pencarian, yang memudahkan pengguna untuk mengatur dan menemukan foto-
foto dengan cepat.
4. Beberapa website gallery foto juga dilengkapi dengan fitur-fitur pengeditan foto
yang memungkinkan pengguna untuk meningkatkan kualitas dan estetika foto
mereka.
5. Pengguna juga dapat dengan mudah berbagi foto-foto mereka dengan orang lain
melalui tautan atau undangan khusus yang diberikan oleh website tersebut.

Tujuan dari website galeri foto adalah untuk menyediakan lingkungan yang optimal
bagi pengguna untuk mengelola, menampilkan, dan berbagi koleksi foto mereka
secara digital dengan cara yang efektif dan efisien. Dan juga memudahkan pengguna
untuk menelusuri, melihat, dan berinteraksi dengan berbagai macam foto yang
disajikan.

1
1.3. Bahasa Pemograman Yang Digunakan

Bahasa pemograman digunakan untuk membuat website gallery foto adalah:

 PHP
Bahasa pemrograman PHP (Hypertext Preprocessor) adalah bahasa
pemrograman yang digunakan terutama untuk pengembangan aplikasi web
dinamis dan pembuatan halaman web interaktif. PHP adalah bahasa
pemrograman scripting open-source yang berarti kode sumbernya dapat
diakses, dimodifikasi, dan didistribusikan oleh siapa pun. PHP awalnya
diciptakan oleh Rasmus Lerdorf pada tahun 1994, dan sejak itu telah
berkembang menjadi salah satu bahasa pemrograman paling populer untuk
pengembangan web.

 HTML
HTML (Hypertext Markup Language) adalah singkatan dari bahasa
pemrograman yang digunakan untuk membuat halaman web. HTML
memberikan struktur dasar untuk sebuah halaman web dengan menggunakan
elemen-elemen seperti teks, gambar, video, tautan, formulir, dan lain-lain.
Elemen-elemen HTML disusun dalam bentuk tag-tag yang mendefinisikan
bagian-bagian dari halaman web, seperti judul, paragraf, daftar, tabel, dan
sebagainya. HTML sendiri bukanlah bahasa pemrograman sepenuhnya,
melainkan merupakan bahasa markah (markup language) yang digunakan
untuk mendefinisikan struktur dari sebuah dokumen. Artinya, HTML
memberikan petunjuk kepada browser web tentang bagaimana halaman web
harus ditampilkan kepada pengguna.

 CSS
CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan
untuk mengendalikan tampilan dan gaya dari elemen-elemen HTML pada
halaman web. Dengan CSS, pengembang web dapat mengatur warna, ukuran,
jenis font, tata letak, dan berbagai properti lainnya dari elemen-elemen HTML.

2
 Java Script
JavaScript adalah bahasa pemrograman yang sering digunakan dalam
pengembangan web untuk membuat halaman web menjadi interaktif dan
dinamis. Berbeda dengan HTML dan CSS yang fokus pada struktur dan
tampilan halaman web, JavaScript memberikan kemampuan untuk
mengontrol perilaku halaman web untuk menambahkan interaktivitas,
animasi, validasi formulir, manipulasi data, dan banyak lagi. Dibuat pertama
kali oleh Netscape Communications Corporation pada tahun 1995, JavaScript
telah berkembang menjadi salah satu bahasa pemrograman yang paling
banyak digunakan di dunia.

3
 KONSEP PEMODELAN APLIKASI

2.1. Konsep Alur Perancangan Aplikasi

Konsep yang di gunakan untuk perancangan aplikasi website gallery foto adalah
dangan model waterfall. Metode ini memudahkan melakukan pengembangan
perangkat lunak, dengan beberapa tahapan: pemeliharaan kebutuhan,
perencanaan, desain, coding, uji coba, pengiriman, dan pemeliharaan.
 Pemahaman Kebutuhan: pengguna ingin memiliki platform untuk
menyimpan, mengatur, dan membagikan foto-foto mereka secara online.
 Perencanaan: fitur-fitur yang dibutuhkan, sistem login/registrasi, upload foto,
kategori album, like dan komentar, galeri. Spesifikasi keamanan data yang
kuat, tampilan responsif di berbagai perangkat, kecepatan akses yang baik.
 Desain: Desain UI: Desain antarmuka yang menarik dengan tata letak yang
intuitif untuk mengelola album dan foto.
Desain UX: Navigasi yang mudah, dan pengalaman pengguna yang
menyenangkan.
 Codingan: pembuatan kode program yang sesuai dengan desain sistem yang
telah disusun sebelumnya.
 Uji Coba: pengujian fungsional untuk memastikan semua fitur berjalan dengan
baik.
 Pengiriman: pengiriman website gallery foto setelah semua pengujian selesai
dan dilakukan perbaikan terakhir.
 Pemeliharaan: memastikan website tetap berjalan lancar, memperbaiki bug,
dan meningkatkan fitur berdasarkan umpan balik pengguna.

4
Pemahaman
Kebutuhan

Perencanaan

Desain

Coding

Uji Coba

Pengiriman

Pemeliharaan

5
2.2. Use Case Diagram Aplikasi
Diagram Use Case adalah salah satu jenis diagram di Unified Modeling Language
(UML) yang digunakan untuk menggambarkan interaksi antara pengguna (aktor)
dengan sistem atau aplikasi yang sedang dikembangkan. Diagram ini membantu
dalam memodelkan fungsionalitas sistem dengan cara yang mudah dipahami oleh
semua pemangku kepentingan, termasuk pengembang perangkat lunak, desainer
UI/UX, manajer produk, dan pengguna akhir.

6
2.3. Activity Diagram Aplikasi
Diagram aktivitas (activity diagram) adalah salah satu jenis diagram di Unified
Modeling Language (UML) yang digunakan untuk menggambarkan alur kerja atau
aktivitas dalam suatu proses atau sistem. Diagram ini membantu dalam
memodelkan aktivitas, tindakan, keputusan, dan aliran kontrol dari suatu proses
atau skenario tertentu. Diagram aktivitas sangat berguna dalam analisis dan
perancangan sistem yang melibatkan alur kerja yang kompleks.

User Sistem

Mulai
Menu Utama

Memvalidasi

Login
berhasil gagal

Album

Menampilkan
Membuat Beranda
Album

Foto

Memproses

Menambah
Foto
Berhasil

Memproses

Berhasil
Selesai
Halaman Utama

7
2.4. DFD (Data Flow Diagram) Aplikasi
Diagram Aliran Data (Data Flow Diagram, DFD) adalah alat visualisasi yang digunakan
untuk menggambarkan aliran data dalam suatu sistem informasi. DFD adalah bagian
penting dari analisis dan desain sistem karena membantu dalam memodelkan
proses-proses yang terjadi dalam sistem, mengidentifikasi entitas yang terlibat, serta
menunjukkan bagaimana data mengalir di antara proses-proses tersebut. Diagram ini
membantu dalam pemahaman yang lebih baik tentang bagaimana sistem berfungsi
dan bagaimana data diproses dan dipertukarkan di dalamnya.

2.4.1. DFD Context

2.4.2. DFD Level 1

8
2.4.3. DFD Level 2
DFD Level 2: Proses 1.0: Login

DFD Level 2: Proses 2.0: Register

9
DFD Level 3: Proses 3.0: Album

DFD Level 2: Proses 4.0: Foto

10
DFD Level 2: Proses 5.0: Home

11
 PERANCANGAN DATABASE

3.1. Physical Data Model (PDM)

v gallery foto

FotoID int(11) primarykey

JudulFoto text

DeskripsiFoto text

LokasiFile date varchar(255)

AlbumID int(11)

UserID int(11)

v galleryy Komentar

v gallery album Komentar ID int(11) primarykey v gallery like

AlbumID int(11) primarykey FotoID int(11) LikeID int(11) primarykey

NamaAlbum varchar(255) UserID int(11) FotoID int(11)

Deskripsi text IsiKomentar text UserID int(11)

TanggalDibuat date TanggalKomentar date TanggalLike date

UserID int(11)
v gallery user

UserID int(11) primarykey

Username varchar(255)

Password varchar(255)

Email varchar(255)

NamaLengkap varchar(255)

Alamat text

12
3.2. Membuat Database
Langkah-langkah dalam membuat database:
1. Menghidupkan Xampp

2. Membuka phpMyAdmin di Chrome dengan mengetikkan

localhost/phpMyAdmin

13
 3. Menekan tulisan New
4. Tulis nama database dan tekan tombol create

3.3. Perancangan Tabel

Perancangan tabel dalam database merujuk pada proses merancang struktur
tabel-tabel yang akan digunakan untuk menyimpan data dalam sistem basis data.
Perancangan tabel yang baik sangat penting untuk memastikan efisiensi,
integritas, dan konsistensi data dalam sistem basis data.
3.3.1. Tabel User

3.3.2. Table Album

14
 3.3.3. Table Foto

3.3.4. Table Komentar Foto

3.3.5. Table Like Foto

3.4 BackUp (Export) dan Restore (Import) Database

Membuat BackUp dan Restore Basisdata pada MySQL

1. Memback up data
 Buka Localhost/Phpmyadmin dan buka database galeri
 Masuk ke bagian Eksport
 Ubah metode Eksport dengan memilih Kustom
 Ubah tampilan hasil dalam bentuk teks
 Centangkan semua pilihan pada statement opsi pembuatan objek
 Dan untuk mengekspornya klik Kirim
2. Merestore Data
 Buka localhost/phpmyadmin dan buka database galeri
 Masuk kebagian Import
 Masukkan data pada import data setelah itu klik Kirim.

15
 DESAIN RANCANGAN USER INTERFACE/USER EXPERIENCE (UI/UX)

4.1. Login

Halaman login dirancang untuk meminta pengguna untuk memasukkan kredensial

autentikasi, seperti nama username/email dan kata sandi. Ini adalah langkah
pertama dalam proses autentikasi yang membantu memastikan hanya pengguna
yang sah yang dapat mengakses informasi atau melakukan tindakan tertentu
dalam suatu sistem.

4.2. Halaman Dashboard Utama

Halaman dashboard utama berfungsi agar pengunjung dapat melihat foto-foto yang
di bagikan oleh para pengguna.

16
4.3. Menu Halaman Album

4.3.1. Menu Tambah Data

Fungsi menu ini adalah untuk memberikan pengguna akses untuk

memasukkan data album baru ke dalam aplikasi website gallery foto.

4.3.2. Menu Edit Data

Fungsi menu ini adalah untuk mengedit data album(Nama Album dan
Deskripsi)

17
 4.3.3. Menu Hapus Data

Fungsi menu ini adalah untuk menghapus album dan data album

4.4. Menu Halaman Foto

4.4.1. Menu Upload Foto

Fungsi menu ini adalah untuk memberikan pengguna akses untuk

memasukkan data foto dan foto ke dalam aplikasi website gallery foto.

18
4.4.2. Menu Edit

Fungsi menu ini adalah untuk mengedit data foto(Judul Foto, Deskripsi Foto,
dan mengganti Album Foto).

4.4.3. Menu Hapus

Fungsi menu ini adalah untuk menghapus foto dan data foto

19
4.5. Halaman Gallery

Halaman ini berisi foto dan album milik pengguna itu sendiri.

4.6. Halaman CRUD (Create, Read, Update, Delete)

Halaman CRUD merujuk pada halaman web atau antarmuka pengguna yang
dirancang untuk melakukan empat operasi dasar terhadap entitas dalam sistem basis
data, yaitu Create (membuat), Read (membaca), Update (memperbarui), dan Delete
(menghapus), yang sering disingkat sebagai operasi CRUD.

20
4.7.1 CRUD User

Halaman ini berisi formulir yang harus diisi dengan informasi pribadi
seperti na, alamat email, password, dan informasi lainnya yang untuk
dapat masuk ke dalam website gallery foto.

21
4.7.2. Crud Album

Halaman ini berfungsi agar pengguna dapat membuat, membaca,

memperbarui, dan menghapus (CRUD) data album dengan mudah melalui
antarmuka yang terstruktur.

4.7.3. Crud Foto

Halaman ini berfungsi agar pengguna dapat membuat, membaca,
memperbarui, dan menghapus (CRUD) data foto dengan mudah melalui
antarmuka yang terstruktur.

22
 MANUAL SINGKAT PENGGUNAAN APLIKASI

5.1. Kebutuhan Alat dan Bahan

Untuk membuat website gallery foto memerlukan alat dan bahan sebagai berikut:

No. Nama Spesifikasi Minimal Jumlah Keterangan

Alat dan Bahan

1 2 3 4 5
1. Komputer (PC/Laptop) yang - Prosesor : Dual Core 1 Unit Baik
difungsikan sebagai server 2,4 GHz (2,93GHz untuk yang
memilih platform mobile)
- RAM : 2 GB (4GB
untuk yang memilih platform
mobile)
- Keyboard
- Mouse
- Monitor
2. Komputer (PC/Laptop) yang - Prosesor : Dual Core 1 unit Baik
difungsikan sebagai client 2,4 GHz (2,93GHz untuk yang
memilih platform mobile)
- RAM : 2 GB (4GB
untuk yang memilih platform
mobile)
- Keyboard
- Mouse
- Monitor
3. Smart Phone Android /IOS 1 unit Baik
4. Koneksi Internet Minimal 1 Mbps Baik

23
5.2. Instalasi Aplikasi Pendukung

a. Instalasi Xampp
Untung mengistal xampp silahkan ikuti petunjuk berikut:
 Klik dua kali pada file xampp yang sudah berhasil di download
 Apabila muncul jendela ini , pilih Yes
 Setelah itu akan muncul jendela ini klik tombol next
 Selanjutnya akan muncul pilihan mengenai komponen mana dari XAMPP
yang ingin dan tidak ingin Anda instal. Beberapa pilihan seperti Apache
MySQL dan PHP adalah bagian penting untuk menjalankan website dan akan
otomatis diinstal. Setelah itu klik tombol next.
 Berikutnya silakan pilih folder tujuan dimana XAMPP ingin Anda instal.
Contohnya di direktori C:\xampp.
 Pada langkah ini proses instalasi XAMPP akan dimulai.
 Setelah berhasil diinstal, akan muncul notifikasi untuk langsung
menjalankan control panel. Silakan klik Finish, Jalankan Xampp.

b. Instalasi Visual Studio Code

Ikuti langkah-langkah berikut untuk menginstal Visual Studio Code:
1. Di browser web, buka code.visualstudio.com
2. Unduh versi untuk sistem operasi Anda, mendukung Windows, Linux, dan
macOS.
3. Klik "I accept the agreement" dan klik Next.
4. Klik Next, untuk setiap jendela yang muncul.
5. Setelah itu akan muncul select Additional Tasks, Ceklis semua dan klik Next.
6. Setelah itu akan muncul jendela ready to install, klik Instal. Tunggu sampai
proses intalasi selesai, lalu klik finish

c. Instalasi Bootstrap
Ikuti Langkah-langkah berikut ini untuk mendownload bootstrap:
 silahkan buka web resmi Bootstrap di getbootstrap.com, lalu klik
tombol Download yang ada di tengah halaman, Lalu kemudian klik kanan
pada file tersebut untuk mengekstraknya di tempat penyimpanan yang di
inginkan.

24
5.3. Fitur-Fitur Minimal dan Pembagian Privilege dalam Aplikasi

Fitur-fitur minimal dalam aplikasi mengacu pada serangkaian fungsionalitas dasar

yang diperlukan agar aplikasi dapat berfungsi secara minimal. Ini adalah set fitur
yang diperlukan untuk memenuhi kebutuhan dasar pengguna atau tujuan aplikasi,
tanpa fitur tambahan yang mungkin dianggap sebagai peningkatan atau opsi. Fitur-
fitur ini biasanya merujuk pada inti dari apa yang aplikasi seharusnya lakukan, yang
mana akan memberikan nilai yang paling tinggi kepada pengguna.

1.
Fitur User Terdaftar Belum Terdaftar
Login X

Logout X
Registrasi X X
Data Foto/galery X
Hapus Foto X
Tambah Foto X

Fitur-Fitur Minimal:

1. Tambah Album: Pengguna dapat menambahkan daftar album baru.

2. Hapus Album: Pengguna dapat menghapus album.
3. Edit Data Album: Pengguna dapat mengedit nama dan deskripsi album.
4. Upload Foto: Pengguna dapat mengunggah foto ke galeri.
5. Hapus Foto: Pengguna dapat menghapus data foto.
6. Edit Data Foto: Pengguna dapat mengedit Judul dan deskripsi foto.

Pembagian Privilage dalam Aplikasi:

1. Pengguna Terdaftar: dapat membuat gallery, mengunggah foto, melihat

gallery, mengedit data foto dan album mereka sendiri, menghapus foto dan
album mereka sendiri, menglike foto dan mengomentari foto.
2. Pengunjung: Hanya dapat melihat foto.

25
5.4. Cara Kerja Penggunaan Aplikasi

1. Login atau Registrasi:

 Buka aplikasi web gallery foto.
 Jika sudah memiliki akun silahkan login
(Username/email dan Password).
 Jika belim memiliki akun, silahkan daftar dengan mengisi formular registrasi.
2. Tampilan Gallery:
 Setelah login, pengguna akan di arahkan ke halaman utama.
 Disini pengguna dapat melihat foto-foto yang di upload oleh pengguna lain
atau oleh dirinya sendiri.
3. Membuat Album:
 Klik halaman album.
 Massukan nama album dan deskripsi album.
 Tekan tombol “Tambah Album” untuk memasukkan album ke dalam gallery
foto.
4. Unggah Foto:
 Klik halaman foto.
 Tambahkan Judul dan deskripsi foto, pilih di album mana foto tersebut akan
di lettakkan
 Pilih foto.
 Klik tombol “Upload Foto” untuk memasukkan foto ke dalam website gallery
foto.
5. Tampil Foto:
 Klik halaman beranda atau home, untuk memastikan foto sudah tampil di
website.
6. Edit dan Hapus Album:
 Pengguna dapat mengedit data album miliknya sendiri dengan menekan
tombol edit.
 Pengguna juga dapat menghapus data album miliknya sendiri dengan
menekan tombol hapus.

26
7. Edit dan Hapus Foto:
 Pengguna dapat mengedit data foto miliknya sendiri dengan menekan menu
edit.
 Pengguna juga dapat menghapus foto dan data foto miliknya dengan menekan
menu hapus.
8. Keluar dari Aplikasi:
 Setelah selesai menggunakan aplikasi, pengguna akan memastikan untuk
keluar dari akun miliknya emi menjaga keamanan.
 Gunakan opsi logout pada menu navigasi.

27
 LINK DOKUMENTASI GITHUB

https://shanepsrb.github.io/ukk_galeri/

28
 PENUTUP

Kesimpulan:

1. Dengan adanya galeri foto yang terstruktur dan menarik pada sebuah website,
pengguna dapat menikmati pengalaman yang lebih menyenangkan dan mudah dalam
menjelajahi koleksi foto.
2. Website galleri foto memberikan platform yang efektif sehingga pengguna dapat
mempresentasikan karya, produk, atau cerita dengan cara yang visual dan
mengundang minat.
3. Website gallery foto bermanfaat bagi pengguna, sehingga dapat dengan mudah
menyimpan, mengelola, dan menikmati koleksi foto mereka secara digital. Bukan
hanya itu tetapi juga sebagai wadah yang memungkinkan pengguna untuk
mengabadikan momen berharga dan berbagi pengalaman kepada dunia dunia.
4. Galeri foto juga menyediakan fitur download yang dapat membuat user
mendownload dan menyimpan foto yang mereka suka secara offline.

Saran:

1. Penting untuk meningkatkan dan memperkuat keamanan data pengguna, untuk

melindungi dat apengguna dan foto-foto mereka.
2. Perlu adanya aturan yang dibuat oleh komunitas yang dapat mengatur konten-
konten UGC(User Generated Content) agar dapat diterima di semua kalangan, atau
penambahan sistem admin yang dapat menindak lanjuti foto/akun yang menyalahi
aturan.
3. Menambahkan fitur pencarian agar memudahkan pengguna untuk menemukan foto
secara lebih spesifik.

29