KATA PENGANTAR web Autosaved Autosaved
LAPORAN LANGKAH-LANGKAH PEMBUATAN
WEBSITE KUIS ONLINE
Asrani Harahap
(11150910000008)
Handan Siswaningrum (11150910000014)
Mata Kuliah :
PERANCANGAN DAN PEMROGRAMAN WEB
Teknik Informatika
UIN Syarif Hidayatullah Jakarta
2016
KATA PENGANTAR
Alhamdulillah, Puji Syukur kami Panjatkan kepada Allah SWT karena telah memberikan
kesempatan bagi kami untuk menyelesaikan Website Kuis Online ini. Tak lupa shalawat serta
salam semoga selalu tercurahkan kepada Nabi muhammad SAW .
Selanjutnya, kami berterima kasih kepada Bapak Hendra selaku dosen pembimbing mata
kuliah Perancangan dan Pemrograman Web yang telah membimbing dan mengajarkan kami
dalam menyelesaikan website ini. Tak lupa kami berterima kasih kepada teman-teman TI 3A
yang telah membantu memberikan saran dan juga semangat kepada kami sehingga kami bisa
menyelesaikan project website ini dengan tepat waktu.
Setelah melalui berbagai proses panjang, Alhamdulillah akhirnya kami bisa
menyelesaikan project ini dengan baik. Untuk mengetahui langkah-langkah pembuatan website
ini, maka dari itu kami memberikan lampiran langkah-langkah pembuatannya secara step by
step. Harapan kami, semoga sistem ini dapat berguna untuk masyarakat banyak dan juga bisa
terus diperbaiki agar semakin baik. Terima kasih.
Ciputat, 06 Januari 2017
(Developer)
DAFTAR ISI
Daftar Isi ...............................................................2
2. Pendahuluan . ........................................................3
2.1 Latar Belakang
2.2 Rumusan Masalah
2.3 Tujuan
2.4 Bahan
3. Tutorial Pembuatan Website
a. Halaman Awal dan database............................4
b. Hak Akses Beserta Fungsinya. ..............................18
BAB I
PENDAHULUAN
A. LATAR BELAKANG
Seiring dengan perkembangan zaman, perkembangan teknologi terus berkembang
pesat khususnya dalam bidang teknologi informasi dan komunikasi. Pembuatan sistem-sistem
berbasis teknologi terus dikembangkan guna untuk mempermudah mahasiswa dalam
menyelesaikan
tugasnya.
Salah satu perkembangan teknologi itu juga berdampak pada system sebuah kuis online.
Pada dasarnya, kuis online adalah sebuah website yang mempermudah mahasiswa dalam
menyelesaikan
tugas
mata
kuliah
yang
diberikan
oleh
dosen.
Kuis online berisi tugas-tugas yang wajib dikerjakan mahasiswa setelah diberikan oleh
dosen . mahasiswa bisa mengerjakan tugas-tugas tersebut setelah mendapat username dan
password dari admin. Dan begitu juga dosen, dosen harus meminta username dan password
kepada admin agar bisa masuk ke website dan bisa menambahkan soal untuk dikerjakan.
Dalam pengaplikasiannya, kuis online ini masih menggunakan system manual sehingga
pada proses pengerjaannya kurang efektif. Oleh karena itu, kami membuat alternatif yaitu
dengan membuat sebuah website kuis online yang bertujuan untuk memudahkan mahasiswa,
dosen dan juga admin dalam mendata dan melakukan proses registrasi.
B. RUMUSAN MASALAH
Adapun rumusan masalah yang berhasil kami dapatkan yaitu :
a. Bagaimana sistem yang dibuat dapat memberikan kemudahan bagi mahasiswa
yang ingin registrasi, mengolah dan mencari data dapat diproses dengan cepat
melalui bantuan admin.
b. Bagaimana sistem yang dibuat dapat membantu kinerja dosen dalam proses
memberikan tugas kepada mahasiswa.
c. Bagaimana sistem yang dibuat dapat membantu mahasiswa dalam
mengerjakan tugas.
C. TUJUAN
Adapun tujuan dari pembuatan website ini adalah :
1. Memudahkan dosen dalam memberikan tugas kepada mahasiswa.
2. Memudahkan admin dalam melakukan registrasi kepada mahasiswa dan dosen,
dsb.
3. Memudahkan mahasiswa dalam mengerjakan tugas-tugas yang diberikan oleh
dosen
4. Sebagai tugas akhir mata kuliah Perancangan dan Pemrograman Web.
D. BAHAN
1. Php.
2. Javascript.
3. Css.
4. Gr code generator.
BAB II
PEMBAHASAN
LANGKAH-LANGKAH PEMBUATAN
1. Kita akan membuat website kuis online dengan tampilan sebagai berikut:
2. Langkah pertama yaitu, buat folder web di dalam folder C:/xampp/htdocs/.
3. Buat folder img, style , koneksi, dan konten di dalam folder web.
4. Buat folder konten_admin, konten_mhs, dan konten_dosen di dalam folder web konten.
5. Kemudian buat file php dengan nama index.php didalam folder web seperti script berikut:
5. Buat file asrani.php untuk masuk ke menu About As pada sidebar kiri dengan scrip berikut :
6. Untuk membuat tampilannya lebih menarik buat file css yang diberi nama style.css seperti scrip
berikut ini:
7 . Buat database kuisonline dengan mengakses localhost/phpmyadmin.
Buatlah nama database nya kuisonline, dan ikuti langkahnya seperti dibawah ini
Buat table admin seperti dibawah ini
Buat tabel dosen seperti dibawah ini
Buat tabel mahasiswa seperti dibawah ini
Buatlah table matkul seperti dibawah ini
Buatlah table nilai seperti dibawah ini
Buatlah tabel soal seperti dibawah ini
8. Kemudian buat file koneksi.php untuk menghubungkannya ke database seperti scrip berikut:
9. Buat file cek_login.php didalam folder web/koneksi untuk bisa masuk ke website dengan scrip berikut.
10. jangan lupa buat file logout.php di dalam folder web/koneksi untuk bisa keluar dari website dengan
scrip berikut :
12. Kemudian kita buat fungsi dari masing-masing user (Admin, Dosen, Mahasiswa).
a. Admin
Admin adalah yang dapat melakukan segalanya terhadap website ini, seperti menambah
hak akses mahasiswa dan dosen serta merubah tampilan, dsb.
Buatlah halaman indexadmin.php untuk bisa masuk ke halaman admin seperti berikut:
Setelah itu buat file home_admin.php didalam folder konten/konten_admin untuk bisa
masuk ke menu home admin dan buat juga koneksi databasenya dengan membuat file
cari_dosen.php, cari_mhs.php, dan cari_mhs_nilai didalam folder koneksi seperti
berikut:
Ini adalah koneksi database untuk cari dosen
Ini adalah koneksi data base untuk cari mhs
Ini adalah koneksi database untuk cari nilai mhs
Buat file data_dosen.php di folder konten/konten_admin untuk bisa menambah data
dosen pada halaman admin dan buat juga file reg_dosen.php didalam folder koneksi
untuk bisa menkoneksikannya ke database dengan scrip berikut :
Ini adalah koneksi database untuk register dosen
Buat file data_mahasiswa.php di folder konten/konten_admin untuk bisa menambah
data mahasiswa pada halaman admin dan buat file register_mhs.php didalam folder
koneksi untuk bisa menkoneksikannya ke database dengan scrip berikut :
Ini adalah koneksi database untuk register mahasiswa
Buat data_matkul.php di folder konten/konten_admin untuk dapat menambah data
mata kuliah dan buat file register_matkul.php didalam folder koneksi untuk bisa
menkoneksikannya ke database dengan scrip berikut :
Ini adalah koneksi database untuk menambah matkul
Buat data_soal .php di folder konten/konten_admin untuk dapat menambah data soal
dan buat file tambah_soal.php didalam folder koneksi untuk bisa menkoneksikannya ke
database dengan scrip berikut :
Ini adalah koneksi database untuk menambah soal
Buat data_nilai.php di folder konten/konten_admin untuk bisa melihat nilai mahasiswa
dan buat file itung.php didalam folder koneksi untuk bisa menkoneksikannya ke
database dengan scrip berikut :
Ini adalah koneksi database untuk melihat nilai
Buat file list_permohonan.php untuk melihat pemohon yang ingin ditambahkan dan
buat file aktifkan_dosen.php dan aktifkan_mhs.php didalam folder koneksi untuk bisa
menkoneksikannya ke database dengan scrip berikut :
Ini adalah koneksi database untuk mengaktifkan mahasiswa pada list permohonan
Ini adalah koneksi database untuk mengaktifkan dosen di list permohonan
Buat logout.php di folder konten_admin untuk bisa keluar dari halaman admin seperti
scrip berikut:
b. Dosen
Dosen hanya bisa menambah soal, serta dapat melihat nilai mahasiswa
Buatlah file indexdosen.php di folder web dengan scrip berikut :
Kemudian buat file home_dosen didalam folder konten/konten_dosen untuk masuk
ke menu dosen dengan scrip berikut :
Buat data_soal.php di folder konten_dosen untuk bisa menambahkan soal seperti
scrip berikut :
Buat data_nilai.php di folder konten_dosen untuk bisa melihat nilai seperti scrip
berikut:
Buat profil.php di folder konten_dosen untuk bisa melihat profil dosen seperti scrip
berikut:
Buat chart.php di folder konten_dosen untuk bisa melihat grafik nilai mahasiswa
seperti scrip berikut :
Buat logout.php di folder konten_dosen untuk bisa keluar dari halaman dosen seperti
scrip berikut :
c. Mahasiswa
mahasiswa hanya bisa mengerjakan soal dan melihat nilainya.
Buatlah file indexmhs.php di folder web dengan scrip berikut :
Buat home_mhs.php di folder konten_mhs untuk bisa mencari data soal
berdasarkan nama dosen atau kode matkul seperti scrip berikut :
Buat profil.php di folder konten_mhs untuk bisa melihat profil mhs seperti scrip
berikut :
Buat data_soal.php di folder konten_mhs untuk bisa melihat soal seperti scrip
berikut :
Buat data_nilai.php di folder konten_mhs untuk bisa melihat nilai seperti scrip
berikut :
Buat kerjakan_soal.php di folder konten_mhs untuk bisa mengerjakan soal
seperti scrip berikut :
Buat logout.php di folder konten_mhs untuk bisa keluar dari halaman mhs seperti
scrip berikut :
Demikian script-script yang perlu ditulis untuk membuat kuis online dengan login yang memiliki tiga hak
akses dengan fungsi yang berbeda-beda, grafik bar, dan integrasi ke hardware dengan qr code.
WEBSITE KUIS ONLINE
Asrani Harahap
(11150910000008)
Handan Siswaningrum (11150910000014)
Mata Kuliah :
PERANCANGAN DAN PEMROGRAMAN WEB
Teknik Informatika
UIN Syarif Hidayatullah Jakarta
2016
KATA PENGANTAR
Alhamdulillah, Puji Syukur kami Panjatkan kepada Allah SWT karena telah memberikan
kesempatan bagi kami untuk menyelesaikan Website Kuis Online ini. Tak lupa shalawat serta
salam semoga selalu tercurahkan kepada Nabi muhammad SAW .
Selanjutnya, kami berterima kasih kepada Bapak Hendra selaku dosen pembimbing mata
kuliah Perancangan dan Pemrograman Web yang telah membimbing dan mengajarkan kami
dalam menyelesaikan website ini. Tak lupa kami berterima kasih kepada teman-teman TI 3A
yang telah membantu memberikan saran dan juga semangat kepada kami sehingga kami bisa
menyelesaikan project website ini dengan tepat waktu.
Setelah melalui berbagai proses panjang, Alhamdulillah akhirnya kami bisa
menyelesaikan project ini dengan baik. Untuk mengetahui langkah-langkah pembuatan website
ini, maka dari itu kami memberikan lampiran langkah-langkah pembuatannya secara step by
step. Harapan kami, semoga sistem ini dapat berguna untuk masyarakat banyak dan juga bisa
terus diperbaiki agar semakin baik. Terima kasih.
Ciputat, 06 Januari 2017
(Developer)
DAFTAR ISI
Daftar Isi ...............................................................2
2. Pendahuluan . ........................................................3
2.1 Latar Belakang
2.2 Rumusan Masalah
2.3 Tujuan
2.4 Bahan
3. Tutorial Pembuatan Website
a. Halaman Awal dan database............................4
b. Hak Akses Beserta Fungsinya. ..............................18
BAB I
PENDAHULUAN
A. LATAR BELAKANG
Seiring dengan perkembangan zaman, perkembangan teknologi terus berkembang
pesat khususnya dalam bidang teknologi informasi dan komunikasi. Pembuatan sistem-sistem
berbasis teknologi terus dikembangkan guna untuk mempermudah mahasiswa dalam
menyelesaikan
tugasnya.
Salah satu perkembangan teknologi itu juga berdampak pada system sebuah kuis online.
Pada dasarnya, kuis online adalah sebuah website yang mempermudah mahasiswa dalam
menyelesaikan
tugas
mata
kuliah
yang
diberikan
oleh
dosen.
Kuis online berisi tugas-tugas yang wajib dikerjakan mahasiswa setelah diberikan oleh
dosen . mahasiswa bisa mengerjakan tugas-tugas tersebut setelah mendapat username dan
password dari admin. Dan begitu juga dosen, dosen harus meminta username dan password
kepada admin agar bisa masuk ke website dan bisa menambahkan soal untuk dikerjakan.
Dalam pengaplikasiannya, kuis online ini masih menggunakan system manual sehingga
pada proses pengerjaannya kurang efektif. Oleh karena itu, kami membuat alternatif yaitu
dengan membuat sebuah website kuis online yang bertujuan untuk memudahkan mahasiswa,
dosen dan juga admin dalam mendata dan melakukan proses registrasi.
B. RUMUSAN MASALAH
Adapun rumusan masalah yang berhasil kami dapatkan yaitu :
a. Bagaimana sistem yang dibuat dapat memberikan kemudahan bagi mahasiswa
yang ingin registrasi, mengolah dan mencari data dapat diproses dengan cepat
melalui bantuan admin.
b. Bagaimana sistem yang dibuat dapat membantu kinerja dosen dalam proses
memberikan tugas kepada mahasiswa.
c. Bagaimana sistem yang dibuat dapat membantu mahasiswa dalam
mengerjakan tugas.
C. TUJUAN
Adapun tujuan dari pembuatan website ini adalah :
1. Memudahkan dosen dalam memberikan tugas kepada mahasiswa.
2. Memudahkan admin dalam melakukan registrasi kepada mahasiswa dan dosen,
dsb.
3. Memudahkan mahasiswa dalam mengerjakan tugas-tugas yang diberikan oleh
dosen
4. Sebagai tugas akhir mata kuliah Perancangan dan Pemrograman Web.
D. BAHAN
1. Php.
2. Javascript.
3. Css.
4. Gr code generator.
BAB II
PEMBAHASAN
LANGKAH-LANGKAH PEMBUATAN
1. Kita akan membuat website kuis online dengan tampilan sebagai berikut:
2. Langkah pertama yaitu, buat folder web di dalam folder C:/xampp/htdocs/.
3. Buat folder img, style , koneksi, dan konten di dalam folder web.
4. Buat folder konten_admin, konten_mhs, dan konten_dosen di dalam folder web konten.
5. Kemudian buat file php dengan nama index.php didalam folder web seperti script berikut:
5. Buat file asrani.php untuk masuk ke menu About As pada sidebar kiri dengan scrip berikut :
6. Untuk membuat tampilannya lebih menarik buat file css yang diberi nama style.css seperti scrip
berikut ini:
7 . Buat database kuisonline dengan mengakses localhost/phpmyadmin.
Buatlah nama database nya kuisonline, dan ikuti langkahnya seperti dibawah ini
Buat table admin seperti dibawah ini
Buat tabel dosen seperti dibawah ini
Buat tabel mahasiswa seperti dibawah ini
Buatlah table matkul seperti dibawah ini
Buatlah table nilai seperti dibawah ini
Buatlah tabel soal seperti dibawah ini
8. Kemudian buat file koneksi.php untuk menghubungkannya ke database seperti scrip berikut:
9. Buat file cek_login.php didalam folder web/koneksi untuk bisa masuk ke website dengan scrip berikut.
10. jangan lupa buat file logout.php di dalam folder web/koneksi untuk bisa keluar dari website dengan
scrip berikut :
12. Kemudian kita buat fungsi dari masing-masing user (Admin, Dosen, Mahasiswa).
a. Admin
Admin adalah yang dapat melakukan segalanya terhadap website ini, seperti menambah
hak akses mahasiswa dan dosen serta merubah tampilan, dsb.
Buatlah halaman indexadmin.php untuk bisa masuk ke halaman admin seperti berikut:
Setelah itu buat file home_admin.php didalam folder konten/konten_admin untuk bisa
masuk ke menu home admin dan buat juga koneksi databasenya dengan membuat file
cari_dosen.php, cari_mhs.php, dan cari_mhs_nilai didalam folder koneksi seperti
berikut:
Ini adalah koneksi database untuk cari dosen
Ini adalah koneksi data base untuk cari mhs
Ini adalah koneksi database untuk cari nilai mhs
Buat file data_dosen.php di folder konten/konten_admin untuk bisa menambah data
dosen pada halaman admin dan buat juga file reg_dosen.php didalam folder koneksi
untuk bisa menkoneksikannya ke database dengan scrip berikut :
Ini adalah koneksi database untuk register dosen
Buat file data_mahasiswa.php di folder konten/konten_admin untuk bisa menambah
data mahasiswa pada halaman admin dan buat file register_mhs.php didalam folder
koneksi untuk bisa menkoneksikannya ke database dengan scrip berikut :
Ini adalah koneksi database untuk register mahasiswa
Buat data_matkul.php di folder konten/konten_admin untuk dapat menambah data
mata kuliah dan buat file register_matkul.php didalam folder koneksi untuk bisa
menkoneksikannya ke database dengan scrip berikut :
Ini adalah koneksi database untuk menambah matkul
Buat data_soal .php di folder konten/konten_admin untuk dapat menambah data soal
dan buat file tambah_soal.php didalam folder koneksi untuk bisa menkoneksikannya ke
database dengan scrip berikut :
Ini adalah koneksi database untuk menambah soal
Buat data_nilai.php di folder konten/konten_admin untuk bisa melihat nilai mahasiswa
dan buat file itung.php didalam folder koneksi untuk bisa menkoneksikannya ke
database dengan scrip berikut :
Ini adalah koneksi database untuk melihat nilai
Buat file list_permohonan.php untuk melihat pemohon yang ingin ditambahkan dan
buat file aktifkan_dosen.php dan aktifkan_mhs.php didalam folder koneksi untuk bisa
menkoneksikannya ke database dengan scrip berikut :
Ini adalah koneksi database untuk mengaktifkan mahasiswa pada list permohonan
Ini adalah koneksi database untuk mengaktifkan dosen di list permohonan
Buat logout.php di folder konten_admin untuk bisa keluar dari halaman admin seperti
scrip berikut:
b. Dosen
Dosen hanya bisa menambah soal, serta dapat melihat nilai mahasiswa
Buatlah file indexdosen.php di folder web dengan scrip berikut :
Kemudian buat file home_dosen didalam folder konten/konten_dosen untuk masuk
ke menu dosen dengan scrip berikut :
Buat data_soal.php di folder konten_dosen untuk bisa menambahkan soal seperti
scrip berikut :
Buat data_nilai.php di folder konten_dosen untuk bisa melihat nilai seperti scrip
berikut:
Buat profil.php di folder konten_dosen untuk bisa melihat profil dosen seperti scrip
berikut:
Buat chart.php di folder konten_dosen untuk bisa melihat grafik nilai mahasiswa
seperti scrip berikut :
Buat logout.php di folder konten_dosen untuk bisa keluar dari halaman dosen seperti
scrip berikut :
c. Mahasiswa
mahasiswa hanya bisa mengerjakan soal dan melihat nilainya.
Buatlah file indexmhs.php di folder web dengan scrip berikut :
Buat home_mhs.php di folder konten_mhs untuk bisa mencari data soal
berdasarkan nama dosen atau kode matkul seperti scrip berikut :
Buat profil.php di folder konten_mhs untuk bisa melihat profil mhs seperti scrip
berikut :
Buat data_soal.php di folder konten_mhs untuk bisa melihat soal seperti scrip
berikut :
Buat data_nilai.php di folder konten_mhs untuk bisa melihat nilai seperti scrip
berikut :
Buat kerjakan_soal.php di folder konten_mhs untuk bisa mengerjakan soal
seperti scrip berikut :
Buat logout.php di folder konten_mhs untuk bisa keluar dari halaman mhs seperti
scrip berikut :
Demikian script-script yang perlu ditulis untuk membuat kuis online dengan login yang memiliki tiga hak
akses dengan fungsi yang berbeda-beda, grafik bar, dan integrasi ke hardware dengan qr code.