PEMROGRAMAN INFORMASI MAHASISWA UNIVERSITAS

IBNU SINA MENGGUNAKAN JQURY MOBILE

UJIAN TENGAH SEMESTER
GASAL 2023/2024

Muhammad Aris Fadilla,

Program Studi Teknik Informatika, Universitas Ibnu Sina Batam,
211055201080@uis.ac.id,

Abstrak

Pemrograman pada perangkat bergerak dapat merujuk pada proses pengembangan

perangkat lunak atau aplikasi yang dirancang khusus untuk dijalankan pada
perangkat seluler atau proram Mobile seperti smartphone, tablet, atau perangkat
bergerak lainnya. Pemrograman pada perangkat bergerak dengan menggunakan
jQuery Mobile adalah topik yang penting dalam pengembangan aplikasi berbasis
web yang dioptimalkan untuk perangkat seluler. jQuery Mobile adalah sebuah
kerangka kerja sumber terbuka yang memungkinkan pengembang web untuk
dengan mudah membuat antarmuka pengguna yang responsif dan menarik untuk
perangkat seluler seperti smartphone dan tablet. konsep dasar dan manfaat dari
penggunaan jQuery Mobile dalam pengembangan aplikasi seluler. Ini mencakup
kemampuan dasar seperti pembuatan tata letak responsif, pengelolaan navigasi,
dan penggunaan komponen UI yang telah dibangun, seperti tombol, formulir,
daftar, dan popup.

Kata Kunci: Pemrograman perangkat bergerak dan jquery Mobile

 Abstrack

Programming on mobile devices can refer to the process of developing software

or applications specifically designed to run on mobile devices or mobile programs
such as smartphones, tablets, or other mobile devices. Programming on mobile
devices using jQuery Mobile is an important topic in the development of web-
based applications optimized for mobile devices. jQuery Mobile is an open source
framework that allows web developers to easily create responsive and engaging
user interfaces for mobile devices such as smartphones and tablets. basic concepts
and benefits of using jQuery Mobile in mobile application development. It
includes basic capabilities such as creating responsive layouts, managing
navigation, and using pre-built UI components, such as buttons, forms, lists, and
popups.

Keywords: Mobile device programming

1. KAJIAN PUSTAKA

Di era global seperti saat ini, internet sudah merambah berbagai bidang misalnya
sosial, periklanan, dan bisnis. Sejalan dengan kemajuan internet tersebut, banyak
berita yang disajikan melalui internet . Beberapa website penyedia berita
menambahkan fasilitas RSS (really simple syndication). RSS digunakan untuk
menyebarkan ringkasan tulisan terbaru. Untuk menampilkan berita dari website
yang mempunyai fasilitas RSS dibutuhkan sebuah aplikasi yang disebut news
reader. News reader adalah sebuah perangkat lunak atau layanan website yang
berfungsi untuk menampilkan ringkasan tulisan terbaru seperti tajuk berita, blog,
podcast, dan video blog pada suatu lokasi agar mudah dibacaUntuk
mempermudah dalam pengaksesannya, portal berita tersebut dibuat dalam bentuk
aplikasi perangkat bergerak. Adapun beberapa kemudahan mengakses berita
melalui perangkatbergerak ialah dapat diakses dimana saja dan kapan saja. Selain
itu konten pada aplikasi tidak terbatas hanya pada teks maupun gambar melainkan
juga berupa video(Ernawati et al., 2019).
jQuery adalah library JavaScript yang menyediakan fungsionalitas pemrograman
dalam membangun aplikasi web. Menggunakan jQuery menyederhanakan kode
program yang digunakan dalam pengembangan aplikasi web. Selain itu, jQuery
dapat diadaptasi sebagai plugin yang sepenuhnya dapat disesuaikan berdasarkan
kebutuhan pengguna, termasuk elemen HTML, CSS, dan jQuery yang sangat
mengurangi waktu pemuatan halaman. Sehingga dengan menggunakan
frameworkLaravel dan Bootstrap dalam pengembangan aplikasi absensi ini akan
mempermudah proses pengelolaan data absensi karyawan dan menyajikan
informasi yang akurat secara real time. Sistem absensi yang terkoneksi dengan
teknologi Internet of Things(IoT) akan memberikan manfaat tambahan, seperti
kemudahan akses bagi karyawan untuk mengirimkan absensi melalui perangkat
mobile. Menggunakan Leaflet sebagai perpustakaan JavaScript untuk pemetaan
web juga akan memungkinkan tampilan informasi yang lebih interaktif dan
integrasi dengan sistem ketepatan waktu. Selain itu, jQuery sebagai pustaka
JavaScript membantu mengembangkan aplikasi web yang efisien dan
responsif(Marleni & Gunaryati, 2023).
1. 1. Perancangan
Perancangan pada pemrograman pada perangkat bergerak menggunakan
jQuery Mobile adalah langkah penting dalam pengembangan aplikasi seluler yang
responsif dan berbasis web. Berikut adalah penjelasan perancangan pada
pemrograman pada perangkat bergerak menggunakan jQuery Mobile:
1. Langkah pertama adalah mengidentifikasi kebutuhan dan tujuan aplikasi
seluler Anda.
2. Desain penggunaan mobile.
3. Pilih versi jQuery Mobile yang sesuai dengan kebutuhan.
4. Rencanakan struktur halaman.
5. Melakukan pengujian pada jquery mobile.
6. Melakukan dokumentasi pembuatan jquery mobile.
1. 2. Aplikasi
Aplikasi yang dirancang merupakan berbasis web online yang dibuat
menggunakan Framework Jquery Mobile dapat dipastikan akan membantu
departemen tertentu untuk lebih cepat mengetahui hasil dari calon mahasiswa
yang mengikuti test tersebut. Aplikasi ini berfungsi untuk membantu
pelaksanaan tes secara online yang dgunakan langsung oleh peserta tes (user).
Aplikasi ini memunculkan soal-soal beserta pilihan jawaban yang diambil dari
database yang sudah diatur oleh administrator. Cakupan produk aplikasi yang
dibuat adalah informasi seputar Universitas Ibnu Sina Dan Data Mahasiswa,
aplikasi ini hanya membantu penyelenggara dalam menyelenggarakan
Informasi. (Sahi, 2020).

1. 3. Informasi dan Data Mahasiswa

Pada pemrograman peangkat bergerak menggunakan jquery mobile ini
penulis membuat program mobile sistem informasi seputar Universitas Ibnu Sina
dan gambaran beberapa data Mahasiswa yang terdapat di Universitas Ibnu Sina
dan Sistem pencarian data Mahasiswa Universitas Ibnu Sina Batam.

1. 4. Website
Websiteatau situs juga dapat diartikan sebagai kumpulan halaman
yang menampilkan informasi data teks, data gambar, data animasi, suara, video,
dan gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang
membentuk satu rangkaian bangunan yang salingterkait dimana masing-masing
dihubungkan dengan jaringan-jaringan halaman atau hyperlink. unsur
websiteyang penting dan utama adalah desain. Desain websitemenentukan
kualitas dan keindahan sebuah website. Desain sangat berpengaruh kepada
penilaian pengunjung akan bagus tidaknya sebuah website. Untuk membuat
websitebiasanya dapat dilakukan sendiri atau menyewa jasa websitedesigner.
Saat ini sangat banyak jasa webdesigner, terutama di kota-kota besar. Perlu
diketahui bahwa kualitas situs sangat ditentukan oleh kualitas designer. Semakin
banyak penguasaan webdesigner tentang beragam program/software pendukung
pembuatan situs maka akan dihasilkan situs yang semakin berkualitas, demikian
pula sebaliknya. Jasa webdesigner ini yang umumnya memerlukan biaya yang
tertinggi dari seluruh biaya pembangunan situs dan semuanya itu tergantung
kualitas designer. Programprogram desain websitesalah satunya adalah
Macromedia Firework, Adobe Photoshop, Adobe Dreamweaver, Microsoft
Frontpage, dll (Maharani et al., 2021).

1. 5. Jquery
JQuery merupakan suatu framework (library) Javascript yang menekankan
bagaimana interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada
tahun 2006 oleh John Resig. Fitur utama dari JQuery diantaranya:
A. Dapat mengakses elemen dalam dokumen Javascript khusus, untuk
mengakses suatu bagian tertentu dari halaman, harus mengikuti aturan
Document Object Model dan pengaksesan harus secara spesifik
menyesuaikan dengan struktur HTML.
B. Mengubah tampilan halaman website CSS (Cascading Style Sheet)
menawarkan metode yang cukup handal dalam mengatur dan mempercantik
halaman web.
C. Mengubah isi dari dokumen Tidak hanya memberikan “kosmetik” pada
halaman web, JQuery juga memberikan fasilitas untuk mengubah isi dari
dokumen hanya dengan beberapa baris perintah.
D. Merespon interaksi user Javascript sendiri memiliki beberapa event-
handling seperti onclick untuk menangani event saat terjadi click.
E. Animasi pada dokumen Animasi seringkali disertakan dalam suatu halaman
web untuk menambah kecantikannya.
F. Mengambil informasi dari server tanpa harus me-refresh halaman Mengambil
informasi dari server tanpa refresh halaman merupakan salah satu konsep
dasar yang dikenal dengan nama AJAX (Asynchronous Javascript and
XML).
G. Menyederhanakan penulisan sintaks Javascript Semboyan JQuery adalah
“Write less, do more” atau dengan kata lain kesederhanaan dalam
penulisan code, tetapi menghasilnya tampilan yang lebih. (Sahi, 2020).

1.6 Mobile
Pembuatan aplikasi mobile yang berbasis android di jaman sekarang ini
telah mencapai kemajuan yang sangat besar terutama aplikasi yang berhubungan
dengan pendataan mahasiswa dalam sebuah seminar. Sistem aplikasi yang
berhubungan dengan pendataan mahasiswa merupakan salah satu bagian yang
sangat penting dalam pengelolaan data. Penggunaan sistem yang terkomputerisasi
akan lebih banyak menghemat waktu, tidak banyak menyita tenaga, dan
menghasilkan keakuratan penyajian data apalagi ditambah dengan sistem database
sebagai media penyimpanan datanya. Membutuhkan kecepatan mentransfer data
untuk melihat data yang masuk secara langsung dan dapat mencari suatu data
dengan cepat dengan menggunakan konsep sistem terdistribusi. Mengelola data
dari mahasiswa masih menggunakan cara manual, artinya dari segi pencatatan dan
pengolahannya masih menggunakan selembar kertas berupa persediaan. Setiap
pendaftaran data tersebut harus di update guna mengetahui berapa mahasiswa
yang telah terdaftar. Betapa sulitnya jika penyimpanan data mahasiswa
menggunakan cara konvensional seperti itu dan masih offline (Roihan et al.,
2019). Berikut ini adalah gambaran sistem informasi Universitas Ibnu Sina dan
contoh beberapa data mahasasiswanya:
1. Tampilan contoh data mahasiswa Universitas Ibnu Sina Batam.

Gambar 1. Tampilan contoh data mahasiswa

2. Tampilan contoh berita sistem informasi Universitas Ibnu Sina.

Gambar 2. Contoh Tampilan Sistem Informasi UIS.

3. Tampilan contoh database mahasiswa dalam pembuatann sistem pencarian
data mahsiswa.

Gambar 4. Database Mysql

2. PEMBAHASAN
Merupakan tahap menguraikan seluruh hasil dan pembahasan yang
digunakan untuk menggambarkan secara detail dari laporan Perancangan Aplikasi
Sistem Informasi Universitas Ibnu Sina dan Data Mahasiswa Berbasis Jquery
Mobile.
2.1. Koding Program
Tabel 1. Koneksi Mysql
<?php
$host = "localhost";
$user = "root";
$pass = "";
$database = "mahasiswa";

$koneksi = mysqli_connect($host, $user, $pass, $database);

if ($koneksi) {
// Koneksi ke database berhasil
} else {
echo "Koneksi database gagal: " . mysqli_connect_error();
}
?>

Pada table 1. Koneksi Mysql merupakan koneksi database yang terdapat pada
mysql untuk menghubungkan program yang kita buat ke dalam data mysql yang
telah kita buat juga.
Tabel 2. Koneksi jQuery Mobile
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-
1.4.5.min.js"></script>
<style>
Pada table2. Koneksi jQuery Mobile merupakan koneksi program untuk bisa di
akses melalui web Mobile pada program kita agar dapat di akses melalui
handphone, tablet dll yang termasuk ke dalam program mobile.
Table 3. Program Aplikasi Menggunakan PHP.
Kodingan koneksi server data mahasiswa
function loadData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
var table = document.getElementById("mahasiswa");
table.innerHTML =
"<tr><th>Nama</th><th>NPM</th><th>Prodi</th><th>Alamat</th></tr>";

data.forEach(function(mahasiswa) {
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row insertCell(2);
var cell4 = row insertCell(3);
cell1.innerHTML = mahasiswa.nama;
cell2.innerHTML = mahasiswa.npm;
cell3.innerHTML = mahasiswa.prodi;
cell4.innerHTML = mahasiswa.alamat;
Kodingan tampilan halam utama
<div data-role="page" id="page1">
<div data-role="header">
<h1>Welcome To MyInformation</h1>
</div>
<div data-role="content">
<p>HALLO!!, MUHARFAD</p>
 <a href="#page2" data-role="button">NEXT Information</a>
</div>

<button id="searchButton">Cari</button>

<div id="searchResults">
<!-- Konten yang akan dicari -->
<h2>Mahasiswa Ibnu Sina</h2>
<input type="text" id="search-box" onkeyup="searchMahasiswa()"
placeholder="Cari mahasiswa berdasarkan nama...">
<table id="mahasiswa">
<tr>
<th>Nama</th>
<th>NPM</th>
<th>Prodi</th>
<th>Alamat</th>
</tr>
</table>
</div>
</div>
Kodingan tampilan halaman informasi
<div data-role="page" id="page2">
<div data-role="header">
<h1> THE INFORMATION</h1>
</div>
<div data-role="content">
<p>Selamat datang </p>

Pada Table 3. Program Aplikasi Menggunakan PHP yaitu terdapat kodingan

untuk akses data mahasiswa dan kodingan untuk tampilan halam utama dan
tampilan halam informasi Universitas Ibnu Sina untuk program aplikasi mobile
yang kita buat.

2.2. Penerapan Program

Pembuatan Program aplikasi jquery mobile melibatkan beberapa
langkah, termasuk pemilihan alat dan perangkat lunak yang tepat, penyiapan data,
perancangan tata letak program yang sedang di rancang, dan penyusunan
program. Berikut adalah penerapan Program aplikasi jquery mobile yang telah
penulis buat:
1. Pembuatan program aplikasi jquery mobile dengan membuat tampilan utama
pada aplikasi mobile, terdapat tampilan pencarian data mahasiswa dan menu
informasi Universitas Ibnu Sina Batam yang berfungsi untuk memberikan
berita informasi seputar Universitas.

Gambar 1. Halaman Utama

2. Percobaan program yang kita buat apakah dapat berjalan dengan yang kita
inginkan atau tidak, dengan mencoba sistem pencarian data mahasiswa seperti
gambar di bawah ini.

Gambar 2. Pencarian data mahasiswa

3. Membuka menu “NEXT Information” di mana menu ini untuk membuka
berita informasi seputar Universitas Ibnu Sina Batam.

Gambar 3. Menu Berita Informasi

4. Selanjutnya kita akan membuka aplikasi jquery mobile yang kita buat ke
handphone kita dengan menggunakan alamat ip address hp kita dengen
melakukan pengecekan di command prompt dengan mengetik “ ipconfig”.

Gambar 4. Alamat Ip Adress

5. Selanjutnya kita buka di hp/tablet dengan menggunakan alamat ip address dan
dengan nama data yang kita buat sebagai program aplikasi mobile.

Gambar 5. Tampilan pada HP

6. Selanjutnya mencoba halaman berita informasi Universitas Ibnu Sina Batam
menggunakan hp/tablet untuk mencoba program Aplikasi Mobile, jika
berhasil maka aplikasi mobile telah selesai.

Gambar 6. Halaman Informasasi Pada HP

3. PENUTUP

3.1 Kesimpulan
Pemrograman perangkat bergerak dengan menggunakan jQuery Mobile
memberikan pemahaman yang baik tentang cara mengembangkan aplikasi mobile
yang responsif dan menarik. Berikut adalah beberapa kesimpulan yang dapat
penulis jabarkan:
1. JQuery Mobile memungkinkan pengguna untuk membuat aplikasi yang
responsif dan ramah pengguna dengan mudah. Yang bisa membuat aplikasi
 dapat diakses dengan baik pada berbagai perangkat, termasuk Handphone
dan tablet.
2. Pengguna dapat menggunakan jQuery Mobile untuk membuat aplikasi yang
dapat berjalan di berbagai platform, termasuk iOS, Android, dan banyak lagi.
Ini mengurangi kerumitan dalam mengembangkan aplikasi untuk berbagai
sistem operasi.
3.2 Saran
Setelah memahami materi pemrograman perangkat bergerak dengan
jQuery Mobile, penulis dapat memberikan saran untuk pengembangan aplikasi
mobile:
1. Pelajari jQuery dengan Baik Sebelum memulai pengembangan dengan
jQuery Mobile, pastikan kita memiliki pemahaman yang kuat tentang
jQuery.karenal ini dapat membantu kita untuk memanfaatkan sepenuhnya
fitur-fitur yang disediakan oleh jQuery Mobile.
2. Uji pada Berbagai Perangkat untuk dapat memastikan aplikasi kita diuji pada
berbagai perangkat dan sistem operasi untuk memastikan kompatibilitas yang
baik

4. DAFTAR PUSTAKA

Ernawati, E., Johar, A., & Setiawan, S. (2019). Implementasi Metode String
Matching Untuk Pencarian Berita Utama Pada Portal Berita Berbasis
Android (Studi Kasus: Harian Rakyat Bengkulu). Pseudocode, 6(1), 77–82.
https://doi.org/10.33369/pseudocode.6.1.77-82

Maharani, D., Helmiah, F., & Rahmadani, N. (2021). Penyuluhan Manfaat

Menggunakan Internet dan Website Pada Masa Pandemi Covid-19.
Abdiformatika: Jurnal Pengabdian Masyarakat Informatika, 1(1), 1–7.
https://doi.org/10.25008/abdiformatika.v1i1.130

Marleni, I. A., & Gunaryati, A. (2023). Presensi Karyawan Berbasis Web dengan
Fitur Lokasi Leaflet JS menggunakan Laravel. Jurnal JTIK (Jurnal Teknologi
 Informasi Dan Komunikasi), 7(3), 479–485.
https://doi.org/10.35870/jtik.v7i3.947

Roihan, A., Wisanto, A. A., Sulaeman, Y., Nur, F. M., & Williandi, S. (2019).
Implementasi Metode Realtime, Live Data Dan Parsing JSON Berbasis
Mobile Dengan Menggunakan Android Studio Dan PHP Native. Jurnal
Teknologi Informasi, 5(2).

Sahi, A. (2020). Aplikasi Test Potensi Akademik Seleksi Saringan Masuk LP3I
Berbasis Web Online menggunakan Framework Codeigniter. Tematik, 7(1),
120–129. https://doi.org/10.38204/tematik.v7i1.386