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