Pada Posting kali ini Kami akan memberikan sebuah tutorial bagaimana cara untuk membuat suatu web yang berbasis E-Learning sesuai tugas yang diberikan oleh dosen Soft Skill Pengenalan Teknologi Internet & New Media yang dibuat oleh kelompok yang akan disebutkan di bawah ini nama kelompok, url dari alamat web, beserta Tutorial pembuatannya :
Link E-Learning : http://afejirob.realhoster.net/web.html
Nama Anggota Kelompok :
- Anggoro Eko Wicaksono (50412917)
- Febrian Erdiantoro (52412852)
- Puji Satria Widodo (55412727)
- Robby Fahlevi (56412641)
Kelas : 2IA12
Dalam membuat suatu web ini kami membutuhkan software yaitu sebagai berikut :
1. Xampp = Digunakan untuk merancang web server secara offline
2. Adobe Photoshop = untuk Design Template atau tampilan dari web
3. Notepad ++ = Berfungsi untuk memasukan Coding dari web
4. Mozila firefox / Chrome = untuk membuka hasil web yang sudah di rancang
6. Domain +Hosting = Menyimpan Dokumen web ke webserver online dalam
dalam tugas ini kami menggunakan domain gratis yaitu
realhoster.net
- Tahap awal yang dilakukan yaitu Design Layout
1. Pertama Buka Adobe Photoshop,Lalu kita mendisain Layout sesuai yang
akan kita ingin buat
2. Potong Gambar menjadi kecil2 dengan Tool Slice Photoshop ini berguna
untuk mencocokan pada tampilan yang akan dibuat pada web tersebut
hasilnya seperti dibawah ini :
3. Kemudian kita harus mematiskan ukaran dari Gambar tidak terlalu besar,
Agar Website tidak lambat karena besar data yg besar.
4. Buka Notepad ++ Lalu Coding CSS untuk membuat layout yang diinginkan
- Tahap selanjutnya yaitu membuat Data Base dari web tersebut
1. Buka Xampp, Lalu start pada Apache dan Mysql
2. Buka Browser Lalu ketik 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
- Pada Tahapan ini kita akan menuliskan Codingnya
1. Buka Notepad ++ Lalu Klik File -> New
2. Import File css yang sudah dibuat sebelumnya ke dalam PHP dengan script
3. Pastikan Layout telah dibuat sudah sesuai
4. lalu lakukan coding di Notepad ++
- Setelah web sudah selesai dibuat pada tahap ini kita akan hosting web pada tugas ini kami menggunakan web hosting gratis yaitu http://www.realhoster.net/
1. Buat akun pada web tersebut dengan mengisi data pribadi
2. Setelah itu kita akan bisa membuat domain yang kita ingginkan pada web
yang kami buat menggunakan http://afejirob.realhoster.net/web.html
3. Selanjutnya kita dapat mengupload dengan web kita yang telah kita buat
dalam bentuk zip dengan fasilitas File Manager yang telah disediakan
web hosting tutorial untuk upload bisa dilihat di sini :
5. Kemudian Web telah selesai dibuat
1. Pilih menu Daftar untuk bisa login ke bagian selanjutnya
2. Setelah daftar maka kita akan ke menu login apabila benar akan ditujan ke
menu utama latihan
3. Kita dapat ke menu unduh materi dan juga mengerjakan kuis
Demikian tadi sekilas bagaiman cara untuk membuat suatu web E-Learning yang sederhan semoga bermanfaat bagi para pembaca.
Referensi :
For e-learning website you need the unlimited vps hosting India by Miditech to hassle free reading for your reader.
BalasHapus