Anda di halaman 1dari 54

LAPORAN MAGANG

CV. OMAH IOT

RANCANG BANGUN HALAMAN DASHBOARD


UNTUK MONITORING AIR TIRTA TURUS ASRI
BERBASIS INTERNET OF THINGS

Disusun Oleh:
Tita Tri Uma
NIM. 3.33.19.0.23

PROGRAM STUDI DIPLOMA TIGA TEKNIK


TELEKOMUNIKASI
JURUSAN TEKNIK ELEKTRO
POLITEKNIK NEGERI SEMARANG
2022
HALAMAN PENGESAHAN POLITEKNIK NEGERI SEMARANG

Tempat / Objek PKL : CV. Omah IoT


Judul / Topik : Rancang Bangun Dashboard Untuk Monitoring
Pemakaian Air Tirta Turus Asri Berbasis
Internet of Things

Jurusan : Teknik Elektro

Prodi : D3 Teknik Telekomunikasi


Waktu pelaksanaan : 6 September 2021 – 28 Februari 2022

Semarang, 28 Februari 2022


Mahasiswa,

Tita Tri Uma

NIM 3.33.19.0.23

Mengetahui, Menyetujui,

Ketua Program Studi Dosen Pembimbing

D3 Teknik Telekomunikasi

Helmy, S.T., M.Eng. Helmy, S.T., M.Eng.

NIP. 197908102006041001 NIP. 197908102006041001

ii
HALAMAN PENGESAHAN PERUSAHAAN

Tempat / Objek PKL : CV. Omah IoT


Judul / Topik : Rancang Bangun Dashboard Untuk Monitoring
Pemakaian Air Tirta Turus Asri Berbasis
Internet of Things

Jurusan : Teknik Elektro

Prodi : D3 Teknik Telekomunikasi


Waktu pelaksanaan : 6 September 2021 – 28 Februari 2022

Semarang, 28 Februari 2022


Mahasiswa,

Tita Tri Uma

NIM 3.33.19.0.23

Mengetahui, Menyetujui,

Direktur Pembimbing Lapangan

Agung Al Rasyid, A.Md.T Athadhia Febyana, A.Md.T

iii
KATA PENGANTAR

Puji dan syukur atas ke hadirat Allah SWT yang telah memberikan rahmat
dan hidayah-Nya serta salam tak lupa dihaturkan kepada Nabi Muhammad SAW
sebagai suri teladan bagi umat, sehingga penulis dapat menyelesaikan laporan
magang dengan judul “Rancang Bangun Dashboard Untuk Monitoring Pemakaian
Air Tirta Turus Asri Berbasis Internet of Things”. Laporan magang ini merupakan
laporan kegiatan yang dilakukan selama pelaksanaan magang di CV. Omah IoT
selama 6 bulan terhitung sejak 6 September 2021 – 28 Februari 2022

Magang ini merupakan salah satu program yang wajib dilaksanakan oleh
mahasiswa Diploma Tiga Teknik Telekomunikasi Politeknik Negeri Semarang.
Dengan melaksanakan magang ini, mahasiswa mendapat kemampuan yang
berkenaan dengan aktivitas nyata pada dunia kerja atau dunia usaha selain teori
yang didapat di perkuliahan.

Dalam pelaksanaan magang dan penyelesaian laporan magang ini, penulis


mengucapkan terima kasih kepada:
1. Allah subhanahu wa ta'ala yang telah memberikan kemudahan dalam
melaksanakan magang
2. Kedua Orang Tua yang senantiasa memberikan doa dan dukungan,
3. Bapak Prof. Dr. Totok Prasetyo, B,Eng (Hons), MT, IPU, ACPE. selaku
Direktur Politeknik Negeri Semarang,

4. Bapak Yusnan Badruzzaman, S.T., M.Eng., selaku Ketua Jurusan Teknik


Elektro,
5. Bapak Helmy, S.T., M.Eng., selaku Ketua Program Studi D3-Teknik
Telekomunikasi dan dosen pembimbing magang.

6. Agung Al Rasyid Selaku Direktur CV.Omah IoT.


7. Athadhia Febyana selaku pembimbing lapangan penulis yang telah
banyak membimbing dan memberikan masukan selama magang di CV.
Omah IoT.
8. Seluruh rekan – rekan kerja di CV. Omah IoT yang senantiasa membantu
dalam terselesaikannya magang ini.

iv
9. Seluruh pihak yang terlibat baik secara langsung maupun tidak langsung.

v
Penulis menyadari bahwa pada laporan magang ini masih terdapat
kekurangan. Oleh karena itu, kritik dan saran sangat diharapkan sehingga
penulis dapat melakukan perbaikan di masa mendatang. Semoga Laporan
Magang ini membawa manfaat bagi pengembangan ilmu.

Semarang, 28 Februari 2022

Penulis

vi
DAFTAR ISI

HALAMAN JUDUL.....................................................................................................i
HALAMAN PENGESAHAN DARI POLINES..........................................................ii
HALAMAN PENGESAHAN DARI PERUSAHAAN..............................................iii
KATA PENGANTAR..................................................................................................iv
DAFTAR ISI................................................................................................................vi
DAFTAR GAMBAR..................................................................................................viii
DAFTAR TABEL........................................................................................................ix
BAB I PENDAHULUAN.............................................................................................1
1.1 Latar Belakang.....................................................................................................1
1.2 Ruang Lingkup.............................................................................................2
1.3 Tujuan..........................................................................................................2
1.4 Manfaat........................................................................................................3
1.5 Sistematika Penulisan..................................................................................4
BAB II GAMBARAN UMUM PERUSAHAAN.........................................................5
2.1 Profil Perusahaan.........................................................................................5
2.2 Managemen Tim..........................................................................................6
2.3 Ruang Lingkup Usaha..................................................................................6
2.4 Deskripsi Pekerjaan......................................................................................7
2.5 Jadwal Kerja.................................................................................................7
BAB III HASIL PELAKSANAAN MAGANG...........................................................8
3.1 Deskripsi Pelaksanaan Magang...................................................................8
3.2 Hasil Literasi................................................................................................9
3.2.1 Sistem Informasi.................................................................................9
3.2.2 Basis Data (Database)........................................................................9
3.2.3 Internet of Things (IoT)......................................................................9
3.2.4 XAMPP.............................................................................................10
3.2.5 MySQL.............................................................................................11
3.2.6 Visual Studio Code...........................................................................12
3.2.7 Hypertext Markup Languege (HTML).............................................12
3.2.8 Cascading Style Sheets (CSS)..........................................................13

vii
3.2.9 Boostrap............................................................................................13
3.2.10 Hypertext Preprocessor (PHP).......................................................13
3.2.11 Asynchronous Java Script (AJAX).................................................14
3.3 Perancangan Basis Data.............................................................................14
3.3.1 Diagram Use Case............................................................................15
3.3.2 Entity Relationship Diagram (ERD)................................................15
3.3.3 Perancangan Antarmuka Web..........................................................16
3.4 Perancangan Halaman Dashboard Untuk Monotoring Pemakaian Air. .17
3.4.1 Halaman Dashboard Admin............................................................17
3.4.2 Halaman Manajemen User..............................................................19
3.5 Hasil Pelaksanaan Magang......................................................................20
3.5.1 Halaman Dashboard Admin............................................................21
3.5.2 Halaman Manajemen User..............................................................23
3.6 Pengujian Aplikasi.....................................................................................25
3.7 Evaluasi Hasil Magang..............................................................................27
BAB IV PENUTUP......................................................................................................54
4.1 Kesimpulan................................................................................................28
4.2 Saran..........................................................................................................28
DAFTAR PUSTAKA...................................................................................................30
LAMPIRAN..................................................................................................................31

vii
i
DAFTAR GAMBAR

Gambar 2.1 Logo Perusahaan CV. Omah IoT.....................................................5


Gambar 2.2 Struktur Organisasi CV. Omah IoT.................................................6
Gambar 3.1 Form Presensi Magang....................................................................8
Gambar 3.2 Logi XAMPP.................................................................................10
Gambar 3.3 Logo Visual Studio Code..............................................................12
Gambar 3.4 Logo HTML 5...............................................................................12
Gambar 3.5 Logo Bootstrap..............................................................................13
Gambar 3.6 Logo PHP.....................................................................................14
Gambar 3.7 Diagram Use Case Sistem Informasi Tirta Turus Asri..................15
Gambar 3.8 Relasi Tabel Website Tirta Turus Asri..........................................16
Gambar 3.9 Gambar Tabel Basis Data Sistem Informasi Tirta Turus Asri ......17
Gambar 3.10 Perancangan Halaman Dashboard Admin..................................18
Gambar 3.11 Perancangan Halaman Data Dengan Grafik Pada Halaman
Dashboard Admin.......................................................................18
Gambar 3.12 Perancangan Pilihan Rentang Tanggal Data Grafik Pada
Halaman Dashboard Admin........................................................19
Gambar 3.13 Perancangan Pilihan Tampilan Data Pemakaian Air Pada
Halaman Dashboard Admin........................................................19
Gambar 3.14 Perancangan Halaman Dashboard Manajemen User.................20
Gambar 3.15 Perancangan Fitru On/Off Pada Tabel Manajemen User...........20
Gambar 3.10 Perancangan Halaman Dashboard Admin..................................21
Gambar 3.11 Perancangan Halaman Data Dengan Grafik Pada Halaman
Dashboard Admin.......................................................................22
Gambar 3.12 Perancangan Pilihan Rentang Tanggal Data Grafik Pada
Halaman Dashboard Admin........................................................22
Gambar 3.13 Perancangan Pilihan Tampilan Data Pemakaian Air Pada
Halaman Dashboard Admin........................................................23
Gambar 3.14 Perancangan Halaman Dashboard Manajemen User.................23
Gambar 3.15 Perancangan Fitru On/Off Pada Tabel Manajemen User...........24

ix
DAFTAR TABEL

Tabel 2.1 Tabel Jadwal Kerja..............................................................................7


Tabel 3.1 Tabel Pengujian Web........................................................................25

x
BAB I

PENDAHULUAN

1.1. Latar Belakang


Menghadapi keadaan sekarang yang serba digital, membuat pengelolaan Air
Tirta Turus asri pun bergerak kearah yang lebih praktis juga, dengan sebelumnya
dilakukan secara manual menggunakan keseluruhan tenaga manusia mulai dari
pengumpulan data, pengecekan rutin hingga penagihan bayaran setiap rumahnya.
Hal ini pun dirasa perlu adanya perubahan untuk meringankan pekerjaan petugas
pengelola air dan menghindari adanya kesalahan data input yang saat melakukan
perekapan data air warga. Dengan ini CV Omah IoT melakukan kerja sama
dengan perumahan Tirta Turus Asri dalam bidang pengembangan website yang
nantinya terintegrasi pada alat, dalam hal ini website akan berperan dalam
membantu menampilkan rekapan data serta menampilkan data tagihan warga
dalam pemakaian setiap bulannya.

CV. Omah IoT merupakan salah satu perusahaan yang bergerak dibidang
teknologi dengan fokus utamanya dibidang Internet of Things dan IT Solution.
CV.Omah IoT menyediakan layanan pembuatan hardware dan software terkait
Internet of Things dan pada bidang IT solution dengan menyediakan layanan
dalam membuat aplikasi android, situs web dan berbagai produk digital yang
dibutuhkan untuk bisnis ataupun pribadi dengan fitur yang sesuai kebutuhan
konsumen.

Diharapkan dengan adanya kerjasama ini melalui CV. Omah IoT akan
meringankan pekerjaan petugas pengelolaan air Tirta Turus Asri kemudian akan
juga berdampak baik terhadap masyarkat yang terbantu dengan sistem perekapan
melalui media website, warga nantinya juga akan dapat memantau langsung
penggunaan air dan juga tagihan sehingga warga akan turut serta dalam
pemantuan secara langsung penggunaan air setiap individu rumahnya.

1
1.2. Ruang Lingkup
Dalam Laporan Magang dengan judul “Rancang Bangun Website untuk
Sistem Monitoring Pemakaian Air Tirta Turus Asri Berbasis Internet of Things”
akan membahas mengenai proses pengerjaan pembuatan website Pengelolaan Air
Tirta Turus Asri. Ruang lingkup dalam laporan dibatasi dalam beberapa aspek:
1. Dasar teori projek rancang bangun website dalam tampilan dashborad untuk
sistem monitoring pemakaian air Tirta Turus Asri.
2. Konsep dasar dari pembuatan website dalam tampilan dashborad untuk
sistem monitoring pemakaian air Tirta Turus Asri.
3. Garis besar keperluan pembuatan pembuatan website dalam tampilan
dashborad untuk sistem monitoring pemakaian air Tirta Turus Asri.
4. Pengujian pembuatan website dalam tampilan dashborad untuk sistem
monitoring pemakaian air Tirta Turus Asri.

1.3. Tujuan
Tujuan diadakannya program magang yang di laksanakan oleh CV. Omah
IoT adalah sebagai berikut:
1. Peserta magang diharapkan dapat mengimplementasikan ilmu pengetahuan
yang diperoleh dari kampus pada dunia kerja serta meningkatkan baik soft
skill maupun hard skill.
2. Peserta magang diharapkan mendapatkan ilmu pengetahuan dan pengalaman
dalam dunia kerja yang sebenarnya, khususnya pada bidang telekomunikasi.
3. Terpenuhinya kurikulum wajib dari Program Diploma Tiga Teknik
Telekomunikasi Jurusan Teknik Elektro Politeknik Negeri Semarang untuk
melakukan magang industri.
4. Memberikan pengetahuan manfaat dari Internet of Things yang dapat
diterapkan dan mendukung Smarthome.
5. Membuat website yang mudah digunakan dengan tampilan yang menarik.
6. Membantu CV. Omah IoT untuk mengerjakan proyek-proyeknya, salah
satunya membangun website untuk Tirta Turus Asri sebagai sarana informasi
bagi pengguna dengan menggunakan Visual Studio Code (VSCode).

2
1.4. Manfaat
Manfaat dilaksanakannya program magang pada CV. Omah IoT adalah
sebagai berikut:
1.4.1. Bagi Mahasiswa
Bagi mahasiswa magang ini memiliki manfaat sebagai berikut:
1. Terpenuhinya kurikulum wajib dari Program Studi Diploma Tiga Teknik
Telekomunikasi Jurusan Teknik Elektro Politeknik Negeri Semarang untuk
melakukan magang industri.
2. Peserta magang mendapat pengetahuan dan pengalaman di dunia kerja yang
sebenarnya, khususnya di bidang telekomunikasi.
3. Hard skill dan soft skill peserta magang meningkat dan dapat melakukan
implementasi pengetahuan yang pernah diperoleh di kampus.
4. Mampu meningkatkan kemampuan mahasiswa dalam pengembangan website
menggunakan Visual Studio Code (VSCode) khususnya dalam
pengembangan front-end dan back-end pada website.

1.4.2. Bagi Industri


Bagi CV. Omah IoT magang ini memiliki manfaat sebagai berikut:
1. Sebagai media dalam memeperkenalkan diri dan produk perusahaan kepada
masyarakat.
2. Sebagai sarana Corporate Social Responsibility (CSR) dan sharing knowledge
perusahaan kepada dunia akademik.
3. Sebagai bahan pertimbangan dalam proses rekruitmen dan potensi sumber
daya manusia yang kompeten sesuai dengan kebutuhan perusahaan.

1.4.3. Bagi Institusi


Bagi CV. Omah IoT magang ini memiliki manfaat sebagai berikut:

1. Bagi Politeknik Negeri Semarang, kegiatan magang ini diharapkan dapat


menjadi salah satu alat ukur untuk mengevaluasi jalannya program magang
tahun akademik 2021-2022 dan perbaikan bagi program magang tahun-tahun
selanjutnya.

3
2. Sebagai sarana pengembangan kurikulum agar sesuai dengan kebutuhan
industri saat ini.
3. Sebagai sarana menjalin hubungan antara pihak institusi dengan industri.

1.5. Sistematika Penulisan


Penulisan laporan magang ini akan terbagi dalam IV BAB, agar mudah
dimengerti dan dipahami. Adapun sistematika penulisan laporan magang ini
adalah sebagai berikut:

BAB I PENDAHULUAN

Bab ini berisi tentang latar belakang, ruang lingkup, tujuan,


manfaat, dan sistematika penulisan.

BAB II GAMBARAN UMUM PERUSAHAAN

Bab ini membahas bentang ruang lingkup perusahaan CV.Omah


IoT, penjelasan ini antara lain mengenai profil perusahaan, visi &
management tim, ruang lingkup usaha, deskripsi pekerjaan dan
jadwal kerja perusahaan.

BAB III HASIL PELAKSANAAN MAGANG

Bab ini berisi tentang pelaksanaan magang dan penjabaran kegiatan


selama magang. Bab ini juga membahas hasil literasi dari berbagai
sumber yang akan dibahas berkaitan dengan proyek yang
dikerjakan. Kemudian penjelasan tentang hasil proyek magang
yang di buat, beserta evaluasi hasil magang.

BAB IV PENUTUP

Bab ini merupakan bagian akhir dari penulisan laporan magang


yang berisi tentang kesimpulan serta saran – saran yang berguna di
kesempatan yang akan datang selama pelaksanaan magang.

4
BAB II

GAMBARAN UMUM PERUSAHAAN

2.1 Profil Perusahaan


CV. Omah IoT merupakan salah satu perusahaan yang bergerak dibidang
teknologi dengan fokus utamanya dibidang Internet of Things dan IT Solution.
Perusahaan ini memulai perusahaan dagang dan jasa pada tanggal 9 September
2020 nomor 3 berdasarkan SK. Menkumham RI No. AHU –
00054.AH.02.01.TAHUN 2019, Tanggal 05 Januari 2019 SK Menteri
ATR/Kepala BPN Nomor: 49/SK- 400.HR.03.01/I/2019 Kabupaten Sukabumi.
Dibidang Internet of Things, CV.Omah IoT menyediakan layanan pembuatan
hardware dan software terkait Internet of Things dan pada bidang IT solution
dengan menyediakan layanan dalam membuat aplikasi android, situs web dan
berbagai produk digital yang dibutuhkan untuk bisnis ataupun pribadi dengan
fitur yang sesuai kebutuhan konsumen. Gambar 2.1 berikut merupakan logo dari
CV. Omah IoT.

Gambar 2.1 Logo CV. Omah IoT


CV. Omah Iot telah membuktikan sebagai partner yang menguntungkan,
dengan bekerja sama saling membantu dengan pelanggan melewati proyek dari
mulai pendesainan awal hingga akhir pengembangan yang sukses dan begitu juga
dalam menyediakan pelayanan pendukung secara berkelanjutan.
Adapun visi dan misi Omah IoT untuk tetap berkelanjutan di dunia
telekomunikasi adalah sebagai berikut
a. Visi :
Menjadi Perusahaan terpercaya, professional, dan berkualitas dalam bidang
IoT dan IT solution yang mampu bersaing dengan memberikan kontribusi
baik dalam bidang informasi dan komunikasi maupun pengabdian kepada
masyarakat.

5
b. Misi :
 Mengembangkan produk berkualitas dan kompetitif.
 Memberi layanan yang professional kepada mitra.
 Memberikan solusi yang optimal kepada mitra kerja dalam menghadapi
permasalahan di dunia IoT.

2.2 Management Tim


Berikut merupakan struktur organisasi dari CV.OmahIoT yang penulis
tempati selama kegiatan Praktik Kerja Lapangan. Struktur organisasi dapat dilihat
pada Gambar 2.2

Gambar 2.2 Struktur Organisasi CV. Omah IoT

2.3 Ruang Lingkup Usaha


Omah IoT dari awal berdiri hingga sekarang telah memperluas portofolio
solusi bisnis dan jasa yang membantu memenuhi perubahan kebutuhan
pelanggannya. Melalui solusi-solusi dan layanan inovatif Omah IoT senantiasa
memberikan pelayanan terbaiknya kepada pelanggan. Ruang lingkup usaha
CV.Omah IoT dibagi dalam dua jenis layanan, dua jenis layanan tersebut adalah
sebagai berikut :

a. Internet of things
CV.Omah IoT menyediakan layanan pembuatan hardware berbasis IoT.
Dengan merangkai sistem tertanam dengan microcontroller beserta sensor
yang nantinya dapat diakses melalui web apps maupun mobile apps.

6
b. IT Solusion
CV. Omah IoT menyediakan layanan dalam membuatan aplikasi adroid, situs
web dan berbagai produk digital yang dibutuhkan untuk bisnis ataupun
pribadi dengan fitur yang sesuai dengan kebutuhan konsumen.

2.4 Deskripsi Pekerjaan

Tugas yang diberikan oleh pembimbing magang selama melakukan Praktik


Kerja Lapangan membuat sebuah produk IoT yang akan di implementasikan di
tempat pelanggan. Seperti projek pada Pengelolaan Air Tirta Turus Asri pada
pengembangan website untuk tampilan dashboard pada monitoring pemakaian
air.

2.5 Jadwal Kerja


Penulis memiliki jangka waktu Praktik Kerja Lapangan selama enam bulan
mulai dari tanggal 6 September 2021 – 28 Februari 2022. Jadwal pelaksanaan
kerja sesuai waktu kerja normal mulai pukul 08.00 sampai dengan 16.30 WIB,
setiap hari Senin sampai dengan hari Jumat, dengan waktu istirahat makan siang
selama 1 (satu) jam. Rincian jadwal kerja dapat lihat pada Tabel 2.1.

Tabel 2.1 Jadwal Kerja


Hari Jam Kegiatan
08.00 - 12.00 Mengerjakan tugas yang diberikan
12.00 – 13.00 Ishoma
Senin - Kamis
13.00 – 16.30 Mengerjakan tugas kembali
08.00 - 12.00 Mengerjakan tugas yang diberikan
12.00 – 13.30 Ishoma
Jum’at
13.30 – 16.30 Mengerjakan tugas kembali

7
BAB III

HASIL PELAKSANAAN MAGANG

3.1 Deskripsi Pelaksanaan Magang


CV. Omah IoT merupakan salah satu perusahaan yang bergerak dibidang
teknologi dengan fokus utamanya dibidang Internet of Things dan IT Solution.
Pelaksanaan kegiatan magang di CV. Omah IoT dilaksanakan selama satu
semester pada semester lima dengan durasi waktu di mulai tanggal 6 September
2021 hingga 28 Februari 2022.

Pada hari awal akan diberikan pembekalan oleh perusahaan dan


penandatangan kontrak magang. Omah IoT yang menyediakan layanan
pembuatan hardware, Andorid Developer dan software terkait Internet of Things
dan pada bidang IT solution, serta penulis diposisikan sebagai Software Web
Developer. Jadwal magang di CV. Omah IoT mengikuti jadwal kerja, yaitu 5
hari kerja dengan jam masuk pukul 08.00 WIB sampai pukul 16.30 WIB.

Sistem presensi dalam magang Omah IoT dilakukan dengan menggunakan


google form secara online dan diisi setiap hari saat waktu magang selesai.
Tampilan form absensi pada peserta magang dapat dilihat dalam gambar 3.1.

Gambar 3.1 Form presensi peserta magang

8
Pada hari selanjutnya dimulai dari tahap pengenalan dengan magang dan
kerja pada perusahaan, kemudian dengan bantuan pembimbing mulai untuk
merancang projek dengan didahului pengenalan sistem serta pembelajaran agar
dalam proses pengerjaan memahami. Apabila terdapat kendala akan dibantu dan
mencari penyelesaian bersama denga pembimbing dan rekan magang.

3.2 Hasil Literasi

Literasi sangat berguna untuk membantu mengartikan suatu hal yang belum
dipahami, atau menjadikan sebuah penemuan konsep atau ide untuk membuat
suatu projek. Selain itu literasi juga berguna sebagai penuntun dalam pengerjaan
projek. Berikut hasil literasi selama proses pengerjaan projek magang ini:
3.2.1 Sistem Informasi
Informasi merupakan sebuah hasil dari sebuah pengolahan data yang
melalui sekumpulan proses pada sebuah sistem, yang diolah sedemikian rupa
sehingga layak untuk disajikan kepada masyarakat umum. Sistem informasi
adalah kumpulan atau sususnan yang terdiri dari perangkat keras dan perangkat
lunak serta tenaga pelaksananya yang bekerja dalam sebuah proses berurutan dan
secara bersama-sama saling mendukung untuk menghasilkan suatu produk
(Nataniel & Hatta, 2009).

3.2.2 Basis Data (Database)


Database atau basis data adalah kumpulan informasi yangdisimpan di
dalam komputer secara sistematik sehingga dapat diperiksa menggunakan suatu
program komputer untuk memperoleh informasi dari basis data tersebut.
Perangkat lunakyang digunakan untuk mengelola dan memanggil kueri (query)
basisdata disebut sistem manajemen basis data (database management system,
DBMS).

3.2.3 Internet of Things (IoT)


Menurut Coordinator and support action for global RFID-related
activities and standadisation menyatakan internet of things (IoT) sebagai sebuah
infrastruktur koneksi jaringan global, yang mengkoneksikan benda fisik dan
virtual melalui eksploitasi data capture dan teknologi komunikasi. Infrastruktur
IoT terdiri dari jaringan yang telah ada dan internet berikut
pengembangannya. Hal ini
9
menawarkan identifikasi obyek, identifikasi sensor dan kemampuan koneksi yang
menjadi dasar untuk pengembangan layanan dan aplikasi koperatif yang berdiri
secaraindependen, juga ditandai dengan tingkat otonomi data capture yang tinggi,
event transfer, konektivitas pada jaringan dan juga interoperabilitas.
Konsep internet of things mencangkup 3 elemen utama yaitu: benda fisik
atau nyata yang telah diintegrasikan pada modul sensor, koneksi internet, dan
pusat data pada server untuk menyimpan data ataupun informasi dari aplikasi.
Penggunaan benda yang terkoneksi ke internet akan menghimpun data yang
kemudian terkumpul menjadi “big data” untuk kemudian diolah, dianalisa baik
oleh instansi pemerintah, perusahaan terkait, maupun instansi lain kemudian di
manfaatkan bagi kepentingan masing-masing (Setiadi & Abdul Muhaemin, 2018).

3.2.4 XAMPP
Xampp merupakan perangkat lunak bebas yang mendukung banyak sistem
operasi, merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai
server yang berdiri sendiri (localhost) yang terdiri atas Apache HTTP Server.
Mysql database dan penerjemahan bahasa yang ditulis dengan bahasa
pemrograman PHP. Nama Xampp merupakan singkatan dari empat sistem operasi
yaitu Apache, Mysql, PHP, dan Perl.Program ini tersedia dalam GNU dan bebas,
merupakan web server yang mudah digunakan yang dapat melayani tampilan
halaman web yang dinamis (Sarwindah, 2018).

Gambar 3.2 Logo XAMPP


Xampp digunakan sebagai stand alone server (berdiri sendiri) atau biasa
disebut dengan localhost. Hal tersebut memudahkan dalam proses pengeditan,
desain, dan pengembangan aplikasi. Xampp tersusun atas kependekan dari
beberapa kata berikut ini:
1. X (Cross Platform)
Maksudnya adalah, Xampp dalam dijalankan di berbagai perangkat sistem

10
operasi yang ada, misalnya Windows, Linux, Mac OS, dan Solaris. Dari ke
semua sistem

operasi tersebut, software ini bersifat open source atau dapat digunakan secara
gratis.
2. A (Apache)
Apache merupakan aplikasi web server yang bertugas untuk menciptakan
halaman website yang benar berdasarkan kode program PHP yang ditulis oleh
pengembang web (developer). Memungkinkan juga untuk mengakses sistem
database terlebih dahulu untuk mendukung halaman situs yang dihasilkan.

3. M (MySQL / MariaDB)
MySQL merupakan salah satu aplikasi database server yang menerapkan bahasa
pemrograman SQL (Structured Query Language). Fungsi dari MySQL sendiri
adalah untuk mengelola dan membuat sistem basis data secara terstruktur dan
sistematis.
4. P (PHP)
PHP adalah bahasa pemrograman khusus berbasis web untuk kebutuhan pada
sisi server (back end). Sehingga, PHP sangat memungkinkan untuk membuat
suatu halaman website menjadi lebih dinamis dengan menerapkan server-side
scripting. PHP juga mendukung manajemen sistem pada Oracle, Postgresql,
Microsoft Access, dan lain sebagainya.
5. P (Perl)
Perl merupakan bahasa pemrograman untuk segala kebutuhan (cross platform)
yang berfungsi sebagai penunjuk eksistensi dari PHP. Perl biasanya banyak
digunakan untuk website development pada sistem berbasis CMS (Content
Management System) seperti WordPress.

3.2.5 MySQL
MySQL merupakan sebuah Relational Database Management System
(RDBMS) yang bersifat open source. Perangkat lunak database pada umumnya
disandingkan dengan bahasa pemrograman server web seperti PHP atau JSP.
MySQL (My Structured Query Language) adalah sebuah program pembuat dan
pengelola database atau yang sering disebut dengan DBMS (Database

11
Management System), sifat DBMS ini ialah open source. Selain itu MySQL juga
merupakan program pengakses database yang bersifat jaringan, sehingga bisa
digunakan untuk aplikasi Multi User (Josi, 2017) .

3.2.6 Visual Studio Code

Visual Studio Code adalah kode editor sumber yang dikembangkan oleh
Microsoft untuk Windows, Linux dan macOS. Ini termasuk dukungan untuk
debugging, kontrol git yang tertanam dan GitHub, penyorotan sintaksis,
penyelesaian kode cerdas, snippet, dan refactoring kode. Ini sangat dapat
disesuaikan, memungkinkan pengguna untuk mengubah tema, pintasan keyboard,
preferensi, dan menginstal ekstensi yang menambah fungsionalitas tambahan
(Agustini & Kurniawan, 2019).

Gambar 3.3 Logo visual studio code

3.2.7 Hypertext Markup Language (HTML)


HTML adalah Bahasa pemrograman yang fleksibel di mana kita bisa
meletakkan scrip dari bahasa pemrograman lain seperti JAVA, Visual Basic ,C
dan lain-lain. Jika HTML tersebut tidak dapat mendukung suatu perintah
pemrograman tertentu.Browser tidak akan menampilkan kotak dialog ”Syntax
Error” jika terdapat penulisan kode yang keliru pada scripHTML sepanjang kode-
kode yang kita tuliskan merupakan kode-kode HTML tanpa penambahan kode-
kode dari luar seperti java. Oleh karena itu,jika terjadi syntax error pada skrip
HTML, efek yang paling jelas adalah HTML tersebut tak akan ditampilkan pada
halaman jendela browser (Lestanti & Susana, 2016).

12
Gambar 3.4 Logo HTML 5

3.2.8 Cascading Style Sheets (CSS)


CSS atau Cascading Style Sheets adalah kumpulan perintah yang
digunakan untuk menjelaskan tampilan sebuah halaman situs web dalam
mark-up language. CSS biasanya digunakan untuk mengatur tampilan elemen
yang tertulis dalam bahasa markup, seperti HTML, dan untuk memisahkan
konten dari tampilan visualnya di situs. HTML dan CSS memiliki keterikatan
yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS
memperbaiki style (untuk semua aspek yang terkait dengan tampilan website),
maka kedua bahasa pemrograman ini harus berjalan beriringan.

3.2.9 Bootstrap
Bootstrap adalah paket aplikasi siap pakai untuk membuat front-end
sebuah website. Bisa dikatakan, bootstrap adalah template desain web dengan
fitur plus. Bootstrap diciptakan untuk mempermudah proses desain web bagi
berbagai tingkat pengguna, mulai dari level pemula hingga yang sudah
berpengalaman (Christian et al., 2018). Bootstrap menyediakan kumpulan
komponen class interface dasar yang telah dirancang sedemikian rupa untuk
menciptakan tampilan yang menarik, bersih dan ringan. Selain komponen class
interface, bootstrap juga memiliki fitur grid yang berfungsi mengatur layout pada
halaman website.

Gambar 3.5 Logo Bootstrap

3.2.10 Hypertext Preprocessor (PHP)


PHP merupakan bahasa pemrograman berbasis web yang memiliki
kemampuan untuk memproses data dinamis. PHP dikatakan sebagai sebuah
server-side embedded script language artinya sintaks-sintaks dan perintah yang
13
kita berikan akan sepenuhnya dijalankan oleh server tetapi disertakan pada
halaman HTML biasa. Aplikasi-aplikasi yang dibangun oleh PHP pada umumnya
akan memberikan hasil pada web browser, tetapi prosesnya secara keseluruhan
dijalankan di server (Lestanti & Susana, 2016).

Gambar 3.6 Logo PHP

3.2.11 Asynchronous JavaScript (AJAX)


Framework ajax menurut Zachman menggambarkan arsitektur organisasi
secara umum dan menguraikannya sebagai enterprise system yang kompleks.
Zachman Framework merupakan salah satu kerangka kerja yang populer dalam
memetakan arsitektur informasi di sebuah organisasi (Janah & Syafitri, 2019).
Framework Ajax merupakan sebuah framework yang dapat membantu untuk
mengembangkan aplikasi web berbasis Ajax dengan mudah. Beberapa
Framework Ajax, seperti berikut ini :
1. Prototype
Framework JavaScript yang menyediakan fungsi-fungsi Ajax dan beberapa utiliti
2. JQuery
Framework JavaScript yang menyediakan framework Ajax dan beberapa utiliti
3. Ext
Library pengembangan dari Prototype, JQuery dan YUI
4. Script.aculo.us
Digunakan bersamaan dengan Prototype, fitur utamanya untuk animasi dan pengembangan
interface
5. MooTools
Framework JavaScript modular dan sederhana yang paling banyak diketahui
orang, digunakan untuk efek visual dan transisi.

3.3 Perancangan Basis Data

14
Pada tahap ini, perancangan dilakukan berdasarkan analisis langsung pada
sistem yang akan dibangun. Tahapan ini untuk mengimplementasikan hasil
perancangan database secara logis menjadi tersimpan secara fisik pada media
penyimpanan eksternal sesuai dengan Database Management System
(DBMS)

yang digunakan. My Structured Query Language (MySQL) merupakan pilihan


DBMS untuk mendukung aplikasi basis data yang dapat dilakukan sebelum
menuju desain logical jika terdapat informasi mengenai kebutuhan sistem. Basis
data merupakan kumpulan data dari berbagai entitas yang saling berhubungan.
Basis data dikelola melalui sebuah perangkat lunak yang disebut database
managements System (DBMS). Melalui DBMS manusia dapat berinteraksi
dengan basis data.

3.3.1 Diagram Use Case

Desain diagram use case yang dibuat pada sistem informasi Tirta Turus
Asri untuk menentukan peran dan aksi dari pengguna. Diagram use case sistem
informasi Tirta Turus Asri berbasis web yang ditunjukkan pada gambar 3.6.

Gambar 3.7 Diagram use case sistem informasi tirta turus asri

Pada bagian kiri dan aktor yang berperan yaitu bendahara dan petugas.

15
Kemudian pada bagian kanan aktor yang berperan yaitu admin dan warga. Bagian
tengah adalah aktifitas yang dilakukan oleh bendahara, petugas, admin dan
warga.

3.3.2 Entity Relationship Diagram (ERD)


Entity Relationship Diagram (ERD) merupakan model jaringan data
yang menekankan pada struktur-struktur dan relationship data. Diagram
hubungan entitas atau yang lebih dikenal dengan E-R diagram, adalah notasi
grafik

dari sebuah model data atau sebuah model jaringan yang menjelaskan
tentang data yang tersimpan (storage data) dalam sistem secara abstrak
(Muarie, 2015). Pada sistem ini terdiri dari beberapa tabel yaitu data_ warga,
data_tagihan, data_stand, data_loginn dan web_utama yang ditunjukkan pada
gambar 3.8.

16
Gambar 3.8 Relasi Tabel Website Tirta Turus Asri

3.3.3 Tabel Basis Data


Sistem basis data adalah suatu sistem menyusun dan mengelola record
menggunakan komputer untuk menyimpan atau merekam serta memelihara data
operasional lengkap sebuah organisasi atau perusahaan sehingga mampu
menyediakan informasi yang optimal yang di perlukan pemakai untuk proses
pengambilan keputusan (Priyanti, 2013). Terdapat beberapa tabel pada basis data
tirta turus asri ini yaitu: data_ warga, data_tagihan, data_stand, data_loginn, core
dan web_utama Tabel basis data ditunjukkan pada gambar 3.9.

Gambar 3.9 Tabel basis data sistem informasi Tirta Turus Asri

3.4 Perancangan Halaman Dashboard Untuk Monotoring Pemakaian Air


Monitoring pemakaian air dalam tirta turus asri akan dikendalikan dan
diawasi oleh admin, dimana admin dalam monitoring bertindak sebagai
pemantau data yang akan diatampilkan dalam bentuk gauge meter meliputi
volume air dan level kekeruhan air dan dalam bentuk grafik untuk parameter
yang sama dengan pemakaian air oleh seluruh warga yang dapat dipantau dalam
rentang waktu yang diinginkan. Untuk menghindari pemakaian air yang melewati

17
batas waktu tagihan, admin dapat memantau data aliran air warga.
Monitoring pada pengelolaan air Tirta Turus Asri terbagi menjadi dua
halaman dashboard, meliputi :
1. Halaman dashboard admin
2. Halaman dashboard manajemen user

3.4.1 Halaman Dashboard Admin


Halaman dashboard admin merupakan halaman monitoring yang
ditampilkan untuk admin yang berisikan gauge meter dan grafik untuk volume air
dengan satuan meter kubik, level kekeruhan air dengan satuan nephelometric
turbidity unit dan pemakaian air dengan satuan meter kubik serta rentang per
bulan oleh seluruh

warga, dalam menampilkan data admin dapat memilih rentang waktu data yang
akan ditampilkan. Gambar 3.10 merupakan perancangan halaman dashboard
admin.

Gambar 3.10 Perancangan halaman dashboard admin

Admin dapat memilih data yang akan ditampilkan berupa grafik pada data
volume air dan kekeruhan air dengan memilih icon grafik pada bagian bawah
gauge meter, dan akan muncul data berupa grafik pada hari yang sama. Gambar
3.11 merupakan perancangan tampilan data dengan grafik pada halaman
dashboard admin.

18
Gambar 3.11 Perancangan tampilan data dengan grafik pada halaman dashboard
admin

Untuk melihat data grafik dengan rentang waktu yang diinginkan maka admin
dapat memilih icon kalender tepat bersebelahan dengan icon grafik kemudian
dapat memilih data tiga hari berturut yang ingin ditampilkan pada kalender
dimulai dari memilih hari pertama dan hari terakhir rentang data. Gambar 3.12
merupakan perancangan pilihan rentang tanggal data grafik pada halaman
dashboard admin.

Gambar 3.12 Perancangan pilihan rentang tanggal data grafik pada halaman
dashboard admin

Pada data total pemakaian air seluruh warga ditampilkan dalam bentuk grafik
dan admin dapat memilih rentang waktu data pemakaian air yang akan
ditampilkan. Admin dapat memilih icon kalender kemudian memilih awal bulan
serta akhir bulan rentang data yang ingin ditampilkan. Gambar 3.13 merupakan
perancangan pilihan rentang waktu data pemakaian air pada halaman dashboard
admin.

19
Gambar 3.13 Perancangan pilihan tampilan data pemakaian air pada halaman
dashboard admin.

3.4.2 Halaman Manajemen User


Halaman manajemen user merupakan halaman yang berisikan data seluruh
warga yang dimuat dalam tabel yang berisikan no, nama, no rumah, no hp, status
bayar, debit, on/off dan aksi. Terdapat fitur tambah untuk menambahkan data
warga baru pada tabel, dan search untuk mencari nama warga dalam tabel secara
cepat. Gambar 3.14 merupakan perancangan halaman dashboard manajemen
user.

Gambar 3.14 Perancangan halaman dashboard manajemen user

Pada kolom on/off terdapat fitur switch button yang berfungsi untuk melihat
aliran air pada setiap warga dalam keadaan mengalir atau tidak. Dalam kondisi off
menandakan bahwa air pada rumah warga mengalir dan jika dalam kondisi on
menandakan bahwa air dalam rumah warga sedang dihentikan dan tidak mengalir.
Gambar 3.15 merupakan perancangan fitur on/off pada tabel manajemen user.

20
Gambar 3.15 Perancangan fitur on/off pada tabel manajemen user

3.5 Hasil Pelaksanaan Magang


Projek Rancang Bangun Halaman Dashboard untuk Monitoring Pemakaian Air
Tirta Turus Asri Berbasis Internet of Things bertujuan untuk memudahkan admin
melakukan pemantauan terhadap pemakaian air warga secara keseluruhan secara
online.

3.5.1 Implementasi Halaman Dashboard Admin


Halaman dashboard admin merupakan halaman monitoring yang
ditampilkan untuk admin yang berisikan gauge meter dan grafik untuk volume air
dengan satuan meter kubik, level kekeruhan air dengan satuan nephelometric
turbidity unit dan pemakaian air dengan satuan meter kubik serta rentang per
bulan oleh seluruh
warga, dalam menampilkan data admin dapat memilih rentang waktu data yang
akan ditampilkan. Gambar 3.16 merupakan implementasi halaman dashboard
admin.

21
Gambar 3.16 Implementasi halaman dashboard admin

Admin dapat memilih data yang akan ditampilkan berupa grafik pada data
volume air dan kekeruhan air dengan memilih icon grafik pada bagian bawah
gauge meter, dan akan muncul data berupa grafik pada hari yang sama. Gambar
3.17 merupakan implementasi tampilan data dengan grafik pada halaman
dashboard admin.

Gambar 3.17 Implementasi tampilan data dengan grafik pada halaman dashboard
admin

Untuk melihat data grafik dengan rentang waktu yang diinginkan maka admin
dapat memilih icon kalender tepat bersebelahan dengan icon grafik kemudian
dapat memilih data tiga hari berturut yang ingin ditampilkan pada kalender
dimulai dari memilih hari pertama dan hari terakhir rentang data. Gambar 3.18
merupakan implementasi pilihan rentang tanggal data grafik pada halaman
dashboard admin.

22
Gambar 3.18 Implementasi pilihan rentang tanggal data grafik pada halaman
dashboard admin

Pada data total pemakaian air seluruh warga ditampilkan dalam bentuk grafik
dan admin dapat memilih rentang waktu data pemakaian air yang akan
ditampilkan. Admin dapat memilih icon kalender kemudian memilih awal bulan
serta akhir bulan rentang data yang ingin ditampilkan. Gambar 3.19 merupakan
implementasi pilihan rentang waktu data pemakaian air pada halaman dashboard
admin.

Gambar 3.19 Implementasi pilihan tampilan data pemakaian air pada halaman
dashboard admin.

3.5.2 Halaman Manajemen User


Halaman manajemen user merupakan halaman yang berisikan data seluruh
warga yang dimuat dalam tabel yang berisikan no, nama, no rumah, no hp, status
bayar, debit, on/off dan aksi. Terdapat fitur tambah untuk menambahkan data

23
warga baru pada tabel, dan search untuk mencari nama warga dalam tabel secara
cepat. Gambar 3.20 merupakan implementasi halaman dashboard manajemen
user.

Gambar 3.20 Implementasi halaman dashboard manajemen user

Pada kolom on/off terdapat fitur switch button yang berfungsi untuk melihat
aliran air pada setiap warga dalam keadaan mengalir atau tidak. Dalam kondisi off
menandakan bahwa air pada rumah warga mengalir dan jika dalam kondisi on
menandakan bahwa air dalam rumah warga sedang dihentikan dan tidak mengalir.
Gambar 3.21 merupakan implementasi fitur on/off pada tabel manajemen user.

Gambar 3.21Implementasi fitur on/off pada tabel manajemen user

24
3.6 Pengujian Aplikasi
Pengujian yang dilakukan pada keberhasilan aplikasi yang telah dibuat sesuai
dengan perancangan sebagai berikut:

Tabel 3.1 Hasil pengujian web

No Deskripsi Aktor Hasil yang Hasil yang Kesimpulan


Pengujian Diharapkan Diterima

1. Pengujian Admin Admin dapat Sesuai


halaman melihat data
dashboard berupa gauge
admin meter untuk
volume air
dan
kekeruhan
air, dan
grafik untuk
pemakaian
air.
2.. Pengujian Admin Admin dapat Sesuai
pilihan memilih
tampilan data tampilan data
pada volume berupa grafik
dan kekeruhan dari
air sebelumnya
gauge meter
3. Pengujian Admin Admin dapat Sesuai
pemilihan memilih
rentang waktu rentang
data yang waktu data
ditampilkan yang
pada volume ditampilkan
dan kekeruhan dalam bentuk
air grafik

25
4. Pengujian Admin Admin dapat Sesuai
pemilihan memilih
rentang rentang
waktu data waktu pada
yang ingin data
ditampilkan pemakaian
pada grafik air dengan
pemakaian rentag enam
air bulan sesuai
dengan
pilihan
5. Pengujian Admin Admin Sesuai
halaman memilih
manajemen menu
user manajemen
user dan akan
tampil data
warga tirta
turus asri
dalam bentuk
tabel berserta
fiturnya
6. Pengujian Admin Admin dapat Sesuai
fitur on/off melihat fitur
pada tabel on/off
manajemen bekerja
user sesuai dengan
keadaan
pemakaian
air warga

26
3.7 Evaluasi Hasil Magang
Berdasarkan tugas projek magang sistem informasi pengelolaan air Tirta
Turus Asri yang telah dikerjakan, diawali dengan perencanaan berjalan dengan
lancar dan banyak mendapat masukan serta penyempurnaan oleh pembimbing
magang dan rekan magang lainnya. Kemudian selanjutnya proses pengerjaan
terdapat kendala dengan pemahaman dasar tentang pemrogaman yang dilakukan
sehingga membutuhkan waktu untuk belajar dan memahami konsep terlebih
dahulu kemudian barulah dilanjutkan dengan pengerjaan sehingga waktu
memulai yang terbilang tertunda beberapa minggu. Kendala lainnya datang dari
proses pengujian yang masih terdapat beberapa kesalahan program sehingga
beberapa fungsi masih belum berjalan dengan benar, seperti fitur on/off pada
yang mengalami fungsi tidak dapat diatur dengan sistem.

27
BAB IV
PENUTUP

4.1 Kesimpulan

Berdasarkan hasil laporan “Rancang Bangun Dashboard Untuk Monitoring


Pemakaian Air Tirta Turus Asri Berbasis Internet of Things” maka dapat
disimpulkan bahwa :

1. Sistem informasi pengelolaan air Tirta Turus Asri merupakan media yang
dibuat untuk memudahkan pemantauan para pengurus terutama oleh admin.

2. Halaman dashboard untuk admin dirancang untuk dapat memantau


keseluruhan pemakaian air warga lebih mudah.

3. Admin berperan melakukan pemantauan penuh dengan pemakaian air warga


hingga pada aliran air warga yang terdapat pada menu manajemen user.

4. Sistem Informasi yang dibuat masih belum sempurna dan masih bisa
dikembangkan lagi agar lebih praktis kedepannya.

4.2 Saran
Saran untuk Kampus (Politeknik Negeri Semarang)

1. Untuk lebih meningkatkan mutu mahasiswa Politeknik Negeri Semarang


diharapkan phak kampus melakukan penelitian mengenai kesesuaian bidang
yang diberikan kepada setiap mahasiswa di dalam perusahaan supaya terjadi
keselarasan antara pekerjaan dan latar belakang pendidikan.
2. Pihak kampus meningkatkan komunikasi dengan pihak perusahaan agar
hubungan yang ada selama ini sudah terjalin menjadi lebih baik.

28
Saran untuk Perusahaan (CV. Omah IoT)

1. Diharapkan hubungan perusahaan dengan pihak kampus terjalin dengan baik


sehingga menguntungkan kedua belah pihak.
2. Diharapkan hubungan kerja sama ini dapat berlanjut antara kampus dengan
pihak industri.
3. Mahasiswa yang akan melaksanakan internship lebih baik di beri pelatihan
atau training yang lebih intensif dan lebih untuk jangka waktunya.

29
DAFTAR PUSTAKA

Agustini, & Kurniawan, W. J. (2019). Sistem E-Learning Do’a dan Iqro’ dalam Peningkatan
Proses Pembelajaran pada TK Amal Ikhlas. Jurnal Mahasiswa Aplikasi Teknologi
Komputer Dan Informasi, 1(3), 154–159.
http://www.ejournal.pelitaindonesia.ac.id/JMApTeKsi/index.php/JOM/article/view/526
Christian, A., Hesinto, S., & Agustina, A. (2018). Rancang Bangun Website Sekolah Dengan
Menggunakan Framework Bootstrap ( Studi Kasus SMP Negeri 6 Prabumulih ). Jurnal
Sisfokom (Sistem Informasi Dan Komputer), 7(1), 22–27.
https://doi.org/10.32736/sisfokom.v7i1.278
Janah, R., & Syafitri, Y. (2019). Membangun Aplikasi Pemesanan Barang Berbasis Web
Dengan Menggunakan Framework Ajax Pada Penamart Bandar Lampung. Jurnal
JUSINTA, 3(2), 11–15.
Josi, A. (2017). Penerapan Metode Prototyping Dalam Membangun Website Desa (Studi
Kasus Desa Sugihan Kecamatan Rambang). Jti, 9(1), 50–57.
Lestanti, S., & Susana, A. D. (2016). Sistem Pengarsipan Dokumen Guru Dan Pegawai
Menggunakan Metode Mixture Modelling Berbasis Web. Antivirus : Jurnal Ilmiah
Teknik Informatika, 10(2), 69–77. https://doi.org/10.35457/antivirus.v10i2.164
Muarie, M. S. (2015). Rancang Bangun Sistem Ujian Online Pada Smp Negeri 8 Sekayu.
Jurnal Teknik Informatika Politeknik Sekayu (TIPS), 2(1), 28–40.
http://jurnal.polsky.ac.id/index.php/tips/article/view/38
Nataniel, D., & Hatta, H. R. (2009). Perancangan Sistem Informasi Terpadu Pemerintah
Daerah Kabupaten Paser. 4(1), 47–54.
Priyanti, D. (2013). Sistem Informasi Data Penduduk Pada Desa Bogoharjo Kecamatan
Ngadirojo Kabupaten Pacitan. IJNS - Indonesian Journal on Networking and Security,
2(4), 56. ijns.org
Sarwindah, S. (2018). Sistem Pendaftaran Siswa Baru Pada SMP N 1 Kelapa Berbasis Web
Menggunakan Model UML. Jurnal Sisfokom (Sistem Informasi Dan Komputer), 7(2),
110–115. https://doi.org/10.32736/sisfokom.v7i2.573
Setiadi, D., & Abdul Muhaemin, M. N. (2018). PENERAPAN INTERNET OF THINGS
(IoT) PADA SISTEM MONITORING IRIGASI (SMART IRIGASI). Infotronik :
Jurnal Teknologi Informasi Dan Elektronika, 3(2), 95.
https://doi.org/10.32897/infotronik.2018.3.2.108

30
LAMPIRAN

31
LAMPIRAN 1

LEMBAR KEHADIRAN PESERTA MAGANG

CV. Omah IoT

Nama : Tita Tri Uma


Periode Magang : 6 September 2021 – 28 Februari 2022
Divisi Magang : Software Android Apps

Jam Jam
No. Tanggal Kegiatan Pekerjaan
Masuk Pulang
09.00 16.30 Pengenalan lingkungan dan merekam
1 6/9/2021
audio video moko monik
Meng-install dan pemahaman dasar
2 7/9/2021 08.00 16.30
android studio
Mengenali dan mencoba fitur dalam
3 8/9/2021 08.00 16.30
android studio dan ijin latihan Polines
TV
08.00 16.30 Membuat splash screen aplikasi
4 9/9/2021
prototype
Membuat menu home aplikasi
5 10/9/2021 08.00 16.30
protoype
Penyempurnaan aplikasi prototype
13/9/2021 08.00 16.30
6 sebelumnya
08.00 16.30 Melanjutkan pengerjaan aplikasi
7 14/9/2021
prototype

08.00 16.30 Pengujian dan evaluasi aplikasi


8 15/9/2021
prototype
Perbaikan aplikasi prototype
9 16/9/2021 08.00 16.30

08.00 16.30 Pengembangan aplikasi prototype dan


10 17/9/2021
ijin latihan Polines TV
08.00 16.30 Perencanaan aplikasi android turus
11 20/9/2021
asri
08.00 16.30 Ijin Polines TV (WARNA)
12 21/9/2021

08.00 16.30 Ijin Polines TV (WARNA)


13 22/9/2021

08.00 16.30 Mempelajari coding-an website tirta


14 23/9/2021
turus asri
Mempelajari coding-an website tirta
15 24/9/2021 08.00 16.30
turus asri

32
No. Tanggal Jam Jam Kegiatan Pekerjaan
Masuk Pulang
Mempelajari OOP dalam coding
16 27/9/2021 08.00 16.30 website tirta turus asri
Mempelajari OOP dalam coding
17 28/9/2021 08.00 16.30
website tirta turus asri
08.00 16.30 Mempelajari OOP dalam coding
18 29/9/2021
website tirta turus asri
08.00 16.30 Mempelajari perbedaan coding untuk
19 30/9/2021
android dan website
08.00 16.30 Mempelajari perbedaan coding
20 1/10/2021
untuk android dan website
08.00 16.30 Mempelajari perbedaan coding untuk
21 5/10/2021
android dan website
08.00 16.30 Imigrasi coding tirta turus asri ke
22 6/10/2021
tampilan android
08.00 16.30 Imigrasi coding tirta turus asri ke
23 7/10/2021
tampilan android
08.00 16.30 Ijin latihan Polines TV (Wisuda
24 8/10/2021
Pusat)
Merapikan tampilan admin tirta turus
25 11/10/2021 08.00 16.30
asri android
Instalasi alat melon bawen
26 12/10/2021 08.00 16.30
Menyempurnakan tampilan admin
27 13/10/2021 08.00 16.30
tirta turus asri android
Menyempurnakan tampilan admin
28 14/10/2021 08.00 16.30
tirta turus asri android
Instalasi alat melon bawen
29 15/10/2021 08.00 16.30
Menyempurnakan tampilan web
30 18/10/2021 08.00 16.30
utama tirta turus asri android
Briefing pembagian tugas akhir
31 19/10/2021 08.00 16.30
Menyempurnakan tampilan
32 20/10/2021 08.00 16.30
web profile tirta turus asri
Menyempurnakan tampilan web
33 21/10/2021 08.00 16.30
profile tirta turus asri
Penyempurnaan tampilan web profile
34 22/10/2021 08.00 16.30
tirta turus asri
Menyempurnakan tampilan web
35 25/10/2021 08.00 16.30
profile tirta turus asri
Penyempurnaan tampilan web profile
36 26/10/2021 08.00 16.30
tirta turus asri
Menyempurnakan tampilan web
37 27/10/2021 08.00 16.30
tagihan warga tirta turus asri

Jam Jam Kegiatan Pekerjaan


No. Tanggal Masuk Pulang
33
Menyempurnakan tampilan web
38 28/10/2021 08.00 16.30
tagihan warga tirta turus asri
Menyempurnakan tampilan
39 29/10/2021 08.00 16.30
web tagihan warga tirta turus
asri
08.00 16.30 Menyempurnakan tampilan web
40 1/11/2021
tagihan warga tirta turus asri
08.00 16.30 Menyempurnakan tampilan web
41 2/11/2021
tagihan warga tirta turus asri
08.00 16.30 Menata ulang file olah.php tirta turus
42 3/11/2021
asri
08.00 16.30 Izin gladi kotor Polines TV (Wisuda
43 4/11/2021
Pusat)
08.00 16.30 Izin gladi bersih Polines TV (Wisuda
44 5/11/2021
Pusat)
08.00 16.30 Mempelajari modul LoRa untuk alat
45 8/11/2021
tirta turus farm
08.00 16.30 Mempelajari modul LoRa untuk alat
46 9/11/2021
tirta turus farm
Menguji dengann antares
47 10/11/2021 08.00 16.30
Melanjutkan mempelajari LoRa
48 11/11/2021 08.00 16.30
mengirim data ke antares
Melanjutkan mempelajari LoRa
49 12/11/2021 08.00 16.30
membuat project dalam antares
Mencoba membuat rancangan alat
50 15/11/2021 08.00 16.30
menggunakan LoRa dengan project
Mencoba membuat rancangan alat
51 16/11/2021 08.00 16.30
menggunakan LoRa dengan project
Menguji rancangan project alat LoRa
52 17/11/2021 08.00 16.30
Rekaman audio video MOKO
53 18/11/2021 08.00 16.30
Finishing audio video MOKO
54 19/11/2021 08.00 16.30
Kunjungan peresmian alat di SMK 1
55 22/11/2021 08.00 16.30
BAWEN
Men-desain logo alat monitoring suhu
56 23/11/2021 08.00 16.30
kambing (node)
Men-desain logo alat monitoring suhu
57 24/11/2021 08.00 16.30
kambing (suhu badan)
Finishing logo kambing
58 25/11/2021 08.00 16.30
Penyempurnaan dan cetak
59 26/11/2021 08.00 16.30 menyesuaikan sticker kambing
pada box
60 29/11/2021 08.00 16.30 Ijin pelatihan LoRa

Jam Jam Kegiatan Pekerjaan


No. Tanggal Masuk Pulang
Ijin pelatihan LoRa
61 30/11/2021 08.00 16.30
34
08.00 16.30 Mempelajari PCB alat turus asri farm
62 1/12/2021
Mempelajari PCB alat turus asri farm
63 2/12/2021 08.00 16.30

08.00 16.30 Desain pamflet projek anggrek von


64 3/12/2021
florist
Melanjutkan dan koreksi desain
65 6/12/2021 08.00 16.30
pamflet anggrek von florist
08.00 16.30 Menganalisis sensor alat turus asri
66 7/12/2021
farm
67 8/12/2021 08.00 16.30 Menganalisis sensor debit air

08.00 16.30 Mempelajari sistem kerja pada


68 9/12/2021
solenoid valve
Melanjutkan menganalisis sensor alat
69 10/12/2021 08.00 16.30
turus asri farm
70 13/12/2021 08.00 16.30 Menganalisis sensor tubidity
Melanjutkan menganalisa dan
71 14/12/2021 08.00 16.30 mencoba fungsi sensor alat
turus asri farm
Memasang komponen dalam PCB
72 15/12/2021 08.00 16.30
alat turus asri farm
Menganalisa dan uji coba PCB alat
73 16/12/2021 08.00 16.30
turus asri farm
Merakit PCB dalam box alat turus asri
74 17/12/2021 08.00 16.30
farm
Merakit PCB dalam box alat turus asri
75 20/12/2021 08.00 16.30
farm
Merakit PCB dalam box alat turus asri
76 21/12/2021 08.00 16.30
farm
Menganalisa dan uji coba PCB alat
77 22/12/2021 08.00 16.30
turus asri farm
Menganalisa dan uji coba PCB alat
78 23/12/2021 08.00 16.30
turus asri farm
Uji coba desain sticker pada box alat
79 24/12/2021 08.00 16.30
turus asri farm
Uji coba desain sticker pada box alat
80 27/12/2021 08.00 16.30
turus asri farm
Instalasi node bawen melon serta
81 28/12/2021 08.00 16.30
maintenace gateway
Mengerjakan revisi sticker
82 29/12/2021 08.00 16.30
node
Melanjutkan revisi kedua sticker dan
83 30/12/2021 08.00 16.30
menyesuaikan kotak
Jam Jam Kegiatan Pekerjaan
No. Tanggal Masuk Pulang
Merakit perangkat node turus asri
84 31/12/2021 08.00 16.30
farm

35
08.00 16.30 Melanjutkan merakit perangkat node
85 3/1/2022
turus asri
08.00 16.30 Membantu merakit perangkat
86 4/1/2022
koordinator turus asri
08.00 16.30 Melanjutkan membantu merakit
87 4/1/2022
perangkat koordinator turus asri
08.00 16.30 Desain pamflet turus asri farm
88 5/1/2022

08.00 16.30 Melanjutkan dan koreksi desain


89 6/1/2022
pamflet turus asri farm
08.00 16.30 Merangkai komponen PCB turus asri
90 7/1/2022
dan solder komponen
08.00 16.30 Membuat Poster Hidroponik
91 10/1/2022
Melon Bawen
Melanjutkan membuat Poster
92 11/1/2022 08.00 16.30
Hidroponik Melon Bawen
08.00 16.30 Mendesain logo aplikasi SMK 1
93 12/1/2022
BAWEN
Melanjutkan desain logo aplikasi
94 13/1/2022 08.00 16.30
SMK 1 BAWEN
Melanjutkan desain logo
95 14/1/2022 08.00 16.30 aplikasi SMK 1 BAWEN
Finishing dan revisi desain logo
96 17/1/2022 08.00 16.30
aplikasi SMK 1 BAWEN
08.00 16.30 Penyempurnaan dan pengerjaan revisi
97 18/1/2022
desain logo aplikasi SMK 1 BAWEN
08.00 16.30 Men-desain sticker box alat anggrek
98 19/1/2022
von florist
08.00 16.30 Melanjutkan desain sticker box
99 20/1/2022
gateway alat anggrek von florist
08.00 16.30 Melanjutkan desain sticker box
100 24/1/2022
gateway alat anggrek von florist
08.00 16.30 Finishing dan revisi desain sticker
101 25/1/2022
box gateway alat anggrek von florist
08.00 16.30 Penyempurnaan dan pengerjaan revisi
102 26/1/2022
desain sticker box gateway alat
anggrek von florist
08.00 16.30 Men-desain sticker node alat anggrek
103 27/1/2022
von florist
08.00 16.30 Melanjutkan desain node alat anggrek
104 28/1/2022
von florist
08.00 16.30 Melanjutkan desain node alat anggrek
105 31/1/2022
von florist
08.00 16.30 Finishing dan revisi desain
106 1/2/2022
node alat anggrek von florist
Jam Jam Kegiatan Pekerjaan
No. Tanggal Masuk Pulang
08.00 16.30 Penyempurnaan dan pengerjaan revisi
107 2/2/2022
desain node alat anggrek von florist
36
08.00 16.30 Menyesuaikan desain sticker
108 3/2/2022
dengan box node
08.00 16.30 Melanjutkan pengerjaan sticker node
109 4/2/2022
alat anggrek von florist
08.00 16.30 Ijin sakit
110 7/2/2022
08.00 16.30 Ijin sakit
111 8/2/2022
08.00 16.30 Revisi desain sticker box gateway
112 9/2/2022
dan node anggrek von florist
08.00 16.30 Revisi desain sticker box gateway dan
113 10/2/2022
node anggrek von florist
08.00 16.30 Merapikan susunan PCB alat turus
114 11/2/2022
asri farm dan laporan magang
Membuat kabel sensor alat turus asri
115 14/2/2022 08.00 16.30
farm dan laporan magang
Memasang stciker node dan
116 15/2/2022 08.00 16.30 koordinator alat turus asri farm
dan laporan magang
Menguji coba koordinator
08.00 16.30
117 16/2/2022 mengirim data ke antares alat turus
asri farm dan laporan magang
08.00 16.30 Meguji komunikasi node alat turus
118 17/2/2022
asri farm dan laporan magang
Memasang node dan koordinator alat
119 18/2/2022 08.00 16.30
turus asri farm dan laporan magang
08.00 16.30 Mengerjakan laporan magang
120 21/2/2022
08.00 16.30 Mengerjakan laporan magang
121 22/2/2022
08.00 16.30 Mengerjakan laporan magang
122 23/2/2022
08.00 16.30 Mengerjakan laporan magang
123 24/2/2022
08.00 16.30 Mengerjakan laporan magang
124 25/2/2022

08.00 16.30 Mengerjakan laporan magang


125 26/2/2022

Mengajukan,
Menyetujui,
Mahasiswa
Direktur Omah IoT

Tita Tri Uma


Agung Al Rasyid A.Md.T.

37
LAMPIRAN 2

Source code web sistem informasi pengelolaan air Tirta Turus Asri

<?php
session_start();
include "function.php";
$sa = new air();
$conn = $sa->koneksi();
$username = $_GET['u'];

?>

<!DOCTYPE html>
<html lang="en">

<head>
    <base href="./">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no'
name='viewport' />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin
Template">
    <meta name="author" content="Łukasz Holeczek">
    <meta name="keyword"
content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboar
d">

    <title>Tirta Turus Asri</title>


    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?
family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <!-- CSS Files -->
    <link href="../assets/css/material-dashboard.css?v=2.1.2" rel="stylesheet">
    <link href="../node_modules/simple-line-icons-master/simple-line-icons.min.css"
rel="stylesheet">
    <link href="../node_modules/pace.min.css" rel="stylesheet">
    <link href="../node_modules/animate.css" rel="stylesheet">
    <link rel="caap" sizes="76x76" href="../assets/img/caap.jpeg">
    <link rel="icon" type="image/png" href="../assets/img/caap.jpeg">
    <link href="../node_modules/fontawesome-free-5.11.2-web/css/all.css"
rel="stylesheet">
    <link href="../node_modules/animate.css" rel="stylesheet">

38
    <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
    <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css">
    <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-
awesome.min.css">

</head>

<body>

    <div class="wrapper ">

        <?php kepala_admin();
        $page = (isset($_GET['page'])) ? $_GET['page'] : 0; ?>
        <div class="main-panel">

                <?php atas_manj_user(); ?>

                <?php kaki(); ?>


                </div>

    <script src="../assets/js/core/jquery.min.js"></script>
    <script src="../node_modules/GaugeMeter.js"></script>
    <script src="../assets/js/core/popper.min.js"></script>
    <script src="../assets/js/core/bootstrap-material-design.min.js"></script>
    <script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
    <script src="../assets/js/plugins/moment.min.js"></script>
    <script src="../assets/js/plugins/sweetalert2.js"></script>
    <script src="../assets/js/plugins/jquery.validate.min.js"></script>
    <script src="../assets/js/plugins/jquery.bootstrap-wizard.js"></script>
    <script src="../assets/js/plugins/bootstrap-selectpicker.js"></script>
    <script src="../assets/js/plugins/bootstrap-datetimepicker.min.js"></script>
    <!-- <script src="../assets/js/plugins/jquery.dataTables.min.js"></script> -->
    <script src="../assets/js/plugins/bootstrap-tagsinput.js"></script>
    <script src="../assets/js/plugins/jasny-bootstrap.min.js"></script>
    <script src="../assets/js/plugins/fullcalendar.min.js"></script>
    <script src="../assets/js/plugins/jquery-jvectormap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
    <script src="../assets/js/plugins/arrive.min.js"></script>
    <script src="../assets/js/plugins/chartist.min.js"></script>
    <script src="../assets/js/plugins/bootstrap-notify.js"></script>
    <script src="../assets/js/material-dashboard.js?v=2.1.2"
type="text/javascript"></script>
    <!-- <script src="../node_modules/jquery-3.5.1.min.js"></script> -->
    <script src="../node_modules/GaugeMeter.js"></script>
39
    <script src="../node_modules/bootstrap.min.js"></script>
    <script src="../node_modules/pace.min.js"></script>
    <script src="../node_modules/perfect-scrollbar-0.4.5.min.js"></script>
    <script src="../node_modules/Chart.min.js"></script>

    <script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></
script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></
script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gauge.js/1.3.7/gauge.min.js"></
script>
    <script src="../node_modules/highcharts.js"></script>
    <script src="../node_modules/exporting.js"></script>
    <script src="../node_modules/export-data.js"></script>
    <script src="../node_modules/accessibility.js"></script>

    <!-- MANAJEMEN USER -->


    <script>
        $(document).ready(function() {
            getData_data_user();
            search_data_user();
            <?php if (isset($_GET['p']) && $_GET['p'] == 'tag_user') { ?>
                getmanajemen_air();
            <?php } ?>
        })

        $("#add_data-data_user").click(function() {
            $("#data-data_user").hide();
            $("#crud-data_user").show();
        });

        //SEARCH USER DATA


        function search_data_user(key = null) {
            $.ajax({
                url: '../ta/olah.php',
                method: 'post',
                data: {
                    key: key,
                    p: 'search',
                    page: "<?php echo $page; ?>"
                },
                success: function(response) {
                    // console.log(response);
                    res = JSON.parse(response);

                    var data = "";


                    var hal = <?php echo $page; ?>;
                    $('#databody-data_user').empty();
40
                    $.each(res.data, function(index, val) {
                        data += "<tr><td>" + (hal + (index + 1)) + "</td><td>" + val.nama +
"</td><td>" + val.alamat + "</td><td>" + val.no_rumah + "</td><td>" + val.no_hp +
"</td><td>" + val.tipe + "</td><td align='right'><button type='button' id='edit-user'
data-user=" + val.nama + " class='btn btn-primary edit-user' data-id='" + val.id + "' data-
nama= '" + val.nama + "' data-alamat= '" + val.alamat +
                            "' data-no_hp= '" + val.no_hp + "' data-tipe= '" + val.tipe + "' data-
no_pelanggan='" + val.no_pelanggan + "' data-no_rumah='" + val.no_rumah + "'> <i
class='fa fa-pencil' aria-hidden='true'></i></button><button id='hapus-user' data-user="
+ val.nama + " class='btn btn-danger hapus-user' data-id= '" + val.id + "'><i class='fa fa-
trash-o' aria-hidden='true'></i></button></td></tr>"
                    });
                    $('#databody-data_user').append(data);
                    // paginasi
                    $('#tombolnavigasi').empty();
                    var total_halaman = res.total;
                    for (var indexhalaman = 0; indexhalaman < total_halaman; indexhalaman+
+) {
                        $('#tombolnavigasi').append('<li class="page-item"><a class="page-
link" href="index.php?p=data_user&page=' + indexhalaman + '">' + (indexhalaman +
1) + '</a></li>');
          }
        }
            })
    }

        function searching_data_user() {
            var key = $('#search').val();
            search_data_user(key);
    }
        //END

        //MENAMBAHKAN USER
        function sendData_data_user() {
            var form_empty = false;
            $('#userform input').each(function() {
                if ($(this).val() === "") {
                    form_empty = true;
        }
            })
            if (form_empty) {
                alert("Data Belum Terisi")
            } else {

                var dataForm = $('#userform').serialize() + '&p=save';


                $.ajax({
                    url: '../ta/olah.php',
41
                    data: dataForm,
                    method: 'POST',
                    success: function(response) {
                        Swal.fire({
                            title: 'Data berhasil ditambahkan',
                            type: 'success',
                        }).then((result) => {
                            window.location.reload();
                        })
                    },
                    error: function(response) {
                        // console.log(response);
                        // res = JSON.parse(response);
                        // alert(res.msg);
          }
                });

      }
    }
        //END

        //MENAMPILKAN USER
        function getData_data_user() {
            $.ajax({
                url: '../ta/olah.php',
                data: {
                    p: 'read'
                },
                method: 'POST',
                success: function(response) {
                    // console.log(response);
                    res = JSON.parse(response);
                    var list = "";
                    var hal = 0;

                    $.each(res, function(index, val) {


                        list +=
                            "<tr><td>" + (hal + (index + 1)) + "</td><td>" + val.nama +
"</td><td>" + val.alamat + "</td><td>" + val.no_rumah + "</td><td>" + val.no_hp +
"</td><td>" + val.tipe + "</td><td align='right'><button type='button' id='edit-user'
data-user=" + val.nama + " class='btn btn-primary edit-user' data-id='" + val.id + "' data-
nama= '" + val.nama + "' data-alamat= '" + val.alamat +
                            "' data-no_hp= '" + val.no_hp + "' data-tipe= '" + val.tipe + "' data-
no_pelanggan='" + val.no_pelanggan + "' data-no_rumah='" + val.no_rumah +
"'>Edit</button><button id='hapus-user' data-user=" + val.nama + " class='btn btn-
danger hapus-user' data-id= '" + val.id + "'>Hapus</button></td></tr>"
                    });
                    $("#tabeluser tbody").append(list);

42
                },
                error: function(response) {
                    // console.log(response);
        }
            });
    }
        // END

        //EDIT USER & UPDATE


        $(document).on('click', '.edit-user', function() {
            var id = $(this).data('id');
            var nama = $(this).data('nama');
            var alamat = $(this).data('alamat');
            var no_hp = $(this).data('no_hp');
            var tipe = $(this).data('tipe');
            var no_pelanggan = $(this).data('no_pelanggan');
            var no_rumah = $(this).data('no_rumah');
            $('#data_id').val(id);
            $('#data_nama').val(nama);
            $('#data_alamat').val(alamat);
            $('#data_no_hp').val(no_hp);
            $('#data_tipe').val(tipe);
            $('#data_no_pelanggan').val(no_pelanggan);
            $('#data_no_rumah').val(no_rumah);
            $('#editmodal').modal('show');
        });

        function updateData_data_user() {
            // console.log("oke");
            var data = $('#editform').serialize() + '&p=edituser';
            $.ajax({
                url: '../ta/olah.php',
                method: 'post',
                data: data,
                success: function(response) {
                    // console.log(response);
                    $('#editmodal').modal('hide');
                    // Swal.fire({
                    //     position: 'middle',
                    //     icon: 'success',
                    //     title: 'Data berhasil diedit',
                    //     showConfirmButton: false,
                    //     timer: 1500
                    // })
                    // search();
                    window.location.reload();
        }
            })
    }
43
        //END

        //HAPUS DATA USER


        $(document).on('click', '.hapus-user', function() {
            console.log($(this).data('id'));
            var id_data = $(this).data('id');
            if (Swal.fire({
                    title: 'Apakah Anda yakin?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes!'
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            url: '../ta/olah.php',
                            method: 'post',
                            data: {

                                id: id_data,
                                p: 'hapus',
                            },
                            success: function(response) {
                                // console.log(response);
                                Swal.fire({
                                    title: 'Data berhasil dihapus',
                                    type: 'success',
                                }).then((result) => {
                                    window.location.reload();
                                })
              }
                        })
          }
                })) {

      }
        });
    </script>

</body>

</html>

44

Anda mungkin juga menyukai