PEMBUATAN WEBSITE SMK PGRI KARANGMALANG SRAGEN MENGGUNAKAN AJAX
Naskah Publikasi
Diajukan oleh Christian Dianda Putra Kawab 07.12.2357
kepada JURUSAN SISTEM INFORMASI SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA 2011
1
WEBSITE CREATION SMK PGRI KARANGMALANG SRAGEN USING AJAX
PEMBUATAN WEBSITE SMK PGRI KARANGMALANG SRAGEN MENGGUNAKAN AJAX
Christian Dianda Putra Kawab Jurusan Sistem Informasi STMIK AMIKOM YOGYAKARTA
ABSTRACT
Along with the rapid development of information and communication technologies that are so rapidly, it needed the information quickly, precisely, efficient, and accurate. At that time all beings activity technology related to information and communication using the computer is technology, play a huge role in creating a global information system, namely the existence of a global information technology commonly called the internet This website is designed to introduce vocational PGRI Karangmalang Sragen to the public, especially the student / students who will continue the study or seek information about the school. SMK PGRI Karangmalang Sragen has several study programs namely Accounting, Administrative, Catering, and TKJ. With this website be expected can meet the needs of teachers, students, and existing employees. Keywords: Information systems , Information systems plan.
2
1.
Pendahuluan Bersamaan dengan berkembangnya teknologi informasi dan komunikasi yang begitu
pesat, sangat diperlukan informasi yang cepat, tepat, evisien, dan akurat. Dalam Skripsi ini penulis akan membuat website tentang SMK PGRI Karangmalang Sragen. Website ini dibuat untuk memperkenalkan SMK PGRI Karangmalang Sragen kepada masyarakat luas, khususnya para siswa/siswi yang akan melanjutkan studi
atau mencari
informasi tentang sekolah tersebut. Sejauh ini informasi mengenai SMK PGRI Karangmalang Sragen masih secara manual, yaitu melalui media mading (majalah dinding) atau papan pengumuman. Penyimpanan materi pelajaran dan tugas sekolah, kenangan suatu acara belum ada penyimpanan khusus. Untuk itu, penulis membuat website SMK PGRI Karangmalang Sragen guna menunjang publikasi sekolah tersebut sehingga dapat dilihat oleh masyarakat umum. 2.
Landasan Teori
2.1
Pengenalan Internet
2.1.1 Sejarah Internet Secara Umum Interconnected Networking atau biasa disebut dengan internet merupakan jaringan global komputer dunia, besar dan sangat luas sekali dimana setiap komputer saling terhubung satu sama lainnya dari negara ke negara lainnya di seluruh dunia dan berisi berbagai macam informasi, mulai dari text, gambar, audio, video, dan lainnya. 2.1.2 World Wide Web World Wide Web merupakan sarana pembagian informasi antar pengguna jaringan komputer. Dengan adanya world wide web, informasi berupa tulisan, gambar, suara ataupun video dapat di berikan kepada pihak lain, sehingga memungkinkan terjadinya pertukaran informasi. 2.2
Perangkat Lunak Pembangun Website
2.2.1 XAMPP XAMPP adalah sebuah paket perangkat lunak yang di dalamnya terdiri dari Apache, MySQL, dan PHP. 2.2.2 PHP My Admin PHP My Admin adalah satu program open source yang berbasis web yang dibuat menggunakan aplikasi PHP
3
2.2.3 Web Editor a.
Macomedia Dreamweaver MX 2004 Macomedia Dreamweaver MX 2004 adalah sebuah html editor profesional untuk
mendesai secara visual dan mengolah situs web maupun halan web. b.
XML XML adalah eXtensible Markup Language dimana semua harus dibuat secara benar sehingga
dapat menghasilkan dokumen yang ”well-formed ” dan dapat di support di banyak browser. c.
Macromedia Flash 4 Flash adalah program grafis multimedia keluaran Macromedia yang banyak dipakai untuk
pengembangan situs web yang interaktif dan kebanyakan digunakan untuk membuat gambar bergerak/animasi (lengkap dengan suara). 2.2.4 Images Editor a.
Adobe Photoshop Photoshop adalah software yang digunakan untuk memodifikasi gambar atau foto
secara profesional baik meliputi modifikasi obyek yang sederhana maupun yang sulit sekalipun. 2.2.5 Web Browser Suatu sistem di internet yang memungkinkan siapapun agar bisa menyediakan informasi. 2.3
AJAX
2.3.1 Sejarah AJAX Ajax merupakan kepanjangan dari Asynchronous JavaScript dan XML dan bukan merupakan bahasa pemrograman baru tetapi suatu metode/ teknik baru yang menggunakan teknologi yang telah ada. 2.3.2 Aplikasi Ajax Pada aplikasi Javascript konvensional jika kita menginginkan data dari server menggunakan Form dan memanggilnya dengan method GET atau POST. 2.3.3 Model Tradisional Yang dimaksud dengan model tradisional di sini adalah model yang sering digunakan tanpa AJAX. Pertama, browser membuat sebuah HTTP request dikirim ke server, misalnya /index.html. 2.3.4 Model AJAX Perlu diingat, AJAX akan berkomunikasi dengan server tanpa harus merefresh semua halaman.
4
2.3.5 Teknologi di Balik AJAX Teknologi AJAX didalamnya meliputi beberapa komponen, yaitu: XHTML DOM
XML and XSLT
XHTML and CSS
Ajax Web Applicati on model
XMLHttp Request
JavaScript
Gambar 2.1 Teknologi dibalik AJAX 2.3.6 AJAX Framework Ada banyak sekali ajax framework yang bisa digunakan, baik untuk tujuan membangun sistem enterprise sampai membangun aplikasi ajax sederhana 2.3.7 Perangkat Keras Pembangun Website Persyaratan minimal hardware untuk dapat menjalankan program ini secara optimal adalah: a.
Dengan spack processor intel ® core ™ duo processor T2450 (2.0 GHz, 533 MHz FSB, 2MB L2 cache ).
b.
14.1 WXGA Acer CrystalBrite ™ LCD
c.
up to 252 MB Mobile Intel® Graphics media Accelerator 950
d.
DDR 2 dengan kapasitas 1 GB.
e.
HDD dengan ukuran 120 GB.
f.
DVD-Super Multi DL
g.
802.11 b/g WLAN
h.
bluetooth® 2.0+EDR
i.
Monitor dengan resolusi 1280 x 800 pixel.
j.
Komputer yang sudah menggunakan mouse, keyboard, printer, dan internet.
3.
Analisis Dalam perancangan sebuah website, perlu dipahami tujuan, manfaat dan sasaran dari
web tersebut. Pada umumnya pembuatan situs web bertujuan untuk memperkenalkan dan
5
mendukung kegiatan suatu organisasi atau perorangan yang berupa informasi, promosi, hiburan dan sebagainya. 3.1
Analisis Kelemahan Sistem Untuk mengidentifikasi masalah, perlu dilakukan analisis terhadap beberapa hal
penting diantaranya, kinerja, informasi, ekonomi, keamanan aplikasi, efisiensi, dan pelayanan pelanggan. Panduan ini dikenal dengan PIECES Analysis (Performance, Information, Economic, Control, Efficiency, Services). 3.1.1 Kinerja (Performance) Kinerja diukur dengan jumlah layanan dan waktu tanggap (response time).jumlah layanan jumlah pekerjaan yang bisa diselesaikan selama jangka waktu tertentu. 3.1.2 Informasi (Information) Aspek informasi dalam sistem yang belum terkomputerisasi menjadi perhatian utama karena informasi yang ada sifatnya statis dan membutuhkan waktu yang relatife yang lama dalam pembuatannya. 3.1.3 Ekonomi (Economy) Dalam suatu lembaga yang modern dan dinamis dituntut hal-hal yang bersifat efesien, terutama dalam kaitan dengan aspek ekonomi, 3.1.4 Pengendalian (Control) Dibawah penegendalian sistem yang terkomputerisasi, data-data dan informasi siswa akan sangat terkontrol dan teratur. 3.1.5 EfIsiensi
(Efficiency)
Sangat jelas bahwa dengan sistem yang terkomputerisasi, efesiensi akan meningkat secara signifikan. 3.1.6 Layanan (Service) Bidang pelayanan merupakan nilai jual utama dalam suatu organisasi. Penilaian secara umum sebuah organisasi dapat dilihat dari aspek pelayanannya. 3.2
Analisis Kebutuhan Sistem Pengertian dari analisis kebutuhan sistem adalah sistem yang akan dibuat tersebut
dianalisa untuk melihat apa saja yang dibutuhkan dalam membangun sistem tersebut. 1.
Pendataan Guru
2.
Pendataan Penerimaan Siswa
3.
Pendataan Materi Pelajaran
4.
Pendataan Berita
5.
Pendataan Agenda Kegiatan Sekolah
6
6.
Pendataan Galery
7.
Pendataan Pendapat Web
8.
Pendataan Jurusan
9.
Pendataan Mata Pelajaran
10.
Pendataan Guest Book
3.2.1 Kebutuhan Perangkat Lunak Perangkat lunak yang diperlukan dalam pembuatan sistem dan pemrosesan data dari sistem yang dihasilkan adalah: a.
Microsoft Windows XP sebagai Sistem Operasi.
b.
Macromedia Dreamweaver MX 2004 untuk bahasa pemrograman.
c.
MySQL Server 2000 sebagai program DataBase MySql.
d.
XAMPP sebagai localhost.
e.
Microsoft Office 2007 untuk pembuatan laporan.
f.
Adobe Photoshop CS2 untuk pengeditan image.
g.
Macromedia Flash MX 2004 untuk pembuatan animasi.
h.
Program-program lain yang mendukung sistem.
3.2.2 Kebutuhan Informasi Sistem yang dibuat ini diharapkan 1.
Data Guru
2.
Data Materi
3.
Data Jurusan
4.
Data Agenda sekolah
5.
Data Berita
6.
Data Jumlah Murid
7.
Dan Data-data lainnya
akan menghasilkan output berupa :
3.2.3 Kebutuhan Pengguna User Pada sistem ini yang akan menjadi administrator adalah penanggung jawab dari pihak sekolah SMK PGRI Karangmalang Sragen. Sedangkan para guru, karyawan, siswa dan masyarakat hanya dapat melihat dan memberikan komentar melalui buku tamu dan form pendapat yang terdapat pada website tersebut 3.3
Analisis Kelayakan Sistem Setelah dilakukan analisis kebutuhan
sistem maka selanjutnya dilakukan analisis
kelayakan sistem.
7
3.3.1 Kelayakan Teknologi 1.
Ketersediaan teknologi yang dibutuhkan
2.
Integrasi dengan teknologi yang sudah ada
3.
Konversi sistem lama ke sistem dengan teknologi baru
4.
Penguasaan teknologi
3.3.2 Kelayakan Hukum Sistem yang diusulkan tidak mengandung materi yang berisi hal-hal yang melawan hukum, seperti pornografi, perjudian, kekerasan subversi, dan lain-lain. 3.3.3 Kelayakan Operasional Kelayakan operasional dapat dilihat dari dua aspek, yaitu: 1.
Aspek Teknis
2.
Aspek Psikologis
8
9
Pengunjung
- Data Buku Tamu - Data Pendapat Web
-
Data Guru
-
Data Kategori Berita
Data Materi Data Berita Data Jurusan Data Agenda Data Galery Data Pelajaran Data Banner Data Buku Tamu Data Pendapat Web
- Data Kategori 0 Galery Sistem informasi SMK PGRI Karangmalang sragen berbasis web
-
Data Guru
-
Data Kategori Berita
Data Materi Data Berita Data Jurusan Data Agenda Data Galery Data Pelajaran Data Banner Data Buku Tamu Data Pendapat Web Administrator
- Data Kategori - Galery Data Guru - Data Materi - Data Berita - Data Jurusan - Data Agenda - Data Galery - Data Pelajaran - Data Banner - Data Buku Tamu - Data Pendapat Web
-
Data Kategori Berita
-
Data Kategori
Gambar 3.2 Galery DFD level 0 Sistem Promosi 4.
Hasil Penelitian dan Pembahasan
4.1
Implementasi sistem Implementasi sistem adalah proses realisasi dari model sistem yang telah dirancang
sebelumnya diantaranya penulisan model kedalam bahasa program, pembuatan database dan pembuatan tampilan halaman aplikasi.
10
1.
Halaman Index
Gambar 4.1 Tampilan Home Halaman index adalah halaman home halaman yang pertama kali muncul saat website dipanggil. Disini akan tampil pada halaman tengah yaitu Tentang SMK PGRI Karangmalang Sragen dan Berita-berita yang baru di update oleh pihak sekolah atau yang mengatur website tersebut. 2.
Halaman profil
Gambar 4.2 Profil Sekolah Halaman Profil berisikan profil sekolah logo sekolah, visi, misi dan tujuan sekolah SMK PGRI Karangmalang Sragen. Disini akan tampil semua sejarah sekolah kapan didirikan, visi sekolah, misi sekolah, dan tujuan sekolah.
11
3.
Halaman Kontak
Gambar 4.3 Tampilan Kontak Halaman Kontak berisikan lokasi dimana SMK PGRI Karangmalang berada dan difasilitasi download peta. 4.
Halaman Data
Gambar 4.4 Tampilan Data Guru Halaman Data berisikan data-data guru pengajar dengan dilengkapi foto guru tersebut. Pada halaman ini kumpulan nama-nama guru dan karyawan yang ada disekolah SMK PGRI Karangmalang Sragen.
12
5.
Halaman Buku Tamu
Gambar 4.5 Tampilan Buku Tamu Halaman Buku tamu merupakan fasilitas untuk memberikan saran dan kritik pada SMK PGRI Karangmalang Sragen. Disini akan memudahkan masyarakat untuk menyampaikan saran dan kritik tentang sekolah SMK PGRI Karangmalang Sragen. 6.
Halaman Login Admin Proses uji coba pada halaman admin seperti ditampilkan pada gambar dibawah ini:
Gambar 4.6 Tampilan Login Admin Halaman Login Admin ini hanya memiliki satu admin dan berhak memberikan informasi tentang SMK PGRI Karangmalng Sragen. Dengan Login Username : admin Password : admin.
13
7.
Halaman Utama pada Admin
Gambar 4.7 Tampilan Utama Setelah Login User Halaman Home
ini akan muncul setelah Admin berhasil memasukan Username
dan Password yang benar, maka akan ada sambutan Welcom SMK. Dan admin akan menggunakan fasilitas yang ada disebelah kiri layar. 4.2
Manual Instalasi
4.2.1 Instalasi Pada Komputer Lokal Instalasi hardware dan software merupakan rangkaian dari kegiatan implementasi sistem agar sistem yang baru dapat diterapkan dan digunakan. a. Instalasi Hardware b. Instalasi Software c.
Instalasi Database
Gambar 4.8 Tampilan Home XAMPP Setelah masuk klik pada sisi kiri bawah dengan nama phpMyAdmin makan tampilannya sebagai berikut:
14
Gambar 4.9 Tampilan XAMPP pada New Database Setelah itu membuat DataBase New. Isikan pada kolom create new database dengan nama database smk_pgri_sragen, selanjutnya isikan nama-nama table yang akan dibuat.
Gambar 4.10 Tampilan SQL pada PHP MY ADMIN Jika dalam proses attach database berhasil maka telah siap digunakan.
Gambar 4.11 Tampilan Database yang Sudah Jadi Instalasi website pada localhost computer Langkah selanjutnya adalah instalsi website yang kita buat kedalam computer. Instalasi sistem pempuatan berbasis website ini dilakukan dengan cara mengkopikan semua file-file php kedalam folder root program appserv yang lokasinya defaultnya terletak di C:\xampp\htdocs atau sesuai dengan tempat diletakannya root apache2triad pada waktu pengintalan apache2triad.
15
Setelah file program yang telah kita buat tadi dikopokan kedalam folder root xampp yaitu di folder smk, langkah selanjutnya adaah mencoba menampilkan kedalam web browser dengan cara membuka browser kemudian ketikkan http:/localhost/ (nama folder file sistem tersebut tersimpan). Setelah pengintalan hardware dan software selesai maka sistem yang baru siap untuk diuji coba. 4.3
Pembahasan
4.3.1 Listing Program Listing program terdiri dari 2 bagian, yaitu program untuk admin dan program untuk user 1.
Program untuk admin terdiri dari 49 file, yaitu: cek_login_user.php, tempat mengesekusi username dan password content.php, tampilan home setelah berhasil login login_user.php, tampilan login admin logout.php, tampilan setelah logout admin media.php, tempat permintaan pemanggilan username dan password pada database menu.php, tempat penilaian username dan password yang benar dan salah style_smk.css, pengaturan tampilan pada admin agenda.php, tampilan agenda sekolah pada admin aksi_agenda.php, tempat mengesekusi database agenda banner.php, tampilan banner sekolah pada admin aksi_banner.php, tempat mengesekusi database banner berita.php, tampilan berita sekolah pada admin aksi_berita.php, tempat mengesekusi database berita bukutamu.php, tampilan bukutamu sekolah pada admin aksi_bukutamu.php, tempat mengesekusi database bukutamu contak.php, tampilan contak sekolah pada admin aksi_contak.php, tempat mengesekusi database contak data.php, tampilan data sekolah pada admin aksi_data.php, tempat mengesekusi database data dataguru.php, tampilan dataguru sekolah pada admin aksi_dataguru.php, tempat mengesekusi database data guru galery.php, tampilan galery sekolah pada admin aksi_galery.php, tempat mengesekusi database galery jurusan.php, tampilan jurusan sekolah pada admin
16
aksi_jurusan.php, tempat mengesekusi database jurusan kategoriberita.php, tampilan kategoriberita sekolah pada admin aksi_kategoriberita.php, tempat mengesekusi database kategoriberita kategorigalery.php, tampilan kategorigalery sekolah pada admin aksi_kategorigalery.php, tempat mengesekusi database kategorigaleri kelas.php, tampilan kelas sekolah pada admin aksi_kelas.php, tempat mengesekusi database kelas materi.php, tampilan materi sekolah pada admin aksi_materi.php, tempat mengesekusi database materi pelajaran.php, tampilan pelajaran sekolah pada admin aksi_pelajaran.php, tempat mengesekusi database pelajaran pendapat.php, tampilan pendapat sekolah pada admin aksi_pendapat.php, tempat mengesekusi database pendapat profil.php, tampilan profil sekolah pada admin aksi_profil.php, tempat mengesekusi database profil password.php, tampilan password sekolah pada admin aksi_password.php, tempat mengesekusi database password status.php, tampilan status sekolah pada admin aksi_status.php, tempat mengesekusi database status tentang.php, tampilan tentang sekolah pada admin aksi_tentang.php, tempat mengesekusi database tentang 2.
Program untuk user terdiri dari 17 file, yaitu: htaccess, untuk koneksi dari php ke html atas.php, untuk menampilkan animasi flash pada top halaman iconn.ico, lambing pada tampilan shortcut icon index.php, pemanggilan utama halaman user kanan.php, tampilan pada sisi kanan website kiri.php, tampilan pada sisi kiri website laporan.php, tampilan laporan pada halaman bukutamu user media.php, untuk pengaturan css, php, js, html, dan swf nicEdit.js, untuk pengaturan javascript pada nicEditorIcons.gif nicEditorIcons.gif, sebagai media pengaturan javascript pada nicEdit.js peta.php, untuk tampilan flash pada halaman kontak
17
smk_1.php, untuk tampilan berita pada website smk_titel.php, untuk tampilan berita pada website style.css, pengaturan tampilan pada halaman user tengah.php, pengaturan tampilan bagian isi dari website tentang.php, tampilan tentang deskripsi dari SMK PGRI Karangmalang Sragen terima.php, tampilan hasil pengisian dari halaman buku tamu
4.4
Antarmuka Program Interface terdiri dari halaman untuk user dan halaman untuk admin, halaman untuk
user digunakan untuk menamppilkan portopolio, info dan menu yang bisa dipakai oleh klien untuk melakukan pemesanan dan pendaftaran. Sedangkan halaman untuk admin digunakan untuk mengatur isi website yang akan ditampilakan, yang terdiri dari proses input, edit, hapus. Interface website ini dibuat semenarik mungkin, dengan desain interface yang sesuai dengan layanan yang ditawarkan kotak smk yang mengutamakan kreatifitas.
5.
Penutup
5.1
Kesimpulan Website SMK PGRI Karangmalang Sragen ini member informasi yang cukup lengkap
tentang sekolah tersebut dan seluruhperangkatnya serta dunia pendidikan yang ada di Sragen, selain itu Website SMK PGRI Karangmalang Sragen digunakan sebagai pedukung media belajar para siswa dan masyarakat sekitar. 5.2
Saran Berdasarkan hasil penelitian dan kesimpulan yang ada, peneliti memberikan saran
yang mungkin berguna bagi
Website SMK PGRI Karangmalang Sragen dan dapat
dipertimbankan, antara lain : a.
Pemeliharaan web setelah di upload ke internet sebaiknya dilakukan secara teratur.
b.
Dilakukan pengembangan sistem di masa yang akan datang sehingga dapat digunakan sebagai pengganti sistem, tidak hanya sebagai pendukung.
18
DAFTAR PUSTAKA Prasetya, A, U, ST. 2008. Membangun Aplikasi PHP + AJAX Tanpa Mengenal Script. Yogyakarta: Andi Offset. Andi, S,M.Kom. 2007. AJAX Membangun Web Dengan Teknologi Asynchronouse JavaScript dan XML. Yogyakarta: Andi Offset. Abdul, K. 2009. Mastering AJAX dan PHP. Yogyakarta: Andi Offset. Bunafit, N. 2008. Latihan Membuat Aplikasi Web PHP dan MySQL Dengan Dreamweaver MX (6,7,2004) dan 8. Yogyakarta: Gava Media. Lukmanul, H. 2010. Bikin Website Super Keren Dengan PHP dan jQuery. Yogyakarta: Loko Media. Andi, P dan Syafii, M. 2004. Kolaborasi Flash, Dreamweaver, dan PHP untuk Aplikasi Website. Yogyakarta: Andi Offset. http://nannahachi.blogspot.com/2009/08/artikel-tentang-world-wide-web.html Tanggal Download 30 agustus 2010/23.11 wib http://www.total.or.id/info.php?kk=Protocol%20Data%20Unit Tanggal Download 31 agustus 2010/19.01 wib http://www.w3schools.com/php/php_secure_mail.asp Tanggal Download 2 Maret 2011/18.09 wib http://php.net/manual/en/function.mail.php Tanggal Download 2 Maret 2011/20.00 wib
19
