Kamis, 26 Juni 2014

Cara Membuat Web Sederhana

Dalam posting ini saya akan menjelaskan bagaimana cara membuat web sederhana. Web ini saya desain dengan bentuk E-Learning, karena e-learning sangat bermanfaat untuk siapa saja yang mau belajar. Pada awalnya siapkan dulu bahan apa saja yang akan memudahkan dalam pembuatan web. Yaitu :
1. Xampp
2. Adobe Photoshop CS3
3. Notepad++ atau Dreamweaver
4. Domain dan Hosting untuk menyimpan dokumen web ke webserver online

Serta bahasa yang akan digunakan adalah HTML, CSS dan PHP

  • Tahapan awal dalam memulai pembuatan web 
  1. Awalnya kita bisa mengambil atau membuat gambar yang akan dibentuk untuk memperindah web kita dengan photoshop, dengan teknik slicing gambar akan terbagi sesuai bentuk web. Bisa heading, body serta bagian penting web lainnya. 
  2.  Lalu dapat diawali dengan memulai kodingan di notepad++ atau dreamweaver memakai bahasa HTML, 
    CSS dan PHP, seperti contoh berikut.


  • Tahapan selanjutnya yaitu membuat database yang akan dibutuhkan untuk menyimpan data
1. Buka Xampp lalu aktifkan apache dan mysql nya dengan menekan tombol start pada keduanya


2. Buka browser lalu ketikkan http://localhost/phpmyadmin
3. Buat database Elearning dengan mengklik tombol Create
4. Buat table Baru :
    I.  Tb_admin : user varchar(30) Password(30) hakakses(30)
    II. Tb_bab : id int AutoIncrement nama_bab varchar(20) detail 
         text file varchar(20)
    III. Tb_soal : id int AutoIncrement id_bab int soal text
    IV. Tb_jawaban : id int Autoincrement id_soal int jawaban text value int

*Catatan : Diperhatikan variabel, nama database, nama tabel, serta field-fieldnya. Pada 
  saat ngoding sangat berpengaruh, jika ada yang tidak sesuai maka program tidak 
  akan berjalan sempurna.


    • Tahapan selanjutnya yaitu membuat hosting web yang sudah jadi

    1. Disini saya mencoba menggunakan hostinger gratis  http://www.realhoster.net/
    2. Setelah itu buatlah domain web yang kita inginkan, tapi sebelumnya kita dminta daftar untuk login akun  terlebih dahulu. Sebagai contoh nama domain yang saya buat http://afejirob.realhoster.net/web.html
    3. Selanjutnya kita dapat mengupload web kita yang telah dibuat dalam bentuk zip dengan fasilitas File Manager yang telah disediakan. web hosting tutorial untuk upload bisa dilihat di sini,:  http://tenjocity.wordpress.com/2012/07/26/panduan-hosting-dan-mengelola-contorl-panel-hosting/

                                           Gambar memasukkan folder project kita
                                                      


                      Gambar untuk pilihan dalam web hosting, bisa juga impor database

    • Hasil akhir dari web yang sudah dibuat


    Demikianlah salah satu contoh sederhana dari membuat web berbasis E-Learning ini. Sumber berasal dari teman satu kelompok saya dalam pembuatan web ini yaitu, Nubi Just Share


    Tidak ada komentar:

    Posting Komentar