TUGAS MEMBUAT TUTORIAL PEMBUATAN

APLIKASI WEBSITE BESERTA DATABASENYA

”JAPANworld (WEBSITE UMUM)”

Oleh

Rena Cahya Hutama

NISN : 9986773960

Kelas X RPL 1

SMK NEGERI 1 DEPOK2013

“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

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.

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.

“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.

4. WRITE : Berisi instruksi untuk merekan hasil kegiatan ke peralatan

5. END : Mengakhiri kegiatan pengolahan.

Flowchart JAPANworld

“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.

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.

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).

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 :

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”.

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.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!

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.

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 ).

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.

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.

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 ).

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.

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.

2.Script Page Menu 2 ( JAPANpedia )

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 ).

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.