JE-UNISLA
Electronic Control, Telecomunication, Computer Information and Power Systems
Volume. 8 No. 2 Bulan September Tahun 2023 ISSN : 25020989 | E-ISSN : 26860635

## PERANCANGAN WEBSITE BERBASIS INTERNET OF THINGS MENGUNAKAN FRAMEWROK FLASK
Iwan Ganda Saputra 1 , Ibrahim 2
12 Program Studi Teknik Elektro, Fakultas Teknik, Universitas Singaperbangsa Karawang Jl. H.S. Ronggo Waluyo, Puseurjaya, Kec. Telukjambe Timur, Kab. Karawang, Jawa Barat, Indoneisa, ID 41361 Telp. (0267) 641177 E-mail: 1 1910631160017@student.unsika.ac.id, 2 ibrahim@ft.unsika.ac.id

## A R T I C L E  I N F O
A B S T R A C T Article History : Article entry : 07-20-2023 Article revised : 07-28-2023 Article received  : 09-18-2023 A website is a page of information provided through the internet so that it can be accessed worldwide as long as it is connected to the internet network.  A  website  is  also  a  component  or  collection  of  components consisting of text, images, sound, and animation so that it is interesting to  visit.  The  web  consists  of  pages  and  collections  of  pages  called homepages.  Webset  can  also  be  created  with  the flask  programming language.  Flask  is  a  micro  web  application  framework  written  in Python  and  uses  Werkzeug  and  Jinja2  dependencies.  by  creating  a webset  framework  using  bootsrap.  because  Bootstrap  is  an  HTML, CSS,  and  Javascript  framework  that  functions  to  design  responsive websites quickly and easily.
Keywords  : Website,  Flask  Programming,
Bootstrap.

## 1. PENDAHULUAN
Perkembangan  dunia  teknologi  saat  ini  sudah semakin  pesat  dan  merambah  ke  berbagai  sisi kehidupan  dunia  (Hidayanto  &  M.  Z.  Ilmi,  2015). Contohnya seperti dari kemajuan teknologi informasi pada  bidang  kesehatan  yaitu  kedokteran.  Kemajuan dalam  bidang  kesehatan  ini  sangat  berkembang dengan  begitu  cepat,  sehingga  banyak  penemuan- penemuan yang didapatkan dengan bantuan teknologi Informasi baik pada bidang pengorganisasian rumah sakit, pengobatan, maupun penelitian pengembangan dari ilmu kesehatan itu sendiri (A., 2018).
Kesehatan  merupakan  hal  yang  penting  bagi manusia  termasuk  kesehatan  mata,  karena  dengan mata  manusia  dapat  berinteraksi  dengan  lingkungan sekitarnya.  Jika  mata  mengalami  gangguan  dan mengabaikannya, bisa jadi itu merupakan gejala awal penyakit mata (N Sari & M. H. Munandar, 2020). Ada banyak penyakit mata salah satu contoh dari penyakit mata yaitu katarak,glaukoma, dan retinopati diabetik. Karena  kurangnya  informasi  tentang  penyakit  mata diatas  mengakibatkan  banyak  penderita  penyakit mata  khususnya  para  orang  tua.  Hal  ini  bisa  di sebabkan  karena  kurangnya  informasi  mengenai penyakit mata diatas dan tidak ada waktu luang untuk memeriksa mata ke rumah sakit.
Dari  permasalahan  tersebut  di  butuhkan  website untuk  memberi  informasi  mengenai  kesehatan  mata khusus  3  penyakit  yaitu  katarak,  glaukoma,  dan retinopati  diabetik.  Dan  website  ini  juga  bisa  di gunakan  untuk  rumah  sakit  atau  kelinik  yang  bisa mengobati tiga penyakit tersebut.
Pada  proses  pembuatan  website  ini  mengunakan bahasa pemrograman python,flask,bootstrap,dan MySQL sebagai database untuk penyimpanan.

## 2. TINJAUAN PUSTAKA

## 2.1. WEBSITE
Website disebut  juga site, situs, situs web atau portal.  Merupakan  kumpulan  halaman  web  yang berhubungan  antara  satu  dengan  lainnya,  halaman pertama  sebuah  website  adalah  home  page, sedangkan halaman demi halamannya secara mandiri disebut  web  page,  dengan  kata  lain  website  adalah situs  yang  dapat  diakses  dan  dilihat  oleh  para pengguna  internet  diseluruh  dunia.  Website  adalah situs  yang  dapat  diakses  dan  dilihat  oleh  para pengguna  Internet  Fungsi  website  diantaranya  (W., 2020):
1. Media Promosi
2. Media Pemasaran
3. Media Informasi
4. Media Pendidikan
5. Media Komunikasi

## 2.2. BAHASA PEMROGRAMAAN PYTHON
Pemrograman Python merupakan bahasa pemrograman interpretatif multiguna dengan filosofi perancangan yang berfokus pada tingkat keterbacaan kode.  Python  diklaim  sebagai  bahasa  yang menggabungkan  kapabilitas,  kemampuan,  dengan sintaksis  kode  yang  sangat  jelas,  dan  dilengkapi dengan  fungsionalitas  pustaka  standar  yang  besar serta komprehensif. Python  iyalah  salah satu bahasa pemrograman  tingkat  tinggi  ( high  level  language ). Python  dirancang  untuk  memberikan  kemudahan bagi  programmer  melalui  segi  efisiensi  waktu, kemudahan dalam pengembangan dan kompatibilitas dengan  sistem.  Python  bisa  digunakan  untuk membuat  aplikasi  standalone  (berdiri  sendiri)  dan pemrograman  script  (Zuraidah  &  M.  F  Apriyadi, 2021).

## 2.3. FLASK
Flask  merupakan  website  framework  yang mengunakan  bahasa  Python  dan  tergolong  sebagai jenis  microframework.  Flask  mempunyai  fungsi sebagai  kerangka  kerja  aplikasi  dan  tampilan  suatu website,  dengan  menggunakan  flask  dan  python seseorang dapat membuat website dengan terstruktur dan  dapat  mengatur  tampilan  dengan  mudah  (R., 2018).

## 2.4. BOOTSTRAP
Bootstrap adalah sebuah library framework CSS yang  dibuat  khusus  untuk  bagian  pengembangan front-end  website  (A,  2016).  Jadi Bootstrap merupakan framework HTML, CSS, dan JavaScript yang  berfungsi  untuk  mendesain website  responsive dengan cepat dan mudah. Bootstrap adalah salah satu kerangka  kerja  HTML,  CSS,  dan  javascript  yang paling  terkenal  di  kalangan  pengembang  web  yang digunakan  untuk  membangun  situs  web  yang responsif.  Bootstrap  memiliki  kelas  yang  cukup
komprehensif.  Mulai  dari  kelas  untuk  tata  letak halaman,  kelas  navigasi  menu,  kelas  animasi,  dan banyak lagi. Bootstrap responsif karena menggunakan  sistem  grid.  Sistem  grid  di  Bootstrap menggunakan  serangkaian  wadah,  baris,  dan  kolom untuk  menyesuaikan  tata  letak  dan  isi  situs  web  Ini (Santoso, 2022). Memungkinkan halaman web untuk menyesuaikan  dengan  ukuran  layar  perangkat (desktop,  tablet,  ponsel)  yang  digunakan  oleh pengguna saat mengakses situs web melalui browser. Pada  awalnya,  Bootstrap  dikenal  sebagai  "Twitter Blueprint"  yang  dikembangkan  oleh  Mark  Otto  dan Jacob  Thornton  di  Twitter  sebagai  kerangka  kerja untuk  memastikan  konsistensi  dalam  alat  internal (Dhika, N. Isnain , & M. Tofan, 2019).

## 2.5. MYSQL
MySQL  adalah  sebuah  perangkat  lunak  yang terdapat  didalam  sistem  manajemen  basis  data  SQL (database  management  system)  atau  yang  biasa disebut DBMS yang multithread, multi-user, dengan sekitar  6  juta  instalasi  di  seluruh  dunia.  Dalam membuatkan mysql yang tersedia di dalam perangkat lunak yang terletak di GPL atau yang biasa di sebut dengan General Public License. Jadi MySQL adalah database  server  yang  gratis  dengan  lisensi  GNU General  Public  License  (GPL)  sehingga  dapat  kita pakai  untuk  keperluan  pribadi  atau  komersial  tanpa harus  membayar  lisensi  yang  ada.  MySQL merupakan database engine atau server database yang mendukung  bahasa  database  SQL  sebagai  bahasa interaktif  dalam  mengelola  data.  MySQL  adalah sebuah perangkat lunak sistem manajemen basis data SQL atau DBMS yang multithread, multi-user (Fitri, 2020).
3. METODE PENELITIAN
3.1. PENGCODINGAN WEBSITE
Perancangan website di mulai dengan pengcodingan  untuk  kerangka  dan  menu  menu lainnya
from flask import Flask, render_template, request, redirect, url_for, session, flash, jsonify, make_response, send_file from flask_sqlalchemy import SQLAlchemy from flask_bcrypt import Bcrypt from flask_wtf import FlaskForm from wtforms import StringField, PasswordField, SelectField from wtforms.validators import InputRequired from flask_bootstrap import Bootstrap from functools import wraps import pdfkit from PIL import Image import base64 import MySQLdb
Gambar 1. Library Flask
<!-- Custom styles for this template -->
<link href = "https:// getbootstrap.com/docs/5.3/examples/cover/cover.css" rel = "stylesheet" > </head> <body class = "d-flex h-1000 w-1000 text-center text-bg-dark bg-white" > <img class = "img-fluid" src = "{{ url_for('static', filename='dokter.png') }}" alt = "" > <div class = "position-absolute  top-0  start-0  w-100  h-500  d-flex  align-items- center" style = "background: rgba(6, 3, 21, .5);" > <div class = "container d-flex w-100 h-100 p-3 mx-auto flex-column" > <header class = "mb-auto" > <div> <img class = "float-md-start  mb-0" src = "{{  url_for('static',  filename='lambang.png') }}" width = "250" height = "75" ></img> <nav class = "nav nav-masthead justify-content-center float-md-end" > <a class = "nav-link  nav-link-sm  fw-bold  py-1  px-0  active" aria-current= "page" href = "/" > Home </a>
<a class = "nav-link nav-link-sm fw-bold py-1 px-0"
href = "/KlasifikasiMata" > Klasifikasi Mata </a> <a class = "nav-link  nav-link-sm  fw-bold  py-1  px-0" href = "/Hasil" > Hasil Deteksi </a> <a class = "nav-link nav-link-sm fw-bold py-1 px-0" href = "/TentangKami" > Tentang Kami </a> </nav> </div> </header> <main class = "px-3" > <br></br> <br></br> <br></br> <h1> Selamat Datang Di Website INTERLOPE </h1> <p class = "lead" > Ayo Cek Matamu Guna Mencegah Gangguan Kesehatan Mata </p> <p class = "lead" >
Gambar 2. Codingan Menu Home
@app.route( '/' ) def Home (): return render_template( 'Home.html' )
@app.route( '/KlasifikasiMata' ) def klasifikasi (): return render_template( 'Klasifikasi.html' )
Gambar 3. Codingan Untuk Memanggil Menu Home Dan Klasifikasi Mata
if __name__ == '__main__' : app.run(debug= True )
Gambar 4. Codingan Untuk Menjalankan

## 3.2. PERANCANGAN SISTEM WEBSITE

## Gambar 5. Flowchar Kerangka Website
Terdapat beberpaba codingan untuk website ini pada  gambar  1  codingan  library  berfungsi  sebagai sekumpulan kode yang memiliki fungsi- fungsi tertentu dan dapat dipanggil kedalam program lain.  Untuk  gambar  ke  2  ini  codingan  untuk  menu home kita dapat merubah mengganti sesuai keinginan kita.
Dapat dilihat pada gambar 5 bahwa pertama kali ditampilkan saat membuka website oleh user adalah halaman  dashboard  home  dimana  pada  halaman  ini terdapat gambar dan penjelasan mengenai alat kami (interlope), ada beberapa menu halaman yang lainya
seperti klasifikasi  mata dimana halaman  ini  memuat informasi-informasi penyakit mata khususnya katarak,glaukoma,retina  diabetic.  Selanjutnya  ada halaman hasil deteksi halaman ini hanya bisa dibuka oleh  user  yang  sudah  mendaftarkan  dirinya  untuk pemeriksaan  penyakit  mata  lalu  memiliki username dan password dihalaman ini  terdapat  hasil pemeriksaan  pasien.  Halamn  selanjutnya  ada halaman  tentang  kami  berisikan  informasi  data  diri interlope seperti kontak,alamat,email,dan maps.
4. HASIL
Setelah melakukan pengcodingan dan pembuatan  floechat  kerangka  website  maka  di dapatkan hasil sebagai berikut:
Gambar 6. Menu Awal Website
Gambar 7. Menu Klasifikasi / Penjelasan
Dialam  halaman  klasifikasi  dapat  diisi  dengan penjelasan  penjelasan.  Didalam  gambar  di  isi penjelasan penyakit mata kususnya katarak,glaukoma,diabetik retinopathy 5. PENUTUP 5.1. KESIMPULAN
Dari penelitian yang dilakukan dapat disimpulkan sebagai berikut:
1. Dengan  kemajuan  teknologi  yang  begitu  cepat dapat  membantu  dalam  sektor  kesehatan  seperti informasi  informasi  kesehatan  dalam  bentuk website
2. Kesehatan  merupakan  hal  yang  penting  bagi manusia termasuk kesehatan mata, karena dengan mata manusia dapat berinteraksi dengan lingkungan  sekitarnya  maka  jaga  dan  rawat kesehatan mata.
3. Pembuatan  website  dapat  mengunakan  bahasa pemrogrmaan python, bootsrap, dan penyimpanannya bisa mengunakan mysql.

## DAFTAR PUSTAKA
A, Z. (2016). Rancang Bangun Web Layout Dengan Menggunakan Bootstrap Framework. informatika dan teknologi jaringan .
A., Y. (2018). Pemanfaatan Teknologi dalam Bidang.
Jurnal Kesehatan Masyarakat , 97-102. Dhika,  H.,  N.  Isnain  ,  &  M.  Tofan.  (2019). Manajemen Villa Menggunakan Java Netbeans Dan MYsql. universitas indraprasta PGRI , 104-110. Fitri, S. (2020). Pemogramaan Basis Data
Menggunakn mysql . Deepublish . Hidayanto,  F.,  &  M.  Z.  Ilmi.  (2015).  Pentingnya Internet Sehat. Jurnal Inovasi dan
Kewirausahaan , 21-24.
N Sari, M., & M. H. Munandar. (2020). Sistem Pakar
Diagnosa Penyakit
Mata
Manusia Menggunakan  Metode  Certainty  Factor
Berbasis  WEB. Jurnal  Teknik  Informatika Unika , 1-6.
R.,  I.  (2018).  Penggunaan  Python  web  Framework Flask  Untuk  Pemula. institut  Teknologi
Bandung , 2016.
Santoso,  A.  B.  (2022).  Pemrogramaan  Web  PHP Dasar  Database  Mysql  dengan  Bootstrap  . widina bhakti persada bandung .
W.,  A.  (2020).  Analisa  Kepuasan  Mahasiswa Terhadap  Website  Universitas  Negeri Yogyakarta . Universitas Negeri Yogyakarta
, 1-6.
Zuraidah, D. N., & M. F Apriyadi. (2021). Menelisik Platfrom  Digital  dalam  Teknologi  Bahasa Pemrograman  . jurnal  ilmiah  teknologi informasi dan sains , 1-6.