Your SlideShare is downloading. ×
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tutorial Pembuatan Aplikasi Website Beserta Databasenya

41,562

Published on

3 Comments
23 Likes
Statistics
Notes
No Downloads
Views
Total Views
41,562
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3,285
Comments
3
Likes
23
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. TUGAS MEMBUAT TUTORIAL PEMBUATANAPLIKASI WEBSITE BESERTA DATABASENYA”JAPANworld (WEBSITE UMUM)”OlehRena Cahya HutamaNISN : 9986773960Kelas X RPL 1SMK NEGERI 1 DEPOK2013
  • 2. “INSTALASI SOFTWARE PENDUKUNG”I.1. XAMPPXAMPP kepanjangan dari X yang berarti cross platform, A yang berartiApache, M yang berarti MySQL, P yang berarti PHP, dan P yang satu lagi yaituPerl. XAMPP adalah sebuah installer web server yang berisi Apache dan MySQLdan mendukung program PHP dan Perl. Software yang satu ini bisa membantuanda untuk membuat Database untuk website anda. Salah satu kelebihan aplikasiini adalah aplikasi ini bisa dijalankan dalam mode offline.Cara Menginstall XAMPP1. Download XAMPP untuk Windows di http://www.apachefriends.org/en/xampp-windows.html, pilih basic package untuk instalasi standar2. Setelah di download, jalankan installer XAMPP3. Pilih bahasa, setalah itu klik OK4. Pilih folder tujuan install XAMPP, lalu NEXT5. Pada window XAMPP options, kamu akan diminta memilih beberapa optionsseperti XAMPP desktop, XAMPP start menu, dan XAMPP section. Abaikan sajapilihan tersebut, lalu klik INSTALL6. Setelah instalasi selesai, jalankan XAMPP7. Lalu klik Start Apache dan Start MySQL
  • 3. 8. Web yang kita buat, akan beralamat di http://localhost, akses dengan browsersesuai selera andaI.2. Editor gambar (Adobe Photoshop)Adobe Photoshop, software editor gambar yang mendukung untukmendesain tampilan page website kita. Disini saya menggunakan Adobe PhotoshopCS5 portable version (versi bajakan) untuk mempersingkat waktu dan size, yangbisa kalian download diberbagai situs dan silahkan dicari lewat google.Cara Menginstall Adobe Photoshop CS5 Portable1. Buka photoshop yang telah kamu download, lalu double klik photoshoptersebut.
  • 4. 2. Setelah double klik, tunggu proses sampai muncul tampilan sepertigambar di bawah ini.3. Klik Next4. Pilih folder tujuan install Photoshop, lalu klik Next5. Klik Install, tunggu proses hingga selesai.6. Setelah proses selesai, maka photoshop telah terinstall di komputer kamuseperti gambar di bawah ini.
  • 5. “RANCANGAN APLIKASI”II.1. FlowchartFlowchart merupakan gambar yang memperlihatkan urutan dan hubunganproses berserta intruksinya. Gambaran ini dinyatakan simbol dengan demikiansetiap simbol menggambarkan proses tertentu. Sedangkan hubungan antara prosesdigambarkan dengan garis penghubung.Flowchart merupakan langkah awal membuat program. Dengan adanyaFlowchart urutan proses kegiatan lebih jelas. Jika ada penambahan proses makadapat dilakukan lebih mudah. Setelah Flowchart selesai disusun, selanjutnyapemrograman (programmer) menerjemahkannya program dengan bahasapemrograman.Simbol Simbol FlowchartFlowchart disusun dengan simbol – simbol ini dipakai sebagai alat bantumenggambarkan proses di dalam program.Dalam pembuatan Flowchart tidak ada rumus atau patokan yang bersifatmutlak karena flowchart merupakan gambaran hasil pemikiran dalam menganalisasuatu masalah dengan computer sehingga flowchart yang dihasilkan dapat beragamantara satu pemrogram dengan pemrogram lainnya.Namun secara garis besar, setiap pengolahan selalu terdiri dari tiga bagianutama, yaitu:1. Input ialah bahan mentah2. Proses pengolahan3. Output ialah bahan jadiUntuk mengolah data dengan komputer, dapat dirangkum urutan dasar untukpemecahan suatu masalah, yaitu:1. START : Berisi instruksi untuk persiapan peralatan yang diperlukansebelum menangani pemecahan masalah.2. READ : Berisi instruksi untuk membaca data dari suatu peralatan input.3. PROCESS : Yang berkaitan dengan pemecahan persoalan sesuai dengandata yang dibaca.
  • 6. 4. WRITE : Berisi instruksi untuk merekan hasil kegiatan ke peralatan5. END : Mengakhiri kegiatan pengolahan.Flowchart JAPANworld
  • 7. “TUTORIAL MEMBUAT APLIKASI WEBSITE BESERTADATABASE DIDALAMNYA”III. 1. Membuat Database Login Admin1.Pastikan anda telah menginstall software XAMPP di Laptop atauPersonal Computer ( PC ) anda. Lalu jalankan aplikasinya.2.Buka browser anda, lalu ketikkan ”localhost” (tanpa tanda kutip) diadress bar browser anda dan tekan enter. Nantinya anda akan melihat halamanutama 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 prosesselesai.
  • 9. 6.Ketika proses loading telah selesai, maka inilah hasilnya :7.Selamat! Anda sudah berhasil membuat database. Langkah selanjutnyaadalah membuat tabel di database yang tadi dibuat.Untuk membuatnya, anda harusmeng-klik Menu ”SQL” (tanpa tanda kutip).
  • 10. 8.Ketikkan Script yang ada digambar dibawah ini dengan cermat danteliti. Lalu klik ”Go” ketika sudah selesai dan tunggu proses loading.9.Jika berhasil, maka akan muncul ”login_rena” (tanpa tanda kutip) di ataspilihan ”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 danmasukkan 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 yangtelah terisi sehingga menjadi sebuah kerangka database. Ini belum berakhir, masihada step-step selanjutnya yang harus anda ikuti. Tugas yang selanjutnya adalahmenghubungkan database tadi ke halaman web anda. Sebelum itu, salinlah folderweb anda ke folder installan XAMPP di C/xampp/htdocs/.12.Buka ”Notepad” lalu ikutilah script yang ada dibawah ini lalu disavedengan nama ”koneksi.php” (tanpa tanda kutip).
  • 13. 13.Setelah itu, buka ”Notepad” baru dan masukkan script yang adadigambar 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 ) berupagambar atau yang lainnya untuk mendukung pembuatan rancangan design websiteanda. Siapkan Header/Banner, Content/Isi, Footer sesuai dengan layout diatas.Layout diatas akan membantu anda menentukan ukuran dari gambar yang akananda buat nantinya sehingga anda tidak perlu bingung lagi.
  • 15. 2.Script Page Menu 1 ( Home )Buka ”Notepad” baru dan ketikkan Script yang ada dibawah inidengan seksama.Cermati dan Teliti dalam menyalin Script yang ada di atas dan cek ulangjika diperlukan untuk menghindari kesalahan. Jika sudah selesai menyalin Script-nya, klik File lalu pilih Save dan beri nama ke file notepad tadi dengan nama homedengan ekstensi ”.html”. Sekarang anda sudah berhasil membuat Page Menu 1( Home ).
  • 16. 3.HasilUntuk melihat hasil dari Script yang tadi anda buat, klik kanan padafile tadi dan cari pilihan ”Open with” lalu pilih browser yang terinstall di Laptopatau 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 designwebsite anda. Siapkan Header/Banner, Content/Isi, Footer sesuai dengan layoutdiatas. Layout diatas akan membantu anda menentukan ukuran dari gambar yangakan 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 ulangjika diperlukan untuk menghindari kesalahan. Jika sudah selesai menyalin Script-nya, klik File lalu pilih Save dan beri nama ke file notepad tadi dengan nama homedengan ekstensi ”.html”. Sekarang anda sudah berhasil membuat Page Menu 2( JAPANpedia ).
  • 19. 3.HasilUntuk melihat hasil dari Script yang tadi anda buat, klik kanan padafile tadi dan cari pilihan ”Open with” lalu pilih browser yang terinstall di Laptopatau 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 designwebsite anda. Siapkan Header/Banner, Content/Isi, Footer sesuai dengan layoutdiatas. Layout diatas akan membantu anda menentukan ukuran dari gambar yangakan 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 ulangjika diperlukan untuk menghindari kesalahan karena khusus untuk Script ”Blog”,memang agak sedikit rumit karena terdapat banyak kodingan-kodingan yangberbeda satu sama lainnya dan perlu ketelitian yang amat tinggi. Tapi jangankhawatir, anda pasti bisa melakukannya dengan baik. Jika sudah selesai menyalinScript-nya, klik File lalu pilih Save dan beri nama ke file notepad tadi dengan namahome dengan ekstensi ”.html”. Sekarang anda sudah berhasil membuat Page Menu3 ( Blog ).
  • 23. 3.HasilUntuk melihat hasil dari Script yang tadi anda buat, klik kanan padafile tadi dan cari pilihan ”Open with” lalu pilih browser yang terinstall di Laptopatau Personal Computer ( PC ) anda. Misalnya Mozilla Firefox.

×