Perancangan Aplikasi Berbasis Web Dengan Sms Gateway Pada Sma Swasta Pangeran Antasari Medan

(1)

MEDAN

TUGAS AKHIR

SEPTI PURWATI NINGSIH

102406160

PROGRAM STUDI D-3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

(2)

TUGAS AKHIR

Diajukan untuk melengkapi tugas akhir dan memenuhi syarat memperoleh gelar Ahli

Madya

SEPTI PURWATI NINGSIH

102406160

PROGRAM STUDI D-3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

(3)

PERSETUJUAN

Judul

: PERANCANGAN APLIKASI BERBASIS WEB

DENGAN SMS GATEWAY PADA SMA

SWASTA PANGERAN ANTASARI MEDAN

Kategori

: TUGAS AKHIR

Nama

: SEPTI PURWATI NINGSIH

Nomor Induk Mahasiswa

: 102406160

Program Studi

: DIPLOMA (D3) TEKNIK INFORMATIKA

Departemen

: MATEMATIKA

Fakultas

: MATEMATIKA DAN ILMU PENGETAHUAN

ALAM (FMIPA) UNIVERSITAS SUMATERA

UTARA

Diluluskan di

Medan, Juli 2013

Komisi Pembimbing

:

Diketahui/Disetujui oleh

Departemen Matematika FMIPA USU

Ketua,

Pembimbing,

(4)

PERNYATAAN

PERANCANGAN APLIKASI BERBASIS WEB DENGAN SMS GATEWAY PADA

SMA SWASTA PANGERAN ANTASARI MEDAN

TUGAS AKHIR

Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa

kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Juli 2013

(5)

PENGHARGAAN

Puji syukur penulis panjatkan kepada Tuhan Yang Maha Esa atas limpahan rahmat

dan hidayah-Nya sehingga kajian tugas akhir ini dapat diselesaikan dengan baik dan

dalam waktu yang telah ditetapkan.

Penyusunan tugas akhir ini masih banyak memiliki kekurangan karena

keterbatasan kemampuan dan pengetahuan penulis, sehingga diharapkan kritik dan

saran yang membangun serta dapat memberikan inspirasi yang baik untuk kemajuan

tugas akhir ini.

Tugas Akhir merupakan salah satu syarat yang harus dilakukan setiap

mahasiswa Teknik Informatika untuk dapat menyelesaikan pendidikan di Program

D-3 Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam di

Universitas Sumatera Utara.

Pada kesempatan ini penulis juga menyampaikan terima kasih kepada seluruh

pihak yang sudah banyak membantu:

1.

Bapak Dr. Sutarman, M.Sc, selaku Dekan Fakultas Matematika dan Ilmu

Pengetahuan Alam di Universitas Sumatera Utara.

2.

Bapak Prof. Dr. Tulus, Vordipl, M.Si, Ph.D dan Dra. Mardiningsih, M.Si,

selaku ketua dan sekretaris Departemen Matematika di Universitas Sumatera

Utara.

3.

Bapak Prof. Dr. Saib Suwilo, M.Sc, selaku Dosen pembimbing pada

penyelesaian Tugas Akhir ini yang telah memberikan panduan dan penuh

kepercayaan kepada penulis untuk menyelesaikan kajian Tugas Akhir ini.

4. Para Staf/Pengajar Jurusan D-3 Teknik Informatika FMIPA USU.

5. Kedua orang tua dan keluarga untuk segenap doa dan dukungannya.

6. Adik, terimakasih atas saran dan dukungannya.

7. Seluruh rekan-rekan dari D-3 Teknik Informatika FMIPA USU, khususnya

Komputer C 2010, Vivi, Anggi, Icha, Dwi, Abdi, Fika, Irma terimakasih atas

(6)

ABSTRAK

(7)

DAFTAR ISI

Halaman

Persetujuan

ii

Pernyataan

iii

Penghargaan

iv

Abstrak

v

Daftar Isi

vi

Daftar Tabel

viii

Daftar Gambar

ix

BAB 1 PENDAHULUAN

1

1.1 Latar Belakang Masalah

1

1.2 Rumusan Masalah

2

1.3 Batasan Masalah

2

1.4 Tujuan dan Manfaat

3

1.5 Metode Penelitian

3

1.6 Sistematika Penulisan

4

BAB 2 LANDASAN TEORI

6

2.1 Website

6

2.1.1 Website Statis

6

2.1.2 Website Dinamis

7

2.2 HTML (

Hypertext Markup Language

)

7

2.3 PHP

9

2.4 Pengertian XAMPP

10

2.5 Adobe Photoshop

10

2.6 Adobe Dreamweaver

12

2.7 SMS Gateway dan NowSMS

12

2.8 Aplikasi Berbasis Web

13

BAB 3 GAMBARAN UMUM SMA PANGERAN ANTASARI MEDAN 14

3.1 Profil Sekolah

14

3.2 Visi Dan Misi

15

3.3 Uraian Tugas Organisasi

16

3.3.1 Kepala Sekolah

16

3.3.2 WKS- I Bidang Pendidikan

16

3.3.3 WKS-II Bidang Administrasi

17

3.3.4 WKS-III Bidang Kesiswaan

17

3.3.5 Wali Kelas

18

3.3.6 Guru Bidang Studi

18

BAB 4 PERANCANGAN SISTEM

19

4.1 Perancangan Sistem

19

4.2 Perancangan Data Flow Diagram (DFD)

19

4.3 Perancangan Diagram Alir (Flowchart) 24

(8)

4.3.2 Flowchart Halaman Admin

27

4.3.3 Flowchart Input Data

27

4.3.4 Flowchart Lihat Data

28

4.3.5 Flowchart SMS Nilai

28

4.3.6 Flowchart Inbox

29

4.4 Perancangan Database

29

4.5 Relasi Tabel

31

BAB 5 IMPLEMENTASI SISTEM

32

5.1 Pengertian Implementasi Sistem

32

5.2 Langkah-langkah Implementasi Sistem

32

5.3 Pengujian di Browser

42

BAB 6 KESIMPULAN DAN SARAN

48

5.1 Kesimpulan

48

5.2 Saran

49

Daftar Pustaka

50

Listing Program

(9)

DAFTAR TABEL

Halaman

Tabel 4.1 Simbol DFD

20

Tabel 4.2 Flowchart

26

Tabel 4.3 Tbl_data_siswa

29

Tabel 4.4 Tbl_data_guru

30

Tabel 4.5 Tbl_data_matpel

30

Tabel 4.6 Tbl_data_nilai

31

(10)

DAFTAR GAMBAR

Halaman

Gambar 4.1 Diagram Konteks Aplikasi Berbasis Web Dengan SMS Gateway 22

Gambar 4.2 Diagram Konteks Level 0

23

Gambar 4.3 Halaman Flowchart Login Admin

26

Gambar 4.4 Flowchart Halaman Admin

27

Gambar 4.5 Flowchart Input Data

27

Gambar 4.6 Flowchart Lihat Data

28

Gambar 4.7 Flowchart SMS Nilai

28

Gambar 4.8 Flowchart Inbox

29

Gambar 4.9 Relasi Tabel

31

Gambar 5.1 Instalasi XAMPP 1.6.7(1)

34

Gambar 5.2 Instalasi XAMPP 1.6.7 (2)

35

36

Gambar 5.6 Control panel XAMPP

37

Gambar 5.7 Instalasi Adobe Dreamweaver CS6 (1)

37

38

Gambar 5.9 Pilihan Limited Time (3)

38

Gambar 5.10 Pilihan Setuju (4)

38

Gambar 5.11 Instalasi Adobe Dreamweaver CS6 (5)

39

Gambar 5.13 Instalasi Adobe Photoshop CS3 (1)

40

41

42

Gambar 5.18 Peletakkan Folder Berisi File-File Web dalam Folder htdocs 42

Gambar 5.19 Penulisan Alamat di URL

43

Gambar 5.20 Hasil Pengujian Aplikasi di Browser

43

Gambar 5.21 Halaman Input Nilai 44

Gambar 5.22 Halaman Lihat Nilai 44

Gambar 5.23 Halaman Form SMS Nilai 45

Gambar 5.24 Halaman Form Data Siswa 45

Gambar 5.25 Halaman Form Data Guru 46

Gambar 5.26 Halaman Form Data Mata Pelajaran 46

Gambar 5.27 Halaman Form Data Guru Mata Pelajaran 47

(11)

ABSTRAK

(12)

PENDAHULUAN

1.1

Latar Belakang Masalah

Teknologi informasi yang berkembang demikian pesat dari masa ke masa, telah

mendorong percepatan diberbagai bidang. Hal ini juga yang menyebabkan munculnya

kemajuan pada perangkat lunak dan diimbangi pula dengan kemajuan dan

kecanggihan teknologi beserta perangkat kerasnya. Secara langsung ataupun tidak,

teknologi informasi telah menjadi bagian penting dari berbagai bidang kehidupan.

Karena banyak kemudahan yang ditawarkan, teknologi informasi hampir tidak dapat

dilepaskan dari berbagai aspek kehidupan manusia.

Salah satu teknologi informasi yang sangat populer saat ini adalah

handphone

beserta fasilitas

SMS (Short Message Service)

.

Handphone

sudah menjadi semacam

identitas diri secara personal. Karena sifatnya yang personal maka, semua info yang

masuk kedalam

handphone

dirasakan oleh penggunanya sebagai bentuk informasi

personal. Ditambah lagi dari secara psikologis bahwa seseorang itu ingin selalu

dianggap penting. Jadi apapun jenis SMS yang masuk, orang tersebut pasti akan

membuka dan membacanya.

SMS nilai siswa berbasis

web

merupakan suatu alat bantu untuk

mempermudah siswa dan orang tua mengetahui prestasi yang telah dicapai siswa

(13)

Berdasarkan keadaan tersebut penulis ingin membuat suatu aplikasi yang

diharapkan dapat mempermudah, mempercepat sekaligus menghemat biaya dalam

melakukan pengaksesan dan penyampaian informasi yang dibutuhkan kepada orang

tua siswa. Oleh sebab itu penulis memillih judul “Perancangan Aplikasi Berbasis Web

Dengan SMS Gateway Pada SMA Swasta Pangeran Antasari Helvetia Medan ”.

1.2

Rumusan Masalah

Permasalahan yang dihadapi dalam tugas akhir ini adalah “Keterbatasan informasi

antara pihak sekolah dengan orang tua.”

1.3 Batasan Masalah

Permasalahan masalah dibatasi oleh:

1. Aplikasi ini dibuat pada tingkat Sekolah Menengah Atas kelas I, II dan III.

2. Aplikasi ini menggunakan beberapa perangkat-perangkat lunak

freeware

dan

open

source

seperti

Xampp

,

Adobe Dreamweaver,

dan

Adobe Photoshop

.

3. Aplikasi ini hanya digunakan oleh admin untuk menghindari kebocoran nilai

siswa kepada pihak lain yang tidak dikenal.

4. Menggunakan NowSMS sebagai

service SMS Gateway

dan hanya memberi tahu

informasi nilai tugas, ujian bulanan, nilai semester, dan nilai ujian sekolah.

5. Pengiriman SMS Nilai ditujukan kepada siswa-siswa yang telah diregistrasikan

pada sistem.

6. pada saat ini sistem hanya menggunakan satu nomor sebagai pemrosesan yang

(14)

1.4 Tujuan dan Manfaat

A.

Tujuan

Adapun tujuan perancangan aplikasi berbasis

web

dengan sms

gateway

pada sekolah

menengah atas ini ”Merancang aplikasi untuk memberikan informasi yang akurat dari

pihak sekolah kepada orang tua siswa”.

B.

Manfaat

Manfaat yang dapat diperoleh dari perancangan aplikasi berbasis web dengan SMS

Gateway pada Sekolah Menengah Atas adalah :

1.

Dapat memberikan informasi yang akurat kepada orang tua siswa.

2.

Dapat Merancang aplikasi yang sesuai guna membantu orang tua siswa dalam

meningkatkan kualitas belajar pada anak.

1.5 Metode Penelitian

Untuk menyusun Tugas Akhir ini, penulis melakukan penerapan metode penelitian

dalam memperoleh data-data yang dibutuhkan sehingga penyusunan Tugas Akhir ini

dapat diselesaikan dengan baik. Adapun metode penelitian yang penulis lakukan

adalah sebagai berikut:

1.

Penelitian Lapangan

Penelitian ini dilakukan penulis secara langsung di lapangan, dalam hal ini

penulis melakukan penelitian di SMA Swasta Pangeran Antasari Medan

(15)

guru-guru disekolah tersebut.

2.

Penelitian Pustaka

Penelitian yang dilakukan penulis di perpustakaan untuk mendapatkan data

yang teoritis. Dalam hal ini yang harus diperhatikan adalah subjek yang

diteliti, yaitu khususnya pada buku bacaan yang menjadi pembahasan dan

saling berhubungan dengan permasalahan yang dihadapi.

3.

Pengumpulan data-data pendukung

Pengumpulan data dalam penelitian penulis lakukan dengan mencari data

diinternet.

4.

Pengujian Aplikasi

Menguji apakah aplikasi yang dibuat telah berhasil berjalan sesuai dengan

keinginan dan melakukan perbaikan kesalahan jika masih terdapat

error

pada

aplikasi.

5.

Implementasi Aplikasi

Penerapan aplikasi yang dirancang setelah melalui tahap pengujian dan telah

berjalan dengan baik.

6.

Penyusunan dan pengadaan laporan

Tahap akhir dari penelitian yang dilakukan, yaitu membuat laporan tentang

penelitian yang telah dilakukan.

1.6

Sistematika Penulisan

Untuk mempermudah penulisan tugas akhir ini, penulis membuat suatu sistematika

(16)

BAB 1

PENDAHULUAN

Pada bab ini diuraikan secara ringkas pembahasan tentang latar

belakang pembuatan tugas akhir ini, rumusan masalah, batasan

masalah, tujuan dan manfaat, serta metode penelitian dari tugas akhir

ini.

BAB 2

LANDASAN TEORI

Didalam bab ini diuraikan sekilas tentang pengertian

web

dan HTML,

pengenalan PHP, Xampp, Adobe Photoshop, serta adobe dreamweaver .

BAB 3

GAMBARAN UMUM SMA SWASTA PANGERAN ANTASARI

MEDAN

Bab ini berisikan tentang profil, struktur organisasi, uraian tugas dan

fungsi organisasi, serta visi dan misi SMA Swasta Pangeran Antasari

Medan.

BAB 4

PERANCANGAN SISTEM

Bab ini berisikan pembahasan mengenai sistem yang dirancang, dan

penggunaan Adobe Dreamweaver CS6 sebagai editor perancangan

aplikasi.

BAB 5

IMPLEMENTASI SISTEM

Pada bab ini berisikan pengertian implementasi sistem, tujuan

implementasi sistem, spesifikasi sistem, dan instalasi Xampp serta

konfigurasinya.

BAB 6

KESIMPULAN DAN SARAN

Bab ini berisikan kesimpulan dan saran dari masalah yang dibahas

(17)

LANDASAN TEORI

2.1

Website

atau

World Wide Web

, sering disingkat sebagai www atau “

web

” saja, yakni

sebuah sistem dimana informasi dalam bentuk teks, gambar, suara, dan lain-lain

dipresentasikan dalam bentuk

hypertext

dan dapat diakses oleh perangkat lunak yang

disebut browser. Informasi di

web

pada umumnya ditulis dalam format HTML.

Keistimewaan inilah yang telah menjadikan

web

sebagai

service

yag paling

cepat pertumbuhannya.

Web

mengizinkan pemberian

highlight

(penyorotan) pada

kata-kata atau gambar dalam sebuah dokumen untuk menghubungkan atau menunjuk

ke media lain seperti dokumen, frase,

movie clip,

atau file suara.

Web

dapat

menghubungkan dari sebarang tempat dalam sebuah dokumen atau gambar ke

sebarang tempat di dokumen lain. Dengan sebuah

browser

yang memiliki

Graphical

User interface (GUI), link-link

dapat dihubungkan ketujuannya dengan menunjuk

link

Tersebut dengan

mouse

dan menekannya.

2.1.1

Web Statis

Web

statis adalah

web

yang berisi / menampilkan informasi - informasi yang sifatnya

statis (tetap). Disebut statis karena pengguna tidak dapat berinteraksi dengan

web

(18)

dilihat dari tampilanya. Jika suatu

web

hanya berhubungan dengan halamin

web

lain

dan berisi suatu informasi yang tetap maka

web

tersebut disebut statis.

Pada web statis, pengguna hanya dapat melihat isi dokumen pada halaman web

dan apabila diklik akan berpindah ke halaman

web

yang lain. Interaksi pengguna

hanya terbatas dapat melihat informasi yang ditampilkan, tetapi tidak dapat mengolah

informasi yang dihasilkan. Web statis biasanya merupakan HTML yang ditulis pada

editor text dan disimpan dalam bentuk .html atau .htm.

2.1.2

Web Dinamis

Web

dinamis adalah

web

yang menampilkan informasi serta dapat berinteraksi dengan

penggguna.

Web

yang dinamis memungkinkan pengguna untuk berinteraksi

menggunakan form sehinggga dapat mengolah informasi yang ditampilkan.

Web

dinamis bersifat interaktif, tidak kaku, dan terlihat lebih indah.

2.2

HTML (Hypertext Markup Language)

Hypertext Markup Language

(HTML) adalah bahasayang digunakan untuk menulis

halaman

web

. HTML merupakan pengembangan dai

standard

pemformatan dokumen

teks

yaitu

Standard

Generalized

Markup

Language

(SGML).

HTML

sebenarnyaadalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak

(19)

HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan

dipopulerkan pertama kali oleh

browser

Mosaic. Selama awal tahun 1990 HTML

mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan

menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya.

Namun perkembangan tersebut tidak sampai mengubah cara kerja dari HTML. HTML

2.0 secara resmi dikeluakan pada bulan November 1995 oleh IETF (

Internet

Engineering Task Force

). HTML 2.0 ini merupakan penyempurnaan dari

HTML+(1993).

HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya.

Sebuah usaha dari

World Wide Web Consortium’s

HTML

Working Group

pada tahun

1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan

Januari 1997.

HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh

W3C pada tanggal 24 April 198. HTML 4.01 merupakan perbaikan dari HTML

4.0merupakan perbaikan dari HTML 4.0 yang lebih dahulu diterbitkan (18 Desember

1997).

Dan adapun secara umum tugas-tugas yang dapat dilakukan oleh HTML adalah:

1.

Mengontrol tampilan dari

web page

dan

content

nya.

2.

Mempublikasikan document secara

online

sehingga bisa di akses dari seluruh

dunia.

3.

Membuat

online form

yang bisa di gunakan untuk menangani pendaftaran,

(20)

4.

Menambahkan

object-object

seperti

image

, audio, video dan juga

java applet

dalam document HTML.

Browser

merupakan

software

yang diinstal di mesin

Client

yang berfungsi

untuk menterjemahkan tag-tag HTML menjadi halaman

web

.

Browser

yang biasanya

digunakan adalah internet explorer, nescape navigator dan banyak

browser

yang lain.

Untuk membuat dokumen HTML digunakan suatu program editor diantaranya

adalah MS. Frontage, Notepad++, dan yang digunakan penulis adalah Macromedia

Dreamweaver CS6.

2.3

PHP

PHP kependekan dari (

Hypertext Preprocessor

)

adalah bahasa

scripting

yang menyatu

dengan

tag-tag

HTML dalam satu

file

, dieksekusi di server, dan digunakan unutk

membuat halaman web yang dinamis. Selain itu, PHP merupakan

software

yang

open

source

bebas sehingga dapat mengubah

source code

dan mendistribusikan secara

bebas dan gratis. PHP juga dapat berjalan lintas platform yaitu dapat digunakan

dengan sistem operasi (Windows dan Linux) dan

web server

apapun (misal : PWS,IIS,

Apache). Serta fungsi-fungsi yang ada di PHP bersifat

uncase sensitive

, dan

(21)

2.4

Pengertian Xampp

Xampp

merupakan

tool

yang menyediakan paket perangkat lunak ke dalam satu buah

paket. Dengan menginstall

Xampp

maka tidak perlu lagi melakukan instalasi dan

konfigurasi

web server

Apache

, PHP dan MySQL secara manual.

2.5

Adobe Photoshop

Adobe Photoshop adalah sebuah aplikasi desain yang lebih sesuai digunakan untuk

memodifikasi sebuah

image

ilustrasi. Sering juga aplikasi ini dinamakan modifikasi,

karena hamper setiap

option-

nya dapat digunakan untuk membuat modifikasi.

Aplikasi ini menyajikan beberapa

option tool

yang berfungsi untuk membuat ilustrasi

dan efek untuk sebuah obyek. Obyek yang masuk dalam dokumen Photoshop akan

disimpan dalam bentuk

image.

Sehingga diperlukan dokumen

backup

untuk

mempermudah jika sewaktu-waktu ada proses

editing

.

Ada dua dokumen yang dapat dipilih sesuai format

flatten-

nya yaitu:

1.

Flatten Image,

dokumen dengan

layer

penyusun menyatu. Pada dokumen ini

terdapat penggabungan beberapa

layer

penyusun desain yang dibuat sebelumnya.

Sehingga dokumen akan tampil dengan materi desain yang sama tetapi hanya ada

satu

layer

. Beberapa dokumen seperti ini dapat ditemukan dalam format

jpeg,

bmp, gif

, dan lai-lain. Kelebihan format ini adalah:

a.

Memori lebih kecil.

b.

Mudah di-

load

ke aplikasi lain.

(22)

d.

Tidak dapat diedit

2.

Don’t Flatten Image,

dokumen dengan

layer

penyusun tetap. Artinya pada

dokumen tersebut masing-masing

layer

penyusun dalam posisi tetap. Sehingga

layer

akan menampilkan kotak

layer

sesuai dengan jumlah materi dalam

dokumen. Bila dokumen terdiri dari sepuluh materi, maka

layer

yang terbentuk

juga sepuluh buah. Dokumen seperti ini biasanya ditemukan dalam format psd,

pdf. Kelebihan dari dokumen ini adalah:

a.

Mudah dilakukan

editing

b.

Memori lebih besar

c.

Digunakan sebagai master

Pada prinsipnya setiap dokumen akan disimpan dalam dua jenis dokumen

tersebut (

flatten image

atau

don’t flatten image).

Masing-masing jenis dokumen ini

dapat diubah format

saving

nya sesuia dengan kebutuhan desain.

Adobe Photoshop juga dapat digunakan bersama dnegan aplikasi lain,

misalnya Adobe Ilustrator, Adobe InDesign, Adobe Effect, Adobe Premier, bahkan

dengan Macromedia FreeHand. Proses yang dapat diberikan adalah kekmapuan saling

melengkapi kebutuhan ilustrasi desain dan modifikasi pada masing-masing aplikasi

sehingga akan terciptanya karya desain yang professional.

Dalam Adobe Photoshop terdapat beberapa jenis cara proses

saving

diantaranya:

a.

Save,

proses penyimpanan dokumen langsung

b.

Save As,

proses menyimpan dokumen dengan pilihan format

saving

(23)

d.

Export,

menyimpan untuk dibukakan dalam aplikasi Adobe Ilustrator

Adobe Photoshop memiliki beberapa

option

dan

tool

yang akan dibagi dalam

beberapa bagian. Diantaranya:

a.

Toolbars

b.

Toolbox

c.

Dialogbox

2.6

Adobe Dreamweaver

Adobe Dreamweaver adalah sebuah HTML editor profesional untuk mendesain

secara visual dan mengelola situs web maupun halaman web. Bilamana kita menyukai

untuk berurusan dengan kode-kode HTML secara manual atau lebih menyukai bekerja

dengan lingkungan secara visual dalam melakukan editing, Dreamweaver

mambuatnya menjadi lebih mudah dengan menyediakan tool-tool yang sangat

berguna dalam peningkatan kemampuan dan pengalaman kita dalam mendesain web.

2.7 SMS Gateway dan NowSMS

Istilah

Gateway

, bila dilihat pada kamus Inggris-Indonesia diartikan sebagai pintu

gerbang. Namun pada dunia komputer,

Gateway

dapat berarti juga sebagai jembatan

penghubung antar satu sistem dengan sistem lain yang berbeda, sehingga dapat terjadi

suatu pertukaran data antar sistem tersebut. Dengan demikian,

SMS

Gateway

dapat

(24)

dikirimkan maupun yang diterima.

NowSMS

adalah sebuah aplikasi yang dapat

digunakan untuk mengelola berbagai fungsi pada

handphone

, modem dan perangkat

sejenis lainnya. Fungsi-fungsi yang dapat dikelola oleh

NowSMS

antara lain adalah

fungsi nomor kontak (

phonebook

) dan fungsi

SMS

.

2.8 Aplikasi Berbasis Web

1.

Aplikasi yang dibuat dengan memanfaatkan mekanisme dan aplikasi yang

sudah ada pada sistem

web

(WWW).

2.

Aplikasi berbasis

web

merupakan aplikasi yang dapat langsung dijalankan

pada browser dengan bantuan koneksi dari internet.

3.

Aplikasi berbasis

web

tidak terbatas pada sistem operasi yang digunakan.

4.

User yang mengakses data dengan menggunakan aplikasi berbasis

web

bisa

langsung mendapat umpan balik dari

server

penyedia data sehingga tidak

statis.

5.

Jenis bahasa pemrograman yang digunakan tidak mempengaruhi hasil aplikasi

(25)

GAMBARAN UMUM SMA SWASTA PANGERAN ANTASARI MEDAN

3.1

Profil Sekolah

1.

Nama Sekolah

: SMA SWASTA PANGERAN ANTASARI

2.

NSS

: 304070102120

3.

NDS

: 3007010054

4.

Jenjang Akreditasi

: A

5.

Alamat Sekolah

: Jl. Veteran No. 1060 Helvetia

Telp. (061) 8461641

Kecamatan

: Labuhan Deli

Kabupaten

: Deli Serdang

6.

Didirikan Tahun

: 1 Juni 1988

7.

Izin Operasional

: No. 399/I05/A/1987

Tanggal 18 Pebruari 1987

8.

Bidang/Program Jurusan

: Ilmu Pengetahuan Alam (IPA)

Ilmu Pengetahuan Sosial (IPS)

9.

Kepala Sekolah

Nama

: Sulaiman, SPd

NIP

: -

SK Yang Mengangkat

(26)

Tanggal

: 14 Juli 1990

TMT

: 14 Juli 1990

10.

Nama Yayasan / Perguruan : Yayasan Pangeran Antasari

Nama Ketua Yayasan

: Hari Wijaya, SE

11.

Alamat Yayasan

: Jalan Veteran No. 1060/19 Helvetia

Telp. (061) 8461641

12.

Komite Sekolah

Nama

: Hardi Wijaya, SE

Nomor SK / Tanggal

: -

3.2

Visi dan Misi

Visi

Optimalisasi mutu, kualitas, prestasi dan budaya sesuai dengan pengembangan

IPTEK yang potensial berdasarkan iman dan taqwa.

Misi

1.

Meningkatkan pelaksanaan Proses Kegiatan Belajar Mengajar dan bimbingan

studi untuk mencapai prestasi akademik

2.

Meningkatkan secara berkesinambungan pengenalan nilai-nilai keagamaan

3.

Meningkatkan aktifitas dan pestasi Bidang Olahraga untuk mencapai prestasi

(27)

4.

Meningkatkan kemampuan siswa dalam berbahasa Inggris

5.

Membekali siswa mampu mengoperasikan Komputer

3.3

Uraian Tugas Organisasi

3.3.1

Kepala Sekolah

Tugas-tugas:

1.

Perencanaan

2.

Pengorganisasian

3.

Pengarahan

4.

Pengkoordinasian

5.

Pengawasan

3.3.2

WKS- I Bidang Pendidikan

Tugas-tugas:

1.

Kalender pendidikan

2.

Promes dan Prospel

3.

Penilaian

4.

Kenaikan kelas

5.

Laporan pendidika

6.

Program perbaikan/pegayaan

7.

Suvervisi

(28)

3.3.3

WKS-II Bidang Administrasi

Tugas-tugas:

1.

Kepegawaian

2.

Sarana dan Prasarana

3.

Pustaka

4.

Keuangan

5.

Pendayagunaan

6.

Inventaris

7.

Persuratan

8.

Pemeliharaan

3.3.4

WKS-III Bidang Kesiswaan

Tugas-tugas:

1.

Penerimaan siswa baru

2.

BP/BK

3.

OSIS

4.

Mutasi siswa

5.

MOS dan UKS

6.

Buku induk dan Kleper

7.

Hubungan keluar/Humas

(29)

3.3.5

Wali Kelas

Tugas-tugas:

Mengelola kelas

3.3.6

Guru Bidang Studi

Tugas-tugas:

1.

Administrasi KBM

2.

Belajar mengajar

(30)

PERANCANGAN SISTEM

4.1

Perancangan Sistem

Perancangan sistem adalah upaya dalam suatu organisasi atau lembaga untuk memulai

memiliki suatu sistem yang lebih baik lagi dari sistem sebelumnya. Perancangan

sistem dilakukan setelah mendapatkan gambaran dengan jelas apa yang harus

dilakukan. Adapun tujuan dari perancangn sistem yaitu untuk memenuhi kebutuhan

bagi pengguna atau pemakai (

user

) mengenai gambaran yang jelas tentang

perancangan sistem yang akan dibuat dan diimplementasikan nantinya.

4.2

Perancangan Data Flow Diagram (DFD)

Diagram aliran data /

Data Flow Diagram

(DFD) adalah gambaran grafis dari suatu

sistem yang menggunakan sejumlah bentuk – bentuk simbol untuk menggambarkan

bagaimana data mengalir melalui suatu proses yang saling berkaitan (Mcleod,

2001:178). DFD sering digunakan untuk menggambarkan suatu sistem yang telah ada

atau sistem baru yang akan dikembangkan secara logika tanpa mempertimbangkan

lingkungan fisik dimana data tersebut mengalir (misalnya lewat telepon, surat, dan

sebagainya) atau lingkungan fisik dimana data tersebut akan disimpan (misalnya

file

(31)

Berdasarkan pengertian di atas penulis menyimpulkan bahwa diagram aliran

data adalah suatu alat untuk menggambarkan sistem dengan menggunakan

bentuk-bentuk simbol sebagai jaringan proses – proses fungsional yang dihubungkan satu

sama lain melalui jalur aliran data dan penyimpanan data. Sedangkan kelebihan dari

DFD adalah memungkinkan penganalisis menggambarkan setiap komponen yang

digunakan dalam diagram. Kemudian penganalisis harus memastikan bahwa semua

keluaran yang diperlukan bisa diperoleh dari data - data masukan dan bahwa logika

pemrosesan terefleksi dalam diagram. Mendeteksi dan memperbaiki kesalahan dan

kerusakan perancangan merupakan pada tahap awal siklus hidup pengembangan

sistem akan jauh lebih mudah dilakukan jika dibandingkan pada fase pemrograman,

pengujian, dan implementasi berikutnya. Komponen (simbol) yang digunakan dalam

diagram aliran data, dapat dilihat pada gambar berikut :

Gane / Sarson

Yourdon / De Marco

Keterangan

Entitas eksternal, dapat berupa orang/unit

terkait yang berinteraksi dengan sistem

tetapi diluar sistem

Orang, unit yang mempergunakan atau

melakukan transformasi data. Komponen

fisik tidak diidentifikasikan

Aliran data

Alirah data dengan arah khusus dari

sumber ke tujuan

Penyimpanan data atau tempat data

[image:31.612.122.521.388.693.2]

direfer oleh proses.

Tabel 4.1 Simbol DFD

(Sumber : Kenneth E. Kendall dan Julie E. Kendall, 2001: 4)

Entitas

Eksternal

Entitas Eksternal

Proses

(32)

Keterangan gambar:

1.

Kotak persegi digunakan untuk menggambarkan suatu entitas eksternal yang dapat

mengirim data atau menerima data dari sistem.

2.

Tanda panah menunjukkan perpindahan data dari suatu titik ke titik lain dengan

kepala tanda panah mengarah ke tujuan data.

3.

Kotak dengan sudut membulat digunakan untuk menunjukkan adanya proses

transformasi.

4.

Penyimpanan data menandakan penyimpanan manual, seperti lemari file atau

sebuah file atau basis data terkomputerisasi. Karena penyimpanan data mewakili

sebuah atau sesuatu, maka diberi nama dengan sebuah kata benda (Kenneth. E.

Kendall dan Julie. E. Kendall, Jilid I, 2003:264).

Adapun tahapan - tahapan pengembangan diagram aliran data, yaitu :

1.

Menciptakan Diagram Konteks

Diagram konteks adalah tingkatan tertinggi dalam diagram aliran data dan hanya

memuat suatu proses, menunjukkan sistem secara keseluruhan. Proses tersebut

diberi nomor nol. Semua entitas eksternal ditunjukkan pada diagram konteks

berikut aliran data utama menuju dan dari sistem. Diagram konteks tidak memuat

penyimpanan data dan tampak sederhana untuk diciptakan, begitu juga entitas –

entitas eksternal serta aliran data menuju dan dari sistem diketahui dari wawancara

dengan pengguna dan sebagai hasil analisis dokumen. Masukan dan keluaran yang

ditetapkan dalam diagram yang pertama tetap konstan dalam sebuah diagram sub

– urutan. Sisa diagram asli dikembangkan ke dalam gambaran terperinci yang

melibatkan tiga sampai sembilan proses dan menunjukkan penyimpanan data dan

(33)

diagram aliran data asli, setiap diagram yang dikembangkan hanya boleh

[image:33.612.147.532.139.428.2]

menggunakan selembar kertas tunggal.

Gambar 4.1 Diagram Konteks Aplikasi Berbasis Web Dengan SMS Gateway

Pada SMA Swasta Pangeran Antasari Medan

2.

Menggambarkan Diagram 0 (Level berikutnya)

Diagram 0 adalah pengembangan dari diagram konteks dan bisa mencakup sampai

sembilan proses. Memasukkan lebih banyak proses pada level ini akan terjadi

dalam suatu diagram yang kacau, yang sulit dipahami. Setiap proses diberi nomor

bilangan bulat, umumnya dimulai dari sudut sebelah kiri diagram dan mengarah ke

sudut sebelah kanan bawah. Penyimpanan data utama dari sistem (mewakili file

master) dan semua entitas eksternal dimasukkan kedalam diagram 0 ini. Setiap

proses dalam diagram 0 bisa dikembangkan untuk menciptakan diagram anak

User

SIA

SMS

Siswa

Admin

Contact

Input Login

Contact

Info Sekolah

-

Info Sekolah

-

Info Nilai

-

Data Siswa

-

Izin Login

Data Siswa

Inbox

Info Sekolah

Data Nilai

(34)

yang lebih mendetail. Proses pada diagram 0 ini disebut dengan proses induk

(parent proses) dan diagram yang dihasilkan disebut dengan diagram anak (child

diagram).

Tbl_data_siswa

Info Siswa

Data Siswa

Tbl_data_guru

Info Guru

Data Guru

Tbl_data_mata_pelajaran

Info Mata Pelajaran

Data Mata Pelajaran

Tbl_data_nilai

[image:34.612.149.507.180.663.2]

Info Data Nilai

Data Nilai

Gambar 4.2 Diagram Konteks Level 0

Siswa

Data

Siswa

Data

Guru

Data

Mata

Pelajaran

Data Nilai

(35)

3.

Menciptakan Diagram Anak (Tingkat Yang Lebih Mendetail)

Aturan utama untuk menciptakan diagram anak, keseimbangan vertikal,

menyatakan bahwa suatu diagram anak tidak bisa menghasilkan keluaran atau

menerima masukan dimana proses induknya juga tidak menghasilkan atau tidak

menerima. Semua aliran data yang menuju atau keluar dari proses induk harus

ditunjukkan mengalir kedalam atau keluar dari diagram anak. Diagram anak

ditetapkan nomor yang sama seperti proses induknya di dalam diagram 0. Sebagai

contoh, proses 3 akan berkembang ke diagram 3. Proses – proses pada diagram

anak diberi nomor dengan menggunakan nomor proses induk, poin desimal, serta

nomor unik untuk setiap proses anak. Pada diagram 3, proses-proses tersebut akan

diberi nomor 3.1, 3.2, 3.3 dan seterusnya. Ketentuan ini memungkinkan

penganalisis mengikuti rangkaian proses disetiap tingkat pengembangan. Bila

diagram 0 menggambarkan proses 1, 2, dan 3, diagram anak 1, 2, dan 3 semuanya

berada pada level yang sama (Kenneth E. Kendall dan Julie E. Kendall, Jilid I,

2003:265).

4.3

Perancangan Diagram Alir (Flowchart)

Diagram alir (

flowchart

) ini menjelaskan secara rinci langkah-langkah dari proses

program.

Flowchart

dibuat dengan menggunakan symbol-simbol tertentu yang

menyatakan setiap langkah program. Berikut ini adalah bentuk-bentuk

flowchart

dari

aplikasi berbasis web pada SMA Swasta Pangeran Antasari Medan.

Berikut ini adalah gambar simbol – simbol standar dalam

flowchart

beserta

(36)

Simbol

Keterangan

Terminal/Interupt

(Mulai/Berhenti)

Simbol ini dipergunakan untuk menunjukkan awal

kegiatan atau akhir kegiatan atau berhentinya

suatu program.

Input/Output

(data/hasil)

Untuk mewakili data

input

dan menuliskan

output

-nya

Process

(Pengolahan)

Suatu simbol yang melambangkan diprosesnya

suatu data.

Decision

(Keputusan)

Dipakai untuk menuliskan jika adanya percabangan,

seperti

if, case

.

Prefendefined

Untuk

program-program

yang

sering

dipergunakan sebuah program berulang kali,

biasanya dibuat program terpisah dengan sebuah

sub program (

subroutine

). Untuk menghubungkan

program utama dengan

subroutine

dipergunakan

symbol

ini.

Connector

(Penghubung)

Bila suatu

flow-chart

sangat panjang dan diputus

di tengah sebelum selesai, jika disambung dalam

halaman yang sama lagi, maka digunakan

symbol

(37)

Flow lines

(Garis Alir)

Bila suatu

flow-chart

dihubungkan dengan

garis-garis ini. Garis-garis-garis ini menunjukkan akar

selanjutnya yang akan dituju. Bila arahnya ke

bawah atau ke kanan tidak perlu memakai tanda

panah. Bila ke atas atau ke kiri , tanda panah

[image:37.612.145.563.256.622.2]

harus dipakai, untuk membedakannya.

Tabel 4.2 Flowchart

4.3.1

Flowchart Login Admin

Gambar 4.3 Halaman Flowchart Login Admin

FINISH

Administrator &

Password Salah

START

Halaman Login

Logout

Halaman Admin

Input Username

Dan Password

N

Y

(38)

4.3.2

Flowchart Halaman Admin

[image:38.612.160.518.97.396.2]

Gambar 4.4 Flowchart Halaman Admin

4.3.3

Flowchart Input Data

Gambar 4.5 Flowchart Input Data

Form Data Nilai

List Data Nilai

Input Data Nilai

Data_nilai

Menu Admin

Lihat Data

Form SMS

FINISH

Input Data

Form SMS Nilai

List Inbox

Input Data

Lihat Data

SMS Nilai

Inbox

Input Data

Simpan

[image:38.612.151.416.478.677.2]

(39)

4.3.4

Flowchart Lihat Data

Gambar 4.6 Flowchart Lihat Data

[image:39.612.155.544.84.412.2]

4.3.5

Flowchart SMS Nilai

Gambar 4.7 Flowchart SMS Nilai

Pilih Data

Input Nama Siswa

Kirim

Lihat Data

Tampilkan Data Nilai

Tampilkan Detail Data

Detail

Kirim

Hapus

Edit Data Nilai

Tampilkan Data Nilai

Update

Insert

Send

Data_nilai

SMS Nilai

FINISH

(40)

[image:40.612.256.383.108.301.2]

4.3.6

Flowchart Inbox

Gambar 4.8 Flowchart Inbox

4.4

Perancangan Database

Nama Field

Type

Size

Keterangan

No_induk

Varchar

10

Primary Key

Nama_siswa

Varchar

30

Alamat_siswa

Varchar

100

Agama

Varchar

30

Jenis_kelamin

Varchar

2

Tempat_lahir

Varchar

30

Tgl_lahir

Date

Nama_ayah

Varchar

30

Nama_ibu

Varchar

30

Alamat_ortu

Varchar

100

No_hp

Varchar

15

Id_kelas

Varchar

3

Gambar

Varchar

100

Table 4.3 tbl_data_siswa

Tampilkan Data

Kirim

Inbox

(41)

Nama Field

Type

Size

Keterangan

NUPTK

Varchar

18

Primary Key

Nama_guru

Varchar

30

Agama

Varchar

30

Alamat

Varchar

100

No_hp

Varchar

15

Jenis_kelamin

Varchar

2

Tempat_lahir

Varchar

30

[image:41.612.124.526.91.294.2]

Tgl_lahir

Date

Gambar

Varchar

100

Table 4.4 tbl_data_guru

Nama Field

Type

Size

Keterangan

Kode_matpel

Varchar

10

Primary Key

[image:41.612.122.526.467.711.2]

Matpel

Varchar

255

Table 4.5 tbl_data_matpel

Nama Field

Type

Size

Keterangan

Id_nilai

Varchar

3

Primary Key

Kode_matpel

Varchar

30

No_induk

Varchar

10

Tugas_1

Integer

3

Tugas_2

Integer

3

Tugas_3

Integer

3

Tugas_4

Integer

3

Tugas_5

Integer

3

Bulanan_1

Integer

3

Bulanan_2

Integer

3

(42)

UTS

Integer

3

UAS

Integer

3

Id_kelas

Varchar

3

Id_semester

Varchar

2

Id_ta

Varchar

3

Table 4.6 tbl_data_nilai

Nama Field

Type

Size

Keterangan

Id_Admin

Varchar

3

Primary Key

Username

Varchar

10

Pass

Varchar

255

[image:42.612.120.572.386.637.2]

Status

Varchar

10

Table 4.7 tbl_data_user_admin

4.5

Relasi Tabel

(43)

IMPLEMENTASI SISTEM

5.1 Pengertian Implementasi Sistem

Tahap implementasi merupakan tahap inti dari pekerjaan sebuah proyek. Disinilah

pembangunan komponen-komponen pokok sebuah sistem informasi dilakukan

berdasarkan desain yang sudah dibuat. Implementasi

system

yang dimaksud

merupakan proses pembuatan dan pemasangan system secara utuh baik dari sisi

hardware

(perangkat keras) maupun

software

(perangkat lunak) nya.

5.2 Langkah-langkah Implementasi Sistem

Beberapa aktifitas yang dilakukan dalam implementasi sistem untuk membangun

aplikasi berbasis

web

dengan

sms gateway

pada SMA Swasta Pangeran Antasari

Medan antara lain:

1.

Pengadaan Perangkat Keras

Perangkat keras (

hardware

) yang dianjurkan penulis untuk menjalankan aplikasi

web

ini dikomputer

local

SMA Swasta Pangeran Antasari Medan adalah sebagai berikut:

1.

Processor minimal Pentium IV dengan 2mHz

2.

Memori RAM 256 MB

3.

Harddisk minimal 80 GB

(44)

5.

Sistem Operasi minimal Windows XP sp2 atau versi lebih

6.

Handphone sony w200i sebagai SMS nya

2.

Pemilihan Perangkat Lunak

Perangkat lunak (

software

) yang dibuthkan untuk membuat dan menjalankan

aplikasi berbasis web dengan sms gateway pada SMA Swasta Pangeran Antasari

Medan ini adalah sebagai berikut:

1.

Microsoft Windows XP Professional.

2.

Internet Explorer, Opera, Mozilla Firefox sebagai

browser.

3.

Xampp 1.6.7 merupakan database server yang dibunakan untuk menyimpan

data.

4.

Macromedia Dreamweaver CS6 merupakan

software

yang digunakan untuk

mengatur tata letak (

layout

) halaman web dan juga sebagai penulisan

script

PHP yang akan mengolah dan memproses data secara interaktif dan dinamis.

5.

Adobe Photoshop CS3 merupakan

software

yang digunakan untuk mendesain

web

agar lebih bagus dan menarik.

3.

Instalasi Sistem

Instalasi Xampp 1.6.7, Macromedia Dreamweaver CS6, dan Adobe Photoshop

(45)

a.

Instalasi Xampp

XAMPP 1.6.7 berfungsi sebagai

web server

yang menyediakan layanan untuk

memenuhi permintaan

user

yang akan mengakses

e-application.

Berikut adalah

tahapan instalasinya :

1.

Klik ganda file paket Xampp, akan muncul tampilan

welcome to the XAMPP

[image:45.612.199.487.272.491.2]

1.6.7 setup wizard

seperti tampilan dibawah ini:

Gambar 5.1 Instalasi XAMPP 1.6.7(1)

Tekan

button

cancel

untuk

(46)

[image:46.612.221.462.104.288.2]

2.

Setelah itu akan muncul tampilan sebagai berikut:

Kotak dialog ini berfungsi untuk menentukan lokasi penyimpanan XAMPP.

Jika sudah memilih folder, tekan

back

jika ingin

kembali ke langkah sebelumnya, atau

cancel

untuk membatalkan instalasi.

3.

Pilih menu yang akan diinstal lalu tekan

next¸

atau

back

untuk kembali ke

langkah sebelumnya, atau

cancel

untuk membatalkan instalasi.

[image:46.612.200.448.486.684.2]

(47)

4.

Proses instalasi sedang berjalan. Proses ini membutuhkan waktu beberapa

[image:47.612.186.478.131.343.2]

menit.

5.

XAMPP sudah terinstal dan siap digunakan sebagai web server. Untuk

menggunakan XAMPP, cukup jalankan XAMPP

control panel

[image:47.612.204.461.443.633.2]

(48)

6.

XAMPP sudah berjalan dan siap untuk menjalankan

web server

.

Gambar 5.6 Control panel XAMPP

b.

Instalasi Macromedia Dreamwevaer CS6

Untuk melakukan Instalasi Macromedia Dreamweaver CS6, lakukan

langkah-langkah sebagai berikut:

1.

Disconnect dari internet dan matikan anti virus anda

2.

Gabungkan file yang telah di download menggunakan hjsplit, File part

(.001 dan .002) harus di letakkan dalam satu folder maka akan terbentuk

file ber format .Zip

3.

Buka dan Double klick file “Dreamweaver_12_LS6.exe” tunggu hingga

proses extrac selesai, maka setup akan jalan dengan otomatis (jika tidak

lihat di “DESKTOP” cari folder “Adobe Dreamweaver CS6” kemudian

[image:48.612.210.473.104.315.2]

buka dan double klik file “Set-up.exe”

(49)

[image:49.612.258.440.257.402.2]

Jika ada peringatan seperti ini klik “

ignore

” saja

4.

Maka akan muncul jendela seperti ini:

Gambar 5.9 Pilihan Limited Time (3)

Pilih “Try I want to try Adobe Adobe Dreamweaver CS6 for a limited

time”.

5.

Kemudian di jendela berikutnya klik “Accept”

[image:49.612.259.440.551.699.2]

(50)

6.

CATATAN: sebelum lanjut pastikan dulu sudah tidak terhubung dengan

internet. Jika sudah lanjutnya klik “install

7.

Tunggu hingga proses installasi selesai. Ini agak sedikit lama.

8.

Jika sudah selesai akan muncul seperti ini, klik “launch now”. Lalu cek

apakah sudah aktif atau belum. Jika sudah berarti anda orang paling

beruntung di dunia (tapi persentase Cuma 0.0.01% saja)

(51)

c.

Instalasi Adobe Photoshop CS3

Untuk melakukan Instalasi Macromedia Dreamweaver CS6, lakukan

langkah-langkah sebagai berikut:

1.

Klik ganda file paket Adobe Photoshop CS3, Maka akan Keluar

License

Agreement Adobe PhotoShop CS3

, langsung pilih saja

Accept

buat

lanjut.seperti tampilan dibawah ini:

2.

Kotak dialog ini berfungsi untuk menentukan lokasi penyimpanan Adobe

Photoshop CS3. Jika sudah memilih folder, tekan

(52)

[image:52.612.204.497.105.317.2]

3.

Kemudian pilih

Gambar 5.15 Instalasi Adobe Photoshop CS3 (3)

4.

Tekan finish. Kemudian isikan Product Key atau Serialnya saat pertama

membuka Adobe PhotoShop CS3.

[image:52.612.203.497.418.630.2]

(53)

5.3

Pengujian di Browser

Setelah menginstalasi XAMPP, maka aplikasi

web

telah dapat diujikan di komputer

lokal. Adapun caranya adalah sebagai berikut:

1.

Letakkan

file-file

yang membangun

web

kedalam suatu

folder

kemudian

diletakkan didalam

folder htdocs,

terliht seperti gambar berikut:

(54)

2.

Buka

browser Internet Explorer / Mozilla Firefox

3.

Buka kotak

URL

ketikkan http://localhost/[namafolder]/index.php. Karena

penulis meletakkan

file-file web

di

folder

sms gateway maka alamatnya

[image:54.612.200.481.363.487.2]

sebagai berikut:

Gambar 5.19 Penulisan Alamat di URL

4.

Setelah dilakukan Enter pada

keyboard

maka akan terlihat tampilan sebagai

berikut:

Gambar 5.20 Hasil Pengujian Aplikasi di Browser

Disini admin diminta untuk login agar bisa mengakses halaman admin.

Halaman admin berfungsi sebagai halaman administrator untuk memasukan,

mengedit, mengirim data pesan SMS nilai. Pada halaman admin terdapat

beberapa menu, yaitu:

a.

Halaman input nilai, merupakan halaman yang digunakan untuk

(55)

[image:55.612.179.536.80.338.2]

Gambar 5.21 Halaman Input Nilai

b.

Halaman nilai, merupakan halaman yang digunakan untuk menampilkan

semua data nilai siswa yang telah diinputkan. Pada halaman ini

administrator dapat melakukan pengeditan, penghapusan, dan melihat data

nilai siswa secara detail.

[image:55.612.202.496.493.684.2]

(56)

c.

Halaman Form SMS Nilai, merupakan aplikasi pengiriman nilai siswa

yang telah dilengkapi atribut-atribut yang diperlukan dalam pengiriman

[image:56.612.211.491.159.294.2]

SMS nilai.

Gambar 5.23 Halaman Form SMS Nilai

d.

Halaman form data siswa, merupakan aplikasi untuk menginput biodata

siswa beserta nomor

handphone

yang akan dikirim nilainya ke orang tua

siswa atau murid .

[image:56.612.179.507.407.676.2]

(57)

e.

Halaman form data guru, merupakan aplikasi untuk menginput biodata

[image:57.612.193.506.132.336.2]

guru.

Gambar 5.25 Halaman Form data guru

f.

Halaman form data mata pelajaran, merupakan aplikasi untuk menginput

mata pelajaran yang ada disekolah tersebut beserta kode mata

pelajarannya.

[image:57.612.182.519.477.699.2]

(58)

g.

Halaman form data guru mata pelajaran, merupakan aplikasi untuk

menginput guru mata pelajaran berdasarkan mata pelajaran yang diajarkan

[image:58.612.185.516.159.378.2]

disekolah tersebut.

Gambar 5.27 Halaman Form data guru mata pelajaran

h.

Halaman cetak nilai, merupakan aplikasi untuk mencetak nilai berdasarkan

kelas, mata pelajaran, semester dan tahun ajaran.

[image:58.612.178.530.491.683.2]

(59)

KESIMPULAN DAN SARAN

6.1

Kesimpulan

Dalam penulisan Tugas Akhir ini telah diuraikan bagaimana perancangan aplikasi

berbasis

web

dengan

sms gateway

pada SMA Swasta Pangeran Antasari Medan. Maka

dapat penulis simpulkan:

1.

Aplikasi berbasis

web

dengan

sms gateway

pada SMA Swasta Pangeran

Antasari Medan digunakan untuk memberikan informasi hasil nilai siswa

kepada orang tua siswa yang hanya diakses oleh administrator saja.

2.

Orang Tua Siswa SMA Swasta Pangeran Antasari Medan dapat mengetahui

hasil nilai Tugas, Bulanan, UTS, dan UAS secara lebih terperinci melalui

aplikasi berbasis web tersebut.

6.2

Saran

1.

Pihak administrator SMA Swasta Pangeran Antasari Medan harus senantiasa

menjaga dan memperbaharui aplikasi berbasis

web

untuk siswa yang naik

kelas dan untuk siswa baru serta guru mata pelajaran yang akan berotasi

bergantian mengajar sesuai mata pelajarannya.

(60)

Antasari Medan perlu diperhatikan dan dijaga agar data-data pada

server

tidak

(61)

DAFTAR PUSTAKA

Kadir, Abdul. 2006.

Dasar Pemrograman Web Dinamis Menggunakan PHP.

Yogyakarta: Andi.

Kadir, Abdul. 2008.

Belajar Database menggunakan MySQL.

Yogyakarta: Andi.

Tarigan, Daud E. 2012.

Membangun SMS Gateway Berbasis Web dengan Codeigniter.

Yogyakarta: Lokomedia.

Ahmar, Ansari S. 2012.

Panduan Sistem Informasi Akademik Sekolah Berbasis Web

.

Yogyakarta: Lokomedia.

Raharjo, Budi. 2011.

Belajar Pemrograman Web.

Bandung: Modula

http://www.templatemo.com. Diakses tanggal 15 Februari 2013.

(62)

LAMPIRAN

1.

Index.php

<?php session_start(); $a=$_SESSION['pengguna']; if($a!=true)

{

?>

window.location="index.php?p=login.php"; </script>

<?php }

else {include"header.php" ?>

<li><a href="index.php" class="selected">Home</a></li> <li><a href="#">Input</a>

<ul> <li><a

href="index.php?p=form_data_siswa.php">Data Siswa</a></li>

<li><a

href="index.php?p=form_data_mata_pelajaran.php">Data Mata Pelajaran</a></li>

<li><a href="index.php?p=form_gupel.php">Data Guru Mata Pelajaran</a></li>

<li><a

href="index.php?p=form_data_nilai.php">Data Nilai</a></li> <li><a

href="index.php?p=form_data_anggota.php">Data Anggota</a></li> <li><a

href="index.php?p=form_sms.php">SMS</a></li>

<li><a href="index.php?p=show_nilai.php">Cetak Nilai</a></li>

</li>

<li><a href="#">Inbox</a></li> <li><a href="#">Outbox</a></li>

<li><a href="index.php?p=logout.php">Logout</a></li> </ul>

<div id="templatemo_main"> <?php

if ($_REQUEST['p'] != '') {

include $_REQUEST['p']; }

else {

(63)

} ?>

</div>  <div id="templatemo_cr_bar_wrapper">

<?php include"crbar.php" ?> </div>

</body>

</html><?php } ?>

2.

Koneksi.php

<?php

$hostname="localhost"; $dbuser="root";

$dbpass="";

$dbname="db_smsgateway";

$koneksi=mysql_connect($hostname,$dbuser,$dbpass) or die (mysql_error());

mysql_select_db($dbname,$koneksi) or die (mysql_error()); ?>

3.

Login.php

<tr>

<td>Username</td>

<tr>

<td>Password</td>

<tr>

</tr> </table> </form>

4.

Logout.php

<?php

(64)

session_destroy();

echo("Anda telah sukses keluar sistem<BR><BR>"); echo("<A HREF='login.php'>Ke Halaman Utama</A>"); ?>

5.

Show_Data_Siswa.php

<?php

include "koneksi.php"; include "table_style.php";

//$sql = mysql_query("select * from tbl_data_siswa s inner join tbl_data_kelas k on s.id_kelas = k.id_kelas order by no_induk"); ?><script type="text/JavaScript">

<!--

function MM_popupMsg(msg) { //v1.0 alert(msg);

}

function MM_goToURL() { //v3.0

var i, args=MM_goToURL.arguments; document.MM_returnValue = false; for (i=0; i<(args.length-1); i+=2)

eval(args[i]+".location='"+args[i+1]+"'"); }

//-->

</script> <?php

//menentukan batas, cek dan posisi data $batas=10;

$halaman = $_REQUEST['halaman'];

if(empty($halaman)){ $posisi=0; $halaman = 1; } else {

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

//sesuaikan perintah SQL dengan posisi dan batas

$sql= "select * from tbl_data_siswa s inner join tbl_data_kelas k on s.id_kelas = k.id_kelas order by no_induk DESC LIMIT $posisi,

$batas";

$result = mysql_query($sql); $test=mysql_num_rows($result); if ($test!=0)

{

$no=$posisi+1;

echo"

<table width='800' bordercolordark='#000000' cellpadding='1' cellspacing='1' bordercolor='#000000' border='1'

style='color:#000000'>";

echo"<tr bgcolor='".$warnaHeading."'> <th>No</th>

(65)

<th>Nama Siswa</th> <th>Alamat</th> <th>Agama</th> <th>Jenis Kelamin</th> <th>T.Lahir</th> <th>Tgl Lahir</th> <th>No HP</th> <th>Kelas</th> <th>action</th> </tr>"; while($row=mysql_fetch_array($result)) {

//pemberian warna berbeda pada tiap baris tampilan if (($no % 2)==0)

{ $warna=$warnaGenap; } else { $warna=$warnaGanjil;}

$id= $row['no_induk'];

echo "<tr bgcolor=$warna align='center' ><td>"; echo $no;

echo "</td><td width=''>"; echo $row['no_induk']; echo "</td><td width=''>"; echo $row['nama_siswa']; echo "</td><td width=''>"; echo $row['alamat_siswa']; echo "</td><td width=''>"; echo $row['agama'];

echo "</td><td width=''>"; echo $row['jenis_kelamin']; echo "</td><td width=''>"; echo $row['tempat_lahir']; echo "</td><td width=''>"; echo $row['tgl_lahir']; echo "</td><td width=''>"; echo $row['no_hp'];

echo "</td><td width=''>"; echo $row['kelas'];

echo "</td><td width=''>";

echo "<a href='hapus_data_siswa.php?no_induk=$id' id='hapusbtn' onClick=\"return confirm('Apakah Anda benar-benar akan menghapus data ini?')\"><acronym title='Hapus data'><img src='icon/d.png'

width='17px' /></a>";

echo "<a href='index.php?p=edit_data_siswa.php&no_induk=$id'

onClick=\"return confirm('Apakah Anda benar-benar akan mengedit data ini?')\"><acronym title='Edit data'><img src='icon/e.png' width='20' height='20' alt='delete'></a>   ";

(66)

}

a:hover {

text-decoration: none; }

a:active {

text-decoration: none; }

--> </style>

<?php $no++; }

echo "</table><table width='500' align='left' id='tabel_show' cellpadding='1' cellspacing='1'><tr><td></td><td>";

$sql2 = mysql_query("select * from tbl_data_siswa s inner join tbl_data_kelas k on s.id_kelas = k.id_kelas order by no_induk"); $result=mysql_num_rows($sql2);

$jmlhalaman=ceil($result/$batas);

$p=$_REQUEST['p'];

/* bangun Previous link */ if($halaman > 1){

$prev = ($halaman - 1); ?>

<a href="index.php?p=<?php echo $p ?>&halaman=1"> << First </a> |

<?php } else {

echo "<p>First| < Previous "; } //tampilkan link halaman 1,2,3...

for($i = 1; $i <= $jmlhalaman; $i++){ if($i == $halaman){

echo "$i "; }

else { ?>

<?php } }

/* bangun Next link */ if($halaman < $jmlhalaman){ $next = $halaman + 1;