Perancangan sistem akademik sekolah berbasis teknologi mobile WEB : studi kasus sma muhammadiyah 3 tangerang

PERANCANGAN SISTEM AKADEMIK SEKOLAH

BERBASIS TEKNOLOGI

MOBILE WEB

(STUDI KASUS : SMA MUHAMMADIYAH 3 TANGERANG)

Oleh :

NENDY SUBHANSYAH 106091002885

PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA

ii

PERANCANGAN SISTEM AKADEMIK SEKOLAH

BERBASIS TEKNOLOGI

MOBILE WEB

(STUDI KASUS : SMA MUHAMMADIYAH 3 TANGERANG)

Skripsi

Sebagai Salah Satu Syarat Untuk Memperoleh Gelar Sarjana Komputer

Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

Oleh :

NENDY SUBHANSYAH 106091002885

PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA

iii

PERANCANGAN SISTEM AKADEMIK SEKOLAH BERBASIS TEKNOLOGI MOBILE WEB

(STUDI KASUS : SMA MUHAMMADIYAH 3 TANGERANG)

Skripsi

Sebagai Salah Satu Syarat Untuk Memperoleh Gelar Sarjana Komputer Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

Oleh :

NENDY SUBHANSYAH 106091002885

Menyetujui,

Pembimbing I Pembimbing II

Herlino Nanang, M.T Andrew Fiade, M.Kom NIP. 19731209 200501 1 002 NIP. 19820811 200912 1 604

Mengetahui,

Ketua Program Studi Teknik Informatika,

Yusuf Durachman, M.Sc, MIT NIP. 19710522 200604 1 002

iv

PENGESAHAN UJIAN

Skripsi yang berjudul ”Perancangan Sistem Akademik Sekolah Berbasis Teknologi Mobile Web (Studi Kasus : SMA Muhammadiyah 3 Tangerang)” telah diuji dan dinyatakan lulus dalam sidang Munaqosyah Fakultas Sains dan Teknologi, Universitas Islam Negeri Syarif Hidayatullah Jakarta pada hari Selasa, 25 Januari 2011. Skripsi ini telah diterima sebagai salah satu syarat untuk memperoleh gelar Sarjana (S1) Program Studi Teknik Informatika.

Jakarta, Januari 2011 Menyetujui,

Penguji I Penguji II

Yusuf Durachman, M.Sc, MIT Fitri Mintarsih, M.Kom NIP. 19710522 200604 1 002 NIP. 19721223 200720 2 004

Pembimbing I Pembimbing II

Herlino Nanang, M.T Andrew Fiade, M.Kom NIP. 19731209 200501 1 002 NIP. 19820811 200912 1 604

Mengetahui,

Dekan Fakultas Sains dan Teknologi Ketua Program Studi Teknik Informatika

Dr. Syopiansyah Jaya Putra, M.Sis Yusuf Durachman, M.Sc, MIT NIP. 19680117 200112 1 001 NIP. 19710522 200604 1 002

v

PERNYATAAN

DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI INI BENAR-BENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI ATAU LEMBAGA MANAPUN.

Jakarta, Januari 2011

Nendy Subhansyah 106091002885

vi

ABSTRAK

Nendy Subhansyah (106091002885), Perancangan Sistem Akademik Sekolah Berbasis Teknologi Mobile Web (Studi Kasus : SMA Muhammadiyah 3 Tangerang) (di bawah bimbingan Herlino Nanang, MT dan Andrew Fiade, M. Kom).

Sekolah merupakan organisasi yang di dalamnya terdapat kegiatan akademik. Dalam hal menjalankan kegiatan akademik, SMA Muhammadiyah 3 Tangerang masih bersifat sederhana. Oleh karena itu dibutuhkan sistem untuk mengatasi permasalahan tersebut, salah satunya dengan sistem berbasis web. Pengelolaan sistem akademik berbasis web pada sekolah-sekolah masih perlu dimaksimalkan, yaitu dengan menggunakan layanan mobile web, agar informasi akademik dapat diterima dengan mudah dan cepat. Oleh karena itu, permasalahan yang akan dibahas dalam penelitian ini adalah bagaimana merancang sistem akademik SMA Muhammadiyah 3 Tangerang berbasis mobile web pada user dan web pada admin sekolah.. Perancangan sistem ini menggunakan bahasa xHTML MP, PHP, jQuery, dan MySQL. Metodologi pengembangan sistem yang dipakai adalah incremental. Hasil penelitian berupa sistem akademik sekolah berbasis mobile web sehingga siswa, guru, wali siswa, pegawai, dan tamu dapat dengan mudah mengaksesnya melalui handphone.

Kata kunci : sistem akademik sekolah, mobile web, incremental, xHTML MP. V Bab + xx halaman + 138 Halaman + 124 Gambar + 20 Tabel + Daftar Pustaka + 5 Lampiran

vii

KATA PENGANTAR

Puji syukur penulis panjatkan kehadirat Allah SWT, karena atas limpahan rahmat, taufik serta karunia-Nya, penulis dapat menyelesaikan penulisan Skripsi ini yang berjudul “Perancangan Sistem Akademik Sekolah Berbasis Teknologi

Mobile Web (Studi Kasus : SMA Muhammadiyah 3 Tangerang)”. Skripsi ini

merupakan salah satu syarat yang harus ditempuh oleh seluruh mahasiswa Jurusan Teknik Informatika untuk mencapai gelar Sarjana Komputer pada Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta.

Selama dalam proses pembuatan skripsi ini, penulis banyak mendapat bimbingan dan bantuan dari berbagai pihak. Oleh karenanya perkenankanlah penulis mengucapkan terima kasih kepada pihak – pihak yang telah membantu penulis, diantaranya adalah :

1. Bapak Dr. Syopiansyah Jaya Putra, M.Sis, selaku Dekan Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta.

2. Bapak Yusuf Durachman, M.Sc, MIT, selaku Ketua Program Studi Teknik Informatika Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta.

3. Bapak Herlino Nanang, MT, selaku Dosen Pembimbing I dan Bapak Andrew Fiade, M. Kom selaku Dosen Pembimbing II yang telah memberikan bimbingan dan arahan dalam menyusun skripsi ini.

viii

4. Pihak-pihak dari SMA Muhammadiyah 3 Tangerang selaku tempat riset yang telah memberikan data-data yang penulis butuhkan dalam menyelesaikan penyusunan skripsi, seperti Bapak Abd. Rohim S.Ag, M.Pd selaku Kepala Sekolah, Ibu Dewi Sri Rahayu, S.Si selaku PKS Bidang Kurikulum, serta para staf TU dan guru-guru di sana.

5. Keluarga tercinta, Ayahanda Moh. Soleh Lubis, S.IP, Ibunda Neneng Hanafiah, dan adik – adik tercinta, Nuri Shabania, Nia Septiani Amalia, dan si kecil Natasha Isramitha, atas doa dan dukungan dalam penulisan skripsi ini.

6. Teman - teman kelas TI-B angkatan 2006 yang telah memberikan motivasi untuk dapat menyusun dan menyelesaikan skripsi ini.

7. Serta semua pihak yang tidak bisa disebutkan satu persatu yang telah membantu dalam penyusunan skripsi ini.

Penulis menyadari bahwa masih terdapat banyak kekurangan dalam penyusunan skripsi ini, sehingga saran dan kritik yang ditujukan untuk kemajuan skripsi ini sangat penulis hargai untuk kelanjutan di masa yang akan datang. Penulis berharap agar skripsi ini dapat bermanfaat bagi diri sendiri, dan bagi orang banyak. Amin.

Tangerang, Juli 2010

ix

DAFTAR ISI

Halaman

LEMBAR SAMPUL ……… i

LEMBAR JUDUL .……….………. ii

LEMBAR PENGESAHAN PEMBIMBING .……… iii

LEMBAR PENGESAHAN UJIAN ...……….. iv

LEMBAR PERNYATAAN ………. v

ABSTRAK ... vi

KATA PENGANTAR ………. vii

DAFTAR ISI ………. ix

DAFTAR GAMBAR ……… xiii

DAFTAR TABEL ……… xix

BAB I. PENDAHULUAN 1.1 Latar Belakang ………....……… 1

1.2 Rumusan Masalah ...……… 3

1.3 Batasan Masalah ...……….. 4

1.4 Tujuan dan Manfaat Penelitian ……….... 4

1.4.1 Tujuan Penelitian ………... 4

1.4.2 Manfaat Penelitian ……… 5

1.5 Metodologi Penelitian ………….……… 6

x

1.5.2 Metode Pengembangan Sistem ……...…..………. 7

1.6 Sistematika Penulisan ……….……… 8

BAB II. LANDASAN TEORI 2.1 Konsep Perancangan Sistem Akademik Berbasis Mobile Web 9

2.1.1 Definisi Perancangan Sistem ……… 9

2.1.2 Perancangan Sistem Akademik Berbasis Mobile Web 9

2.2 Konsep Sistem Akademik Sekolah …………..………….. 10

2.2.1 Definisi Sistem ……… 10

2.2.2 Definisi Akademik ….………. 10

2.2.3 Definisi Sistem Akademik Sekolah ………..…….. 11

2.3 Konsep Jaringan Internet ……… 11

2.3.1 Definisi Jaringan ……….…….………... 11

2.3.2 Model Jaringan ………... 12

2.3.3 Protokol Jaringan ……… 13

2.3.4 Konsep Internet ……….. 14

2.4 Konsep Mobile Web ………..………… 15

2.4.1 Definisi Web ………..… 15

2.4.2 Definisi Mobile Web ………..……… 16

2.4.3 Teknologi WAP ……… ……… 17

2.4.4 Pemrograman Mobile Web/WAP 2.0 ……… 20

2.5 Konsep Database ….………. 23

xi

2.5.2 Definisi Database ……….. 23

2.5.3 Komponen Database ………. 24

2.5.4 Alat Perancangan Sistem ………... 25

2.6 Metodologi Pengembangan Sistem ……….. 27

2.6.1 Definisi Metodologi Pengembangan Sistem ……. 27

2.6.2 Metodologi Pengembangan Incremental ……….. 28

2.7 Software dan Bahasa Pemrograman Mobile Web………. 29

2.7.1 xHTML MP ……….. 29

2.7.2 PHP ………... 29

2.7.3 jQuery ………... 30

2.7.4 MySQL ………. 31

2.7.5 XAMPP dan phpMyAdmin ……….. 32

2.7.6 Macromedia Dreamweaver MX ……….. 33

2.7.7 Opera Mobile for Windows ………. 33

2.8 Studi Sejenis ……… 34

BAB III. METODOLOGI PENELITIAN 3.1 Metode Pengumpulan Data ………. 47

3.2 Metode Pengembangan Sistem ………... 49

BAB IV. PEMBAHASAN 4.1 Communication (Komunikasi) ……….... 52

xii

4.3 Modeling (Analysis and Design) ………..…… 54

4.3.1 Analisis Sistem ………...………….. 54

4.3.1.1 Gambaran Umum Sekolah ……… 54

4.3.1.2 Analisis Kebutuhan Sistem ………... 56

4.3.2 Desain Sistem ……….……….. 64

4.3.2.1 Desain Arsitektur ……….. 64

4.3.2.2 Desain Basis Data ………. 79

4.3.2.3 Desain Antarmuka ……… 89

4.3.2.4 Desain Prosedural ………. 99

4.4 Construction (Code and Test) ……….. 111

4.4.1 Pengkodean ………... 111

4.4.2 Pengujian ……….. 122

4.4.2.1 Hosting Sistem ………. 122

4.4.2.2 Pengujian Mandiri ……… 131

4.4.2.3 Pengujian Lapangan ………. 136

4.5 Deployment (Delivery and Feedback) ………. 136

BAB V. PENUTUP 5.1 Kesimpulan ……… 137

5.2 Saran ……….. 138

DAFTAR PUSTAKA LAMPIRAN

xiii

DAFTAR GAMBAR

Halaman

Gambar 2.1 Model Jaringan Peer to Peer dan Client Server… 12

Gambar 2.2 Layer Protokol OSI dan TCP/IP ………. 13

Gambar 2.3 Arsitektur Jaringan Internet ………. 14

Gambar 2.4 Model Cara Kerja WAP 1.0 ……… 18

Gambar 2.5 Model Cara Kerja WAP 2.0 ……… 20

Gambar 2.6 Tampilan Awal Opera Mobile for Windows …… 34

Gambar 3.1 Model Incremental ……….. 50

Gambar 4.1 Struktur Organisasi SMA Muga Tangerang …… 56

Gambar 4.2 Flow Chart Sistem Akademik yang Berjalan …. 58

Gambar 4.3 Flow Chart Sistem Akademik yang diusulkan … 62

Gambar 4.4 Cara Kerja Sistem Akademik yang diusulkan ….. 63

Gambar 4.5 Diagram Konteks yang diusulkan …….……….. 64

Gambar 4.6 DFD Level 0 yang diusulkan ……….. 65

Gambar 4.7 DFD Level 1 Proses 1.0 ……….. 66

Gambar 4.8 DFD Level 1 Proses 2.0 ……….. 67

Gambar 4.9 DFD Level 1 Proses 3.0 ……….. 67

Gambar 4.10 DFD Level 1 Proses 4.0 ……….. 68

Gambar 4.11 DFD Level 1 Proses 5.0 ……….. 68

Gambar 4.12 DFD Level 1 Proses 6.0 ……….. 69

xiv

Gambar 4.14 LRS Sistem Akademik Sekolah ………. 80

Gambar 4.15 Bentuk Normal Pertama Sistem Akademik Sekolah 82

Gambar 4.16 Bentuk Normal Kedua Sistem Akademik Sekolah 83

Gambar 4.17 Struktur Menu Mobile Web ………. 89

Gambar 4.18 Struktur Menu Web ………. 90

Gambar 4.19 Halaman Beranda ……… 91

Gambar 4.20 Halaman Cari Berita ……… 91

Gambar 4.21 Halaman Detail Berita ……… 91

Gambar 4.22 Halaman Profil Sekolah ……….……… 91

Gambar 4.23 Halaman Visi & Misi ………... 92

Gambar 4.24 Halaman Fasilitas ……….. 92

Gambar 4.25 Halaman Ekstrakurikuler ……….. 92

Gambar 4.26 Halaman Prestasi Sekolah ……….. 92

Gambar 4.27 Halaman Login Siswa ……… 93

Gambar 4.28 Halaman Login Guru ………. 93

Gambar 4.29 Halaman Login Wali Siswa ……… 93

Gambar 4.30 Halaman Login Pegawai ……… 93

Gambar 4.31 Halaman Kotak Saran Wali Siswa ……… 94

Gambar 4.32 Halaman Album Foto ……… 94

Gambar 4.33 Halaman Galeri Foto ………. 94

Gambar 4.34 Halaman Kontak ……… 94

Gambar 4.35 Desain Halaman Login Admin ……….. 95

xv

Gambar 4.37 Desain Halaman Daftar Admin ………. 95

Gambar 4.38 Desain Halaman Daftar Siswa ……… 96

Gambar 4.39 Desain Halaman Daftar Nilai Siswa …………... 96

Gambar 4.40 Desain Halaman Daftar Absensi Siswa ……….. 96

Gambar 4.41 Desain Halaman Daftar Jadwal Pelajaran …….. 97

Gambar 4.42 Desain Halaman Daftar Guru ……… 97

Gambar 4.43 Desain Halaman Daftar Wali Siswa ………….. 97

Gambar 4.44 Desain Halaman Daftar Pegawai ……….. 98

Gambar 4.45 Desain Halaman Daftar Berita Sekolah …….... 98

Gambar 4.46 Desain Halaman Daftar Prestasi Sekolah ……... 98

Gambar 4.47 Desain Halaman Daftar Ekstrakurikuler ……… 99

Gambar 4.48 Desain Halaman Album Galeri Foto ………….. 99

Gambar 4.49 STD Halaman Beranda ……….. 100

Gambar 4.50 STD Halaman Detail Berita Sekolah …………. 100

Gambar 4.51 STD Halaman Cari Berita Sekolah ……… 100

Gambar 4.52 STD Halaman Profil Sekolah………. 101

Gambar 4.53 STD Halaman Login Siswa ………... 101

Gambar 4.54 STD Halaman Biodata Siswa ……… 101

Gambar 4.55 STD Halaman Nilai Siswa ………..……. 102

Gambar 4.56 STD Halaman Absensi Siswa ……….. 102

Gambar 4.57 STD Halaman Jadwal Pelajaran Siswa ……… 102

Gambar 4.58 STD Halaman Login Guru …………..……… 103

xvi

Gambar 4.60 STD Halaman Data Kelas ……… 103

Gambar 4.61 STD Halaman Absensi Guru …….………….. 104

Gambar 4.62 STD Halaman Jadwal Pelajaran Guru …...….. 104

Gambar 4.63 STD Halaman Login Wali Siswa ………….… 104

Gambar 4.64 STD Halaman Data Wali Siswa ……….. 105

Gambar 4.65 STD Halaman Data Siswa Pada Wali ……... .. 105

Gambar 4.66 STD Halaman Data Nilai Siswa Pada Wali … 105

Gambar 4.67 STD Halaman Info Akademik Pada Wali ….. 106

Gambar 4.68 STD Halaman Kotak Saran Wali Siswa …….. 106

Gambar 4.69 STD Halaman Login Pegawai ………. 106

Gambar 4.70 STD Halaman Biodata Pegawai ……….. 107

Gambar 4.71 STD Halaman Absensi Pegawai ……….. 107

Gambar 4.72 STD Halaman Balas Saran Wali Siswa ……… 107

Gambar 4.73 STD Halaman Login Admin ……… 108

Gambar 4.74 STD Halaman Beranda Admin ……… 108

Gambar 4.75 STD Halaman Daftar Admin ……… 108

Gambar 4.76 STD Halaman Daftar Siswa ………. 109

Gambar 4.77 STD Halaman Daftar Guru ……….. 109

Gambar 4.78 STD Halaman Daftar Wali Siswa ………… 109

Gambar 4.79 STD Halaman Daftar Pegawai ………. 110

Gambar 4.80 STD Halaman Daftar Berita Sekolah ……… 110

Gambar 4.81 STD Halaman Daftar Prestasi Sekolah ……. 110

xvii

Gambar 4.83 Tampilan Koding Halaman Beranda ……… 112 Gambar 4.84 Tampilan Koding Halaman Login Siswa …. 113 Gambar 4.85 Tampilan Koding Halaman Biodata Siswa .. 114 Gambar 4.86 Tampilan Koding Halaman Nilai Siswa …… 115 Gambar 4.87 Tampilan Koding Halaman Absensi Siswa … 116 Gambar 4.88 Tampilan Koding Halaman Jadwal Pelajaran .. 117 Gambar 4.89 Tampilan Koding Halaman Login Admin … 118 Gambar 4.90 Tampilan Koding Halaman Daftar Admin … 119 Gambar 4.91 Tampilan Koding Halaman Daftar Siswa ….. 120 Gambar 4.92 Tampilan Koding Halaman Daftar Nilai Siswa 121 Gambar 4.93 Tampilan Awal Situs Nama Domain ……….. 122 Gambar 4.94 Tampilan Login Situs Nama Domain ………. 123 Gambar 4.95 Tampilan Pendaftaran Situs Nama Domain … 123 Gambar 4.96 Tampilan Pemberitahuan Pembuatan Akun … 124 Gambar 4.97 Tampilan Setting Nama Domain ………. 124 Gambar 4.98 Tampilan Awal Situs Web Hosting ……..….. 125 Gambar 4.99 Tampilan Pendaftaran Web Hosting ……….. 125 Gambar 4.100 Tampilan Pemberitahuan Akun Web Hosting 126 Gambar 4.101 Tampilan Pemberian Data Hosting di Email 126 Gambar 4.102 Tampilan Control Panel Web Hosting ……… 127 Gambar 4.103 Tampilan File Manager Web Hosting ……… 127 Gambar 4.104 Tampilan Subdirektori File Manager ………. 128 Gambar 4.105 Tampilan Halaman Awal Software FTP …… 129

xviii

Gambar 4.106 Tampilan Halaman Direktori File …………. 129 Gambar 4.107 Tampilan Halaman Direktori File 2 ………. 130 Gambar 4.108 Tampilan Halaman Direktori File Web Hosting 130 Gambar 4.109 Pengujian Halaman Beranda, Profil Sekolah

dan Login Siswa ………... 132 Gambar 4.110 Pengujian Halaman Biodata Siswa, Nilai Siswa, dan Absensi Siswa ………. 132 Gambar 4.111 Pengujian Halaman Jadwal Pelajaran Siswa, Info Akademik, dan Login Guru ……… 132 Gambar 4.112 Tampilan Awal Situs mobiReady …………. 133 Gambar 4.113 Tampilan Hasil Pengujian Mobile Web ..…. 134 Gambar 4.114 Pengujian Halaman Beranda ……… 134 Gambar 4.115 Pengujian Halaman Jadwal Pelajaran …….. 135 Gambar 4.116 Pengujian Halaman Login Wali Siswa …… 135 Gambar 4.117 Pengujian Halaman Album Galeri Foto ….. 135

xix

DAFTAR TABEL

Halaman

Tabel 2.1 Simbol Data Flow Diagram (DFD) ………... 25

Tabel 2.2 Simbol Entity Relationship Diagram (ERD) …….. 26

Tabel 2.3 Simbol Flow Chart ………. 27

Tabel 2.4 Daftar Studi Sejenis yang Dipakai ……….. 42

Tabel 3.1 Kelebihan dan Kekurangan Metode Incremental ... 49

Tabel 4.1 Bentuk Tidak Normal Sistem Akademik Sekolah .. 81

Tabel 4.2 Tabel Siswa ………. 84

Tabel 4.3 Tabel Guru ……….…. 84

Tabel 4.4 Tabel Pegawai ………. 85

Tabel 4.5 Tabel Wali Siswa ……… 85

Tabel 4.6 Tabel Nilai Siswa ………...……… 85

Tabel 4.7 Tabel Absensi Siswa ………. 86

Tabel 4.8 Tabel Absensi Guru ……….. 86

Tabel 4.9 Tabel Absensi Pegawai ………...……. 87

Tabel 4.10 Tabel Jadwal Pelajaran ………. 87

Tabel 4.11 Tabel Data Kelas ……….………. 87

Tabel 4.12 Tabel Tamu ………..…………...………. 87

Tabel 4.13 Tabel Kontak ………..……. 88

Tabel 4.14 Tabel Album Foto ………...………. 88

xx

DAFTAR LAMPIRAN

Halaman Lampiran A Surat Penelitian .………..…… A-1 Lampiran B Wawancara ………. B-1 Lampiran C Pengujian Lapangan ………..………. C-1 Lampiran D Tampilan Sistem ………. D-1 Lampiran E Source Code Program ………. E-1

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Pembangunan dunia pendidikan yang mengalami perkembangan seiring dengan laju perkembangan teknologi informasi yang sangat pesat, memerlukan peningkatan mutu di bidang pendidikan sehingga SDM yang diciptakan dapat berpartisipasi dalam membangun dunia pendidikan. Pengelolaan sistem akademik berbasis web yang telah ada pada sekolah-sekolah negeri maupun swasta masih perlu dimaksimalkan, salah satunya pengelolaan sistem akademik yang bisa diakses melalui mobile phone. Dengan banyaknya telepon selular di Indonesia, maka bukan mustahil penggunaan sistem akademik yang menggunakan mobile phone akan lebih banyak dari pada sistem akademik yang berbasis web.

Penggunaan sistem akademik yang menggunakan mobile phone antara lain memanfaatkan teknologi WAP, dan yang baru sekarang ini adalah teknologi mobile web. Teknologi mobile web/WAP 2.0 merupakan sebuah metode untuk menghadirkan halaman web di dalam layar mobile phone. Dengan adanya teknologi ini, informasi dari sistem akademik mengenai data siswa, guru, pegawai, profil sekolah, dan lainnya tidak terbatas pada web yang ditampilkan di internet saja, melainkan siswa

dapat mengaksesnya melalui handphone-nya sendiri, tanpa harus browsing web di internet. Dengan adanya dukungan GPRS pada mobile phone, maka pemanfaatan sistem akademik berbasis mobile web ini akan dapat terlaksana dengan baik.

SMA Muhammadiyah 3 Tangerang merupakan SMA swasta yang berorientasi ke depan dalam membangun bangsa. SMA Muhammadiyah 3 Tangerang termasuk SMA yang terbilang baru, namun telah menyandang akreditasi yang sangat baik yaitu akreditasi A dan pada tahun 2009 siswa-siswinya 100% lulus Ujian Nasional. Dalam hal menyajikan sistem akademiknya dan memonitoring kegiatan siswa, SMA Muhammadiyah 3 Tangerang masih bersifat sederhana dan belum terdapat sistem akademik yang berbasis web atau mobile web. Sistem yang digunakan pun belum bisa langsung sampai pada wali siswa, sehingga wali siswa masih kesulitan memantau kegiatan akademik anaknya di sekolah. Dengan adanya sistem akademik berbasis teknologi mobile web di SMA Muhammadiyah 3 Tangerang, diharapkan siswa dan guru dapat memberikan dan mendapatkan informasi mengenai sekolah serta wali siswa dapat mengetahui perkembangan anaknya di sekolah melalui mobile phone mereka.

Berdasarkan pada penjelasan di atas, maka penulis berkeinginan membuat solusi yang dapat membantu kinerja sekolah tersebut. Penulis

3

memilih SMA Muhammadiyah 3 Tangerang sebagai tempat riset karena dahulu penulis sekolah pada SMA tersebut dan berharap dapat memajukan sekolah tersebut. Solusi yang dipakai penulis adalah dengan merancang sistem akademik berbasis mobile web dengan menggunakan bahasa pemrograman xHTML MP (Extensible HTML Mobile Profile), PHP, jQuery, database MySQL, editor Macromedia Dreamweaver MX 2004, serta micro browser simulator Opera Mobile for Windows. Atas dasar itulah, maka penulis mencoba menyusun skripsi ini dengan judul “Perancangan Sistem Akademik Sekolah Berbasis Teknologi Mobile Web (Studi Kasus : SMA Muhammadiyah 3 Tangerang)”.

1.2 Rumusan Masalah

Berdasarkan latar belakang di atas, maka dapat dirumuskan permasalahan yang akan dibahas dalam penelitian ini adalah :

1. Bagaimana merancang sistem akademik SMA Muhammadiyah 3 Tangerang yang masih sederhana menjadi sistem yang berbasis mobile web dan web.

2. Bagaimana car a menyajikan perkembangan akademis siswa di sekolah kepada wali siswa.

3. Bagaimana sistem dapat bekerja secara tepat dalam menyampaikan informasi seputar sekolah kepada siswa, wali siswa, serta masyarakat umum melalui mobile phone.

1.3 Batasan Masalah

Batasan masalah dalam penelitian ini antara lain sebagai berikut :

1. Perancangan sistem akademik SMA Muga Tangerang berbasis mobile web pada user dan berbasis web pada admin sekolah.

2. Pada sistem akademiknya tidak dirancang web pada sisi user, hanya dirancang mobile web pada sisi user.

3. Sistem akademik ini tidak membahas sistem keuangan sekolah karena konteks tersebut di luar pembahasan sistem ini dan dapat dibahas tersendiri.

4. Menggunakan bahasa pemrograman xHTML MP, PHP, dan jQuery. 5. Penyimpanan database-nya menggunakan MySQL.

6. Pengujian sistem akademik ini menggunakan browser simulator yaitu Opera Mobile for Windows pada localhost , Opera Mini pada handphone secara online, dan beberapa simulator handphone.

1.4 Tujuan dan Manfaat Penelitian 1.4.1 Tujuan Penelitian

Tujuan yang ingin dicapai penulis dari penelitian ini adalah:

a. Merancang sistem akademik sekolah yang masih sederhana menjadi sistem yang berbasis mobile web.

b. Menyajikan kegiatan akademik siswa di sekolah kepada wali siswa yang masih kesulitan mengaksesnya secara cepat dan mudah dengan menggunakan mobile phone.

5

c. Memudahkan untuk menyajikan informasi dari sistem akademik sekolah.

1.4.2 Manfaat Penelitian 1. Bagi Pengguna

a. Membantu sekolah dalam mengatur sistem akademik sekolah, sehingga dapat memberikan informasi penting yang berkaitan dengan sekolah tersebut.

b. Mempermudah siswa dan wali siswa untuk mendapatkan informasi yang dibutuhkan tanpa harus browsing internet. c. Semua kegiatan dan informasi yang berkaitan dengan sekolah

dan siswa dapat dengan mudah diakses melalui handphone. d. Masyarakat dapat mengetahui informasi sekolah melalui

portal sekolah.

2. Bagi Penulis

a. Dapat menambah pengetahuan tentang bahasa pemrograman web/mobile web seperti xHTML MP, PHP, jQuery, dan MySQL, dan desainnya seperti Dreamweaver dan Fireworks. b. Dapat mengimplementasikan ilmu yang didapat di bangku

kuliah khususnya mata kuliah yang berhubungan dengan pemrograman web/mobile web, seperti Web Programming, Mobile Web Programming, Sistem Basis Data, dan lainnya.

3. Bagi Universitas

a. Sebagai referensi/literatur mahasiswa dalam penguasaan materi dan penerapan ilmu yang telah di dapat di bangku kuliah.

b. Memberikan gambaran tentang kesiapan mahasiswa dalam menghadapi dunia kerja dari hasil yang diperoleh selama pembelajaran pada masa kuliah.

c. Mengetahui kemampuan mahasiswa dalam menerapkan ilmunya dan sebagai bahan evaluasi.

1.5 Metodologi Penelitian

Dalam proses penelitian ini, penulis menggunakan metodologi-metodologi yang umum digunakan penelitian lainnya, metodologi-metodologi yang digunakan antara lain :

1.5.1 Metode Pengumpulan Data

Dalam proses penulisan skripsi ini, bentuk metodologi pelaksanaan yang akan dilakukan antara lain :

a. Observasi, yakni proses pengumpulan data dalam penelitian dengan mengamati langsung keadaan permasalahan penelitian dan mengambil data-data penting dari tempat penelitian.

b. Wawancara, yakni mengumpulkan data melalui tanya jawab dengan narasumber terkait.

7

c. Studi pustaka, yakni mengumpulkan data melalui buku, literatur ilmiah, maupun referensi internet yang berhubungan dengan penulisan skripsi.

1.5.2 Metode Pengembangan Sistem

Metode yang digunakan dalam rekayasa web/mobile web yang penulis rancang adalah metode incremental. Metode ini merupakan metode pengembangan dari metode waterfall yang mengkombinasikan elemen dari waterfall itu sendiri dengan sifat iterasi/pengulangan. Hasil proses berupa produk yang makin lama makin lengkap sampai menghasilkan versi terlengkap sebagai produk akhir dari proses yang dilakukan.

Metode ini adalah metode pengembangan sistem pada software engineering berdasarkan requirement software yang dipecah menjadi beberapa bagian/fungsi sehingga model pengembangannya secara increment/bertahap. Metode ini terdiri dari beberapa tahap yaitu Communication, Planning, Modeling (Analysis and Design), Construction (Code and Test), dan Deployment (Delivery and Feedback).

1.6 Sistematika Penulisan BAB I. Pendahuluan

Pada bab ini memberikan uraian mengenai latar belakang, rumusan masalah, batasan masalah, tujuan penelitian, manfaat penelitian, metodologi penelitian, dan sistematika penulisan.

BAB II. Landasan Teori

Pada bab ini memberikan uraian mengenai teori yang berhubungan dengan permasalahan yang diambil penulis dan teori yang digunakan sebagai panduan dasar dalam perancangan sistem.

BAB III. Metodologi Penelitian

Pada bab ini berisi metodologi penelitian yang digunakan serta langkah- langkah yang digunakan terkait dengan penelitian yang dilakukan.

BAB IV. Pembahasan

Pada bab ini berisi pembahasan tentang gambaran umum instansi, proses pembuatan sistem, serta tampilan sistem secara umum.

BAB V. Penutup

Pada bab ini berisi tentang kesimpulan yang telah diperoleh dari penjelasan bab sebelumnya, serta saran dari masalah yang terkait.

9

BAB II

LANDASAN TEORI

2.1 Konsep Perancangan Sistem Akademik Berbasis Mobile Web

2.1.1Definisi Perancangan Sistem

Perancangan merupakan rekayasa representasi yang berarti terhadap sesuatu yang hendak dibangun. Perancangan menekankan pada solusi logik mengenai cara sistem memenuhi kebutuhan. Tujuan perancangan adalah menghasilkan model atau representasi entitas yang akan dibangun. (Hariyanto, 2004 : 405).

Perancangan sistem adalah strategi tingkat tinggi untuk membuat keputusan – keputusan yaitu pengorganisasian sistem menjadi subsistem-subsistem, alokasi subsistem ke komponen-komponen perangkat keras dan lunak, keputusan – keputusan konseptual dan kebijaksanaan utama untuk membentuk kerangka kerja rancangan rinci. (Hariyanto, 2004 : 421).

2.1.2Perancangan Sistem Akademik Berbasis Mobile Web

Pengertian perancangan sistem akademik berbasis mobile web di sini merupakan suatu proses merancang sistem akademik berbasis mobile web menggunakan teknologi WAP 2.0 melalui mobile phone secara online untuk mendapatkan informasi seputar sekolah yang dapat

diakses dengan menggunakan mobile phone sehingga dapat mengatasi kelemahan sistem akademik berbasis web yaitu tidak bersifat mobile. Perancangan sistem akademik berbasis mobile web ini mengambil studi kasus di SMA dengan menggunakan bahasa pemrograman xHTML MP yang digabung dengan bahasa pemrograman PHP, jQuery dan MySQL.

2.2 Konsep Sistem Akademik Sekolah 2.2.1Definisi Sistem

Pendekatan sistem yang lebih menekankan pada prosedur mendefinisikan suatu sistem adalah suatu jaringan kerja dari prosedur - prosedur yang saling berhubungan, berkumpul bersama-sama untuk melakukan suatu kegiatan atau menyelesaikan suatu sasaran tertentu. Pendekatan sistem yang lebih menekankan pada elemen atau komponennya mendefinisikan sistem adalah kumpulan dari elemen-elemen yang berinteraksi untuk mencapai suatu tujuan tertentu. (Jogiyanto, 2006 : 1-2).

2.2.2 Definisi Akademik

Akademik adalah seluruh lembaga pendidikan formal baik pendidikan anak usia dini, pendidikan dasar, pendidikan menengah, pendidikan kejuruan maupun perguruan tinggi yang menyelenggarakan pendidikan vokasi dalam satu cabang atau sebagian cabang ilmu pengetahuan, teknologi, dan atau seni tertentu. (Putro, 2007).

11

2.2.3 Definisi Sistem Akademik Sekolah

Sistem informasi adalah kombinasi antara prosedur kerja, informasi, orang, dan teknologi informasi yang diorganisasikan untuk mencapai tujuan dalam sebuah organisasi (Kadir, 2009 : 7). Adapun yang dimaksud sistem akademik sekolah di sini adalah sebuah sistem informasi yang dirancang untuk digunakan pada keperluan pengelolaan data-data akademik dalam hal ini sekolah, dengan penerapan teknologi komputer baik hardware maupun software. Adapun hardware-nya adalah peralatan - peralatan seperti komputer, printer, flashdisk, harddisk, dan sebagainya. Sedangkan software-nya merupakan program komputer yang memfungsikan hardware tersebut yang dibuat khusus untuk keperluan pengelolaan data-data akademik.

2.3 Konsep Jaringan Internet 2.3.1 Definisi Jaringan

Jaringan komputer (computer network/network) merupakan interkoneksi sejumlah komputer dan peralatan/peripheral lainnya yang dihubungkan dengan jalur transmisi dan alat komunikasi membentuk satu sistem sehingga dapat saling bertukar data, informasi, atau menggunakan peralatan secara bersama/sharing untuk melaksanakan tugas pengolahan data. Dalam melakukan sharing perlu dibedakan antara komputer sumber (source) dan komputer tujuan (destination). (Sutanta, 2005 : 503).

2.3.2 Model Jaringan

Berdasarkan metode pengorganisasiannya, jaringan komputer dibagi dalam 2 model pengorganisasian :

1. Model Peer to peer adalah jaringan komputer yang terdiri atas beberapa komputer. Model jaringan ini mengutamakan pada aspek penggunaan program, data, dan printer secara bersama-sama. Dalam Model peer to peer, setiap host memberikan layanan ke peer lain atau mengambil layanan dari peer lain. (Sutanta, 2005 : 508). 2. Model Client-Server, model ini memisahkan secara jelas antara

server dan client. Server memberikan layanan jaringan dan client menerima layanan. Beberapa komputer diset-up sebagai server yang memberikan segala sumber daya yang tersedia dalam jaringan kepada komputer lain yang terkoneksi ke jaringan yang berfungsi sebagai client. (Sutanta, 2005 : 509).

Gambar 2.1 Model Jaringan Peer to Peer dan Client-Server (sumber : Yusuf, 2010)

13

2.3.3 Protokol Jaringan

Protokol jaringan adalah set aturan yang mengatur cara bagaimana suatu komputer bisa berkomunikasi satu sama lain. (Sutanta, 2005 : 523). 1. Protokol OSI, merupakan salah satu protokol standar yang didasarkan

pada model yang diusulkan ISO. (Sutanta, 2005 : 524). Protokol OSI dibagi ke dalam 7 lapis layer jaringan yaitu : physical layer, datalink layer, network layer, transport layer, session layer, presentation layer, dan application layer.

2. Protokol TCP/IP, adalah protokol untuk mengalamati komputer – komputer dalam suatu jaringan dengan aturan nomor tertentu, yang disebut nomor Net-ID dan nomor Host-ID. (Sutanta, 2005 : 526). Protokol TCP/IP dibagi menjadi 4 layer yaitu : network interface layer/physical layer, internet layer/network layer, transport layer, dan application layer.

Gambar 2.2 Layer Protokol OSI dan TCP/IP (sumber : Subekti, 2010)

2.3.4 Konsep Internet

Internet adalah suatu jaringan komputer yang anggotanya terdiri dari jaringan – jaringan lain yang lebih kecil. Ribuan jaringan – jaringan kecil ini dimiliki dan didirikan baik oleh institusi, lembaga pendidikan, perusahaan komersil, organisasi dan bahkan individual. Secara garis besar, sistem kerja Internet adalah sebagai berikut. Data dari komputer sumber keluar ke modem dalam bentuk sinyal elektromagnetik. Sinyal tersebut kemudian diubah menjadi sinyal telepon (pulsa) oleh modem. Selanjutnya sinyal masuk ke modem kembali dan kemudian diubah menjadi sinyal elektromagnetik sebelum akhirnya masuk ke komputer tujuan. (Sutanta, 2005 : 538).

Gambar 2.3 Arsitektur Jaringan Internet (sumber : Andhi, 2009)

15

Adapun layanan – layanan yang terdapat pada internet adalah:

1. Web, sebuah sistem di mana informasi dalam bentuk teks, gambar, suara, dan lainnya yang tersimpan dalam sebuah Internet webserver ditampilkan dalam bentuk hypertext. (Sutanta, 2005 : 546).

2. Electronic Mail (e-mail), layanan internet yang berfungsi mengirim atau menerima surat ke/dari seluruh penjuru dunia. Layanan e-mail biasanya dikelompokkan dalam 2 basis, yaitu e-mail berbasis client dan e-mail berbasis web. (Sutanta, 2005 : 567).

3. File Transfer Protocol (FTP), memungkinkan para pengguna Internet untuk melakukan upload atau download file antara komputer lokal dengan komputer lain yang terhubung dalam jaringan Internet. (Sutanta, 2005 : 571).

4. Remote Login, mengacu pada program yang menyediakan fungsi yang memungkinkan seorang pengguna Internet untuk mengakses ke sebuah terminal dalam lingkungan jaringan Internet. Protokol yang banyak digunakan untuk keperluan remote login adalah Telnet (Telecommunication Networking). (Sutanta, 2005 : 572).

2.4 Konsep Mobile Web 2.4.1Definisi Web

Web adalah sebuah sistem di mana informasi dalam bentuk teks, gambar, suara, dan lainnya yang tersimpan dalam sebuah Internet webserver ditampilkan dalam betuk hypertext. Informasi dalam bentuk teks di web ditulis dalam format HTML. (Sutanta, 2005 : 546).

Secara umum, untuk menjelajahi Internet (Browsing/Surfing), harus diketahui alamat yang dituju. Aturan penulisan alamat tersebut adalah: protokol (http://), domain (www.akprind.ac.id), directory (/assisten/), nama halaman (personel.html. (Sutanta, 2005 : 548).

Berikut ini adalah skenario dari surfing Web.

1. Pengguna meminta suatu layanan dengan mengklik tautan (link) atau dengan mengetikkan sebuah perintah dengan keyboard. Browser Web menangkap perintah tersebut dan menerjemahkannya ke dalam permintaan HTTP.

2. Browser kemudian meneruskan permintaan yang baru saja diciptakan kepada server Web dan penyedia konten. Ketika server menerima sebuah permintaan, permintaan tersebut akan diproses. 3. Ketika pemrosesan dilakukan, server Web kemudian mengirimkan

kembali respon tersebut ke browser.

4. Ketika browser menerima respon tersebut, browser menerjemahkannya ke dalam bentuk yang dapat dibaca oleh manusia. (Simarmata, 2010 : 53-54).

2.4.2Definisi Mobile Web

Mobile web adalah sistem yang bertujuan untuk mengakses layanan data secara wireless dengan menggunakan perangkat mobile seperti handphone, PDA yang tersambung ke sebuah jaringan telekomunikasi selular. Mobile web yang diakses melalui perangkat mobile perlu

17

dirancang dengan mempertimbangkan keterbatasan perangkat mobile seperti sebuah handphone yang memiliki layar dengan ukuran yang terbatas ataupun beberapa keterbatasan pada sebuah perangkat mobile.

Pada Mei 2005 mobile web di keluarkan oleh W3C dengan nama Mobile Web Initiative (MWI) dengan tujuan membuat web dapat diakses dari sebuah perangkat mobile secara sederhana seperti mengakses web dari sebuah komputer desktop. Pada mobile web juga dikenal dengan sebutan mobile web 2.0, yang dapat diartikan membawa teknologi web 2.0 ke sebuah mobile device. Tetapi perangkat mobile berbeda dengan komputer desktop, sehingga banyak faktor yang menjadi batasan ketika membangun sebuah mobile web, salah satunya adalah ketersediaan data secara real time atau update berkala ketika terjadi perubahan data pada web. (Obie, 2008).

2.4.3Teknologi WAP (Wireless Application Protocol) 1. WAP 1.0

WAP adalah standar dunia nyata untuk layanan telepon dan informasi nirkabel pada telepon seluler digital dan terminal nirkabel lainnya. WAP Forum adalah sumber wewenang untuk spesifikasi WAP. Sasaran WAP Forum adalah penyediaan sebuah framework aplikasi yang mempengaruhi standar data jaringan digital dari teknologi Internet dan teknologi jaringan mobile. (Simarmata, 2010 : 360).

Cara kerja WAP 1.0 adalah sebagai berikut. Saat sebuah handheld mobile device tersambungkan ke jaringan wireless dan meminta akses sebuah web yang mendukung WAP, handheld mobile device anda akan mengirimkan permintaan tersebut via gelombang radio ke sel terdekat, dimana langsung dirutekan ke internet melalui sebuah server gateway. Server gateway tersebut akan menerjemahkan permintaan ke format standar HTTP dan meneruskannya ke site web. Bila site tersebut meresponnya, ia akan mengirimkan dokumen HTML ke server gateway, kemudian dikonversi menjadi WML dan merutekannya ke antena terdekat. Antena tersebut akan mengirimkan data via gelombang ke piranti WAP anda dan akhirnya microbrowser sebagai navigator yang menyediakan interface antara user dan wireless internet menampilkan halaman microbrowser tersebut. ( Elidjen dkk, 2005).

Gambar 2.4 Model Cara Kerja WAP 1.0 (sumber : WAP Forum, 2002)

19

2. WAP 2.0/Mobile Web

Sejak tahun 2001, proposal WAP 2.0 oleh WAP Forum telah diumumkan untuk mengadopsi standard WC3 dari markup dengan tidak melanjutkan WML 1.x. Tidak lama setelah merintis laporan WAP 2.0, WAP Forum telah dikonsolidasikan ke dalam Open Mobile Alliance (OMA). WAP Forum atau OMA memutuskan untuk menggantikan WML dengan Extensible HyperText Markup Language (XHTML). (Simarmata, 2010 : 369). WML 1.x dikombinasikan dengan xHTML Basic untuk menciptakan xHTML Mobile Profile (xHTML MP), sehingga bahasa yang dipergunakan pada WAP 2.0 sampai sekarang adalah xHTML MP dan WAP 2.0 inilah yang disebut teknologi mobile web.

Cara kerja WAP 2.0 berbeda dengan WAP 1.0 dan hampir sama dengan web pada internet. Adapun cara kerjanya sebagai berikut. “The WAP Programming Model, closely aligned with the Web Programming Model, uses the Pull Model, (which is where the client request content from the server). However, WAP also extends the Web architecture by adding telephony support with WTA and enabling a Push Model, where a server can proactively send content to the client. “ (WAP Forum, 2002). Jika WAP 1.0 membutuhkan WAP Proxy atau WAP Gateway untuk menangani protocol internetworking antara client dan origin server, maka WAP 2.0 tidak membutuhkan WAP Proxy, karena komunikasi antara client dan origin server dapat disatukan dengan menggunakan HTTP/1.1.

Gambar 2.5 Model Cara Kerja WAP 2.0 (sumber : WAP Forum, 2002)

2.4.4 Pemrograman Mobile Web/WAP 2.0

WAP 2.0 menggunakan xHTML MP sebagai bahasa markup-nya dan bukan WML. xHTML MP (Extensible Hypertext Markup Language Mobile Profile) merupakan sebuah bahasa markup yang didefinisikan dalam Wireless Application Protocol (WAP) 2.0, yaitu sebuah protocol komunikasi untuk aplikasi-aplikasi nirkabel yang dibuat oleh WAP Forum. Jadi sebenarnya tujuan utama dari xHTML MP adalah menggabungkan teknologi browser yang ada pada mobile dan World Wide Web. xHTML MP statis dapat mengenali semua file yang memiliki ekstensi xhtml, html, atau htm. Tipe MIME dari dokumen yang dibutuhkan oleh xHTML MP yaitu : application/vnd.wap.xhtml+xml, application/xhtml+xml, dan text/html. (Jusak, 2008 : 1-2, 18-19).

21

1. Aturan Penulisan xHTML MP

Penulisan syntax xHTML MP sangat berbeda dengan script WML namun lebih cenderung mirip dengan HTML karena xHTML MP memang didesain untuk mobile web. Namun pada xHTML MP, aturan penulisannya lebih diperketat daripada HTML karena keterbatasan memory device. Menurut Jusak (2008 : 10-14), beberapa aturan (rule) tersebut dijelaskan dalam bagian ini.

a. Elemen-elemen dalam xHTML MP harus tersarang dengan benar. <p><b><i>Tes</ i></ b></ p> (benar)

<p><b><i>Tes</ p></ i></ b> (salah)

b. Elemen-elemen dalam xHTML MP harus tertutup. 1)<p>Tes</ p> (benar) <p>Tes (salah) 2) Tes<br / > (benar) Tes<br> (salah)

c. Elemen-elemen dalam xHTML MP harus tertulis dengan huruf kecil. <p id=" p1" >Tes </ p> (benar) <P ID=" p1">Tes</ P> (salah)

d. Nilai dari setiap atribut pada xHTML MP harus ditulis dalam tanda petik (ganda atau tunggal).

<p id=” p1” >Tes</ p> (benar) <p id=’p1’ >Tes</ p> (benar) <p id=p1>Tes</ p> (salah)

e. xHTML MP tidak mengijinkan adanya minimisasi atribut. <input t ype="checkbox" checked=" checked" / > (benar)

2. Struktur Penulisan Bahasa xHTML MP

Pada dasarnya penulisan xHTML MP sama dengan penulisan HTML, hanya terdapat beberapa perbedaan. Penulisan syntax tersebut yaitu sebagai berikut.

<?xml version=" 1.0" encoding=" UTF-8" ?>

<! DOCTYPE ht ml PUBLIC " -/ / WAPFORUM / / DTD XHTM L M obile 1.0/ / EN"

" ht t p:/ / w w w .w apforum.org/ DTD/ xht ml-mobile10.dt d" >

<ht ml xmlns=" ht t p:/ / w w w .w 3.org/ 1999/ xht ml" >

<head>

<t it le>Hello</ t it le>

</ head>

<body>

<p>Halo <a href=" ht t p:/ / t es.org/ " >Tes</ a></ p>

</ body>

</ ht ml >

3. Konfigurasi Penulisan xHTML MPdanPHP

Untuk membuat sistem berbasis mobile web yang berjalan dinamis, maka pemrograman xHTML MP dapat dikolaborasikan dengan PHP. Bentuk script konfigurasi bahasa PHP dan xHTML MP adalah :

<?php

echo('<?xml version=" 1.0" encoding=" UTF-8" ?>');

echo('<! DOCTYPE ht ml PUBLIC " -/ / WAPFORUM / / DTD XHTM L M obile 1.0/ / EN"

" ht t p:/ / w w w .w apforum.org/ DTD/ xht ml-mobile10.dt d" >' );

23

<ht ml xmlns=" ht t p:/ / w w w .w 3.org/ 1999/ xht ml" >

<head>

<met a ht t p-equiv=" Cache-Cont rol" cont ent =" no-t ransform" / >

<t it le>TES </ t it le>

</ head>

<body>

<?php

echo” …………” ;/ / Lokasi eksekusi

?></ body></ ht ml>

2.5 Konsep Database

2.5.1 Definisi Data

Data merupakan bentuk yang masih mentah yang belum dapat berceritera banyak, sehingga perlu diolah lebih lanjut. Data diolah melalui suatu model untuk dihasilkan informasi. (Jogiyanto, 2006 : 8). Jadi, data adalah suatu bahan mentah yang kelak dapat diolah lebih lanjut untuk menjadi sesuatu yang lebih bermakna. Data inilah yang nantinya akan disimpan dalam database. (Kadir, 2009 : 2).

2.5.2Definisi Database

Database atau basis data adalah sebuah cara mendokumentasikan berbagai macam data yang kemudian dimanajemen dengan sebuah sistem untuk kemudian disimpan dalam sebuah media penyimpanan. (Nugroho, 2005 : 72). Dalam database, data tidak hanya disimpan dalam sebuah

media penyimpanan, tetapi dikelola dengan sebuah sistem pengaturan database yang sering disebut dengan istilah Database Management Systems (DBMS).

2.5.3Komponen Database

1. Entitas/tabel (entity), merupakan komponen database yang digunakan untuk menyimpan sebuah kelompok data.

2. Atribut/kolom (field), merupakan komponen atau bentuk terkecil dari database yang digunakan untuk menyimpan sebuah data. 3. Kunci primer (primary key), merupakan kolom atau field utama

yang mewakili field lainnya dalam sebuah entitas untuk menghindari penggandaan data, dan perancangannya ditandai dengan tanda bintang satu ( * ).

4. Kunci tamu (foreign key), merupakan kunci primer yang berasal dari entitas lain di mana kunci primer ini berelasi dengan entitas lain sehingga akan menjadi kunci tamu dalam entitas tersebut dan perancangannya ditandai dengan tanda bintang dua ( * * ).

5. Kunci alternatif (unique key), adalah kunci yang dapat dinominasikan sebagai kunci primer dan menjadi kunci utama kedua setelah kunci primer.

6. Rekaman (recordset), adalah bentuk pengistilahan data yang ada dalam sebuah entitas yang dihitung dalam satu baris.

25

2.5.4Alat Perancangan Sistem

1. DFD (Data Flow Diagram), adalah diagram aliran data yang digunakan untuk menggambarkan proses – proses bisnis dalam organisasi dan sekaligus menerangkan kaitan antara proses dan data. (Kadir, 2009 : 25).

Tabel 2.1 Simbol Data Flow Diagram (DFD) (sumber : Yudi, 2010)

2. ERD (Entity Relationship Diagram), adalah suatu model yang digunakan untuk menggambarkan data dalam bentuk entitas, atribut, dan hubungan antarentitas yang dinyatakan dalam bentuk diagram. Model seperti ini tidak mencerminkan bentuk fisik yang nantinya akan disimpan dalam database, melainkan hanya bersifat konseptual. (Kadir, 2009 : 30).

Tabel 2.2 Simbol Entity Relationship Diagram (ERD) (sumber : Yudi, 2010)

3. STD (State Transition Diagram) merupakan suatu modelling tool yang menggambarkan sifat ketergantungan pada waktu dari suatu sistem. Notasi STD terdiri dari state yang disimbolkan dengan segi empat, dan transisi state yang disimbolkan dengan panah berarah. (Haryanto, 2010).

4. Flow Chart merupakan suatu alat atau sarana yang menunjukkan langkah-langkah yang harus dilaksanakan dalam menyelesaikan suatu permasalahan untuk komputasi dengan cara mengekspresikannya ke dalam serangkaian simbol-simbol grafis khusus. (Sutanta, 2005 : 99).

27

Tabel 2.3 Simbol Flow Chart (sumber : Rezkiani, 2009)

2.6 Metodologi Pengembangan Sistem

2.6.1 Definisi Metodologi Pengembangan Sistem

Metodologi adalah kesatuan metode-metode, prosedur-prosedur, konsep-konsep pekerjaan, aturan-aturan, dan postulat-postulat yang digunakan oleh suatu ilmu pengetahuan, seni atau disiplin yang lainnya. Sedang metode adalah suatu cara, teknik yang sistematik untuk mengerjakan sesuatu. Metodologi pengembangan sistem berarti adalah metode-metode, prosedur-prosedur, konsep-konsep pekerjaan, aturan-aturan, dan postulat-postulat yang akan digunakan untuk mengembangkan suatu sistem informasi. (Jogiyanto, 2006 : 59).

2.6.2Metodologi Pengembangan Incremental

Metode incremental merupakan metode yang mengkombinasikan metode waterfall dengan penerapan pada sifat iterasi/pengulangan. Masing-masing tahap mengirimkan penambahan/increment ke proses incremental selanjutnya sampai menghasilkan spesifikasi software yang lengkap. Produk dari increment pertama merupakan produk inti (core). Produk inti ini digunakan oleh pelanggan dan sebagai hasil dari penggunaan tersebut, produk dievaluasi oleh pelanggan untuk dikembangkan oleh pengembang pada tahap increment selanjutnya. Proses ini akan berulang sesuai dengan delivery dari masing-masing increment sampai produk lengkap dihasilkan. (Pressman, 2005 : 80-81).

Karakteristik yang ada pada metode incremental yaitu :

1. Kebutuhan user menjadi prioritas dan prioritas tertinggi dimasukkan ke dalam awal increment.

2. Merupakan kombinasi dari waterfall model, yaitu dengan melakukan tahap-tahap waterfall secara berulang.

3. Produk dari increment pertama menjadi dasar perbaikan untuk increment kedua, dan seterusnya sampai produk dianggap sempurna. 4. Model ini cocok jika anggota pengembang sistem sangat terbatas dan

proyek yang dikerjakan berukuran kecil.

5. Produk yang dihasilkan pada increment pertama bukanlah prototype, namun berupa produk inti (core) yang sudah bisa digunakan user.

29

2.7Software dan Bahasa Pemrograman Mobile Web

2.7.1 xHTML MP

xHTML MP merupakan sebuah bahasa markup yang didefinisikan dalam Wireless Application Protocol (WAP) 2.0, yaitu sebuah protocol komunikasi untuk aplikasi-aplikasi nirkabel yang dibuat oleh WAP Forum. xHTML sendiri sebenarnya merupakan gabungan antara Hypertext Markup Language (HTML) yang telah umum digunakan sebagai bahasa pemrograman untuk membuat situs-situs internet dewasa ini dan Extensible Markup Language (XML). Penambahan istilah Mobile Profile berarti xHTML MP merupakan bahasa pemrograman yang dikhususkan untuk membangun aplikasi-aplikasi yang dapat dibaca melalui perangkat-perangkat mobile, seperti telepon selular (ponsel), PDA, ataupun smartphone. Jadi xHTML MP merupakan bagian dari xHTML. ...tujuan utama dari xHTML MP adalah menggabungkan teknologi browser yang ada pada mobile dan World Wide Web (HTML). (Jusak, 2008 : 1-2).

2.7.2PHP (PHP Hypertext Preprocessor)

PHP digunakan sebagai bahasa script server-side dalam pengembangan web yang disisipkan pada dokumen HTML. PHP diciptakan pertama kali oleh Rasmus Lerdorf pada tahun 1994. Awalnya PHP digunakan untuk mencatat jumlah serta untuk mengetahui siapa saja pengunjung pada homepage-nya. Dia mengeluarkan Personal Home

Page Tools versi 1.0 secara gratis, kemudian menambah kemampuan PHP 1.0 dan meluncurkan PHP versi 2.0. (Peranginangin, 2006 : 2).

Beberapa keunggulan yang dimiliki oleh program PHP adalah memiliki tingkat akses yang lebih cepat; memiliki tingkat lifecycle yang cepat; memiliki tingkat keamanan yang tinggi; mampu berjalan di beberapa server yang ada misalnya Apache, Microsoft IIS, PWS, Xitami, dsb; mampu berjalan di beberapa OS yang ada yaitu Windows, Linux, Unix, dan Solaris; mendukung akses ke beberapa database yang sudah ada, yaitu MySQL, PosgreSQL, mSQL, dan Microsoft SQL Server; bersifat free/gratis. (Divisi Litbang MADCOMS, 2004 : 2).

2.7.3 jQuery

jQuery adalah Javascript library yakni kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita dalam membuat kode Javascript. Secara standar, apabila kita membuat kode Javascript, maka diperlukan kode yang cukup panjang, bahkan terkadang sangat sulit dipahami. Disinilah peran jQuery sebagai Javascript library, di mana kita bisa langsung memanggil fungsi yang terdapat di dalam Library tersebut. (Hakim, 2010 : 3).

Berikut ini akan dijabarkan lebih lengkap mengenai kemampuan yang dimiliki oleh jQuery, di antaranya mempermudah akses dan

31

manipulasi elemen tertentu pada dokumen, mempermudah modifikasi/perubahan tampilan halaman web, mempersingkat Ajax (Asynchronous Javascript and XML), memiliki API (Application Programming Interface) sehingga dapat memanipulasi content pada suatu halaman web, mampu merespon interaksi antara user dengan halaman web dengan lebih cepat, menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah. (Hakim, 2010 : 6-7).

2.7.4MySQL

MySQL adalah sebuah program database server yang mampu menerima dan mengirimkan datanya dengan sangat cepat, multi user, dan menggunakan perintah standar SQL (Structured Query Language). MySQL pertama kali dirintis oleh programmer database bernama Michael Widenius. MySQL adalah sebuah database yang dapat digunakan baik sebagai Client maupun Server. (Nugroho, 2005 : 1-2).

Kelebihan-kelebihan MySQL antara lain : sebagai DBMS, sebagai RDBMS, sebagai database server yang dapat menghubungkannya ke internet sehingga dapat diakses dari jauh, sebagai database client yang melakukan query untuk mengakses database pada server, mampu menerima query yang bertumpuk dalam satu pemintaan, mampu menyimpan data berkapasitas sangat besar, dan menggunakan enkripsi password dan menciptakan 16 kunci. (Nugroho, 2005 : 3-4).

2.7.5 XAMPPdan phpMyAdmin

XAMPP adalah perangkat lunak bebas yang berfungsi sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (dijalankan di banyak sistem operasi, seperti Windows, Linux, Mac OS, dan Solaris), Apache, MySQL, PHP dan Perl.

Software XAMPP terdiri atas:

a. Apache, merupakan aplikasi web server. Tugas utama Apache adalah menghasilkan halaman web yang benar kepada user berdasarkan kode PHP yang dituliskan oleh pembuat halaman web. Jika diperlukan juga berdasarkan kode PHP yang dituliskan, maka dapat saja suatu database diakses terlebih dahulu untuk mendukung halaman web yang dihasilkan PHP.

b. MySQL.

c. phpMyAdmin, adalah suatu program Open Source berbasis web. Program ini berguna untuk mengakses database MySQL, akan mempermudah dan mempersingkat kerja kita dengan beberapa kelebihan, antara lain pengguna awam tidak harus mengenal syntax – syntax SQL dalam pembuatan database dan tabel. (Nugroho, 2005 : 467).

33

2.7.6Macromedia Dreamweaver MX 2004

Macromedia Dreamweaver MX 2004 adalah program aplikasi profesional untuk mengedit HTML secara visual dan mengelola website serta pages. Program ini menyertakan banyak perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML, CSS, Javascript Reference, dan Javascipt Debugger. Program aplikasi ini juga memungkinkan pengeditan PHP, Javascript, ASP, XML, dan lainnya secara langsung yaitu dengan fasilitas Code Editors. (Tim Wahana Komputer, 2004 : 1).

2.7.7Opera Mobile for Windows

Opera Mobile merupakan browser web untuk smartphone dan PDA yang dikembangkan oleh perusahaan Opera Software. Opera Mobile mendukung banyak standar web dan AJAX. Opera Mobile tersedia untuk berbagai perangkat yang menjalankan Windows Mobile, S60 dan UIQ user interface. Sementara browser mobile lainnya dari Opera adalah Opera Mini. Opera Mini merupakan penjelajah web yang dirancang khusus untuk ponsel, dan juga bisa dioperasikan untuk PDA dan smartphone. Penjelajah web ini menggunakan platform Java J2ME. (Hendra, 2010). Jika kita ingin menggunakannya melalui PC maka kita bisa menggunakan Opera Mobile for Windows yang bisa didapat gratis di internet, karena software ini merupakan simulator Opera Mobile dan Opera Mini pada handphone.

Gambar 2.6 Tampilan Awal Opera Mobile for Windows

2.8 Studi Sejenis

Banyak studi sejenis yang berkaitan dengan skripsi penulis, di antaranya beberapa dijadikan acuan dalam penelitian ini. Studi sejenis dari penelitian akademik bisa diklasifikasikan sebagai berikut.

1. Skripsi Tentang Sistem Akademik Sekolah

Aplikasi Akademik Berbasis Wireless Application Protocol (Studi Kasus : SMA Negeri 1 Ciputat). E ko Sap u tr o. 2010. UIN Jakarta : Jakarta. Skripsi ini menggunakan sistem berbasis web pada sisi admin dan WAP pada sisi user; menggunakan bahasa pemrograman WML, PHP, dan MySQL; serta menggunakan metode waterfall sebagai metode pengembangan sistemnya. Kelebihannya adalah menggunakan WAP; menyajikan informasi siswa, guru, dan lainnya. Sedangkan kelemahannya adalah tampilan interface sederhana, dan belum memiliki fasilitas untuk menampilkan nilai siswa.

35

Sistem Informasi Pembuatan Rapor SDN Pondok Kacang Timur IV. Qunut Fajri. 2007. UIN Jakarta : Jakarta. Skripsi ini menggunakan sistem berbasis desktop; menggunakan Microsoft Visual Basic 6.0 dan Ms. Access 2003; serta menggunakan metode waterfall sebagai metode pengembangan sistemnya. Kelebihannya adalah terintegrasinya guru dan TU sehingga guru dan TU dapat menginput nilai siswa dan membuat laporan nilai siswa; serta menangani data-data akademik dengan baik. Sedangkan kelemahannya adalah sistemnya masih berbasis desktop, dan belum adanya proses validasi data.

Pengembangan Perangkat Lunak Sistem Informasi Akademik SD Standar Nasional Rajawati 08 Pagi Berbasis Jaringan WLAN dengan Menggunakan Infrastruktur Ad-Hoc. Indah Dwijayanthi Nirmala. 2010. UIN Jakarta : Jakarta. Skripsi ini menggunakan sistem berbasis desktop yang dihubungkan dalam jaringan WLAN, menggunakan Delphi 7, dan metode waterfall. Skripsi ini bertujuan mengembangkan aplikasi akademik yang dapat diakses beberapa komputer dengan berbasis WLAN. Kelebihannya adalah dapat diakses beberapa komputer dalam satu jangkauan sekolah, adanya fitur laporan sehingga membantu pihak sekolah dalam mencetak hasil sistem akademiknya. Kelemahannya adalah belum diintegrasikan dengan sistem lain di sekolah, dan sistem keamanannya yang masih kurang.

Pengembangan Sistem Informasi Siswa Berbasis Teknologi SMS Menggunakan Konsep At Command. Erika Nachrowi. 2010. UIN Jakarta : Jakarta. Skripsi ini berbasis sistem yang menggunakan bahasa Java, SMS Gateway, UML dan metode spiral. Skripsi ini bertujuan merancang sistem informasi siswa yang menjadi media dalam pemantauan nilai, absensi dan SPP siswa, serta informasi kegiatan sekolah dengan menggunakan SMS. Kelebihannya adalah menampilkan informasi siswa dalam hal nilai harian, UTS, UAS, SPP, absensi, dan info akademik sekolah; juga berbasis teknologi SMS gateway. Kelemahannya adalah belum semua ponsel dapat menggunakan aplikasi ini, dan belum adanya fasilitas autentikasi user dan keamanan sistemnya.

Perancangan Sistem Informasi Laporan Akademik Berbasis Web SMAN 108 Ulujami Pesanggrahan Jakarta Selatan. Andry Hidayat. 2009. UIN Jakarta : Jakarta. Skripsi ini berbasis web yang menggunakan PHP-MySQL, dan metode SDLC. Skripsi ini bertujuan merancang aplikasi sistem akademik yang membantu mengelola data akademik sekolah dan mengetahui info akademik dengan mudah. Kelebihannya adalah mempermudah pihak sekolah mengelola data akademik dan mempermudah siswa mendapat informasi akademik. Kelemahannya adalah sistem keamanannya yang kurang, dan belum adanya penerapan langsung pada pihak sekolah.

37

Aplikasi Pelayanan Informasi Akademik Menggunakan Protokol WAP (Studi Kasus : Madrasah Aliyah Al Hikmah 2 Brebes). Dawimah. 2010. UIN Jakarta : Jakarta. Skripsi ini menggunakan sistem berbasis web pada admin dan WAP pada user. dengan bahasa PHP-MySQL, dan metode waterfall. Skripsi ini bertujuan mengembangkan layanan informasi akademik MA berbasis WAP untuk mengakses informasi akademik MA Hikmah 2 Brebes. Kelebihannya adalah dapat mengakses info akademik dengan ponsel, dan menggunakan protokol WAP. Kelemahannya adalah pada sistemnya tidak ada fitur untuk pembayaran SPP sekolah, dan sistem keamanannya yang masih rentan.

Aplikasi PHP dan MySQL Dalam Pembuatan Sistem Infomasi SMAN 1 Dukuhwaru Kabupaten Tegal Berbasis Web. Hery Sasria. 2007. UNS : Semarang. Skripsi ini menggunakan sistem berbasis web, menggunakan bahasa pemrograman PHP dan MySQL, serta menggunakan metode pendekatan terstruktur sebagai pengembangan sistemnya. Kelebihannya adalah memiliki fasilitas agar siswa, guru, dan wali siswa dapat login ke halamannya masing-masing; serta menangani data-data akademik dengan baik. Sedangkan kelemahannya adalah informasi akademik tidak dapat diakses dengan cepat oleh pengguna kapanpun dan dimanapun.

2. Skripsi Tentang Sistem Akademik Kampus

Pengembangan Sistem Informasi Akademik (Studi Kasus : UIN Syarif Hidayatullah Jakarta). Fitria Nurul Husna. 2010. UIN Jakarta : Jakarta. Skripsi ini menggunakan sistem berbasis web dengan bahasa Java, konsep UML, dan metode Extreme Programming. Skripsi ini bertujuan menganalisis sistem yang ada dan merancang pengembangan sistem akademik sehingga menunjang kegiatan akademik di UIN Jakarta. Kelebihannya adalah sistemnya memiliki banyak fitur seperti skripsi, wisuda; serta sudah diintegrasikan ke seluruh fakultas. Kelemahannya adalah belum adanya batasan minimal kehadiran mahasiswa untuk UAS pada modul absen, dan jumlah pertemuan yang harus dilakukan dosen.

Analisis dan Perancangan Sistem Informasi Akademik (Studi Kasus : Prodi SI Fakultas Saintek UIN Syarif Hidayatullah Jakarta). Abdullah. 2010. UIN Jakarta : Jakarta. Skripsi ini menggunakan sistem berbasis web dengan menggunakan bahasa PHP-MySQL, dan metode waterfall. Skripsi ini bertujuan untuk merancang sistem informasi akademik yang memudahkan pengolahan dan menyajikan data akademik kemahasiswaan. Kelebihannya adalah memudahkan pengolahan data akademik oleh admin, dan menyajikan layanan informasi akademik secara online untuk mahasiswa. Kelemahannya adalah belum adanya fitur penawaran mata kuliah dengan sistem paket dalam pengisian KRS, dan kajian penelitian belum dilakukan sepenuhnya.

}

/ / Langkah 2: Sesuaikan perint ah SQL / / jika dit ekan t ombol submit

if($_POST["t ombol" ]==" Pilih")

{ $id_kelas=st rip_tags($_POST["id_kelas"]); $id_matpel=strip_tags($_POST[" id_mat pel" ]); $semest er=st rip_tags($_POST["semest er"]);

if((!empt y($id_kelas)) && (!empt y($id_matpel)) && (!empt y($semest er)))

{

$query=mysql_query(" SELECT * FROM

siswa,guru,dat a_kelas,nilai_siswa,mata_pelajaran WHERE siswa.id_sisw a='$id_siswa' AND

nilai_siswa.id_siswa='$id_siswa' AND data_kelas.id_kelas='$id_kelas' AND nilai_siswa.id_kelas='$id_kelas' AND mat a_pelajaran.id_matpel='$id_mat pel' AND nilai_siswa.id_mat pel='$id_matpel' AND nilai_siswa.semester='$semester' AND data_kelas.id_kelas=nilai_sisw a.id_kelas AND mat a_pelajaran.id_matpel=nilai_siswa.id_matpel AND siswa.id_sisw a=nilai_siswa.id_siswa AND

guru.id_guru=nilai_siswa.id_guru GROUP BY id_nilai ASC limit $posisi,$batas");

$no=$posisi+0;

w hile($data=mysql_fetch_array($query)) { $no++;

if(!$data) {

echo"<p class=\ "font 6\ " >M aaf, data nilai siswa kosong.</ p><br / >" ;

}

else {

if (($data[kognit if]) >= ($data[kkm]) | | ($dat a[psikomot orik]) >= ($data[kkm]))

{ $dat a[hasil]="Lulus" ;

} else

{ $dat a[hasil]="Belum Lulus" ; }

echo" <div id=\ " kotak2\ ">

<p class=\ " font 5\ " >$no.Kelas : $data[kelas]<br / > Pelajaran : $dat a[matapelajaran]<br / >

Nama Guru : $dat a[nama_guru]<br / >

Semest er : $data[semest er]<br / > Tahun Ajaran :

$data[t hnpelajaran]<br / >

KKM : $data[kkm]<br / >

Nilai Kognitif : $data[kognitif]<br / > Nilai Psikomot orik :

$data[psikomotorik]<br / >

Nilai Afektif : $data[afekt if]<br / > Hasil : $data[hasil]</ p>

</ div>" ; } } } else {

echo" <p class=\ " font 6\ " >M aaf, anda belum memilih data.</ p><br / >" ;

} }

echo" <p class=\ " font 2\ " >Ket : Jika lulus, anda dapat berlanjut ke semest er/ kelas berikutnya.<br / >Jika belum lulus, anda harus mengikut i remedial pada pelajaran yang nilai kognitif atau psikomot orik-nya di bawah KKM .</ p>" ;

/ / Langkah 3: Hitung tot al data dan halaman $t ampil2=" SELECT * FROM

siswa,guru,dat a_kelas,nilai_siswa,mata_pelajaran WHERE siswa.id_sisw a='$id_siswa' AND

data_kelas.id_kelas='$id_kelas' AND nilai_siswa.id_kelas='$id_kelas' AND mat a_pelajaran.id_matpel='$id_mat pel' AND nilai_siswa.id_mat pel='$id_matpel' AND nilai_siswa.semester='$semester' AND data_kelas.id_kelas=nilai_sisw a.id_kelas AND mat a_pelajaran.id_matpel=nilai_siswa.id_matpel AND siswa.id_sisw a=nilai_siswa.id_siswa AND

guru.id_guru=nilai_siswa.id_guru GROUP BY id_nilai ASC" ; $hasil2=mysql_query($tampil2);

$jmldat a=mysql_num_rows($hasil2); $jmlhalaman=ceil($jmldata/ $batas); $file=" nilaisisw a_mobile.php" ;

echo" <div id=\ "paging\ " >" ;

/ / Link ke halaman sebelumnya (previous) if($halaman > 1){

$previous=$halaman-1; echo " <a

href=\ " $file?halaman=1\ " >Aw al</ a>| <a href=\ " $file?halaman=$previous\ "><img

src=\ " images/ Back.jpg\ " alt=\ "back\ " width=\ " 10\ " height =\ " 10\ " / ></ a>" ;

} else {

echo " Awal| <img src=\ " images/ Back.jpg\ " alt =\ "back\ " w idth=\ " 10\ " height =\ " 10\ " / >" ; }

/ / Tampilkan link halaman 1,2,3 ... / / Angka awal

$angka=($halaman > 3 ? " ... " : " "); for($i=$halaman-2;$i<$halaman;$i++) {

if ($i < 1) continue;

$angka .= " &nbsp;<a

href=\ " $file?halaman=$i\ " >$i</ a>&nbsp;" ;

}

/ / Angka t engah

$angka .= " &nbsp;$halaman&nbsp;" ; for($i=$halaman+1;$i<($halaman+3);$i++) {

if ($i > $jmlhalaman) break;

$angka .= " &nbsp;<a

href=\ " $file?halaman=$i\ " >$i</ a>&nbsp;" ; }

/ / Angka akhir

$angka .= ($halaman+2<$jmlhalaman ? " ... & nbsp;<a

href=\ " $file?halaman=$jmlhalaman\ " >$jmlhalaman</ a>& nbsp;" : " ");

echo " $angka" ;

/ / Link kehalaman berikut nya (Next ) if($halaman < $jmlhalaman){

$next =$halaman+1; echo " &nbsp;<a

href=\ " $file?halaman=$next\ " ><img

src=\ " images/ Next.jpg\ " alt =\ " next \ " w idt h=\ " 10\ " height =\ " 10\ " / ></ a>| <a

href=\ " $file?halaman=$jmlhalaman\ " >Akhir</ a>" ; }

else{

echo " &nbsp;<img src=\ " images/ Next .jpg\ " alt =\ "next\ " w idth=\ " 10\ " height =\ " 10\ " / >| Akhir" ; }

echo " <p>Tot al : $jmldat a</ p>" ; echo" </ div>" ;

echo" <p class=\ " font 6\ " ><a

href=\ "tampilsemuanilaisisw a_mobile.php?id_sisw a=$id_s iswa\ ">Lihat Semua Nilai Siswa</ a></ p>" ;

ob_flush(); ?>

<br / ><br / >

<div id=" atasbaw ah2" >design by nendy<br / >Copyright (c) 2010<br / >SM A M uga Tangerang</ div>

</ div> </ body> </ ht ml>

d. absensisiswa_mobile.php

<?

session_start (); ob_st art();

header('Cont ent-type:applicat ion/ vnd.w ap.xht ml+xml'); header('Cont ent-type:applicat ion/ xhtml+xml'); echo('<?xml version=" 1.0" encoding=" UTF-8" ?>'); ?>

<!DOCTYPE html PUBLIC " -/ / WAPFORUM / / DTD XHTM L M obile 1.0/ / EN" "http:/ / w w w.wapforum.org/ DTD/ xhtml-mobile10.dtd" >

<html xmlns=" ht tp:/ / w w w.w 3.org/ 1999/ xhtml" > <head>

<t it le>SM AM 3 TNG</ t it le>

<meta ht tp-equiv=" Cache-Cont rol" cont ent=" no-t ransform" / &gno-t;

<link rel="st ylesheet " href=" tampilanw css.css" t ype=" t ext / css" / >

</ head> <body> <div id=" badan">

<div id=" atasbaw ah2" >Sist em Akademik Sekolah<br / > SM A M uhammadiyah 3 Tangerang</ div>

<?

if(!session_is_regist ered('id_sisw a')) { header('locat ion:siswa_mobile.php');

}

/ / koneksi ke database include" koneksi.php" ;

/ / / / / /

if(session_is_registered('id_sisw a')) {

$id_siswa=$_SESSION["id_siswa" ]; echo" <div id=\ "menu2\ " >" ; echo" <a accesskey=\ " 1\ "

href=\ "biodatasiswa_mobile.php?id_siswa=$id_siswa\ ">Bi odat a Siswa</ a> | <a accesskey=\ " 2\ "

href=\ "nilaisiswa_mobile.php?id_siswa=$id_siswa\ " >Nilai Siswa</ a> | <a

href=\ "absensisiswa_mobile.php?id_siswa=$id_siswa\ ">A bsensi Siswa</ a> | <a accesskey=\ " 3\ "

href=\ " jadwalpelajaransiswa_mobile.php?id_siswa=$id_sis w a\ " >Jadwal Pelajaran</ a> | <a accesskey=\ " 4\ " href=\ "infoakademiksiswa_mobile.php?id_siswa=$id_sisw a\ ">Info Akademik</ a> | <a

href=\ "logoutsisw a_mobile.php?id_sisw a=$id_siswa\ " >Log out Siswa</ a></ div>" ;

$t gl=dat e("d"); $bln=dat e(" m"); $t hn=dat e("Y" ); $hr=dat e(" w ");

$bulan=array(" Januari" ," Februari" ," M aret " ," April" ," M ei" ," Juni" ," Juli" ," Agustus" ," Sept ember" ," Oktober" ," November" , " Desember" );

$hari=array(" M inggu" ," Senin" ," Selasa" ,"Rabu" ," Kamis" ," Ju mat " ," Sabtu" );

$namabulan=$bulan[$bln-1]; $namahari=$hari[$hr];

$sekarang=" $namahari, $tgl $namabulan $thn" ; $t anggal=" $tgl $namabulan $t hn" ;

echo" <p class=\ " font 1\ " >$sekarang</ p>" ; ?>

<p class="font 3" >DATA ABSENSI SISWA</ p> <p class="font 6" >Nama Siswa : <? echo $_SESSION['username_siswa'] ?></ p><br / >

<div id=" cari"><form method=" POST" act ion=" <?php echo $_SERVER['PHP_SELF']; ?>" >

Pilih Data Dahulu<br / >

<select class="t ext-input " name="id_kelas">

<opt ion value=" 0 select ed" >Pilih Kelas</ opt ion> <?

$t ampil=mysql_query(" SELECT * FROM dat a_kelas ORDER BY id_kelas" );

while($r=mysql_fetch_array($tampil)){ echo "<opt ion

value=\ " $r[id_kelas]\ " >$r[kelas]</ opt ion>" ; } ?>

</ select > <select class="t ext-input " name="id_matpel"> <opt ion value=" 0 select ed" >Pilih Pelajaran</ opt ion>

<?

$t ampil=mysql_query(" SELECT * FROM mata_pelajaran ORDER BY id_mat pel");

while($r=mysql_fetch_array($tampil)){ echo "<opt ion

value=\ " $r[id_mat pel]\ " >$r[matapelajaran]</ opt ion>" ; } ?>

</ select > <select class="t ext-input " name="semest er" id="semest er">

<opt ion value=" 0 select ed" >Pilih Semester</ option>

<option>1</ option>

<option>2</ option> </ select>

<input class=" submit " type=" submit " name=" tombol" value=" Pilih" / >

</ form></ div> <?

/ / M embuat paging(pembatasan halaman)

/ / Langkah 1: Tent ukan batas,cek halaman & posisi data $batas=5;

$halaman=$_GET['halaman']; if(empt y($halaman)){

$posisi=0; $halaman=1; }

else{

$posisi = ($halaman-1) * $batas; }

/ / Langkah 2: Sesuaikan perint ah SQL / / jika dit ekan t ombol submit

if($_POST["t ombol" ]==" Pilih")

{ $id_kelas=st rip_tags($_POST["id_kelas"]); $id_matpel=strip_tags($_POST[" id_mat pel" ]); $semest er=st rip_tags($_POST["semest er"]); $query=mysql_query(" SELECT * FROM

siswa,guru,dat a_kelas,absensi_siswa,mata_pelajaran WHERE siswa.id_siswa='$id_siswa' AND

absensi_siswa.id_siswa='$id_siswa' AND data_kelas.id_kelas='$id_kelas' AND absensi_siswa.id_kelas='$id_kelas' AND mat a_pelajaran.id_matpel='$id_mat pel' AND absensi_siswa.id_matpel='$id_mat pel' AND absensi_siswa.semest er='$semest er' AND data_kelas.id_kelas=absensi_sisw a.id_kelas AND mat a_pelajaran.id_matpel=absensi_siswa.id_matpel AND siswa.id_sisw a=absensi_siswa.id_siswa AND

guru.id_guru=absensi_siswa.id_guru GROUP BY id_absensi ASC limit $posisi,$batas" );

$no=$posisi+0;

while($data=mysql_fet ch_array($query)) { $no++;

if(!$data)

{ echo"<p class=\ "font 6\ " >M aaf, data absensi siswa kosong.</ p><br / >" ;

} else {

echo" <div id=\ " kotak2\ ">

Pelajaran : $dat a[matapelajaran]<br / >

Nama Guru : $dat a[nama_guru]<br / >

Semest er : $data[semest er]<br / > Bulan : $dat a[bulan]<br / > Tahun : $data[t hnpelajaran]<br / > Jumlah Hadir : $dat a[jumlahhadir]<br / >

Jumlah Sakit : $data[jumlahsakit ]<br / >

Jumlah Ijin : $dat a[jumlahijin]<br / > Jumlah Alpa : $data[jumlahalpa]<br / >

Jumlah Absensi : $data[jumlahabsensi]</ p>

</ div>" ; } }

}

/ / Langkah 3: Hitung tot al data dan halaman $t ampil2=" SELECT * FROM

siswa,guru,dat a_kelas,absensi_siswa,mata_pelajaran WHERE siswa.id_siswa='$id_siswa' AND

absensi_siswa.id_siswa='$id_siswa' AND data_kelas.id_kelas='$id_kelas' AND absensi_siswa.id_kelas='$id_kelas' AND mat a_pelajaran.id_matpel='$id_mat pel' AND absensi_siswa.id_matpel='$id_mat pel' AND absensi_siswa.semest er='$semest er' AND data_kelas.id_kelas=absensi_sisw a.id_kelas AND mat a_pelajaran.id_matpel=absensi_siswa.id_matpel AND siswa.id_sisw a=absensi_siswa.id_siswa AND

guru.id_guru=absensi_siswa.id_guru GROUP BY id_absensi ASC" ;

$hasil2=mysql_query($tampil2); $jmldat a=mysql_num_rows($hasil2); $jmlhalaman=ceil($jmldata/ $batas);

$file=" absensisisw a_mobile.php" ;

echo" <br / ><div id=\ " paging\ ">" ; / / Link ke halaman sebelumnya (previous) if($halaman > 1){

$previous=$halaman-1; echo " <a

href=\ " $file?halaman=1\ " >Aw al</ a>| <a href=\ " $file?halaman=$previous\ "><img

src=\ " images/ Back.jpg\ " alt=\ "back\ " width=\ " 10\ " height =\ " 10\ " / ></ a>" ;

} else {

echo " Awal| <img src=\ " images/ Back.jpg\ " alt =\ "back\ " w idth=\ " 10\ " height =\ " 10\ " / >" ; }

/ / Tampilkan link halaman 1,2,3 ... / / Angka awal

$angka=($halaman > 3 ? " ... " : " "); for($i=$halaman-2;$i<$halaman;$i++) {

if ($i < 1) continue;

$angka .= " &nbsp;<a

href=\ " $file?halaman=$i\ " >$i</ a>&nbsp;" ; }

/ / Angka t engah

$angka .= " &nbsp;$halaman&nbsp;" ; for($i=$halaman+1;$i<($halaman+3);$i++) {

if ($i > $jmlhalaman) break;

$angka .= " &nbsp;<a

href=\ " $file?halaman=$i\ " >$i</ a>&nbsp;" ; }

/ / Angka akhir

$angka .= ($halaman+2<$jmlhalaman ? " ... & nbsp;<a

href=\ " $file?halaman=$jmlhalaman\ " >$jmlhalaman</ a>& nbsp;" : " ");

echo " $angka" ;

/ / Link kehalaman berikut nya (Next ) if($halaman < $jmlhalaman){

$next =$halaman+1; echo " &nbsp;<a

href=\ " $file?halaman=$next\ " ><img

src=\ " images/ Next.jpg\ " alt =\ " next \ " w idt h=\ " 10\ " height =\ " 10\ " / ></ a>| <a

href=\ " $file?halaman=$jmlhalaman\ " >Akhir</ a>" ; }

else{

echo " &nbsp;<img src=\ " images/ Next .jpg\ " alt =\ "next\ " w idth=\ " 10\ " height =\ " 10\ " / >| Akhir" ; }

echo " <p>Tot al : $jmldat a</ p>" ; echo" </ div>" ;

echo" <p class=\ " font 6\ " ><a

href=\ "tampilsemuaabsensisisw a_mobile.php?id_sisw a=$i d_siswa\ " >Lihat Semua Absensi Siswa</ a></ p>" ; }

ob_flush(); ?>

<br / ><br / >

<div id=" atasbaw ah2" >design by nendy<br / >Copyright (c) 2010<br / >SM A M uga Tangerang</ div>

</ div> </ body> </ ht ml>