membuat web pendaftaran tempat pkl.pdf

8/18/2019 Membuat Web Pendaftaran Tempat PKL.pdf

1/58


2/58

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


3/58

LAPORAN TUGAS AKHIR

( Membuat Web Pendaftaran Tempat PKL REKMED UGM )

Disusun Oleh:

Cornelia Novika Puspa D Kelas 3 TKJ 1 NIS 23339

Kompetensi Keahlian : Teknik Komputer Jaringan

Disahkan di Yogyakarta

Pembimbing/Pimpinan Guru Pembimbing Sekolah

DU/DI LAB KOMDAS FMIPA UGM Tanggal, 2 Januari 2011

Rudhi Wijanarko Arif Eka Prasetya, S.Pd.T

NIP 19860929 201001 1006

Ketua Kompetensi Keahlian

Untung Suprapto, S.Pd

NIP. 19750630 2006041 012


4/58

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


5/58

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


6/58

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)


7/58


8/58

BAB II

TEORI DASAR HTML DANPENGGUNAAN 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.


9/58

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:

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.


10/58

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 "". 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 :

Judul……

Atribut di dalam TAG

• TAG memiliki atribut :


11/58

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


12/58

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 = cetak subscript

- Untuk huruf sebagaisuperscript

= cetak superscript

- Untuk huruf yang dicoret (strike) = cetak strike

• LIST

List berfungsi sebagai pengurut, terdiri dari UnorderList, mengurutkandengan 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


13/58

Untuk menulis komentar dalam tag HTML, digunakan tanda

pembuka dan tanda -- > sebagai penutup. Komentar tidak akan

diinterpreter oleh web browser, hanya menjadi keterangan saja.

• KARAKTER KHUSUS DALAM HTML

Bentuk Script

< <

> >

spasi

© ©

® ®

™ ™

- —

± &plusmin;

¶ ¶

' ´

• 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 :


14/58

?>

Contoh-02 :


15/58

BAB III

PERENCANAAN DAN HASIL

A.

DESAIN

HEADER

ISI

FOOTER

•

Desain HEADER

• Desain Background


16/58

B.

HASIL• Index

•

Register


17/58


18/58

•

Daftar tempat PKL (user)

•

Konfirmasi daftar sukses (user)

•

Home (user)


19/58

•

Logout

•

Login sukses (admin)

•

Daftar Data Mahasiswa + eksport ke excel (admin)


20/58

•

Daftar Data Mahasiswa (admin) +edit

• Edit Data Mahasiswa (admin)

•

Data Operator (admin)


21/58

•

Edit Data Operator (admin)

• Ubah Password (admin)

• Home (admin)


22/58

•

Login sukses (operator)

•

Daftar data mahasiswa (operator)

•

Daftar Data Mahasiswa (operator) +edit


23/58

•

Ubah password (operator)

• Home (operator)


24/58

C.

SCRIPT

• index.html

Home

Selamat datang di web pendaftaran tempat PKL Rekam Medis

silahkan login terlebih dahulu jika sudah mempunyai akun, atau jika belum silahkan daftar

NIM

Password

• daftar.php

.style3 {font-size: 24px}

–>


25/58

Daftar

Register

Nim :

Nama :

Angkatan :

Password :

Confirm Password :


26/58

• daftar2.php


27/58

• loginsubmit.php


28/58

$_SESSION['nama'] = $data['nama'];

$_SESSION['angkatan'] = $data['angkatan'];

include "menu.php";}

else echo "Login gagal";

?>

• formubahpassworduser.php


29/58

• changepassword.php


30/58

echo "";

echo "Password telah diganti";

echo "";

}}

else echo "ganti password gagal";

?>

• formubahpasswordadmin.php


31/58

echo '';

echo '';

?>

•

changepasswordadmin.php


32/58

echo "";

echo "";

echo "";

echo "";echo "";


echo "";

}

}


?>

•

formubahpasswordoperator.php


33/58

include "menu.php";

echo '

';

echo '';

echo '';

echo '';

?>

• changepasswordoperator.php


34/58

echo "";

echo "";

echo "";

echo "";echo "";

echo "";

echo "";

echo "";

echo "";

echo "";


echo "";

}

}


?>

•

coba2.php (daftar data mahasiswa)


35/58

echo("rumah sakit");

echo("alamat rumahsakit");

echo("kepala rumahsakit");

echo("");do

{

echo("");

echo("$data[username]");

echo("$data[nama]");

echo("$data[angkatan]");

echo("$data[rumahsakit]");

echo("$data[alamat]");

echo("$data[kepalars]");

}

while ($data = mysql_fetch_array($hasil));

echo("");

echo "

";

echo "

";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

include "menu.php";

?>


36/58


37/58

width='10'>$data[angkatan]");

echo("$data[rumahsakit]");

echo("$data[alamat]");

echo("$data[kepalars]");

echo("edit");

echo("");

}


echo("");

echo "

";

echo "

";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

include "menu.php";

?>


38/58

background='1.png'>");

if ($_SESSION['level'] == "operator"){

echo("");

?>

daftar data mahasiswa


39/58

echo "

";

echo "

";

echo "";

echo "";echo "";

echo "";

echo "";

echo "";

include "menu.php";

?>

Data Operator


40/58

$hasil = mysql_query($query);

$data = mysql_fetch_array($hasil);

echo("");echo("");

echo("username");

echo("level");

echo("action");

echo("");

do

{

echo("");

echo("$data[username]");

echo("$data[level]");

echo("edit");

echo("");

}


echo("");

echo "

";

echo "

";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

include "menu.php";

?>


41/58

echo("
Login User");

}

}

?>

•

edithoperator.php (form untuk mengedit password dan level

operator)


42/58

$option3 = "";

}

echo '';

echo "";

echo "";

echo "
";

echo 'Edit data

Operator';

echo "

";

echo "username";

echo "$data[username]";

echo "password";

echo "


43/58

background='1.png'>");

if ($_SESSION['level'] == "operator"){

echo("");

echo("");

$konek = mysql_connect("localhost","","");

mysql_select_db("fmipaa",$konek);

$query = mysql_query("select * from daftar where id='$kode'",$konek);

$data = mysql_fetch_array($query);

if ($data['level'] == "admin")

{

$option1 = "";

$option2 = "";

$option3 = "";

}

else if ($data['level'] == "operator")

{

$option1 = "";

$option2 = "";

$option3 = "";

}

else if ($data['level'] == "user")

{

$option1 = "";

$option2 = "";

$option3 = "";

}

echo '';

echo "";

echo "";

echo "
";

echo 'Edit Identitas';

echo "

";


44/58

echo "Nim";


echo "Nama";

echo "$data[nama]";echo "Angkatan";

echo "$data[angkatan]";

echo "password";

echo "


45/58

if ($_SESSION['level'] == "admin")

{

echo("");

echo("");$konek = mysql_connect("localhost","","");


$query = mysql_query("select * from daftar where id='$kode'",$konek);

$data = mysql_fetch_array($query);

if ($data['level'] == "admin")

{

$option1 = "";

$option2 = "";

$option3 = "";

}

else if ($data['level'] == "operator")

{

$option1 = "";

$option2 = "";

$option3 = "";

}

else if ($data['level'] == "user")

{

$option1 = "";

$option2 = "";

$option3 = "";

}

echo '';

echo "";

echo "";

echo "
";

echo 'Edit Identitas';

echo "

";

echo "Nim";


echo "Nama";


46/58

echo "$data[nama]";

echo "Angkatan";

echo "$data[angkatan]";

echo "password";echo "


47/58

{

if ($_SESSION['level'] == "user"){

echo "";

echo "Registrasi Tempat PKL";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

echo '
';

echo "selamat datang";

echo "";

echo "";

echo "Nama : ".$_SESSION['nama']."
";

echo "Nim : ".$_SESSION['username']."
";

echo "Angkatan : ".$_SESSION['angkatan']."
";

echo "Registrasi Tempat PKL";

echo '';

echo "";

echo "";

echo "Nama RS";

echo ":";

echo "";

echo "";

echo "";

echo "Alamat RS";

echo ":";

echo "";

echo "";

echo "";

echo "Kepala RS";

echo ":";

echo "";

echo "";

echo "";

echo " ";


48/58

echo " ";

echo "";

echo "";

echo "";echo "";

echo "";

echo "";

echo ""; include "menu.php";

echo "
";

echo "";

echo "";

}

}

else

{

echo "Nah.. Anda pasti mencoba akses halaman ini tanpa login ya?";

}

?>

•

homeuser.php


49/58

echo "

";

include "menu.php";

echo "";

}

}

else

{


}

?>

•

homeadmin.php


50/58

else

{


}

?>

•

homeoperator.php


51/58

• update.php


52/58

$konek = mysql_connect("localhost","","");


mysql_query("update daftar set password='$password' where id='$id_id'",$konek);

$direct="coba3.php";echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "";

echo "Data sudah diperbaiki
";

echo "";

?>

•

updateoperator.php


53/58

// tampilkan menu untuk admin

echo "Daftar Data Mahasiswa | ";

echo "Edit Data Mahasiswa | ";

echo "Edit Data Operator | ";echo "Ganti Password |

";

echo "Home Admin | ";

echo "Logout ";

}

else if ($_SESSION['level'] == "operator")

{

// tampilkan menu untuk operator

echo "Daftar Data Mahasiswa |

";

echo "Edit Data Mahasiswa | ";

echo "Ganti Password |

";

echo "Home Operator |

";

echo "Logout ";

}

else if ($_SESSION['level'] == "user")

{

// tampilkan menu untuk user biasa

echo "Ganti Password |

";

echo "Daftar PKL | ";

echo "Home User | ";

echo "Logout ";

}

?>

• logout.php


54/58

echo "";

echo "";

echo "";

echo "Anda sudah logout";echo "

Login Kembali

";

echo "";

?>

•

export.php


55/58

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


56/58

$koneksi = mysql_connect($host, $username, $password);

mysql_select_db($database, $koneksi) or d ie( "MySQL Gagal Koneksi" );

?>

•

koneksi.php

•

config.php


57/58

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.


58/58

DAFTAR PUSTAKA

•

http://coretanasal.blogspot.com/2008/08/teori-dasar-

html.html

•

http://www.lintasberita.com/Teknologi/Software-

Internet/perintah-echo-pada-php-

• http://semangatbelajar.com/perintah-echo-php/

membuat web pendaftaran tempat pkl.pdf

Documents