1 LAPORAN TUGAS AKHIR ( Membuat Web Pendaftaran Tempat PKL REKMED UGM ) Disusun Oleh: Cornelia Novika Puspa D Kelas 3 TKJ 1 NIS Kompetensi Keahlian : ...
LAPORAN TUGAS AKHIR ( Membuat Web Pendaftaran Tempat PKL REKMED UGM )
Disusun Oleh: Cornelia Novika Puspa D
Kompetensi Keahlian
Kelas 3 TKJ 1
NIS 23339
: Teknik Komputer Jaringan
SEKOLAH MENENGAH KEJURUAN (SMK) N 2 YOGYAKARTA JL. AM. Sangaji No. 47 Yogyakarta 55233 Telp. (0274) 513490 Fax.(0274) 513490 E-mail : [email protected] Tahun 2010 - 2011
LAPORAN TUGAS AKHIR ( Membuat Web Pendaftaran Tempat PKL REKMED UGM )
Oleh: Cornelia Novika Puspa Delima (21/3TKJ1)
Sekolah Menengah Kejuruan Negeri 2 Yogyakarta 2010 – 2011
1
LAPORAN TUGAS AKHIR ( Membuat Web Pendaftaran Tempat PKL REKMED UGM )
Disusun Oleh: Cornelia Novika Puspa D
Kompetensi Keahlian
Kelas 3 TKJ 1
NIS 23339
: Teknik Komputer Jaringan
Disahkan di Yogyakarta
Pembimbing/Pimpinan DU/DI LAB KOMDAS FMIPA UGM
Rudhi Wijanarko
Guru Pembimbing Sekolah Tanggal, 2 Januari 2011
Arif Eka Prasetya, S.Pd.T NIP 19860929 201001 1006
Ketua Kompetensi Keahlian
Untung Suprapto, S.Pd NIP. 19750630 2006041 012
2
Kata Pengantar
Salam damai sejahtera,
Pertama-tama kami ucapkan puji syukur kepada Tuhan Yang Maha Esa yang telah memberikan kesehatan, kecerdasan, serta kemudahan kepada Penulis siswa kelas 3 TKJ 1 SMK N 2 YOGYAKARTA untuk menyelesaikan Laporan Tugas Akhir( Membuat Web Pendaftaran Tempat PKL REKMED UGM )
Terima kasih penulis ucapkan kepada guru pembimbing kami yang telah membantu dan membimbing saya untuk menyelesaikan tugas ini. Makalah yang saya susun ini merupakan tugas untuk membagikan sedikit informasi kepada saudara.
Semoga dengan tersusunnya Laporan Tugas Akhir ini, penulis berharap ini bermanfaat bagi yang membutuhkan. Dan tidah lupa penulis ucapkan pada Yesus Kristus untuk kesekian kalinya, semoga dengan terbentuknya laporan ini berguna bagi pembaca. Penulis sadar betul bahwa karya penulis masih jauh dari sempurna. Maka penulis juga mohon maaf bila terdapat kesalahan dan memohon kritik dan saran dari pembaca. Terima kasih.
Yogyakarta, 2 Januari 2011
Penulis
3
Daftar Isi KATA PENGANTAR
3
Daftar Isi
4
Daftar Gambar
5
BAB I PENDAHULUAN
6
Latar Belakang
6
Tujuan
6
Manfaat
6
BAB II TEORI DASAR HTML dan PHP
7
BAB III PERENCANAAN DAN HASIL
14
Desain
14
Hasil
15
Script HTML
23
BAB IV PENUTUP
56
Kesimpulan
56
Kritik dan Saran
56
DAFTAR PUSTAKA
57
4
Daftar Gambar 1. Gambar 1 - halaman index 2. Gambar 2 - halaman Register 3. Gambar 3 - halaman Konfirmasi Registrasi sukses 4. Gambar 4 - halaman login sukses (user) 5. Gambar 5 - halaman Ubah password (user) 6. Gambar 6 - halaman Daftar tempat PKL (user) 7. Gambar 7 - halaman konfirmasi daftar sukses (user) 8. Gambar 8 - halaman home (user) 9. Gambar 9 - halaman logout 10. Gambar 10 - halaman login sukses (admin) 11. Gambar 11 - halaman Daftar Data mahasiswa + eksport ke excel (admin) 12. Gambar 12 - halaman Daftar Data mahasiswa + edit (admin) 13. Gambar 13 - halaman Edit Data Mahasiswa (admin) 14. Gambar 14 - halaman Data Operator (admin) 15. Gambar 15 - halaman Edit Data Operator (admin) 16. Gambar 16 - halaman Ubah password (admin) 17. Gambar 18 - halaman Home (admin) 18. Gambar 19 - halaman login sukses (operator) 19. Gambar 20 - halaman Daftar Data mahasiswa + eksport ke excel (operator) 20. Gambar 21 - halaman Daftar data Mahasiswa + edit (operator) 21. Gambar 22 - halaman ubah password (operator) 22. Gambar 23 - halaman Home (operator)
5
BAB I PENDAHULUAN A. LATAR BELAKANG Dewasa ini, penggunaan Internet sudah semakin marak. Popular nya situs jejaring social, blog, dan mudah nya pencarian lewat internet memicu perkembangan pesat internet. Maka semakin banyak pula yang memanfaatkannya internet untuk mempermudah pekerjaan suatu instansi. Dalam hal ini, membuat web, sebagai tempat pendaftaran agar mempermudah pekerjaan, dan pendaftaran bisa dilakukan dimana saja dan tidak perlu datang ke tempat pendaftaraan langsung. Di laporan ini saya akan menjelaskan cara untuk mendesain dan memasukkan desain itu pada suatu web, dalam hal ini web tempat pendaftaraan tempat pkl rekmed UGM. Untuk desain grafis nya bisa menggunakan software lainnya, seperti photoshop, firework, dsb. Untuk memasukkan kode/ script saya menggunakan Notepad++. Dalam pembuatan web ini, saya kebagian tugas untuk mendesain, dan karena ini untuk sebuah instansi, maka dibuat formal.
B. TUJUAN 1. Menyelesaikan tugas akhir dan untuk melengkapi nilai. 2. Untuk tempat pendaftaran PKL Rekmed UGM 3. Dapat berbagi ilmu dan informasi kepada pembaca.
C. MANFAAT 1. Mampu mengerti dan memahami bahasa HTML dan PHP. 2. Mampu menggunakan script-script HTML dan PHP dengan baik.
6
BAB II TEORI DASAR HTML DAN PENGGUNAAN ECHO DALAM PHP Membangun sebuah Web Page dibutuhkan sebuah bahasa pemrograman yang lebih dikenal dengan sebutan Web Scripting. Dikatakan Script karena perintah kode program tersebut akan diinterpreter dan tidak ada kompilasi untuk menjadikannya mudah dieksekusi. Berdasarkan letak proses interpreter maka web scripting dibagi menjadi dua kategori, yaitu bersifat client side dan server side. Client Side dilaksanakan oleh web browser seperti Internet Explorer, Netscape, Opera, Firefox dan lain-lain. Contoh daripada Client Side misalnya HTML,CSS, Javascript, VBscript maupun XML. Sedangkan Server Side dikerjakan oleh Web Server seperti Personal Web Server untuk system operasi Windows 98, IIS untuk SO Windows 2000/XP, Apache, Tomcat, Xitami dan Zope. Sedangkan untuk contoh bahasa server side adalah ASP (.Net), PHP, JSP,CFM dan CGI/PL. Web Scripting yang bersifat Client Side akan menghasilkan web page yang statis dalam arti menekankan pada design format tampilan informasi yang disajikan dan tidak dapat diupdate seketika, karena tidak dapat dilakukan request interaktif dari pengguna dan proses tidak terjadi di server sehingga tidak dapat menghasilkan output apapun. Sehingga untuk menghasilkan aplikasi web bersifat dinamis tidak mungkin, dan harus dikombinasikan dengan web scripting yang bersifat server side. HTML (Hypertext Markup Language) adalah bahasa dasar untuk web scripting bersifat Client Side yang memungkinkan untuk menampilkan informasi dalam bentuk teks, grafik, serta multimedia dan juga untuk menghubungkan antar tampilan web page atau yang lebih dikenal dengan Hyperlink. 7
Tidak diperlukan suatu program editor khusus untuk menggunakan kode perintah-perintah HTML, kita dapat menggunakan Notepad, Edit Plus ataupun editor lainnya yang berbasis GUI (Graphical User Interface) seperti Microsoft Front Page, Dreamweaver CS3, Adobe Golive dan sebagainya,namun dengan program-program ini kita tidak perlu mengetik kode HTMLnya, semua perintah diwujudkan secara Icon Base. Sebagai seorang pengembang aplikasi web maka kemampuan penguasaan kode-kode HTML sangat diperlukan, dengan demikian kita mampu menguasai program-program editor lainnya. Untuk dapat menguasai kode-kode HTML sangat disarankan menggunakan editor teks misalnya Notepad . Aturan penulisan HTML adalah sebagai berikut : 1. Strkutur minimal HTML: <TITLE>Judul Halaman Konten 2. Bentuk tulisan diatas disebut TAG. Tag memiliki pembuka dan ditutup dengan . Namun, tidak semua Tag mempunyai penutup . Tag memberi instruksi interpreter kepada browser.
8
3. Tag HTML memiliki atribut Tag, yang berbeda antara tag yang satu dengan tag yang lainnya. 4. Tag bersifat Non Case Sensitive, sehingga penulisan tag dengan huruf besar atau huruf kecil akan dianggap sama. Contoh akan sama dengan atau . 5. Tag harus mengikuti standar W3C, organisasi internasional yang mengatur standarisasi web ( http://www.w3c.org). Penulisannya harus dimulai tanda "<", diisi nama Tag, dan ditutup dengan tanda ">". Tidak boleh ada spasi, angka, dan tanda baca. 6. Pada dokumen HMTL, ekstensi dari file harus .html atau .htm dibelakang nama filenya. 7. Penulisan tag-tag HTML tidak akan terpengaruh oleh perintah langsung keyboard seperti penekanan tombol enter atau spasi, sehingga diperbolehkan menyusun tag-tag HTML secara countinue horizontal seperti berikut ini : <TITLE>Judul…… Atribut di dalam TAG • TAG memiliki atribut :
Digunakan untuk menampilkan format huruf yang besar dan dicetak tebal, biasanya digunakan untuk judul atau topik utama dari sebuah paragraf, ukurannya dari terbesar
sampai terkecil
, sedangkan untuk mengatur posisi heading digunakan atribut "align". Contoh
ditutup dengan
yang nilai atributnya dapat diisi nilai LEFT untuk rata kiri, RIGHT untuk rata kanan dan CENTER untuk rata tengah. • PARAGRAF Untuk memformat paragraf agar dapat rata kiri, rata kanan, rata tengah dan justify digunakan tag pembuka
dan ditutup dengan
, adapun isi dari atribut "align" adalah LEFT,RIGHT,CENTER dan JUSTIFY. Antara paragraf dalam HTML akan dibatasi secara otomatis oleh sebuah jeda baris. • BREAKING NOW Tag ini digunakan untuk berpindah ke baris baru dalam isi dokumen. Ini adalah salah satu tag HTML yang tidak memiliki tag penutup • HORIZONTAL RULER Tag yang digunakan untuk membuat garis horizontal adalah , adapun atribut yang dimiliki "align" untuk perataan, "size" untuk mengatur ketebalan garisnya dalam pixel (px) dan "width" untuk mengatur lebar garisnya (dalam pixel atau persen). Penggunaan satuan persen (%) memiliki arti bahwa ukuran garis horizontal akan diambil persentase terhadap WIDTH dari tampilan jendelanya. Tag juga tidak memiliki tag penutup. • BOLD, ITALIC, UNDER LINE, SUBSCRIPT, SUPERSCRIPT dan STRIPE 10
Cara memberikan efek huruf dalam dokumen HTML adalah sebagai berikut : - Untuk huruf tebal (bold) = cetak tebal - Untuk huruf miring (italic) = cetak miring - Untuk huruf dengan garis bawah (underline) = garis bawah - Untuk huruf sebagai subscript = <sub>cetak subscript - Untuk huruf sebagai superscript = <sup>cetak superscript - Untuk huruf yang dicoret (strike) = <s>cetak strike • LIST List berfungsi sebagai pengurut, terdiri dari UnorderList, mengurutkan dengan simbol dan OrderedList, mengurutkan sesuai nomor urut. Pada Unorderlist digunakan tag
sebagai pembuka dan tag
sebagai tag penutup. Untuk item-item list yang ada di dalamnya digunakan tag
untuk mengawalinya. Unorderedlist mempunyai atribut "type" yaitu bentuk dari bulletnya. Ada beberapa jenis type yaitu DISC (default) untuk lingkaran tidak berlubang, CIRCLE untuk bentuk lingkaran berlubang, SQUARE untuk kotak. Orderedlist juga memiliki atribut tipe untuk menentukan tipe penomorannya, tipe tersebut adalah 1 untuk penomoran 1,2,3,…. A untuk penomoran A,B,C,…. I untuk penomoran I,II,III,IV … a untuk penomoran a,b,c … i untuk penomoran i,ii,iii, … Bila kita tidak mendifinasikan tipenya, maka secara default Ordered List akan memberikan penomoran angka ( 1,2,3 … ) • KOMENTAR DALAM HTML
11
Untuk menulis komentar dalam tag HTML, digunakan tanda sebagai penutup. Komentar tidak akan diinterpreter oleh web browser, hanya menjadi keterangan saja. • KARAKTER KHUSUS DALAM HTML Bentuk
• Penggunaan Echo echo berfungsi untuk menampilkan kode ataupun data dalam kode php. kode ini sangat bermanfaat sekali dalam memanipulasi data dalam database atau kode html, java, xml dan lain sebagainya yang compatible dengan code php.
Contoh-01 :
echo"Tutorial echo"; 12
?>
Contoh-02 :
echo"<span style=' color:#F00 '>Tutorial echo";
?>
pada contoh-01 diatas untuk menampilkan kata sederhana hanya menampilkan kata apa adanya seperti yang tertulis. sedangkan pada contoh-02 adalah sebuah penggabungan antara kode php dan kode style html dimana teks akan berwarna merah.
Setiap memulai kode PHP, harus kita awali dengan tanda
Isi yang akan kita cetak, harus kita letakan di antara tanda petik. Selain itu kita juga bisa menambahkan kode HTML di dalamnya. Dan jangan lupa setelah selesai setiap suatu perintah (statement) di dalam PHP harus kita beri tanda titik koma ( ; ).
13
BAB III PERENCANAAN DAN HASIL
A. DESAIN HEADER
ISI
FOOTER
• Desain HEADER
• Desain Background
14
B. HASIL • Index
• Register
15
• Registrasi sukses
• Login sukses (user)
• Ubah password (user)
16
• Daftar tempat PKL (user)
• Konfirmasi daftar sukses (user)
• Home (user)
17
• Logout
• Login sukses (admin)
• Daftar Data Mahasiswa + eksport ke excel (admin)
18
• Daftar Data Mahasiswa (admin) +edit
• Edit Data Mahasiswa (admin)
• Data Operator (admin)
19
• Edit Data Operator (admin)
• Ubah Password (admin)
• Home (admin)
20
• Login sukses (operator)
• Daftar data mahasiswa (operator)
• Daftar Data Mahasiswa (operator) +edit
21
• Ubah password (operator)
• Home (operator)
22
C. SCRIPT •
index.html
<TITLE>Home
Selamat datang di web pendaftaran tempat PKL Rekam Medis
silahkan login terlebih dahulu jika sudah mempunyai akun, atau jika belum silahkan daftar
•
daftar.php
<style type="text/css">
23
<TITLE>Daftar
24
•
daftar2.php
alert('Konfirmasi password harus sama dengan password !'); javascript:history.go(-1);"; exit; } if((!empty($username)) && (!empty($nama)) && (!empty($angkatan)) && (!empty($password)) && (!empty($level))) { $query = mysql_query("INSERT INTO $table (username,nama,angkatan,password,level) values ('$username','$nama','$angkatan','$password','$level');"); echo ""; echo "
"; echo "
"; echo "
"; echo ""; echo "
"; echo "
"; echo "
"; echo "
"; echo "
"; echo ""; print "
Registrasi sukses
Back to Home"; echo "<meta http-equiv=\"refresh\"content=\"3;URL=$direct\" />"; echo ""; } else { print "<script>alert('Maaf, tidak boleh ada field yang kosong !'); javascript:history.go(-1);"; } ?>
25
•
loginsubmit.php
$username = $_POST['username']; $password = $_POST['pass']; // query untuk mendapatkan record dari username $query = "SELECT * FROM admin WHERE username = '$username'"; $hasil = mysql_query($query); $data = mysql_fetch_array($hasil); if ($username != $data['username']) { $query = "SELECT * FROM daftar WHERE username = '$username'"; $hasil = mysql_query($query); $data = mysql_fetch_array($hasil); } if ($username != $data['username']) { $query = "SELECT * FROM operator WHERE username = '$username'"; $hasil = mysql_query($query); $data = mysql_fetch_array($hasil); } if ($password == $data['password']) { echo " <TITLE>Login Sukses"; echo ""; echo "
$konek = mysql_connect("localhost","",""); mysql_select_db("fmipaa",$konek); mysql_query("update daftar set password='$password' where id='$id_id'",$konek); $direct="coba3.php"; echo ""; echo "
// Connect database. mysql_connect("localhost","",""); mysql_select_db("fmipaa"); // Get data records from table. $result=mysql_query("select * from daftar order by id asc");
xlsBOF(); /* Make a top line on your excel sheet at line 1 (starting at 0). The first number is the row number and the second number is the column, both are start at '0' */ xlsWriteLabel(0,0,"Daftar data mahasiswa.");
// Make column labels. (at line 3) xlsWriteLabel(2,0,"No."); xlsWriteLabel(2,1,"NIM"); xlsWriteLabel(2,2,"Nama"); xlsWriteLabel(2,3,"Angkatan"); xlsWriteLabel(2,4,"Rumah Sakit"); xlsWriteLabel(2,5,"Alamat Rumah Sakit"); xlsWriteLabel(2,6,"Kepala Rumah Sakit");
$xlsRow = 3; // Put data records from mysql by while loop. while($row=mysql_fetch_array($result)){ xlsWriteNumber($xlsRow,0,$row['id']); xlsWriteLabel($xlsRow,1,$row['username']); xlsWriteLabel($xlsRow,2,$row['nama']); xlsWriteLabel($xlsRow,3,$row['angkatan']); xlsWriteLabel($xlsRow,4,$row['rumahsakit']); xlsWriteLabel($xlsRow,5,$row['alamat']); xlsWriteLabel($xlsRow,6,$row['kepalars']); $xlsRow++; } xlsEOF(); exit(); ?>
•
koneksiDB.php
54
$koneksi = mysql_connect($host, $username, $password); mysql_select_db($database, $koneksi) or die( "MySQL Gagal Koneksi" ); ?>
•
koneksi.php
Kesalahan : ".mysql_error(); exit(); } $pilihdb=@mysql_select_db($db,$koneksi); if(!$pilihdb){ exit("Gagal melakukan hubungan dengan database ! Kesalahan : ".mysql_error()); } ?>
•
config.php
55
BAB IV PENUTUP A. KESIMPULAN Dalam mendesain web ini saya dibutuhkan beberapa software selain Notepad++ atau Notepad biasa untuk mengedit scriptnya, juga dibutuhkan software untuk membuat suatu desain seperti Photoshop, Fireworks, dsb agar suatu tampilan suatu website menarik. Selain itu juga kita harus mengetahui cara untuk memasukkan desain yang sudah kita buat ke dalam script php, yaitu menggunakan beberapa perintah php dan tag – tag HTML.
B. KRITIK DAN SARAN •
Saran
Saran : siswa seharusnya diberi tahu cara – cara dan prosedur membuat laporan TA dari awal sebelum Praktek Industri, sehingga siswa bisa mengerjakan dengan lebih baik.
56
DAFTAR PUSTAKA • http://coretanasal.blogspot.com/2008/08/teori-dasarhtml.html • http://www.lintasberita.com/Teknologi/SoftwareInternet/perintah-echo-pada-php• http://semangatbelajar.com/perintah-echo-php/