SISTEM PENDAFTARAN
ONLINE SISWA - SISWI BARU
PADA SEKOLAH SMK
MUHAMMADIYAH AMBON
BERBASIS WEB
TUGAS AKHIR
Diajukan Untuk Memenuhi
Persyaratan
Akhir Studi Pada
Politeknik Negeri Ambon
Oleh
:
IKHSAN AMIN
NIM. 253 100 76
ABDUL SALAM WALI
NIM. 253 100 63
PROGRAM STUDI TEKNIK
KOMPUTER JARINGAN
JURUSAN TEKNIK ELEKTRO
POLITEKNIK NEGERI AMBON
2013
SISTEM PENDAFTARAN ONLINE SISWA - SISWI
BARU
PADA SEKOLAH SMK MUHAMMADIYAH AMBON
BERBASIS WEB
TUGAS AKHIR
Diajukan Untuk Memenuhi Persyaratan
Akhir Studi Pada Politeknik Negeri Ambon
Oleh
:
IKHSAN AMIN
NIM. 253 100 76
ABDUL SALAM WALI
NIM. 253 100 63
Telah diperiksa dan Disetujui Oleh Dosen Pembimbing
|
Pembimbing
I
Vicky Salamena, SST, MT
NIP. 19640314 199003 004
|
Pembimbing
II
Alphin Stephanus, ST. M.Eng
NIP.
19771020 200501 1 003
|
SISTEM PENDAFTARAN ONLINE SISWA - SISWI
BARU
PADA SEKOLAH SMK MUHAMMADIYAH AMBON
BERBASIS WEB
TUGAS AKHIR
Diajukan Untuk Memenuhi Persyaratan
Akhir Studi Pada Politeknik Negeri Ambon
Oleh
:
IKHSAN AMIN
NIM. 253 100 76
ABDUL SALAM WALI
NIM. 253 100 63
Telah diperiksa dan Disetujui OlehDosen Pembimbing
|
Pembimbing
I
Vicky Salamena, SST, MT
NIP. 19640314 199003 004
|
Pembimbing
II
Alphin Stephanus, ST. M.Eng
NIP.
19771020 200501 1 003
|
|
Menyetujui
Pembantu Direktur I
Bidang Akademik
Ir. Julius.
Buyung, MT
NIP. 19600609 198811 1 001
|
Mengetahui
Ketua Jurusan Teknik
Elektro
Ir. Abraham
Manuhutu, MT
NIP. 19620929 199403 1 001
|
LEMBARAN PENGESAHAN
iv
MOTTO
vi
Ambon,
Agustus 2013
Kepada
Yth. Ketua
Jurusan Teknik Elektro
Up. Ketua
Program Studi Teknik Komputer Jaringan
Politeknik Negeri Ambon
di Ambon
Dengan hormat,
Sehubungan dengan adanya Tugas
Proyek Akhir untuk memenuhi syarat
kelulusan Diploma III (D-III) di Politeknik Negeri Ambon pada Jurusan Teknik
Elektro, maka kami :
Nama :
IKHSAN AMIN
NIM :
25310076
Jurusan :
TEKNIK ELEKTRO
Program Studi : TKJ
Nama :
ABDUL SALAM WALI
NIM :
25310063
Jurusan :
TEKNIK ELEKTRO
Program Studi : TKJ
Dengan ini mengajukan judul Tugas Akhir : “SISTEM PENDAFTARAN ONLINE
SISWA - SISWI BARU PADA SEKOLAH SMK MUHAMMADIYAH AMBON BERBASIS WEB“
Untuk maksud ini kami meminta kesediaan (Alphin Stephanus, ST. M.eng) sebagai
pembimbing.
Demikian permohonan kami, besar
harapan kami untuk dapat disetujui.
Menyetujui,
Ketua Jurusan Teknik Elektro Pemohon
Ir. Abraham Manuhutu, MT Ikhsan
Amin
NIP:
19620929 199403 1 001 NIM:
25310076
Pemohon
Abdul
Salam Wali
NIM: 25310063
KATA PENGANTAR
Puji
syukur penulis panjatkan kepada Tuhan Yang Maha Esa karena atas penyertaan,
berkat dan anugerah-Nya sehingga penulis dapat menyelesaikan penulisan laporan
praktek kerja lapangan ini dengan baik.
Tugas
Akhir dengan judul “SITEM PENDAFTARAN ONLINE SISWA-SISWI BARU PADA SEKOLAH SMK
MUHAMMADIYAH AMBON” ini disusun sebagai salah satu persyaratan untuk
menyelesaikan studi pada jurusan Teknik Elektro di Politeknik Negeri Ambon.
selama
Penyelesaian Tugas Akhir ini, penulis menyadari ada banyak bantuan yang
diberikan oleh berbagai pihak baik berupa sarana maupun prasarana dari proses
pembuatan hingga selesai. Untuk itu penulis mengucapkan terima kasih
sebesar-besarnya kepada :
1. Bpk.
IR.M.V.Putuhena.ST,MT selaku Direktur Politeknik Negeri Ambon.
2. Bapak
Ir. Abraham Manuhutu, MT Selaku Ketua Jurusan Teknik Elektro Politeknik Negeri
Ambon.
3. Bapak
Ir.. Denny Richard Patttiapon, Selaku Sekretaris Jurusan Teknik Elektro
Politeknik Negeri Ambon.
4. Bapak
V. Salamena, SST, MT selaku Dosen Pembimbing I.
5. Bapak
Alphin Stephanus, ST, M.Eng.
6. Seluruh
staf dan Dosen Politeknik Negeri Ambon, khususnya program studi Teknik Komputer
Jaringan.
7. Bpk.Drs.
Saiful MM, Pd. Selaku kepala sekolah SMK MUHAMMADIYAH AMBON.
8. Bpk.Taufik
Sopamena. Selaku ketua jurusan TKJ. SMK MUHAMMADIYAH AMBON.
vii
9. Segenap
pegawai dan dewan guru dalam lingkungan SMK MUHAMMADIYAH AMBON.
10. Teman-teman
satu lokasi PKL.
11. Keluarga
besar Ikhsan Amin yang memberikan bantuan dan doa bagi penulis,serta memberikan
doa dan motivasi untuk terus maju dalam menyelesaikan pendidikan ini.
12. Kedua
orang tuaku.
Penulis
menyadari sungguh bahwa laporan ini masih jauh dari kata sempurna, untuk itu
penulis sangat mengharapkan kritik dan saran yang bersifat membangun, guna
penyempurnaan laporan PKL ini.
|
Penulis
|
viii
DAFTAR ISI
Halaman
LEMBARAN JUDUL............................................................................................ i
LEMBARAN PERSETUJUAN............................................................................ ii
LEMBARAN PENGESAHAN.............................................................................. iv
SURAT PERMOHONAN...................................................................................... v
MOTTO.................................................................................................................... vi
KATA PENGANTAR............................................................................................ vii
DAFTAR ISI............................................................................................................ ix
DAFTAR GAMBAR..........................................................................................
DAFTAR TABEL..............................................................................................
ABSTRAK...............................................................................................................
BAB I : PENDAHULUAN........................................................................... 1
1.1 Latar Belakang............................................................................ 1
1.2 Rumusan Masalah....................................................................... 2
1.3 Batasan Masalah......................................................................... 2
1.4 Tujuan Penulisan......................................................................... 2
1.5 Manfaat Penulisan....................................................................... 3
1.6 Sistematika Penulisan.................................................................. 3
BAB II : TINJAUAN
PUSTAKA................................................................. 5
2.1 Website atau situs....................................................................... 5
2.1.1 Pengertian
Website atau situs........................................... 5
2.1.2 Pengertian World Wide Web (WWW)............................. 5
2.1.3 Pengertian HTTP............................................................... 6
2.2 Komponen Penyusun Website.................................................... 6
2.2.1 MySQL............................................................................. 6
2.2.2 HTML (HyperText Markup Language)............................ 6
2.2.3 PHP (Personal Home Page)..........................................
2.2.4 CSS................................................................................... 8
2.2.5 Macromedia Dreamweaver............................................... 8
2.2.6 Macromedia Flash Player.................................................. 9
2.2.7 Xampp............................................................................... 11
2.2.8 Photoshop......................................................................... 11
2.2.9 Cool Text.......................................................................... 13
2.2.10
Flash Fortex..................................................................... 13
viii
DAFTAR GAMBAR
Halaman
DAFTAR TABEL
Halaman
ABSTRAK
IKHSAN AMIN, NIM
: 25310076, ABDUL SALAM WALI, NIM :
25310063. Sistem Pendaftaran Online Siswa-Siswi Baru Pada Sekolah SMK
MUHAMMADIYAH AMBON Berbasis Web.Tugas Akhir Jurusan Teknik Elektro Politeknik
Negeri Ambon.Pembimbing : V. Salamena, SST, MT, dan Alphin Stephanus, ST. M.Eng
Penelitian yang di maksud untuk pembuatan Sistem
Informasi Berbasis Web SMK MUHAMMADIYAH AMBON dapat menghasilkan informasi yang
berguna bagi siswa dan masyarakat di dalam dunia pendidikan.
Penelitian
ini Menunjukan bahwa Pendaftaran pada SMK MUHAMMADIYAH AMBON Memerlukan sebuah
sistem informasiyang dimana dapat memberikan kemudahan tentang kelebihan dan
kehandalan dalam jaringan global untuk mengontrol daftar data buku.Rancangan
yang diusulkan menggunakan sebuah sistem informasi agar dapat di lihat atau
diketahui oleh siswa maupun masyarakat.Penelitian menunjukan bahwa sistem
informasi Pendaftaran Online Berbasis Web yang di bangun dengan perangkat lunak
seperti PHP dan My SQL dapat bekerja dengan jaringan Internet.
Dari hasil pembahasan disimpulkan bahwa sebuah
Sistem Informasi Pendaftaran Online Pada SMK MUHAMMADIYAH AMBON Berbasis web,
dapat dengan cepat diketahui masyarakat dan dunia khususnya pada para siswa-siswi
SMK MUHAMMADIYAH AMBON dibandingkan dengan hasil sebelumnya.
Kata kunci : My SQL,
PHP, WEB.
My SQL : My SQL Merupakan suatu jenis database
Server yang sangat terkenal karena menggunakan SQL sebagai bahasa dasar
mengakses database.
PHP : PHP adalah bahasa Scrip yang
menyatu dengan HTML dan dijalankan pada sisi server, artinya semua sintaks dan
produser yang diberikan sepenuhnya dijalankan pada server dan hasilnya
dikirimkan ke web browser.
WEB :WEB adalah kumpulan halaman yang
menampilkan informasi data teks, data gambar diam atau gerak, data animasi,
suara, video atau gabungan dari semuanya baik yang bersifat statis maupun
dinamis yang membentuk satu rangkaian bangun yang salingterkait dimana
masing-masing dihubungkan dengan jaringan-jaringan (hyperlink)
BAB I
PENDAHULUAN
1.1 Latar
Belakang
Seiring
dengan berkembangnya kemajuan tekhnologi informasi mungkin sangat membantu
dengan adanya internet. Dengan internet, kita akan mudah menghadirkan layanan
yang dapat diakses dari manapun dan dimanapun didunia ini. Saat ini hampir
setiap orang dapat melakukan pengaksesan informasi, salah satunya dengan situs
web, tentu akan memudahkan kita dalam mencari sesuatu informasi yang dibutuhkan.
SMK Muhammadiyah Ambon merupakan salah satu sekolah
kejuruan tingkat atas yang terletak di desa Batu Merah. SMK Muhammadiyah
mempunyai beberapa jurusan dan banyak digemari oleh para siswa yang
berminat/berbakat, diantaranya Jurusan Manajemen Akuntansi, Teknik
Komputer dan Jaringan ( TKJ ), dan
Teknik Instalasi Tenaga Listrik.
Untuk itu kami berkeinginan untuk
membuat / menawarkan solusi kepada sekolah SMK
Muhammadiyah agar memudahkan siswa / siswi yang ingin mendaftar pada
lokasi tersebut dengan mengambil suatu penulisan dengan judul “SISTEM PENDAFTARAN ONLINE SISWA – SISWI
BARU PADA SEKOLAH SMK MUHAMMADIYAH AMBON BERBASIS WEB” yang akan digunakan pada saat pendaftaran.
Selain itu, keuntungan dari Aplikasi Sistem Pendaftaran Berbasis Web ini agar bisa
memberikan kemudahan bagi siswa / siswi yang melakukan pendaftaran tanpa
harus datang ke sekolah.
1
1.2 Rumusan Masalah
Selama ini sistem yang ada pada SMK
Muhammadiyah Ambon sangat sederhana, maka sering terjadi masalah – masalah yang
timbul, yaitu.
1.
SMK Muhammadiyah
membutuhkan aplikasi yang sistem pendaftarannya berbasis web.
2.
Bagaimana sistem ini
menampilkan formulir melalui web?
1.3
Batasan
Masalah
Dalam memusatkan masalah yang ada
dan agar tidak menyimpang dari pokok pembahasan maka pada penulisan pembuatan
aplikasi ini penulis membatasi masalah sekaligus mempertajam dalam melakukan
pembahasan. Sesuai dengan judul ini, maka ruang lingkup akan dibatasi pada
pendaftaran secara online, pengelolaan data yang hanya mencakup penginputan data
siswa, dan bisa melihat Siswa – siswi
yang telah mendaftar.
1.4 Tujuan Penulisan
Maksud dari penulisan sistem pendaftaran siswa – siswi baru berbasis web pada Sekolah SMK Muhammadiyah
Ambon ini antara lain.
1.
Meminimalisir
penggunaan kertas karena pendataan dalam administrator di lakukan secara
komputerisasi.
2.
Menyajikan sesuatu yang
baru pada sekolah SMK Muhammadiyah.
3.
Untuk memberikan suatu
kemudahan bagi siswa/siswi yang akan melakukan pendaftaran tanpa harus datang
ke sekolah.
4.
Untuk mengakhiri program
studi Diploma III ( D3 ) di Politeknik Negeri Ambon.
2
1.5 Manfaat
Secara
umum manfaat yang dapat di peroleh adalah pembelajaran lebih menarik, lebih
interaktif, jumlah waktu mengajar dapat di kurangi, kualitas siswa dapat di
tingkatkan dan proses belajar dapat dilakukan dimana dan kapan saja, serta
sikap belajar siswa dapat di tingkatkan. Manfaat tersebut
akan di peroleh mengingat terdapat keunggulan dari Aplikasi Pendaftaran Online
Berbasis Web, yaitu:
·
Menigkatkan daya tarik dan
perhatian siswa
·
Mempermudah Siswa-siswi untuk melakukan
pendaftaran pada Sekolah SMK Muhammadiyah Ambon
·
Memberikan materi dengan
menggunakan tampilan yang menarik.
1.6 Sistematika
Penulisan
Dalam pembuatan tugas akhir disusun dengan sistematika penulisan
sebagai berikut.
BAB
I : Pendahuluan
Bab I berisi tentang hal-hal yang mendasari penulis dalam membuat
tugas akhir.
BAB
II : Tinjauan Pustaka
BAB II berisi dasar-dasar
teori yang berhubungan dengan pembuatan tugas akhir.
BAB
III : Metodologi Penelitian
BAB III berisi rangkaian metode-metode yang dilakukan dalam
penelitiantugas akhir.
3
BAB
IV : Pembahasan
Dalam BAB IV berisi
pembahasan dari pembuatan tugas akhir.
BAB
V : Penutup
Dalam
BAB V merupakan kesimpulan dari seluruh pembahasan tugas akhir dan juga memuat
pendapat serta saran tentang hasil yang tertulis dalam pembahasan.
4
BAB II
TINJAUAN PUSTAKA
2.1 Website
atau situs
2.1.1 Pengertian Website atau situs
Website atau situs juga dapat
diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data
gambar diam atau gerak, data animasi, suara, video atau gabungan dari semuanya
baik bersifat statis maupun dinamis yang membentuk satu rangkaian bangun yang
saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan (hyperlink).
2.1.2 Pengertian World Wide Web (WWW)
World Wide Web merupakan suatu kumpulan informasi
pada beberapa server komputer yang terhubung satu sama lain dalam jaringan
Internet. Informasi-informasi dalam web mempunyai link-link yang menghubungkan
informasi tersebut ke informasi lain di dalam karingan Internet. Link ini
mempunyai suatu tanda khusus, yang biasanya dinyatakan dengan teks berwarna
biru dan digarisbawahi, atau dalam bentuk icon maupun gambar yang dikelilingi
oleh suatu kotak.Salah satu penyebab utama pesatnya pertumbuhan World Wide Web
adalah kemudahan dalam penggunaannya. Pada Web, hanya cukup mengklik tombol
mouse pada suatu link untuk dapat menghasilkan suatu informasi dan link
tersebut secara otomatis akan ke informasi yang diinginkan.
5
Sistem yang menghubungkan informasi melalui link
yang disebut dengan namaHypertext.
2.1.3 Pengertian Hypertext Transfer Protocol (HTTP)
HyperText Transfer Protocol adalah
suatu protokol yang menentukan aturan yang perlu diikuti oleh Web browser dalam
meminta atau mengambil suatu dokumen dan oleh Web browser dalam menyediakan
dokument yang diminta Web browser.Protokol ini merupakan protokol standar yang
digunakan untuk mengakses dokument HTML.
2.2 Komponen
Penyusun Website
2.2.1 MySQL
MySQL
merupakan suatu jenis database server yang sangat terkenal disebabkan MySQL
menggunakan SQL sebagai bahasa dasar mengakses database. MySQL bersifat share
ware (dikenai biaya setelah melakukan modivikasi dan digunakan untuk
kepentingan produksi). Keunggulan MySQL yaitu dapat diakses oleh banyak bahasa
pemrograman dan merupakan database server yang ideal untuk data segala ukuran
dengan kemampuan mempunyai kecepatan yang sangat tinggi dalam melakukan proses
data.
6
2.2.2 HTML (HyperText Markup Language)
HMTL adalah singkatan dari HyperText
Markup Language merupakan Komponen inti dari informasi yang menyusun
sebuah web page.Source kode HTML untuk sebuah web page keseluruhan syntaks dan
struktur yang berisi perintah yang dapat dimengerti oleh web browser.
Konversi HTML sangat luas digunakan
misalnya untuk keperluan online, internet, dan lainnya. Keunggulan lain dari
HTML adalah kode HTML yang terdapat pada Halaman-halaman web dapat dibaca dan
ditafsir oleh segala komputer dengan web browser. Format penulisan dari HTML
adalah berbentuk skrip yang ditulis pada notepad kemudian disimpan dengan
extensi.htm atau html dan untuk mencobanya dapat langsung dibuka dengan
menggunakan web browser seperti pada internet explorer.
2.2.3 PHP (Personal Home Page)
PHP adalah Bahasa skrip yang
menyatu dengan HTML dan dijalankan pada sisi server artinya semua sintaks dan
produser yang diberikan sepenuhnya dijalankan pada server dan hasilnya
dikirimkan ke web browser.PHP merupakan suatu bahasa pemrograman server-side
scripting yang menyatu dengan HTML.Untuk membuat halaman web yang dinamis.PHP
mulai dikembangkan pada tahun 1995, pada tahun 2001, yang telah digunakan oleh
sekitar 5 juta domain/website dan terus meningkat saat ini.
7
2.2.4 CSS
Cascading Style Sheet (CSS)
merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web
sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa
pemograman.
Sama
halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat
mengatur beberapa style, misalnya heading, subbab,bodytext, footer, images, dan
style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas
(file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang
dibuat dengan bahasa HTML dan XHTML.
CSS
dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel,
ukuran border, warna border, warna hyperlink, warna mouseover, spasi antar
paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter
lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur
tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan
halaman yang sama dengan format yang berbeda.
2.2.5 Macromedia Dreamweaver
Macromedia
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.
8
Dreamweaver
MX dalam hal ini digunakan untuk web desain.dreamweaver MX mengikutsertakan
banyak tool untuk kode-kode dalam halaman web beserta fasilitas-fasilitasnya,
antara lain : Referensi HTML, CSS dan Javascript, Javascript debugger, dan
editor kode ( tampilan kode dan Code inspector) yang mengizinkan kita mengedit
kode Javascript, XML, dan dokumen teks lain secara langsung dalam Dreamweaver.
Teknologi
Dreamweaver Roundtrip HTML mampu mengimpor dokumen HTML tanpa perlu memformat
ulang kode tersebut dan kita dapat menggunakan Dreamweaver pula untuk membersihkan
dan memformat ulang HTML bila kita menginginkannya.
Selain
itu Dreamweaverjugadilengkapi kemampuan manajemen situs, yang memudahkan kita
mengelola keseluruhan elemen yang ada dalam situs. Kita juga dapat melakukan
evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas browser,
maupun perkiraan waktu download halaman web.
2.2.6 Macromedia Flash Player
Adobe
Flash (dahulu bernama Macromedia Flash) adalah salah satu perangkat lunak
komputer yang merupakan produk unggulan Adobe Systems. Adobe Flash digunakan
untuk membuat gambar vektor maupun animasi gambar tersebut. Berkas yang
dihasilkan dari perangkat lunak ini mempunyai file extension .swf dan dapat
diputar di penjelajah web yang telah dipasangi Adobe Flash Player. Flash
menggunakan bahasa pemrograman bernama ActionScript yang muncul pertama kalinya
pada Flash 5.
9
Adobe Flash merupakan
sebuah program yang didesain khusus oleh Adobe dan program aplikasi standar
authoring tool professional yang digunakan untuk membuat animasi dan bitmap
yang sangat menarik untuk keperluan pembangunan situs web yang interaktif dan
dinamis. Flash didesain dengan kemampuan untuk membuat animasi 2 dimensi yang
handal dan ringan sehingga flash banyak digunakan untuk membangun dan
memberikan efek animasi pada website, CD Interaktif dan yang lainnya.
Selain
itu aplikasi ini juga dapat digunakan untuk membuat animasi logo, movie, game,
pembuatan navigasi pada situs web, tombol animasi, banner, menu interaktif,
interaktif form isian, e-card, screen saver dan pembuatan aplikasi-aplikasi web
lainnya.
Dalam
Flash, terdapat teknik-teknik membuat animasi, fasilitas action script, filter,
custom easing dan dapat memasukkan video lengkap dengan fasilitas playback FLV.
Keunggulan
yang dimiliki oleh Flash ini adalah ia mampu diberikan sedikit code pemograman
baik yang berjalan sendiri untuk mengatur animasi yang ada didalamnya atau
digunakan untuk berkomunikasi dengan program lain seperti HTML, PHP, dan
Database dengan pendekatan XML, dapat dikolaborasikan dengan web, karena
mempunyai keunggulan antara lain kecil dalam ukuran file outputnya.
10
2.2.7 Xampp
Xampp adalah Perangkat lunak bebas, yang mendukung
banyak sistem operasi, merupakan komplikasi dari beberapa program. Fungsinya
adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas
program Apache HTTP Server, My SQL Database, dan penerjemah bahasa yang ditulis
dengan bahasa pemrograman PHP dan Perl.
Nama Xampp merupakan singkatan dari
X (empat system operasi apapun), Apache, MySQL, PHP, dan Perl.Program ini
tersedia dalam GNU General Public License dan bebas, merupakan Web server yang
mudah digunakan yang dapat melayani tampilan halaman web yang dinamis.
2.2.8 Photoshop
Adobe Flash (dahulu
bernama Macromedia Flash) adalah salah satu perangkat lunak komputer yang
merupakan produk unggulan Adobe Systems.
Adobe Flash digunakan
untuk membuat gambar vektor maupun animasi gambar tersebut. Berkas yang
dihasilkan dari perangkat lunak ini mempunyai file extension.swf dan dapat
diputar di penjelajah web yang telah dipasangi Adobe Flash Player.
Flash menggunakan
bahasa pemrograman bernama ActionScript yang muncul pertama kalinya pada Flash
5.
11
Adobe Flash merupakan
sebuah program yang didesain khusus oleh Adobe dan program aplikasi standar
authoring tool professional yang digunakan untuk membuat animasi dan bitmap
yang sangat menarik untuk keperluan pembangunan situs web yang interaktif dan
dinamis. Flash didesain dengan kemampuan untuk membuat animasi 2 dimensi yang
handal dan ringan sehingga flash banyak digunakan untuk membangun dan
memberikan efek animasi pada website, CD Interaktif dan yang lainnya.
Selain itu aplikasi ini
juga dapat digunakan untuk membuat animasi logo, movie, game, pembuatan
navigasi pada situs web, tombol animasi, banner, menu interaktif, interaktif
form isian, e-card, screen saver dan pembuatan aplikasi-aplikasi web lainnya.
Dalam Flash, terdapat teknik-teknik membuat animasi, fasilitas action script,
filter, custom easing dan dapat memasukkan video lengkap dengan fasilitas
playback FLV.
Keunggulan
yang dimiliki oleh Flash ini adalah ia mampu diberikan sedikit code pemograman
baik yang berjalan sendiri untuk mengatur animasi yang ada didalamnya atau
digunakan untuk berkomunikasi dengan program lain seperti HTML, PHP, dan
Database dengan pendekatan XML, dapat dikolaborasikan dengan web, karena
mempunyai keunggulan antara lain kecil dalam ukuran file outputnya.
12
2.2.9 Cool Text
Cool Text Merupakan Aplikasi yang
disediakan di media internet yang setiap pengunjung bias menggunakan aplikasi
tersebut. Cool Text berupa tulisan yang beranimasi atau tulisan yang mempunyai
efek.
2.1.10 Flash Vortex
Flash Vortex merupakan Aplikasi
yang disediakan di media internet yang setiap pengunjung bias menggunakan
aplikasi tersebut. Flash Vortex berupa baner atau sebuah tulisan beranimasi
yang mempunyai ruang.
13
BAB III
METODOLOGI PENELITIAN
3.1 Metode Penelitian
Metode yang di gunakan dalam
penelitian ini adalah observasi, dengan pengumpulan data, serta melihat secara
langsung tentang sistem kerja yang berjalan selama ini.Selanjutnya dari data
yang ada kemudian dilakukan analisis sistem dan perancangan sistem.
Analisis sistem itu merupakan
penguraian dari suatu sistem informasi yang utuh kedalam bagian – bagian
komponennya dengan maksud untuk mengidentifikasi dan mengevaluasi permasalahan,
kesempatan, hambatan, yang terjadi dan kebutuhan yang di harapkan sehingga dapat
diusulkan perbaikan – perbaikan.
3.2 Lokasi Penelitian
Lokasi penelitian ini dilakukan
pada tempat pendaftaran SMK MUHAMMADIYAH AMBON.
3.3 Sumber Data
Sumber data dalam penulisan ini
adalah melalui data primer dan data sekunder.Data primer di ambil dari hasil
wawancara, sedangkan data sekundernya di peroleh dari data – data lain yang
dapat memberikan informasi tentang Sekolah SMK Muhammadiyah Ambon.
14
3.4 Wawancara
Yaitu proses tanya jawab yang
berlangsung secara lisan dalam dua orang atau lebih guna mendapatkan secara
langsung informasi-informasi atau keterangan- keterangan. Dalam teknik ini
penulis mengadakan wawancara lansung guna memperoleh data-data.
3.4
Bahan
dan Alat
3.4.1
Bahan
Penelitian
Dalam
proses pembuatan website ini, bahan yang digunakan penulis yaitu.
1.
Macromedia Dreamweaver
8
2.
Macromedia Flsah Player
3.
Xampp
4.
Photoshop
5.
Cool Text
6.
Flash Vortex
3.4.2
Alat
Penelitian
Alat yang di gunakan dalam penelitian ini terdiri
dari :
a. Perangkat
keras (Hardware)
b. perangkat
lunak (Software)
a.
Perangkat
Keras (Hadware)
Perangkat keras yang di gunakan untuk pembuatan
program ini adalah.
15
-
PC (Personal Computer)
berbasis Pentium IV (dapat pula dengan Pentium II atau III)
-
RAM 512 MB (dapat pula
dengan 128 MB atau 256 MB).
-
HardDisk dengan space
yang cukup.
-
Monitor warna.
b.
Perangkat
Lunak (Software)
Perangkat lunak yang di gunakan dalam pembuatan
sistem ini adalah.
|
-
Sistem Operasi
Windows XP
-
Macromedia
Dreamweaver
-
Xampp
-
Macromedia Firefox
-
Flash Fortex
-
Macromedia Flash
Player
-
Photoshop CS3
-
Format Factory
-
Cool Text
|
16
3.6 Diagram
Alir
Secara
skema, perwujudan hasil penelitian dapat dilihat dalam flowchart sebagai
berikut.
 |
|||
 |
|||
Gambar 3.6.1 Flowchart Program
17
3.7
Perancangan Sistem
3.7.1
Data
Flow Diagram (DFD)
Data Flow Diagram (DFD)
adalah alat untuk menggambarkan aliran atau arus data yang mengalir atau
berjalan pada system yang lama atau baru secara terstruktur dan jelas.
Symbol-simbol yang sering digunakan pada diagram arus data ini adalah.
|
=
|
Terminator atau kesatuan yang mempengaruhi
system informasi.
|
|||
 |
=
|
Merupakan
symbol proses yang menunjukan tranfortasi dari masukan menjadi keluaran
|
|||
   |
=
|
Aliran arus data menggambarkan gerakan data
informasi dari suatu bagian ke bagian lainnya
|
|||
   |
=
|
Penyimpanan, digunakan untuk memodelkan
kumpulan atau paket data
|
|||
 |
=
|
Arsip, untuk penyimpanan secara arsip
|
|||
 |
=
|
Dokument
atau data yang disimpan
|
Gambar 3.7.1 Simbol DFD
18
3.7.2 Diagram Konteks
Diagram konteks adalah diagram
level tertinggi dari diagram arus data yang menggambarkan hubungan sistem
dengan lingkungan luarnya.
 |
|||
 |
|||
|
Gambar
3.7.2 Diagram Konteks
19
3.7.3 Diagram Level 0
DFD
Level 0 adalah diagram dekomposisi atau penjabaran dari diagram konteks.
 |
|
 |
Gambar
3.7.3 Diagram Level 0
20
3.7.4 Diagram Level 1
DFD
Level 1 adalah diagram yang merupakan dekomposisi atau penjabaran dari diagram
level 0.
 |
Gambar
3.7.4.1 Diagram Level 1
21
3.7.5 Rancangan Database
Pembuatan website yang interaktif
dan dinamis, perlu adanya media penyimpanan data yang fleksibel dan mudah untuk
di akses dalam bahasa pemrograman.Istilah database adalah kumpulan data yang
saling terkait, tersimpan, dan mudah untuk di akses.Salah satu program yang
dapat digunakan sebagai database adalah My SQL yang merupakan salah satu
software untuk database server. Perkembangannya di sebut SQL yang merupakan
kepanjangan dari Structured Query
Language.SQL merupakan bahasa terstruktur yang digunakan untuk mengolah
database.
22
|
Field
|
Type
|
Collaction
|
Null
|
|
Id
|
Int
|
utf8_gteneral_ci
|
yes
|
|
KOMPETENSI KEAHLIAN
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Nama Siswa (Lengkap)
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
NISN
|
Varchar (20)
|
utf8_gteneral_ci
|
yes
|
|
Jenis Kelamin
|
Varchar (20)
|
utf8_gteneral_ci
|
yes
|
|
Tempat
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Tgl.Lahir
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Agama
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Alamat Siswa
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Telp
|
Varchar (12)
|
utf8_gteneral_ci
|
yes
|
|
NamaSekolah Asal
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Alamat Sekolah
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
STTB / Ijazah / Surat Tanda Lulus
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Tahun
|
Varchar (20)
|
utf8_gteneral_ci
|
yes
|
|
Nomor
|
Varchar (20)
|
utf8_gteneral_ci
|
yes
|
|
Nama Orang Tua
|
Varchar (50)
|
utf8_gteneral_ci
|
Yes
|
|
Ayah
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Ibu
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Alamat Orang Tua
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
RT
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
RW
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Kel / Desa
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Kecamatan
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Kab / Kota
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Provinsi
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
No Telepon
|
Varchar (12)
|
utf8_gteneral_ci
|
yes
|
|
Pekerjaan Orang Tua
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Nama Wali
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Alamat Wali
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
No Telepon Wali
|
Varchar (12)
|
utf8_gteneral_ci
|
yes
|
|
Pekerjaan Wali
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
Tabel 3.7.5 Kios. Formulir Pendaftaran.
|
Field
|
Type
|
Collaction
|
Null
|
|
Id
|
Int
|
utf8_gteneral_ci
|
yes
|
|
KOMPETENSI KEAHLIAN
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Nama Siswa (Lengkap)
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
NISN
|
Varchar (20)
|
utf8_gteneral_ci
|
yes
|
|
Jenis Kelamin
|
Varchar (20)
|
utf8_gteneral_ci
|
yes
|
|
Tempat
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Tgl.Lahir
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Agama
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Alamat Siswa
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Telp
|
Varchar (12)
|
utf8_gteneral_ci
|
yes
|
|
NamaSekolah Asal
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Alamat Sekolah
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
STTB / Ijazah / Surat Tanda Lulus
|
Varchar (50)
|
utf8_gteneral_ci
|
yes
|
|
Tahun
|
Varchar (20)
|
utf8_gteneral_ci
|
yes
|
|
Nomor
|
Varchar (20)
|
utf8_gteneral_ci
|
yes
|
Tabel 3.7.6 Kios.Tampil Data Siswa.
24
3.7.6 Rancangan Halaman Website Pendaftaran Online
 |
Gambar 3.7.6 Rancangan Index
Website Pendaftaran Online
25
3.8
Proses Install
3.8.1
Macromedia Dreamweaver 8
Langkah
Install Macromedia Dreamweaver 8.
a.
Klik double pada icon setup dreamweaver setup.exe
Gambar
3.8.1.1 Dreamweaver setup.exe
b. Tunggu loading
selesai, maka akan muncul tempilan sebagai berikut.
Gambar 3.8.1.2 Instalasi Wizard Dreamweaver 8.
26
c.
Pilih Next untuk
menginstal
d.
Pilih
I Accept lalu Next
Pilih
I Accept lalu Next
Gambar
3.8.1.3 I Accept the trems
e.
Pada
Tampilan Gambar 3.8.1.4 Destination Folder and Shorcuts pilih Next.
Pada
Tampilan Gambar 3.8.1.4 Destination Folder and Shorcuts pilih Next.
Gambar
3.8.1.4 Destination Folder and Shorcuts
27
f.
Pilih
Next untuk melanjutkan
Pilih
Next untuk melanjutkan
Gambar
3.8.1.5 Default Editor
g.
Pilih
Install
Pilih
Install
Gambar
3.8.1.6 Ready to Install the Program
28
h.
Tunggu sampai loading
instalasinya selesai dan pilih finish
Gambar
3.8.1.7 Proses Instalasi Program
i.
Pilih Finish dan
Instalasi berhasil
Gambar
3.8.1.8 Instalasi Completed
29
3.8.2
Xampp
Langkah Install Xampp
a.
Dobel klik file xampp yang baru saja
Anda download, selanjutnya akan muncul jendela “installer language” sebagai
berikut.
Dobel klik file xampp yang baru saja
Anda download, selanjutnya akan muncul jendela “installer language” sebagai
berikut.
Gambar
3.8.1.1 Instalasi Xampp
b.
Klik OK Pada gambar 3.8.1.1Instalasi Xampp,
selanjutnya klik Next pada gambar 3.8.1.2 Setup Wizard.
Klik OK Pada gambar 3.8.1.1Instalasi Xampp,
selanjutnya klik Next pada gambar 3.8.1.2 Setup Wizard.
Gambar 3.8.1.2 Setup Wizard
30
c.
pada bagian Destination Folder
klik Browse untuk merubah fili-file instalasi XAMPP diletakkan.
pada bagian Destination Folder
klik Browse untuk merubah fili-file instalasi XAMPP diletakkan.
Gambar 3.8.1.3
Destination Folder
d.
Pada bagian Service Selection, Centang pada checkbox Install
Apache as service dan Install MySQL as Sercive, kemudian klik tombol
Install
sebagai berikut.
Gambar 3.8.1.4
Xampp Options
31
e.
Tunggu hingga proses Instalasi
selesai.
Tunggu hingga proses Instalasi
selesai.
Gambar3.8.1.5
Installing
f.
Klik
OK untuk service installation.
Gambar3.8.1.6 Service Installation
g.
Setelah service installation, klik Finish. Jika ada Pertanyaan, Klik Yes untuk
menjalankan. Seperti pada gambar 3.8.1.7 sebagai berikut.
32
Gambar 3.8.1.7 Configuration
h.
Maka
akan tampil gambar sebagai berikut.
Maka
akan tampil gambar sebagai berikut.
Gambar 3.8.1.8 Xampp Control Panel
33
BAB IV
HASIL DAN
PEMBAHASAN
4.1 Hasil dan Pembahasan tampilan Index/Home.
Setelah melakukan instalasi maka hasil dan pembahasan
dari penelitian akan diuraikan sebagai berikut.
dilakukan adalah membuat tampilan
Index/Home pada Pendaftaran
Online. Tampilan Index/Home pada Pendaftaran Online dibuat menggunakan Program Macromedia
Dreamweaver, Xampp, Adobe Flash Player, Adobe Photoshop CS3, Cool Text, dan
Flash Vortex.
4.1.1 Tahap Menjalankan Website Pendaftaran Online
a. Jalankan dulu Xampp yang telah di
install untuk menjalankan database Website Pendaftaran Online.
Gambar 4.1.1.1 Proses Xampp Control Panel
34
b. Pada jendela Xampp Control Panel, klik
tombol strart pada Apache dan MySQL.
|
||||
 |
||||
|
Gambar 4.1.1.2
Proses Start Xampp Control Panel
35
c.
Setelah keduanya
dijalankan maka jalankan salah satu browser kesukaan anda misalnya Opera Mini.
Pada address baru ketik localhost/pendaftaran_online dan tekan enter.
Gambar 4.1.1.3 Proses
Pengisian Alamat URL Pendaftaran_online
Setelah gambar 4.1.1.3 adalah proses
penginputan nama alamat host website pendaftaran yang masih dalam localhost
Karena menggunakan localhost dann
diikuti dengan tanda (/) untuk memisahkan nama host dan direktori website
tersebut.
d.
Header
Header
Gambar 4.1.1.4Header Website
Pendaftaran_Online
Header adalah bagian kepala atau
bagian atas sebuah situs website yang berupa gambar atau teks agar para nether
dapat mengetahui fungsi dari website itu sendiri.
36
e.
Footer
Footer
Gambar
4.1.1.5Footer Website Pendaftaran_Online
Footer adalah bagian bawah yang
bias disebut dengan kami dari sebuah alamat situs website.
f.
Tampilan halaman
Website Pendaftaran Online pada SMK MUHAMMADIYAH AMBON seperti pada gambar
berikut.
Gambar
4.1.1.6 Halaman index / Home Website
Pendaftaran_Online.
37
4.2
Pembahasan
4.2.1
Membuat
User Account
Membuat user account untuk keperluan koneksi
database dari dreamweaver. Berikut ini adalah langkah – langkah pembuatan
user account.
a.
Buka halaman PhpMy
admin dalam jendela browser,untuk membuka, ketik localhost/phpmyadmin pada Address Bar.
b.
Pada
halaman phpMyadmin, klik Privileges.
Pada
halaman phpMyadmin, klik Privileges.
Gambar
4.2.1.1Menu Privileges
c.
Pada
halaman yang tampil, klik add a new user.
Pada
halaman yang tampil, klik add a new user.
Gambar 4.2.1.2
Membuat User Account.
38
d.
Setelah
tampil kotak dialog add a new user,
atur setingan seperti gambar 4.2.1.3User
name : nama user (admin), Host : Pilih localhost,
pada kotak password ketika password,
dan pada kotak Re-typeulang
penulisan password. Catat semua ketentuan tersebut, karena nantinya digunakan
untuk koneksi ke database melalui dreamweaver.
Setelah
tampil kotak dialog add a new user,
atur setingan seperti gambar 4.2.1.3User
name : nama user (admin), Host : Pilih localhost,
pada kotak password ketika password,
dan pada kotak Re-typeulang
penulisan password. Catat semua ketentuan tersebut, karena nantinya digunakan
untuk koneksi ke database melalui dreamweaver.
Gambar
4.2.1.3 Login Information
e.
Pada
bagian global privileges, aktifkan semua pilihan yang ada dalam kotak Data.
Pada
bagian global privileges, aktifkan semua pilihan yang ada dalam kotak Data.
Gambar 4.2.1.4
Aktifkan semua pilihan di bagian Data
f.
Kemudian klik tombol
Go.
g.
Selanjut pada bagian
Database specific privileges, klik pada kotak pilihan database dan pilih nama
Database,misalnya pilihdata siswa.
Kemudian klik Go.
39
Gambar 4.2.1.5
Memilih Database.
4.2.2 Membuat Koneksi ke Database
Untuk membuat halaman
input siswa, ikuti langkah-langkah sebagai berikut.
a.
Buka
halaman index.php, pilih menu window Database, untuk menampilkan panel
Databases.
b.
Setelah
tampil panel Database, klik ikon seperti gambar 4.2.2.1
 |
Gambar 4.2.2.1koneksi ke database
phpMyadmin
c.
Kemudian tampil kotak
dialog MySQL Connection. Untuk mengissi kotak dialog ini, data yang anda
masukan sama dengan data waktu anda membuat user account.
40
Gambar 4.2.2.2kotak
dialog MySQL Connection.
d.
Kemudian
klik tombol select, pilih database yang ingin dipakai, misalnya pilih datasiswa, kemudian klik Ok.
e.
Klik Ok untuk menutup kotak dialog MySQL
Klik Ok untuk menutup kotak dialog MySQL
Gambar
4.2.2.3 Select Database
f.
Klik Ok untuk menutup kotak dialog MySQL connection.
41
4.2.3 Membuat
Form Input Siswa
Setelah membuat koneksi ke
database, langkah selanjutnya mengisi halaman index.php dengan form
pengisian untuk pendaftar, yaitu form
buku siswa.
Ikuti langkah–langkah berikut untuk
membuat form data siswa.
a.
Pilih menu Insert
– Aplication Objects – Insert Record – record Insert Form Wizard.
Pilih menu Insert
– Aplication Objects – Insert Record – record Insert Form Wizard.
Gambar4.2.3.1 Membuat form input siswa.
b.
Selanjutnya akan tampil kotak dialog Recordset.
Selanjutnya akan tampil kotak dialog Recordset.
Gambar 4.2.3.2 kotak dialog Recordset.
42
c.
Kemudian
klik Ok.
d.
Tampilan form yang dibuat terlihat seperti gambar .
.
Tampilan form yang dibuat terlihat seperti gambar .
.
Gambar 4.2.3.3 Tampilan Form Input Siswa
e.
Tekan
CTRL+S untuk melakukan penyimpanan. Dan berikan link ke tampil_siswa.php.
f.
Tekan
F12 menampilkan pada browser.
43
.jpg)
