Anda di halaman 1dari 23

TUGAS MEMBUAT TUTORIAL PEMBUATAN

APLIKASI WEBSITE BESERTA DATABASENYA


JAPANworld (WEBSITE UMUM)
Oleh
Ren !h" #$%&
NISN ' (()*++,(*-
Kel. / RPL 0
SMK NEGERI 0 DEPOK
1-0,
2INSTALASI SO3TWARE PENDUKUNG
I404 /AMPP
XAMPP kepanjangan dari X yang berarti cross platform, A yang berarti
Apache, M yang berarti MySQL, P yang berarti PHP, dan P yang satu lagi yaitu
Perl XAMPP adalah sebuah installer !eb ser"er yang berisi Apache dan MySQL
dan mendukung program PHP dan Perl Soft!are yang satu ini bisa membantu
anda untuk membuat #atabase untuk !ebsite anda Salah satu kelebihan aplikasi
ini adalah aplikasi ini bisa dijalankan dalam mode offline
!r Men56n.%ll /AMPP
$ #o!nload XAMPP untuk %indo!s di http&''!!!apachefriendsorg'en'(ampp)
!indo!shtml, pilih basic package untuk instalasi standar
* Setelah di do!nload, jalankan installer XAMPP
+ Pilih bahasa, setalah itu klik ,-
. Pilih folder tujuan install XAMPP, lalu /0X1
2 Pada !indo! XAMPP options, kamu akan diminta memilih beberapa options
seperti XAMPP desktop, XAMPP start menu, dan XAMPP section Abaikan saja
pilihan tersebut, lalu klik 3/S1ALL
4 Setelah instalasi selesai, jalankan XAMPP
5 Lalu klik Start Apache dan Start MySQL
6 %eb yang kita buat, akan beralamat di http&''localhost, akses dengan bro!ser
sesuai selera anda
I414 Ed6%or 5&7r (Ado7e Pho%o.ho8)
Adobe Photoshop, soft!are editor gambar yang mendukung untuk
mendesain tampilan page !ebsite kita #isini saya menggunakan Adobe Photoshop
7S2 portable "ersion 8"ersi bajakan9 untuk mempersingkat !aktu dan si:e, yang
bisa kalian do!nload diberbagai situs dan silahkan dicari le!at google
!r Men56n.%ll Ado7e Pho%o.ho8 !S9 Por%7le
$ ;uka photoshop yang telah kamu do!nload, lalu double klik photoshop
tersebut
* Setelah double klik, tunggu proses sampai muncul tampilan seperti
gambar di ba!ah ini
+ -lik /e(t
. Pilih folder tujuan install Photoshop, lalu klik /e(t
2 -lik 3nstall, tunggu proses hingga selesai
4 Setelah proses selesai, maka photoshop telah terinstall di komputer kamu
seperti gambar di ba!ah ini
2RAN!ANGAN APLIKASI
II404 3low:hr%
<lo!chart merupakan gambar yang memperlihatkan urutan dan hubungan
proses berserta intruksinya =ambaran ini dinyatakan simbol dengan demikian
setiap simbol menggambarkan proses tertentu Sedangkan hubungan antara proses
digambarkan dengan garis penghubung
<lo!chart merupakan langkah a!al membuat program #engan adanya
<lo!chart urutan proses kegiatan lebih jelas >ika ada penambahan proses maka
dapat dilakukan lebih mudah Setelah <lo!chart selesai disusun, selanjutnya
pemrograman 8programmer9 menerjemahkannya program dengan bahasa
pemrograman
S6&7ol S6&7ol 3low:hr%
<lo!chart disusun dengan simbol ? simbol ini dipakai sebagai alat bantu
menggambarkan proses di dalam program
#alam pembuatan <lo!chart tidak ada rumus atau patokan yang bersifat
mutlak karena flo!chart merupakan gambaran hasil pemikiran dalam menganalisa
suatu masalah dengan computer sehingga flo!chart yang dihasilkan dapat beragam
antara satu pemrogram dengan pemrogram lainnya
/amun secara garis besar, setiap pengolahan selalu terdiri dari tiga bagian
utama, yaitu&
$ 3nput ialah bahan mentah
* Proses pengolahan
+ ,utput ialah bahan jadi
@ntuk mengolah data dengan komputer, dapat dirangkum urutan dasar untuk
pemecahan suatu masalah, yaitu&
$ S1AA1 & ;erisi instruksi untuk persiapan peralatan yang diperlukan
sebelum menangani pemecahan masalah
* A0A# & ;erisi instruksi untuk membaca data dari suatu peralatan input
+ PA,70SS & Bang berkaitan dengan pemecahan persoalan sesuai dengan
data yang dibaca
. %A310 & ;erisi instruksi untuk merekan hasil kegiatan ke peralatan
2 0/# & Mengakhiri kegiatan pengolahan
3low:hr% JAPANworld
2TUTORIAL MEMBUAT APLIKASI WEBSITE BESERTA
DATABASE DIDALAMNYA
III4 04 Me&7$% D%7.e Lo56n Ad&6n
$Pastikan anda telah menginstall soft!are XAMPP di Laptop atau
Personal 7omputer 8 P7 9 anda Lalu jalankan aplikasinya
*;uka bro!ser anda, lalu ketikkan ClocalhostC 8tanpa tanda kutip9 di
adress bar bro!ser anda dan tekan enter /antinya anda akan melihat halaman
utama dari aplikasi XAMPP
+Setelah halaman utama XAMPP tampil, klik submenu CphpMyAdminC
8tanpa tanda kutip9 di Menu 1ools
.-etika tampilan submenu CphpMyAdminC 8tanpa tanda kutip9 tampil,
langsung saja klik Menu CSQLC 8tanpa tanda kutip9
23kuti dan ketikkan script yang ada di gambar diba!ah dengan teliti
Setelah selesai diketik, klik C=oC 8tanpa tanda kutip9 dan tunggu hingga proses
selesai
4-etika proses loading telah selesai, maka inilah hasilnya &
5SelamatD Anda sudah berhasil membuat database Langkah selanjutnya
adalah membuat tabel di database yang tadi dibuat@ntuk membuatnya, anda harus
meng)klik Menu CSQLC 8tanpa tanda kutip9
6-etikkan Script yang ada digambar diba!ah ini dengan cermat dan
teliti Lalu klik C=oC ketika sudah selesai dan tunggu proses loading
E>ika berhasil, maka akan muncul CloginFrenaC 8tanpa tanda kutip9 di atas
pilihan C7reate 1ableC seperti yang ada digambar diba!ah ini &
$GSelamatD Sekarang anda sudah bisa membuat tabel didalam #atabase
Langkah selanjutnya adalah mengisi record didalam tabel CloginFrenaC tadi,
dengan cara meng)klik tombol C7learC untuk menghapus Script sebelumnya dan
masukkan Script seperti digambar diba!ah lalu klik tombol C=oC
$$Setelah berhasil, maka seperti inilah tampilannya &
,ke, anda sudah berhasil membuat database dengan table dan record yang
telah terisi sehingga menjadi sebuah kerangka database 3ni belum berakhir, masih
ada step)step selanjutnya yang harus anda ikuti 1ugas yang selanjutnya adalah
menghubungkan database tadi ke halaman !eb anda Sebelum itu, salinlah folder
!eb anda ke folder installan XAMPP di 7'(ampp'htdocs'
$*;uka C/otepadC lalu ikutilah script yang ada diba!ah ini lalu disa"e
dengan nama CkoneksiphpC 8tanpa tanda kutip9
$+Setelah itu, buka C/otepadC baru dan masukkan script yang ada
digambar diba!ah ini lalu disa"e dengan nama CcekloginphpC 8tanpa tanda kutip9
$.Selanjutnya, anda tinggal membuat halaman Login berformat ChtmlC
sesuai keinginan anda =ood LuckD
III4 14 Me&7$% P5e Men$ 0 ( #o&e )
$Layout #esign Page Menu $ 8 Home 9
Siapkan bahan)bahan untuk membuat Page Menu $ 8 Home 9 berupa
gambar atau yang lainnya untuk mendukung pembuatan rancangan design !ebsite
anda Siapkan Header';anner, 7ontent'3si, <ooter sesuai dengan layout diatas
Layout diatas akan membantu anda menentukan ukuran dari gambar yang akan
anda buat nantinya sehingga anda tidak perlu bingung lagi
*Script Page Menu $ 8 Home 9
;uka C/otepadC baru dan ketikkan Script yang ada diba!ah ini
dengan seksama
7ermati dan 1eliti dalam menyalin Script yang ada di atas dan cek ulang
jika diperlukan untuk menghindari kesalahan >ika sudah selesai menyalin Script)
nya, klik <ile lalu pilih Sa"e dan beri nama ke file notepad tadi dengan nama home
dengan ekstensi ChtmlC Sekarang anda sudah berhasil membuat Page Menu $
8 Home 9
+Hasil
@ntuk melihat hasil dari Script yang tadi anda buat, klik kanan pada
file tadi dan cari pilihan C,pen !ithC lalu pilih bro!ser yang terinstall di Laptop
atau Personal 7omputer 8 P7 9 anda Misalnya Mo:illa <irefo(, =oogle 7hrome,
,pera Mini, Safari atau bro!ser)bro!ser lain yang sejenis
III4 ,4 Me&7$% P5e Men$ 1 ( JAPAN8ed6 )
$Layout #esign Page Menu * 8 >APA/pedia 9
Siapkan bahan)bahan untuk membuat Page Menu * 8 >APA/pedia 9
berupa gambar atau yang lainnya untuk mendukung pembuatan rancangan design
!ebsite anda Siapkan Header';anner, 7ontent'3si, <ooter sesuai dengan layout
diatas Layout diatas akan membantu anda menentukan ukuran dari gambar yang
akan anda buat nantinya sehingga anda tidak perlu bingung lagi
*Script Page Menu * 8 >APA/pedia 9
7ermati dan 1eliti dalam menyalin Script yang ada di atas dan cek ulang
jika diperlukan untuk menghindari kesalahan >ika sudah selesai menyalin Script)
nya, klik <ile lalu pilih Sa"e dan beri nama ke file notepad tadi dengan nama home
dengan ekstensi ChtmlC Sekarang anda sudah berhasil membuat Page Menu *
8 >APA/pedia 9
+Hasil
@ntuk melihat hasil dari Script yang tadi anda buat, klik kanan pada
file tadi dan cari pilihan C,pen !ithC lalu pilih bro!ser yang terinstall di Laptop
atau Personal 7omputer 8 P7 9 anda Misalnya Mo:illa <irefo(, =oogle 7hrome,
,pera Mini, Safari atau bro!ser)bro!ser lain yang sejenis
III4 ;4 Me&7$% P5e Men$ , ( Blo5 )
$Layout #esign Page Menu + 8 ;log 9
Siapkan bahan)bahan untuk membuat Page Menu * 8 >APA/pedia 9
berupa gambar atau yang lainnya untuk mendukung pembuatan rancangan design
!ebsite anda Siapkan Header';anner, 7ontent'3si, <ooter sesuai dengan layout
diatas Layout diatas akan membantu anda menentukan ukuran dari gambar yang
akan anda buat nantinya sehingga anda tidak perlu bingung lagi
*Script Page Menu * 8 >APA/pedia 9
7ermati dan 1eliti dalam menyalin Script yang ada di atas dan cek ulang
jika diperlukan untuk menghindari kesalahan karena khusus untuk Script C;logC,
memang agak sedikit rumit karena terdapat banyak kodingan)kodingan yang
berbeda satu sama lainnya dan perlu ketelitian yang amat tinggi 1api jangan
kha!atir, anda pasti bisa melakukannya dengan baik >ika sudah selesai menyalin
Script)nya, klik <ile lalu pilih Sa"e dan beri nama ke file notepad tadi dengan nama
home dengan ekstensi ChtmlC Sekarang anda sudah berhasil membuat Page Menu
+ 8 ;log 9
+Hasil
@ntuk melihat hasil dari Script yang tadi anda buat, klik kanan pada
file tadi dan cari pilihan C,pen !ithC lalu pilih bro!ser yang terinstall di Laptop
atau Personal 7omputer 8 P7 9 anda Misalnya Mo:illa <irefo(