Bab III INDRI SETIYO WATI

BAB III
PEMBAHASAN
3.1 Pengembangan website program keahlian sija
Sejalan dengan tujuan dari penelitian ini, penulis menggunakan Bootstrap
sebagai media utama untuk membangun website program keahlian sija di Smk
Budi Mulia, karena Bootstrap merupakan framework untuk membangun desain
web secara responsive. Artinya, tampilan web yang dibuat oleh bootstrap akan
menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop,
tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan
sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk
tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan
dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap
kita juga bisa membangun web dinamis ataupun statis.
3.2 Kerangka Pemikiran
System Engineering
Analysis
Design
Coding
Testing
Maintenance
3.1 Gambar Model Waterfall

(sumber : Merancang Website Program Keahlian Sija di
SMK Budi Mulia berbasis Bootstrap)
Metode pengembangan sistem yang digunakan dalam penelitian ini adalah
metode model air terjun atau yang sering disebut dengan istilah waterfall. ada
25
26
empat tahapan dalam model waterfall yaitu: System Engineering, Analysis,
Design, Coding, Testing, Maintenance.
Alur dari penggunaan sistem pembayaran modern ini sebagai berikut :
1. System Engineering atau rekayasa sistem dan analisa merupakan
pembentukan kebutuhan dari semua elemen sistem dan menganalisa
kebutuhan keinginan user. Meliputi I/O, walau pengerjaan, ukuran dan
jumlah data yang ditangani.
2. Analysis, Analisa kebutuhan sistem dan software adalah proses
menentukan arsitektur sistem secara total dan menentukan ukuran data
dan jumlah data.
3. Design, adalah menentukan dasar-dasar pembentukan dan pemilihan
struktur data, struktur program, arsitektur program, pemilihan algoritma,
intereksi dengan user.
4. Coding adalah mentrasformasikan desain kedalam barisbaris program,
pemilihan Bahasa.
5. Testing merupakan pengujian kebenaran program.
6. Maintenance adalah proses perawatan software agar dapat digunakan
terus.
3.3 Tempat dan Waktu Penelitian
Tempat yang digunakan penulis dalam melakukan penelitian ini yaitu SMK
Budi Mulia, Pakisaji . Adapun waktu penelitian tentang Pengembangan website
program keahlian sija Ini dilaksanakan dari bulan Desember 2020 sampai April
2021.
27
3.4 Subject Penelitian
Sesuai dengan informasi yang dibutuhkan dalam penelitian, maka yang
ditetapkan sebagai subyek penelitian adalah website untuk program keahlian sija
yang ada di SMK Budi Mulia, Pakisaji serta user yang akan terlibat dengan website
yang akan dibuat nantinya.
3.5 Alat dan Bahan Penelitian
Penelitian membutuhkan piranti-piranti untuk mendukung berjalannya
perancangan dan implementasi website, Antara lain:
3.5.1 Perangkat Keras
Personal Computer (PC)/Laptop
a. 64 bit architecture processor
b. 2 GB Random Access Memmory (RAM)
3.5.2 Perangkat Lunak
a. Bootstrap
Sebagai alat yang digunakan untuk membuat sebuah
tampilan halaman website yang dapat mempercepat
pekerjaan seorang pengembang website ataupun
pendesain website.
Gambar 3.2 Tampilan Bootstrap

28
b. Sublime Text
Sublime Text merupakan teks editor yang sangat ampuh,
cocok digunakan untuk melakukan coding dalam berbagai
bahasa, dimana Sublime Text sudah menyediakan format
syntax dari bahasa-bahasa pemrograman yang ada.
Gambar 3.3 tampilan Sublime Text
c. CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi
rangkaian instruksi yang menentukan bagiamana suatu
text akan ditampilkan pada halaman web. Perancangan
desain text dapat dilakukan dengan mendefinisikan fonts
(huruf) , colors (warna), margins (ukuran), latar belakang
(background), ukuran font (font sizes) dan lain-lain.
Gambar 3.4 tampilan CSS

29
d. Javascript
JavaScript adalah salah satu bahasa pemrograman yang
sering digunakan oleh website programmer atau website
developer. javascript merupakan salah satu bahasa
pemrograman web yang bisa membuat halaman website
anda lebih menarik serta lebih hidup.
Gambar 3.5 tampilan Javascript
e. HTML
HTML adalah singkatan dari HyperText Markup Language.
HTML ini merupakan suatu sistem yang digunakan dalam
internet untuk menentukan struktur konten pada halaman
web. HTML ini berfungsi sebagai fondasi atau basis sistem
yang digunakan dalam pembuatan situs web.
Gambar 3.6 tampilan HTML

30
3.6 Antarmuka pengguna (User Interface)
User Interface sangatlah penting dalam suatu aplikasi karena merupakan
bagian dari perangkat lunak yang menjadi sarana komunikasi antar pengguna
dengan sistem serta dapat memberikan kemudahan bagi pengguna dalam
melakukan aktivitasnya.
1. Mendownload file bootstrap terlebih dahulu di getbootstrap.com.
Gambar 3.7 Tampilan awal dari Bootstrap
2. Setelah menekan download, akan masuk pada halaman untuk
memilih file yang harus didownload.
Gambar 3.8 Tampilan untuk mendownload file Bootstrap

31
3. Ekstrak file .zip yang telah didownload.
Gambar 3.9 Tampilan Ekstrak File Boostrap
4. Beri nama file bebas, serta terdapat 2 folder bawaan dari
bootstrap.
Gambar 3.10 Tampilan folder Bootstrap
5. Buat 2 file “index.html” dan “style.css” , kemudian masuk ke
sublime text.
Gambar 3.11 Tampilan folder Bootstrap

32
6. Masukkan “starter template” yang telah di siapkan Bootstrap pada
halaman Documentasi terletak pada Introduction pada sublime
text.
Gambar 3.12 Tampilan Starter Template Booststrap
3.6.1 Koneksi HTML
Agar website bekerja dengan bootstrap harus melalui proses
coding html. Proses aktifitas coding dilakukan setelah script bootstrap
telah ditambahkan dalam script html. Proses coding bertujuan supaya
html dan bootstrap terintegrasi sehingga dapat menghasilkan suatu
website yang sesuai dengan yang dikembangkan.
Berikut script coding koneksi agar bootstrap dan html dapat terhubung:
Gambar 3.13 Tampilan koneksi
3.6.2 Main Content
Main content merupakan tampilan utama dari website yang dapat
dilihat oleh semua warga sekolah dan masyarakat. Gambaran Main
content website program keahlian sija dapat dilihat pada Gambar 3.14
33
Pada halaman utama yang terletak pada index.html ini berisi tentang slider
gambar, ruang laboratorium, ruang kelas, guru yang mengajar, galeri
mengenai mata pelajaran produktif dan contact.
Gambar 3.14 Main content index.html
3.6.3 Navbar
Gambar 3.15 Main Navbar
Halaman Navbar pada website program keahlian sija
menampilkan beberapa biodata dari jurusan sija. biodata tersebut
meliputi About, Testimonials, Guru sija dan kegiatan produktif sija.
<nav class="navbar navbar-expand-lg navbar-
light justify-content-sm-start fixed-top">
<div class="container">
<a class="navbar-brand order-1 order-lg-0
ml-lg-0 ml-2 mr-auto" href="#"><img
class="img-fluid img-responsive"
src="assets/img/about/nav.png"
width="120"></a>
34
<button class="navbar-toggler"
type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex
flex-column flex-lg-row flex-xl-row
justify-content-lg-end p-3 p-lg-0 mt-5 mt-
lg-0 mobileMenu"
id="navbarSupportedContent">
<ul class="navbar-nav align-self-stretch">
<li class="nav-item active">
<a class="nav-link" href="index.html"><i
class="fas fa-home"></i>Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>
<a class="nav-link"
href="patners.html">Patners</a>
</li>
<a class="nav-link"
href="testimonials.html">Testimonials</a>
</li>
35
<a class="nav-link"
href="galeri.html">Galeri</a>
</li>
<a class="nav-link"
href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
Script Navbar
3.6.4 Caraousel
Gambar 3.16 Caraousel
Pada bagian slider gambar menampilkan gambar tentang
beberapa acar yang di ikuti oleh sija, seperti MUM Bali 2019.
<div class="slide">
<div class="container-fluid p-0">
<div id="carousel" class="carousel slide

hero-slides" data-ride="carousel">
<ol class="carousel-indicators">
36
<li data-target="#carousel" data-slide-

to="0" class="active"></li>

to="1"></li>

to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active boat"

style="background-image:
url(assets/img/slide/1.jpg)">
<div class="container h-100 d md-block">
<div class="row align-items-center h-100">
<div class="col-12 col-md-9 col-lg-7 col-

xl-6">
<div class="caption animate_animate

animate__fadeIn">
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item river"

<div class="container h-100 d-md-block">

xl-6">

animate__fadeIn">
</div>
37
</div>
</div>
</div>
</div>
<div class="carousel-item sea"

<div class="container h-100 d-md-block">

xl-6">

animate__fadeIn">
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev"
href="#carousel" role="button" data-
slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next"
href="#carousel" role="button" data-
slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
38
</a>
</div>
</div>
</div>
Script Caraousel
3.6.5 Main Laboratorium Room
Gambar 3.17 Main Laboratorium Room.
Pada halaman ruang laboratorium menampilkan keadaan ruang
lab. yang sering digunakan untuk praktik, Serta menjelaskan
tentang masing-masing isi dari lab. tersebut.
<div id="grid">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-6">
<button type="button" class="btn btn-lg"

data-aos="flip-left" data-aos-
duration="1000"><h2>LABORATORY <br> ROOM
</h2></button>
</div>

39
<div class="card">
<h5>Lab.Networking</h5>
<p>Memiliki fasilitas seperti PC, Layar

LCD, Papan Tulis, Meja, Bangku, AC, Kipas
Angin berbagai hardware Komputer untuk
praktek merakit, Lab. ini juga digunakan
untuk kelas TKJ. Pada Lab. ini juga
terdapat berbagai buku untuk mengetahui
lebih dalam tentang hardware komputer,
sejarah munculnya komputer dan banyak
berbagai macam buku tentang komputer untuk
menambah wawasan.</p>
</div>
</div>
<div class="picture">
<img src="assets/img/ruang/ruang1.jpg"
class="img-fluid img-responsive">
</div>
</div>
</div>
<div class="row d-flex flex-row justify-

content-center">
<div class="picture">
<img src="assets/img/ruang/ruang2.jpg"
class="img-fluid img-responsive">
</div>
</div>
<div class="card">
<h5>Lab.Aplikasi</h5>
40
<p>lab.ini sering digunakan untuk jurusan

SIJA, Memiliki fasilitas yang sama dengan
Lab.Networking tetapi yang membedakan yaitu
pada Lab. ini tidak terdapat hardware
komputer. Lab.Aplikasi menyediakan
perangkat untuk praktek membangun sebuah
jaringan seperti Router, TP-Link, Kabel
untuk crimping dan masih banyak lagi
alat.</p>
</div>
</div>
</div>
</div>
</div>
Script Laboratorium Room
3.6.6 Main Classroom
Gambar 3.18 Main Class Room
Pada tampilan ruang kelas terdapat gambar dari kelas 10, 11 dan
12 sija yang terlihat nyaman untuk tempat belajar.
<div class="kelas">
<button type="button" class="btn " data-

aos="flip-left"><h2>CLASSROOM</h2></button>
<div class="row">
41
<div class="col-lg-4 col-md-3 col-sm-6" >
<div class="image">
<img src="assets/img/kelas/10.jpg"
class="img-fluid">
<div class="image-info">
<h5 class="lead">10 SIJA</h5>
</div>
</div>
</div>
<div class="image">
class="img-fluid">
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6" >
<div class="image">
class="img-fluid">
</div>
</div>
</div>
</div>
Script Classroom
42
3.6.7 Main Card Teacher
Gambar 3.19 Main Card Teacher
Pada tampilan halaman guru pengajar menampilkan gambar
beserta nama guru bidang yang diajarkan serta media sosial yang
dimiliki.

<section id="team">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="card">
<div class="card-body">
<img src="assets/img/team/team-1.jpg"
class="img-fluid rounded-circle w-50 mb-3">
<h4>UTIATUR ROHMAH</h4>
<h5>Teacher SAAS</h5>
<div class="d-flex flex-row justify-content-

center">
<div class="p-4">
43
<a href="#"><i class="fab fa-facebook-

f"></i></a>
</div>
<div class="p-4">
<a
href="https://www.instagram.com/utiatur_rohm
ah/"><i class="fab fa-instagram"></i></a>
</div>
<div class="p-4">
<a href="#"><i class="fab fa-

twitter"></i></a>
</div>
<div class="p-4">

linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<h4>MUHAMMAD ZAINUL, S.T</h4>
<h5>Teacher IoT</h5>

center">
<div class="p-4">
44

f"></i></a>
</div>
<div class="p-4">
<a
href="https://www.instagram.com/zhanathapong
/"><i class="fab fa-instagram"></i></a>
</div>
<div class="p-4">

twitter"></i></a>
</div>
<div class="p-4">

linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<h4>BENY DWI HARIRIAN, S.Kom</h4>
<h5>Teacher IAAS</h5>

center">
<div class="p-4">
45

f"></i></a>
</div>
<div class="p-4">
<a
href="https://www.instagram.com/benyharirian
</div>
<div class="p-4">

twitter"></i></a>
</div>
<div class="p-4">

linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<h4>ELIS PRASETYAWATI, S.Kom</h4>
<h5>Teacher PAAS</h5>

center">
<div class="p-4">
46

f"></i></a>
</div>
<div class="p-4">
<a
href="https://www.instagram.com/alice_thieya
</div>
<div class="p-4">

twitter"></i></a>
</div>
<div class="p-4">

linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<h4>BUDI ARIS KURNIAWAN, S.T</h4>
<h5>Teacher SKJ</h5>

center">
<div class="p-4">
47

f"></i></a>
</div>
<div class="p-4">

instagram"></i></a>
</div>
<div class="p-4">

twitter"></i></a>
</div>
<div class="p-4">

linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Script card teacher

48
3.6.8 Main Footer
Gambar 3.20 Main Footer
Pada tampilan footer terdapat pengertian sija, produk yang dapat
dihasilkan, serta media sosial sija. Memudahkan unutk
mengetahui lebih detail tentang jurusan sija.
<footer>
<div class="footer-top">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12

segment-one">
<h3><img class="img-fluid img-responsive"

src="assets/img/about/nav.png"
width="100"></h3>
<p>(Sistem Informatika Jaringan & Aplikasi)

</p>
</div>

segment-two">
<h2>Produk</h2>
<ul>
49
<li><a href="#">Nametag LED</a></li>
<li><a href="#">Aplikasi</a></li>
<li><a href="#">Web development</a></li>
<li><a href="#">Web desain</a></li>
<li><a href="#">Games</a></li>
</ul>
</div>

segment-three">
<h2>Follow Us</h2>
<p>Please Follow us on our Social Media.</p>

f"></i></a>

instagram"></i></a>

youtube"></i></a>
</div>

segment-four">
<h2>Our Newslater</h2>
<p>Masih banyak lagi produk yang bisa dibuat

di Jurusan SIJA dengan mengunakan System
Internet of Things (SIoT/IoT). Ayo masuk
SIJA.</p>
<form action="#">
<input type="submit" value="JOIN">
</form>
</div>
</div>
</div>
50
</div>
<p class="footer footer-bottom-text">All

Right reserved ©SIJA.2021</p>
</footer>
Script Footer
3.6.9 Main About

Main About merupakan halaman yang berada pada
about.html menjelaskan sija secara detail seperti visi dan misi
jurusan sija, apa itu sija, apa yang dipelajari di sija, dan banyak
lagi. Gambaran main about website program keahlian sija dapat
dilihat pada Gambar 3.21
Gambar 3.21 Main About

<div id="about">
<h3>ABOUT</h3>
<div class="row">
<div class="col-lg-5" data-aos="fade-left">
<div class="card-image">
51
<img src="assets/img/about/about.jpg"
class="card-img-top" alt="...">
</div>
</div>
<div class="col-lg-7 display-text" data-

aos="fade-left">
<h4 >SISTEM INFORMASI JARINGAN DAN

APLIKASI</h4>
<h5>(SIJA)</h5>
<p class="card-body">Jurusan SIJA merupakan

gabungan dari Rekayasa Perangkat Lunak( RPL
) dan Teknik Komputer Jaringan ( TKJ).
Jurusan SIJA merupakan jurusan yang lengkap
dan menarik untuk dipelajari. <br>
Memiliki keistimewaan yaitu pendidikan 3

tahun disekolah dan 1 tahun di industri,
merupakan jurusan baru dan lulusan SIJA
setara D1 dan bersertifikat internasional.
jurusan SIJA merupakan jurusan kekinian di
era milenial</p>
</div>
<div class="col-lg-6" data-aos="fade-right">
<div class="card" style="width: 17rem;

height:17rem;">
<div class="card-header">
<a href="#"><i class="fas fa-cog"></i> VISI

</a>
</div>
<h6> Menjadi kompetensi keahlian yang unggul

berdaya saing nasional maupun internasional
dalam rumpun ilmu jaringan komputer dan
berperan aktif dalam pembangunan
bangsa.</h6>
</div>
</div>
52
<div class="col-lg-6" data-aos="fade-right">
<div class="card" style="width: 17rem;

height:17rem;">
<div class="card-header">
<a href="#"><i class="fas fa-calendar-

week"></i> MISI </a> </div>
<h6>Menyelenggarakan pendidikan berstandart

nasional & internasional yang berkualitas
untuk menghasilkan lulusan yang kompeten
berkepribadian luhur serta berjiwa
wirausaha.</h6> </div>
</div>
</div>
</div>
</div>

<div id="mapel">
<div class="row">
<div class="col-lg-6" data-aos="zoom-out-

down">
<div class="button">
<button type="button" class="btn btn-

lg">Apa Saja yang Dipelajari di
SIJA?</button>
</div>
</div>
<div class="col-lg-1" data-aos="fade-up"

data-aos-delay="100">
<div class="box">
<a href="#"><i class="fas fa-book-

open"></i></a>
53
</div>
</div>

<div class="note">
<h4>Dasar Bidang Keahlian</h4>
<ul class="icon">
<li><a href="#"><i class="fas fa-angle-

double-right"></i> Simulasi dan Komunikasi
Digital</a></li>
<li><i class="fas fa-angle-double-

right"></i> Fisika</li>

right"></i> Kimia</li>
</ul>
</div>
</div>
</div>
<div class="row">

<div class="box">
<a href="#"><i class="fas fa-

desktop"></i></a>
</div>
</div>

<div class="note">
<h4>Dasar Bidang Keahlian</h4>
<ul class="icon">
54

right"></i> Sistem Komputer</li>

right"></i> Komputer dan Jaringan Dasar</li>

right"></i> Pemrograman Dasar</li>

right"></i> Dasar Desain Grafis</li>
</ul>
</div>
</div>

<div class="box">
<a href="#"><i class="fas fa-cloud-upload-

alt"></i></a>
</div>
</div>

<div class="note">
<h4>Kompetensi Keahlian (Mata Pelajaran

Produktif)</h4>
<ul class="icon">

right"></i> Infrastruktur Komputasi Awan
(IaaS)</li>

right"></i> Platform Komputasi Awan
(PaaS)</li>

right"></i> Layanan Komputasi Awan
(SaaS)</li>
55

right"></i> Sistem Internet of Things
(SloT)</li>

right"></i> Sistem Keamanan Jaringan
</li>

right"></i> Produk Kreatif dan
Kewirausahaan</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<div id="unggul">
<div class="row">

<div class="note">
<ul class="icon">

right"></i> Pembelajaran sangat relevan
dengan industri IT saat ini. </li>

right"></i> Setara dengan D1 </li>

right"></i> SIJA satu level lebih tinggi di
atas lulusan SMK pada umumnya </li>
56

right"></i> SIJA bersertifikat nasional
maupun internasional</li>
</ul>
</div>
</div>

down">
<button type="button" class="btn btn-lg">Apa

Keunggulan SIJA?</button>
</div>
</div>
</div>
</div>
</div>

<div id="peluang">
<div class="row">

down">
<button type="button" class="btn btn-

lg">Peluang Kerja Lulusan SIJA</button>
</div>
</div>

<div class="note">
57
<ul class="icon">

right"></i> Application Developer (Android/
Ios)</li>

right"></i> Computer Engineering </li>

right"></i> Data Analyst </li>

right"></i> Database Administrator </li>

right"></i> UI/ UX Developer </li>

right"></i> Enterprise Resource Planning
(ERP) </li>

right"></i> Game Developer</li>

right"></i> Software Engineer </li>

right"></i> IT Planner </li>

right"></i> Graphic Designer </li>

right"></i> Network Security </li>

right"></i> Web Developer</li>

right"></i> Project Management </li>

right"></i> Freelancer </li>

right"></i> Membangun Startup</li>
</ul>
</div>
58
</div>
</div>
</div>
</div>
Script About
3.6.10 Main Patners
Main patners merupakan halaman yang terletak pada patners.html
menjelaskan tentang kerjasama beberapa industri dengan jurusan sija.
Industri ini yang nantinya akan menjadi tempat prakerin bagi siswa sija.
Gambaran main patners dapat dilihat pada Gambar 3.22
Gambar 3.22 Main Patners

<div id="patners">
<h3>PATNERS</h3>
<div class="row" data-aos="fade-down-left"

<div class="col-lg-4">
<div class="card">
59
<img src="assets/img/clients/client-1.jpeg"
<h5 class="card-title">Maxindo Mitra Solusi-

Internet Service Provider </h5>
<p class="card-text">
Sebuah Perusahaan Jasa yang bergerak dalam

bidang IT, PT. Maxindo Mitra Solusi dapat
membantu anda dalam mengembangkan bisnis dan
usaha anda dengan memanfaatkan Teknologi dan
Informasi yang di implementasikan terhadap
strategi perusahaan yang anda miliki.</p>
</div>
</div>
</div>
<div class="card">
<img src="assets/img/clients/client-2.png"
<h5 class="card-title">RetGoo Sentris

Informa</h5>
<p class="card-text">Sebuah perusahaan yang

bergerak di bidang layanan jasa pengembangan
ERP dan BPM yang terintegrasi dan
terpadu.</p>
</div>
</div>
</div>
<div class="card">
60
<img src="assets/img/clients/client-4.png"
<h5 class="card-title">MejaKita</h5>
<p class="card-text"> Sebuah organisasi

nirlaba yang didirikan oleh sekumpulan
pelajar yang memiliki antusiasme yang tinggi
terhadap pendidikan. Kami mempunyai
ketertarikan yang beragam, mulai dari
bermusik, IT hingga desain..</p>
</div>
</div>
</div>
<div class="card">
<img src="assets/img/clients/reka.jpg"
<h5 class="card-title">Rekavisitama</h5>
<p class="card-text"> Perusahaan yang secara

fokus dan terus menerus melakukan inovasi
pengembangan berbagai produk elektronika.
Diantaranya adalah kiosk touchscreen,
laboratorium bahasa, mesin antrian, papan
suku bunga/papan kurs, running text,
dll.</p>
</div>
</div>
</div>
<div class="card">
<img src="assets/img/clients/lumintu.png"
61
<h5 class="card-title">PT. Lumintu Insan

Mandiri</h5>
<p class="card-text"> sebuah Perusahaan yang

menjalankan usaha dalam
lingkup Rekayasa dan Konstruksi untuk Sipil

dan Mekanikal Elektrikal termasuk Jasa
Pengadaan.</p>
</div>
</div>
</div>
<div class="card">
<img src="assets/img/clients/sekawan.png"
<h5 class="card-title">Sekawan Media</h5>
<p class="card-text">Software house yang

bergerak di bidang pengembangan perangkat
lunak dan konsultan IT. Kami memberikan
solusi IT satu atap untuk membantu melakukan
transformasi digital dan mengembangkan usaha
anda.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Script Patners
62
3.6.11 Main Testimonials
Main testimonials merupakan halaman yang terletak pada
testimonials.html menjelaskan mengenai lulusan sija yang mendapatkan
pekerjaan pada industri tempat prakerin. Gambaran main testimonials
dapat dilihat pada Gambar 3.23
Gambar 3.23 Main Testimonials

<div class="testimonials" id="testimonials">
<h3>TESTIMONIALS</h3>
<div class="row">
<div class="content">
<div class="img-area img1"></div>
<div class="info">
<h4>SULISMAWANA / HC </h4>
<p>Siswi SMK Budi Mulia dari jurusan SIJA

saat ini bekerja di PT.RetGoo Sentris
Informa. Bertugas sebagai Human Capital.</p>
<p class="socials">
<i class="fab fa-facebook-f"></i>

63
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</p>
</div>
</div>
</div>
<div class="info">
<h4>Anggita Dwi istiyarini / QC</h4>

Informa. Bertugas sebagai penguji database
(Quality contro)</p>
<p class="socials">
</p>
</div>
</div>
</div>
<div class="info">
<h4>Laili Habibah / QC</h4>

64
<p> Siswi SMK Budi Mulia dari jurusan SIJA

(Quality control)</p>
<p class="socials">
</p>
</div>
</div>
</div>
<div class="info">
<h4>Ulfa Naelu Saadah / DT</h4>

(Development Team)</p>
<p class="socials">
</p>
</div>
</div>
</div>
</div>
65
</div>
</div>

Script Testimonials
3.6.12 Main Galeri
Main galeri merupakan halaman yang terletak pada galeri.html
menjelaskan tentang kegiatan siswa saat mata pelajaran produktif sija.
Gambaran main galeri dapat dilihat pada Gambar 3.24
Gambar 3.24 Main Galeri

<div class="galeri">
<h3>GALERI</h3>
<div class="row" data-aos="zoom-out-left">
<ul class="filters text-center">
<li class="active" data-filter="*"><a

href="">All</a></li>
<li data-filter=".network"><a
href="">Network</a></li>
66
<li data-filter=".iot"><a
href="">IoT</a></li>
<li data-filter=".paas"><a
href="">PAAS</a></li>
</ul>
<div class="projects">
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-6 item

network">
<div class="card">
<div class="card-head">
<img src="assets/img/portfolio/portfolio-
1.jpg" class="img-fluid card-img">
<div class="card-
overlay"><h2>Network</h2></div>
<div class="card-hover">
<h2>Network</h2>
<p>Mempelajari tentang Infrastruktur
Jaringan.</p>
</div>
</div>
<div class="card-body text-center">
<h4 class="title">Network</h4>
<a href="#" class="btn btn-lg card-btn">See

More</a>
</div>
</div>
</div>
67

paas">
<div class="card">
<div class="card-
overlay"><h2>PAAS</h2></div>
<h2>PAAS</h2>
<p>Membuat game yang pasti sangat

menyenangkan.</p>
</div>
</div>
<h4 class="title">Game</h4>

More</a>
</div>
</div>
</div>

iot">
<div class="card">
<div class="card-overlay"><h2>IoT</h2></div>
<h2>IoT</h2>
68
<p>Membuat Running Text, Smart Home dan

banyak lagi.</p>
</div>
</div>
<h4 class="title">IoT</h4>

More</a>
</div>
</div>
</div>

iot">
<div class="card">
<div class="card-overlay"><h2>IoT</h2></div>
<h2>IoT</h2>
<p>Belajar membuat sebuah website yang

menarik dengan Bootstrap.</p>
</div>
</div>
<h4 class="title">Web</h4>

More</a>
</div>
</div>
69
</div>

paas">
<div class="card">
<div class="card-
overlay"><h2>PAAS</h2></div>
<h2>PAAS</h2>
<p>Membuat sebuah Database dengan bahasa

pemrograman PHP.</p>
</div>
</div>
<h4 class="title">Database</h4>

More</a>
</div>
</div>
</div>

network">
<div class="card">
<div class="card-
overlay"><h2>Network</h2></div>
70
<h2>Network</h2>
<p>Membangun jaringan internet dan banyak

lagi.</p>
</div>
</div>
<h4 class="title">Network</h4>

More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Script Galeri
3.6.13 Main Contact
Main contact merupakan halaman yang terletak pada contact.html
menjelaskan alamat dari SMK Budi Mulia, Pakisaji. serta terdapat nomor
yang dapat dihubungi jika ingin bergabung dengan jurusan sija.
Gambaran main contact dapat dilihat pada Gambar 3.25 dan gambar 3.26
71
Gambar 3.25 Main Contact
Gambar 3.26 Maps Contact

<section class="contact pb-5">
<div class="container py-5">
<div class="card" data-aos="zoom-in">
<h1 class="font-weight-light text-center py-

3">Contact Us</h1>
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12

col-12">
<div class="row pt-5">
<div class="col-lg-1 offset-1 col-md-2 col-

sm-2 col-2">
<span style="font-size: 30px; color:

cadetblue;"><i class="fas fa-map-marker-
alt"></i></span>
72
</div>
<div class="col-lg-10 col-md-9 col-sm-9 col-

9">
<h3 class="font-weight-bold" style="color:

#000;">Find Us at Office</h3>
<p style="color: #000;">Jl. Anjasmoro 108

Karangpandan, Pakisaji - Kabupaten
Malang</p>
</div>
</div>
<div class="row pt-5">
<div class="col-lg-1 offset-1 col-md-2 col-

sm-2 col-2">
<span style="font-size: 30px; color:

coral;"><i class="fas fa-phone-
volume"></i></span>
</div>
<div class="col-lg-10 col-md-9 col-sm-9 col-

9">
<h3 class="font-weight-bold" style="color:

#000;">Give us a ring</h3>
<p style="color: #000;">(+62)

85895836327</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12

col-12">
<form>
<div class="form-row">
<div class="form-group col-lg-6 col-md-12

col-sm-12 col-12">
<label>First Name</label>
73
<input type="text" class="form-control"

placeholder="First Name">
</div>
<div class="form-group col-lg-6 col-md-12

col-sm-12 col-12">
<label>Last Name</label>
<input type="text" class="form-control"

placeholder="Last Name">
</div>
</div>
<label>Email</label>
<input type="email" class="form-control"

placeholder="Email">
<label>Your Message</label>
<textarea class="form-control mb-3"

placeholder="Message" id="" cols="10"
rows="5"></textarea>
<input type="checkbox"> <label>I'm not a

robot</label> <button class="btn float-
right">Send Message</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container-fluid " data-

aos="fade-down" data-aos-easing="linear"
data-aos-duration="500">
74
<iframe
src="https://www.google.com/maps/embed?pb=!1
m18!1m12!1m3!1d3950.2881149285354!2d112.5912
6231478001!3d-
8.072068394188124!2m3!1f0!2f0!3f0!3m2!1i1024
!2i768!4f13.1!3m3!1m2!1s0x2e789dc249fa5065%3
A0x1a4c0277b155a7b7!2sSmk%20Budi%20Mulia%20P
akisaji!5e0!3m2!1sid!2sid!4v1614919985809!5m
2!1sid!2sid" width="100%" height="400"
style="border:0;" allowfullscreen=""
loading="lazy"></iframe>
</div>
</section>
Script Contact

Bab III INDRI SETIYO WATI

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Bab III INDRI SETIYO WATI

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB III

3.1 Pengembangan website program keahlian sija

Sejalan dengan tujuan dari penelitian ini, penulis menggunakan Bootstrap

Budi Mulia, karena Bootstrap merupakan framework untuk membangun desain

kita juga bisa membangun web dinamis ataupun statis.

3.2 Kerangka Pemikiran

3.1 Gambar Model Waterfall

Metode pengembangan sistem yang digunakan dalam penelitian ini adalah

empat tahapan dalam model waterfall yaitu: System Engineering, Analysis,

Design, Coding, Testing, Maintenance.

Alur dari penggunaan sistem pembayaran modern ini sebagai berikut :

1. System Engineering atau rekayasa sistem dan analisa merupakan

pembentukan kebutuhan dari semua elemen sistem dan menganalisa

kebutuhan keinginan user. Meliputi I/O, walau pengerjaan, ukuran dan

jumlah data yang ditangani.

2. Analysis, Analisa kebutuhan sistem dan software adalah proses

menentukan arsitektur sistem secara total dan menentukan ukuran data

dan jumlah data.

3. Design, adalah menentukan dasar-dasar pembentukan dan pemilihan

struktur data, struktur program, arsitektur program, pemilihan algoritma,

intereksi dengan user.

4. Coding adalah mentrasformasikan desain kedalam barisbaris program,

5. Testing merupakan pengujian kebenaran program.

6. Maintenance adalah proses perawatan software agar dapat digunakan

3.3 Tempat dan Waktu Penelitian

Budi Mulia, Pakisaji . Adapun waktu penelitian tentang Pengembangan website

3.4 Subject Penelitian

Sesuai dengan informasi yang dibutuhkan dalam penelitian, maka yang

yang akan dibuat nantinya.

3.5 Alat dan Bahan Penelitian

Penelitian membutuhkan piranti-piranti untuk mendukung berjalannya

perancangan dan implementasi website, Antara lain:

3.5.1 Perangkat Keras

Personal Computer (PC)/Laptop

a. 64 bit architecture processor

b. 2 GB Random Access Memmory (RAM)

3.5.2 Perangkat Lunak

Sebagai alat yang digunakan untuk membuat sebuah

tampilan halaman website yang dapat mempercepat

pekerjaan seorang pengembang website ataupun

Gambar 3.2 Tampilan Bootstrap

Sublime Text merupakan teks editor yang sangat ampuh,

cocok digunakan untuk melakukan coding dalam berbagai

bahasa, dimana Sublime Text sudah menyediakan format

syntax dari bahasa-bahasa pemrograman yang ada.

Gambar 3.3 tampilan Sublime Text

CSS adalah singkatan dari Cascading Style Sheets. Berisi

rangkaian instruksi yang menentukan bagiamana suatu

text akan ditampilkan pada halaman web. Perancangan

desain text dapat dilakukan dengan mendefinisikan fonts

(huruf) , colors (warna), margins (ukuran), latar belakang

(background), ukuran font (font sizes) dan lain-lain.

Gambar 3.4 tampilan CSS

JavaScript adalah salah satu bahasa pemrograman yang

sering digunakan oleh website programmer atau website

developer. javascript merupakan salah satu bahasa

pemrograman web yang bisa membuat halaman website

anda lebih menarik serta lebih hidup.

Gambar 3.5 tampilan Javascript

HTML adalah singkatan dari HyperText Markup Language.

HTML ini merupakan suatu sistem yang digunakan dalam

internet untuk menentukan struktur konten pada halaman

web. HTML ini berfungsi sebagai fondasi atau basis sistem

yang digunakan dalam pembuatan situs web.