BAB IV

TUGAS MEMBUAT TUTORIAL PEMBUATAN APLIKASI WEBSITE BESERTA DATABASENYA

JAPANworld (WEBSITE UMUM)Oleh

Rena Cahya HutamaNISN : 9986773960Kelas X RPL 1

SMK NEGERI 1 DEPOK

2013INSTALASI SOFTWARE PENDUKUNGI.1. XAMPPXAMPP 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 andaI.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 Portable1. 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 Next5. Klik Install, tunggu proses hingga selesai.6. Setelah proses selesai, maka photoshop telah terinstall di komputer kamu seperti gambar di bawah ini.

RANCANGAN APLIKASIII.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 mentah2. Proses pengolahan3. Output ialah bahan jadiUntuk 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 DIDALAMNYAIII. 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.