TUGAS PROJEK AKHIR PEMROGRAMAN WEB I

“RANCANG BANGUN WEBSITE COMPANY PROFILE SEKOLAH

SDN BANDENGAN 02 PEKALONGAN”

Dibuat Oleh :

Nama : Ichsan Purnomo Aji

NIM : 19.240.0021

Kelas : 3P43

TEKNIK INFORMATIKA MOBILE APPLICATION

STMIK WIDYA PRATAMA PEKALONGAN

JL. SELAT KARIMATA III, PEKALONGAN

 STMIK WIDYA PRATAMA Pemrograman Web I

DAFTAR ISI

Halaman Judul ................................................................................................................1

Daftar Isi ..........................................................................................................................2

Daftar Gambar ...............................................................................................................4

BAB I Pendahuluan ........................................................................................................5

1. Latar Belakang ...................................................................................................5

2. Tujuan dan Manfaat ..........................................................................................6
3. Batasan Masalah .................................................................................................6

BAB II Kajian Pustaka ..................................................................................................7

1. Landasan Teori ...................................................................................................7

A. Company Profile .....................................................................................7
B. Website ....................................................................................................7
C. Text Editor ..............................................................................................8
D. HTML ......................................................................................................8
E. CSS ...........................................................................................................8
F. JavaScript ................................................................................................9
G. JQuery .....................................................................................................9
2. Penelitian Terdahulu ..........................................................................................9

BAB III Rancangan dan Pembahasan ........................................................................11

1. Desain / Rancangan / Layout Website ............................................................11

2. Pembahasan Website ........................................................................................18
3. ScreenShoot Website ........................................................................................18
4. Domain dan Hosting .........................................................................................27

BAB IV Kesimpulan dan Saran ..................................................................................28

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 2

 STMIK WIDYA PRATAMA Pemrograman Web I

1. Kesimpulan ........................................................................................................28
2. Saran ..................................................................................................................28

Referensi / Daftar Pustaka ...........................................................................................29

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 3

 STMIK WIDYA PRATAMA Pemrograman Web I

DAFTAR GAMBAR

Daftar Gambar Mockup ..............................................................................................11

a. Gambar 1.1 ........................................................................................................11

b. Gambar 1.2 ........................................................................................................12
c. Gambar 1.3 ........................................................................................................13
d. Gambar 1.4 ........................................................................................................14
e. Gambar 1.5 ........................................................................................................15
f. Gambar 1.6 ........................................................................................................16
g. Gambar 1.7 ........................................................................................................17

Daftar Gambar Web ....................................................................................................18

a. Gambar 2.1.........................................................................................................18
b. Gambar 2.2 ........................................................................................................19
c. Gambar 2.3 ........................................................................................................19
d. Gambar 2.4 ........................................................................................................20
e. Gambar 2.5 ........................................................................................................20
f. Gambar 2.6 ........................................................................................................21
g. Gambar 2.7 ........................................................................................................21
h. Gambar 2.8 ........................................................................................................22
i. Gambar 2.9 ........................................................................................................23
j. Gambar 2.10 ......................................................................................................23
k. Gambar 2.11 ......................................................................................................23
l. Gambar 2.12 ......................................................................................................24
m. Gambar 2.13 ......................................................................................................24
n. Gambar 2.14 ......................................................................................................25
o. Gambar 2.15 ......................................................................................................25
p. Gambar 2.16 ......................................................................................................26
q. Gambar 2.17 ......................................................................................................26

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 4

 STMIK WIDYA PRATAMA Pemrograman Web I

BAB I

PENDAHULUAN

1. Latar Belakang

Sekolah Dasar (SD) Negeri Bandengan 02 Pekalongan adalah salah

satu sekolah dasar yang berada di daerah pekalongan utara tepatnya di
Bandengan. SDN Bandengan memiliki visi yang menekankan bahwa SD ini
ingin membentuk insan yang bertaqwa, cerdas, terampil & mandiri,
berkepribadian baik dan siap melanjutkan pendidikan. Promosi SDN
Bandengan 02 Pekalongan masih bersifat manual, dimana penyebaran
informasi tentang SDN Bandengan 02 Pekalongan masih menggunakan
spanduk, informasi dari mulut ke mulut, dan juga hanya akan mencakup
suatu daerah tertentu saja. Dampaknya dari promosi yang sudah dilakukan
pada SDN Bandengan 02 Pekalongan secara umum adalah penyebaran yang
dilakukan kurang meluas, sehingga masyarakat yang berada pada daerah lain
tidak mengetahui informasi tentang SDN Bandengan 02 Pekalongan. Dari
promosi SDN Bandengan 02 Pekalongan yang sudah penyusun amati,
penyusun ingin memberikan solusi berupa Rancang Bangun Website
Company Profile. Website ini nantinya akan bermanfaat bagi SDN
Bandengan 02 Pekalongan, karena mencakup gambaran umum perusahaan,
dimana nantinya Website ini akan manjadi penunjang promosi SDN
Bandengan 02 Pekalongan. Sehingga Penyebaran informasi tentang SDN
Bandengan 02 Pekalongan dapat tersebar secara luas selain itu web ini
diharapkan mampu memberikan informasi untuk kalangan masyarakat baik
di area sekitar SDN Bandengan 02 Pekalongan maupun di luar area SDN
Bandengan 02 Pekalongan itu sendiri.

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 5

 STMIK WIDYA PRATAMA Pemrograman Web I

Berdasarkan latar belakang diatas, maka penulis ingin membuat

sebuah website pada SDN Bandengan 02 Pekalongan, website tersebut akan
berisi informasi: Profil Sekolah, Visi dan Misi, struktur sekolah, galeri
sekolah, Ekstrakulikuler, kontak sekolah, berita sekolah, serta alamat
sekolah dan juga Map sekolah SDN Bandengan 02 Pekalongan berada.

2. Tujuan dan Manfaat

Berdasarkan latar belakang diatas, maka dapat dirumuskan tujuan

sebagai berikut: Merancang dan membangun sebuah website Company
Profile berbasis web pada SDN Bandengan 02 Pekalongan.
Sedangkan manfaatnya yaitu, dapat digunakan sebagai media
promosi pada SDN Bandengan 02 Pekalongan, dan dapat diakses dengan
mudah oleh kalangan masyarakat luas baik disekitar SDN Bandengan 02
Pekalongan maupun di luar SDN Bandengan 02 Pekalongan.

3. Batasan Masalah

Untuk mempermudah pelaksanaan pembuatan website ini dan

masalah yang dihadapi tidak terlalu luas, pada pembuatan aplikasi
membatasi masalah sebagai berikut:
1. Bahasa pemrograman yang digunakan dalam membangun aplikasi
berbasis web ini adalah HTML, JavaScript, dan Jquery.
2. Website sebagai informasi Company Profile dan akan dibuat website
dengan fitur gambaran umum Sekolah, Visi dan Misi Sekolah, Fasilitas, dan
Ekstrakulikuler

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 6

 STMIK WIDYA PRATAMA Pemrograman Web I

BAB II

KAJIAN PUSTAKA

1. Landasan Teori

A. Company Profile
Company profile adalah bentuk ringkasan perkenalan
profesional tentang sebuah perusahaan. Company profile  biasanya
dapat ditemukan pada situs resmi perusahaan untuk memberikan
gambaran informasi penting kepada audiens  tentang bisnis
perusahaan seperti kisah berdirinya perusahaan, produk, layanan dan
posisi brand di pasar. Company profile dapat mempengaruhi kesan
pertama audiens, klien atau calon investor terhadap perusahaan.
Karena itu, profil perusahaan harus dirancang dengan baik sehingga
dapat membuat perusahaan terlihat unik dan menonjol dibanding
para pesaingnya (Maria Tri Handayani, 2020).

B. Website
Website dapat diartikan sebagai suatu kumpulan-kumpulan
halaman yang menampilkan berbagai macam informasi teks, data,
gambar diam ataupun bergerak, data animasi, suara, video maupun
gabungan dari semuanya, baik itu yang bersifat statis maupun yang
dinamis, dimana membentuk satu rangkaian bangunan yang saling
berkaitan dimana masing-masing dihubungkan dengan jaringan
halaman atau hyperlink. Definisi secara umum, website adalah
kumpulan dari berbagai macam halaman situs yang terangkum di
dalam sebuah domain atau subdomain, yang berada di dalam WWW
(World Wide Web) dan tentunya terdapat di dalam Internet. Halaman

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 7

 STMIK WIDYA PRATAMA Pemrograman Web I

website biasanya berupa dokumen yang ditulis dalam format Hyper

Text Markup Language (HTML)(Dina Amalia, 2018).

C. Text Editor
Text Editor adalah suatu software aplikasi atau suatu program
komputer yang memungkinkan kalian sebagai penggunanya untuk
membuat, mengubah atau mengedit file teks yang ada berupa text
biasa. Text editor ini sebenarnya bisa digunakan untuk membuat
program komputer dan mengedit source code dari bahasa
pemograman. Selain itu, text editor juga bisa dimanfaatkan untuk
membuat halaman web atau template web design dan juga membuat
aplikasi tertentu. Software aplikasi satu ini memang secara umum
ditujukan untuk mempermudah aktivitas pemrograman (Resa Risyan,
2019).

D. HTML ( HyperText Markup Language )

HTML adalah singkatan dari HyperText Markup Language
yaitu bahasa pemrograman standar yang digunakan untuk membuat
sebuah halaman web, yang kemudian dapat diakses untuk
menampilkan berbagai informasi di dalam sebuah penjelajah web
Internet (Browser). HTML dapat juga digunakan sebagai link link
antara file-file dalam situs atau dalam komputer dengan
menggunakan localhost, atau link yang menghubungkan antar situs
dalam dunia internet(Admin Nawadwipa, 2020).

E. CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet) adalah salah satu bahasa desain
web (style sheet language) yang mengontrol format tampilan sebuah
halaman web yang ditulis dengan menggunakan penanda(markup
laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 8

 STMIK WIDYA PRATAMA Pemrograman Web I

HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk

segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID
(Dwiky Andika, 2018).

F. JavaScript
JavaScript adalah suatu bahasa kode atau pemrograman yang
digunakan untuk menciptakan sekaligus mengendalikan konten
website agar menjadi dinamis. Contoh konten situs yang dinamis
adalah apa pun yang dapat bergerak atau mengubah apa pun yang
tampak di layar tanpa mengharuskan Anda memuat ulang laman
situs tersebut secara manual(Rian Romadhon, 2020).

G. JQuery
JQuery adalah sebuah library JavaScript. Dalam dunia
pemrograman, library adalah kumpulan dari berbagai fungsi ‘siap
pakai’ untuk memudahkan pembuatan sebuah aplikasi. Dengan
demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang
memudahkan penulisan kode JavaScript(Andre, 2015).

2. Penelitian Terdahulu

Pada tugas akhir ini digunakan satu penelitian terdahulu yaitu:

Kerja Praktik Kharisma Lintar Syuhada (2016)

Penelitian terdahulu pertama yang dilakukan oleh Kharisma Lintar

Syuhada pada tahun 2016 dengan mengambil judul “Rancang Bangun
Company Profile Berbasis WEB Pada SMP Wachid Hasyim 1
Surabaya”.

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 9

 STMIK WIDYA PRATAMA Pemrograman Web I

Permasalahan yang dibahas pada kerja praktik ini adalah penggunaan

website sebagai media promosi sekolah pada SMP Wachid Hasyim 1
Surabaya pada tahun 2016.
Dalam kerja praktik ini metode pembuatan web yang digunakan
adalah menggunakan HTML dan PHP.
Kesimpulan yang dapat diambil dari pembuatan laporan Rancang
Bangun Website Company Profile SMP Wachid Hasyim 1 Surabaya oleh
Kharisma Lintar Syuhada adalah sebagai berikut :
1. Dengan adanya Website ini informasi gambaran umum SMP Wachid
Hasyim 1 Surabaya bisa dilihat oleh pelanggan dimanapun dan kapanpun.
2. Website ini membantu mempermudah promosi tidak lagi pada tempat –
tempat tertentu saja melainkan bisa mempromosikan SMP Wachid Hasyim 1
Surabaya pada lingkungan yang lebih luas

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 10

 STMIK WIDYA PRATAMA Pemrograman Web I

BAB III

RANCANGAN DAN PEMBAHASAN

1. Desain / Rancangan / Layout Website

Dalam rancangan web ini font yang digunakan adalah sans-serif
untuk warna yang digunkan dapat dilihat dalam screenshoot web.
Mockup Index

Gambar 1.1

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 11

 STMIK WIDYA PRATAMA Pemrograman Web I

Mockup Staff

Gambar 1.2

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 12

 STMIK WIDYA PRATAMA Pemrograman Web I

Mockup Galeri

Gambar 1.3

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 13

 STMIK WIDYA PRATAMA Pemrograman Web I

Mockup Pelayanan

Gambar 1.4

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 14

 STMIK WIDYA PRATAMA Pemrograman Web I

Mockup Lokasi

Gambar 1.5

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 15

 STMIK WIDYA PRATAMA Pemrograman Web I

Mockup Berita

Gambar 1.6

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 16

 STMIK WIDYA PRATAMA Pemrograman Web I

Mockup Kritik & Saran

Gambar 1.7

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 17

 STMIK WIDYA PRATAMA Pemrograman Web I

2. Pembahasan Website
Website company profile ini merupakan gabungan antara beberapa
framework, mulai dari framework css yaitu bootrap, lalu sedikit efek dari library
javascript yaitu jquery. Keduanya mempunyai peran sangat penting untuk
melakukan design interface yang menarik. Dalam menangani navigasi dan tata letak
halaman, bootstrap lah yang digunakan, namun dalam hal efek dan animasi jquery
yang digunakan. Namun di dalam company profile ini juga melibatkan font
awesome yang berguna untuk menampilkan bentuk karakter / icon yang unik.
Di dalam halaman company profile ini mengunakan beberapa komponen
yang sudah di sediakan oleh dosen yaitu template ucorpora. Kemudian untuk
animasi menggunkan event dari jquery yaitu event fade in/fade out, slider,
accordion dan sebagainya. Untuk merubah warna font pada text tertentu, dan event
mouse leave untuk mengembalikan warna font variable asal menggunakan style.css.
Di website ini juga tersedia embed lokasi, website ini juga bersifat responsive.

3. ScreenShoot Website
Index.html

Gambar 2.1

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 18

 STMIK WIDYA PRATAMA Pemrograman Web I

Gambar 2.2

Gambar 2.3

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 19

 STMIK WIDYA PRATAMA Pemrograman Web I

Gambar 2.4

Gambar 2.5

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 20

 STMIK WIDYA PRATAMA Pemrograman Web I

Staff.html

Gambar 2.6

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 21

 STMIK WIDYA PRATAMA Pemrograman Web I

Gambar 2.7

Gambar 2.8

Galeri.html

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 22

 STMIK WIDYA PRATAMA Pemrograman Web I

Gambar 2.9

Pelayanan.html

Gambar 2.10

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 23

 STMIK WIDYA PRATAMA Pemrograman Web I

Gambar 2.11

Gambar 2.12

Lokasi.html

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 24

 STMIK WIDYA PRATAMA Pemrograman Web I

Gambar 2.13

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 25

 STMIK WIDYA PRATAMA Pemrograman Web I

Berita.html

Gambar 2.14

Gambar 2.15

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 26

 STMIK WIDYA PRATAMA Pemrograman Web I

Kritik.htm

Gambar 2.16

Gambar 2.17

4. Domain dan Hosting

Website ini dapat di akses dengan url http://ichsan0021.epizy.com/?i=1

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 27

 STMIK WIDYA PRATAMA Pemrograman Web I

BAB IV

KESIMPULAN DAN SARAN

1. Kesimpulan
Kesimpulan yang dapat diambil dari pembuatan laporan Rancang
Bangun Website Company Profile SDN Bandengan 02 adalah sebagai
berikut :
1. Dengan adanya Website ini informasi gambaran umum SDN Bandengan
02 Pekalongan bisa dilihat oleh pelanggan di manapun dan kapanpun.
2. Website ini membantu mempermudah promosi tidak lagi pada tempat –
tempat tertentu saja melainkan bisa mempromosikan SDN Bandengan 02
pada lingkungan yang lebih luas
2. Saran
Website Company Profile pada SDN Bandengan 02 dapat
ditingkatkan dan dikembangkan lagi oleh pihak sekolah, sehingga Website
yang masih statis dan responsive sederhana ini dapat diubah menjadi website
dinamis dan lebih resposive.

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 28

 STMIK WIDYA PRATAMA Pemrograman Web I

REFERENSI / DAFTAR PUSTAKA

https://www.ekrut.com/media/company-profile, Diakses Pada 28 Desember 2020

https://www.duniailkom.com/tutorial-belajar-jquery-pengertian-jquery/, Diakses
Pada 28 Desember 2020

https://idwebhost.com/blog/pengertian-website-secara-lengkap/, Diakses 28 Pada

Desember 2020

https://www.it-jurnal.com/pengertian-css-cascading-style-sheet/, Diakses 28 Pada

Desember 2020

https://www.monitorteknologi.com/apa-itu-text-editor/, Diakses Pada 28 Desember

2020

https://www.nawadwipa.co.id/pengertian-dan-fungsi-html-hypertext-markup-
language, Diakses Pada 28 Desember 2020

https://www.zonamahasiswa.com/cara-membuat-penelitian-terdahulu/, Diakses
Pada 28 Desember 2020

STMIK WIDYA PRATAMA | Tugas Projek Akhir Pemrograman Web I 29