1. TUGAS MEMBUAT TUTORIAL PEMBUATAN
APLIKASI WEBSITE BESERTA DATABASENYA
”JAPANworld (WEBSITE UMUM)”
Oleh
Rena Cahya Hutama
NISN : 9986773960
Kelas X RPL 1
SMK NEGERI 1 DEPOK
2013

2. “INSTALASI SOFTWARE PENDUKUNG”
I.1. XAMPP
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 web server yang berisi Apache dan MySQL
dan mendukung program PHP dan Perl. Software yang satu ini bisa membantu
anda untuk membuat Database untuk website anda. Salah satu kelebihan aplikasi
ini adalah aplikasi ini bisa dijalankan dalam mode offline.
Cara Menginstall XAMPP
1. Download XAMPP untuk Windows di http://www.apachefriends.org/en/xampp-
windows.html, pilih basic package untuk instalasi standar
2. Setelah di download, jalankan installer XAMPP
3. Pilih bahasa, setalah itu klik OK
4. Pilih folder tujuan install XAMPP, lalu NEXT
5. Pada window XAMPP options, kamu akan diminta memilih beberapa options
seperti XAMPP desktop, XAMPP start menu, dan XAMPP section. Abaikan saja
pilihan tersebut, lalu klik INSTALL
6. Setelah instalasi selesai, jalankan XAMPP
7. Lalu klik Start Apache dan Start MySQL

3. 8. Web yang kita buat, akan beralamat di http://localhost, akses dengan browser
sesuai selera anda
I.2. Editor gambar (Adobe Photoshop)
Adobe Photoshop, software editor gambar yang mendukung untuk
mendesain tampilan page website kita. Disini saya menggunakan Adobe Photoshop
CS5 portable version (versi bajakan) untuk mempersingkat waktu dan size, yang
bisa kalian download diberbagai situs dan silahkan dicari lewat google.
Cara Menginstall Adobe Photoshop CS5 Portable
1. Buka photoshop yang telah kamu download, lalu double klik photoshop
tersebut.

4. 2. Setelah double klik, tunggu proses sampai muncul tampilan seperti
gambar di bawah ini.
3. Klik Next
4. Pilih folder tujuan install Photoshop, lalu klik Next
5. Klik Install, tunggu proses hingga selesai.
6. Setelah proses selesai, maka photoshop telah terinstall di komputer kamu
seperti gambar di bawah ini.

5. “RANCANGAN APLIKASI”
II.1. Flowchart
Flowchart merupakan gambar yang memperlihatkan urutan dan hubungan
proses berserta intruksinya. Gambaran ini dinyatakan simbol dengan demikian
setiap simbol menggambarkan proses tertentu. Sedangkan hubungan antara proses
digambarkan dengan garis penghubung.
Flowchart merupakan langkah awal membuat program. Dengan adanya
Flowchart urutan proses kegiatan lebih jelas. Jika ada penambahan proses maka
dapat dilakukan lebih mudah. Setelah Flowchart selesai disusun, selanjutnya
pemrograman (programmer) menerjemahkannya program dengan bahasa
pemrograman.
Simbol Simbol Flowchart
Flowchart disusun dengan simbol – simbol ini dipakai sebagai alat bantu
menggambarkan proses di dalam program.
Dalam pembuatan Flowchart tidak ada rumus atau patokan yang bersifat
mutlak karena flowchart merupakan gambaran hasil pemikiran dalam menganalisa
suatu masalah dengan computer sehingga flowchart yang dihasilkan dapat beragam
antara satu pemrogram dengan pemrogram lainnya.
Namun secara garis besar, setiap pengolahan selalu terdiri dari tiga bagian
utama, yaitu:
1. Input ialah bahan mentah
2. Proses pengolahan
3. Output ialah bahan jadi
Untuk mengolah data dengan komputer, dapat dirangkum urutan dasar untuk
pemecahan suatu masalah, yaitu:
1. START : Berisi instruksi untuk persiapan peralatan yang diperlukan
sebelum menangani pemecahan masalah.
2. READ : Berisi instruksi untuk membaca data dari suatu peralatan input.
3. PROCESS : Yang berkaitan dengan pemecahan persoalan sesuai dengan
data yang dibaca.

6. 4. WRITE : Berisi instruksi untuk merekan hasil kegiatan ke peralatan
5. END : Mengakhiri kegiatan pengolahan.
Flowchart JAPANworld

7. “TUTORIAL MEMBUAT APLIKASI WEBSITE BESERTA
DATABASE DIDALAMNYA”
III. 1. Membuat Database Login Admin
1.Pastikan anda telah menginstall software XAMPP di Laptop atau
Personal Computer ( PC ) anda. Lalu jalankan aplikasinya.
2.Buka browser anda, lalu ketikkan ”localhost” (tanpa tanda kutip) di
adress bar browser anda dan tekan enter. Nantinya anda akan melihat halaman
utama dari aplikasi XAMPP.

8. 3.Setelah halaman utama XAMPP tampil, klik submenu ”phpMyAdmin”
(tanpa tanda kutip) di Menu Tools.
4.Ketika tampilan submenu ”phpMyAdmin” (tanpa tanda kutip) tampil,
langsung saja klik Menu ”SQL” (tanpa tanda kutip).
5.Ikuti dan ketikkan script yang ada di gambar dibawah dengan teliti.
Setelah selesai diketik, klik ”Go” (tanpa tanda kutip) dan tunggu hingga proses
selesai.

9. 6.Ketika proses loading telah selesai, maka inilah hasilnya :
7.Selamat! Anda sudah berhasil membuat database. Langkah selanjutnya
adalah membuat tabel di database yang tadi dibuat.Untuk membuatnya, anda harus
meng-klik Menu ”SQL” (tanpa tanda kutip).

10. 8.Ketikkan Script yang ada digambar dibawah ini dengan cermat dan
teliti. Lalu klik ”Go” ketika sudah selesai dan tunggu proses loading.
9.Jika berhasil, maka akan muncul ”login_rena” (tanpa tanda kutip) di atas
pilihan ”Create Table” seperti yang ada digambar dibawah ini :

11. 10.Selamat! Sekarang anda sudah bisa membuat tabel didalam Database.
Langkah selanjutnya adalah mengisi record didalam tabel ”login_rena” tadi,
dengan cara meng-klik tombol ”Clear” untuk menghapus Script sebelumnya dan
masukkan Script seperti digambar dibawah lalu klik tombol ”Go”.

12. 11.Setelah berhasil, maka seperti inilah tampilannya :
Oke, anda sudah berhasil membuat database dengan table dan record yang
telah terisi sehingga menjadi sebuah kerangka database. Ini belum berakhir, masih
ada step-step selanjutnya yang harus anda ikuti. Tugas yang selanjutnya adalah
menghubungkan database tadi ke halaman web anda. Sebelum itu, salinlah folder
web anda ke folder installan XAMPP di C/xampp/htdocs/.
12.Buka ”Notepad” lalu ikutilah script yang ada dibawah ini lalu disave
dengan nama ”koneksi.php” (tanpa tanda kutip).

13. 13.Setelah itu, buka ”Notepad” baru dan masukkan script yang ada
digambar dibawah ini lalu disave dengan nama ”ceklogin.php” (tanpa tanda kutip).
14.Selanjutnya, anda tinggal membuat halaman Login berformat ”html”
sesuai keinginan anda. Good Luck!

14. III. 2. Membuat Page Menu 1 ( Home )
1.Layout Design Page Menu 1 ( Home )
Siapkan bahan-bahan untuk membuat Page Menu 1 ( Home ) berupa
gambar atau yang lainnya untuk mendukung pembuatan rancangan design website
anda. Siapkan Header/Banner, Content/Isi, Footer sesuai dengan layout diatas.
Layout diatas akan membantu anda menentukan ukuran dari gambar yang akan
anda buat nantinya sehingga anda tidak perlu bingung lagi.

15. 2.Script Page Menu 1 ( Home )
Buka ”Notepad” baru dan ketikkan Script yang ada dibawah ini
dengan seksama.
Cermati dan Teliti dalam menyalin Script yang ada di atas dan cek ulang
jika diperlukan untuk menghindari kesalahan. Jika sudah selesai menyalin Script-
nya, klik File lalu pilih Save dan beri nama ke file notepad tadi dengan nama home
dengan ekstensi ”.html”. Sekarang anda sudah berhasil membuat Page Menu 1
( Home ).

16. 3.Hasil
Untuk melihat hasil dari Script yang tadi anda buat, klik kanan pada
file tadi dan cari pilihan ”Open with” lalu pilih browser yang terinstall di Laptop
atau Personal Computer ( PC ) anda. Misalnya Mozilla Firefox, Google Chrome,
Opera Mini, Safari atau browser-browser lain yang sejenis.

17. III. 3. Membuat Page Menu 2 ( JAPANpedia )
1.Layout Design Page Menu 2 ( JAPANpedia )
Siapkan bahan-bahan untuk membuat Page Menu 2 ( JAPANpedia )
berupa gambar atau yang lainnya untuk mendukung pembuatan rancangan design
website anda. Siapkan Header/Banner, Content/Isi, Footer sesuai dengan layout
diatas. Layout diatas akan membantu anda menentukan ukuran dari gambar yang
akan anda buat nantinya sehingga anda tidak perlu bingung lagi.

18. 2.Script Page Menu 2 ( JAPANpedia )
Cermati dan Teliti dalam menyalin Script yang ada di atas dan cek ulang
jika diperlukan untuk menghindari kesalahan. Jika sudah selesai menyalin Script-
nya, klik File lalu pilih Save dan beri nama ke file notepad tadi dengan nama home
dengan ekstensi ”.html”. Sekarang anda sudah berhasil membuat Page Menu 2
( JAPANpedia ).

19. 3.Hasil
Untuk melihat hasil dari Script yang tadi anda buat, klik kanan pada
file tadi dan cari pilihan ”Open with” lalu pilih browser yang terinstall di Laptop
atau Personal Computer ( PC ) anda. Misalnya Mozilla Firefox, Google Chrome,
Opera Mini, Safari atau browser-browser lain yang sejenis.

20. III. 4. Membuat Page Menu 3 ( Blog )
1.Layout Design Page Menu 3 ( Blog )
Siapkan bahan-bahan untuk membuat Page Menu 2 ( JAPANpedia )
berupa gambar atau yang lainnya untuk mendukung pembuatan rancangan design
website anda. Siapkan Header/Banner, Content/Isi, Footer sesuai dengan layout
diatas. Layout diatas akan membantu anda menentukan ukuran dari gambar yang
akan anda buat nantinya sehingga anda tidak perlu bingung lagi.

21. 2.Script Page Menu 2 ( JAPANpedia )

22. Cermati dan Teliti dalam menyalin Script yang ada di atas dan cek ulang
jika diperlukan untuk menghindari kesalahan karena khusus untuk Script ”Blog”,
memang agak sedikit rumit karena terdapat banyak kodingan-kodingan yang
berbeda satu sama lainnya dan perlu ketelitian yang amat tinggi. Tapi jangan
khawatir, anda pasti bisa melakukannya dengan baik. Jika sudah selesai menyalin
Script-nya, klik File lalu pilih Save dan beri nama ke file notepad tadi dengan nama
home dengan ekstensi ”.html”. Sekarang anda sudah berhasil membuat Page Menu
3 ( Blog ).

23. 3.Hasil
Untuk melihat hasil dari Script yang tadi anda buat, klik kanan pada
file tadi dan cari pilihan ”Open with” lalu pilih browser yang terinstall di Laptop
atau Personal Computer ( PC ) anda. Misalnya Mozilla Firefox.