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
, 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) =
- 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 tag penutup. Untuk item-item list yang ada di dalamnya digunakan tag