63
PEMBUATAN APLIKASI MODUL ONLINE BERBASIS WEB UNTUK MEDIA PEMBELAJARAN DI POLITEKNIK NEGERI BALIKPAPAN PROPOSAL TUGAS AKHIR ETI SUSANTI NIM : 140309249193 POLITEKNIK NEGERI BALIKPAPAN PROGRAM STUDI TEKNIK ELEKTRONIKA 2017

PEMBUATAN APLIKASI MODUL ONLINE BERBASIS WEB …spmi.poltekba.ac.id/spmi/fileTA/140309249193_2017.pdf · Perkembangan yang semakin canggih dimana banyak masyarakat yang mencari informasi

Embed Size (px)

Citation preview

PEMBUATAN APLIKASI MODUL ONLINE BERBASIS WEB

UNTUK MEDIA PEMBELAJARAN DI POLITEKNIK NEGERI

BALIKPAPAN

PROPOSAL TUGAS AKHIR

ETI SUSANTI

NIM : 140309249193

POLITEKNIK NEGERI BALIKPAPAN

PROGRAM STUDI TEKNIK ELEKTRONIKA

2017

PEMBUATAN APLIKASI MODUL ONLINE BERBASIS WEB

UNTUK MATA KULIAH JARINGAN KOMPUTER DI

POLITEKNIK NEGERI BALIKPAPAN

TUGAS AKHIR

KARYA TULIS INI DIAJUKAN SEBAGAI SALAH SATU SYARAT UNTUK

MEMPEROLEH GELAR AHLI MADYA DARI POLITEKNIK NEGERI

BALIKPAPAN

ETI SUSANTI

140309249193

POLITEKNIK NEGERI BALIKPAPAN

JURUSAN TEKNIK ELEKTRONIKA

BALIKPAPAN

v

Karya ilmiah ini kupersembahkan kepada

Ayahanda dan Ibunda tercinta

Syahidin Dan Suriati

Bapak terhebatku

Hendi

Saudariku yang kusayangi

Elis sanjaya

Syahida

Hesti Sri Yuliani

Reni Aulia Ramadhani

Sahabatku tersayang

Ninike Swanti Tiara dan Alfia Oktaviani Sundari

Anak Kost dan Saudara seperjuangan

M.Busairi

Santia Lois Pundu

Suriansyah

Dwi Sampurno

Muh. Agung Adiat Sah

Shoimah

Aditya Saputra

Zulkhoiri

Mentor

Doddy Pratama

Teman-teman Teknik Elektronika Angkatan 2014

vii

ABSTRACT

The development of increasingly sophisticated where many people are looking

for information in the internet without having to switch places, as long as the position

is still perfectly internet. Web is one of the applications that use browser technology

to run web dan can be accessed via the internet and computer netwoks.

Learning materials are often used in teaching and learning process on campus

especially Network Engineering Department of Cisco. Cisco is a learning model

which material can be obtained through the web but nowadays Cisco material is only

contained in English so it makes it difficult for students to understand the material.

The making of Web-Based Online Modules using PHP (Hypertext

Preprocessor), CSS (Cascading Style Sheets), HTML (HyperText Markup Language),

Notepad ++ and MySQL. Web-based online learning module is deliberately created

to facilitate lecturers and students in the process of teaching and learning on campus.

Keywords: Website,Cisco, PHP, CSS, HTML, Notepad ++ and MySQL

viii

ABSTRAK

Perkembangan yang semakin canggih dimana banyak masyarakat yang mencari

informasi diinternet tanpa harus berpindah tempat , selama posisi masih dijangkau

jaringan internet. Web adalah salah satu aplikasi yang menggunakan teknologi

browser unruk menjalankan web dan dapat diakses melalui jaringan internet dan

computer.

Materi Pembelajaran yang sering digunakan dalam proses belajar mengajar di

kampus khususnya Jurusan Teknik Komputer Jaringan adalah Cisco. Cisco

merupakan model belajar yang materinya dapat diperoleh melalui web tapi saat ini

materi Cisco hanya terdapat dalam bahasa inggris sehingga menyulitkan mahasiswa

dalam memahami materi.

Pembuatan Aplikasi Modul Online Berbasis Web menggunakan PHP

(Hypertext Preprocessor), CSS (Cascading Style Sheets), HTML (HyperText Markup

Language), Notepad++ dan MySQL. Modul belajar online yang berbasis web ini

sengaja dibuat untuk mempermudah dosen dan mahasiswa dalam proses belajar

mengajar di kampus .

Kata Kunci : Website, Cisco, PHP,CSS,HTML,Notepad++ dan MySQL

ix

KATA PENGANTAR

Puji syukur kepada Tuhan Yang Maha Esa yang telah memberikan rahmat dan

karunianya, sehingga penulis dapat menyelesaikan Tugas Akhir dengan judul

“Pembuatan Aplikasi Modul Online Berbasis Web Untuk Mata Kuliah Jaringan

Komputer Di Politeknik Negeri Balikpapan” . Pembuatan tugas akhir ini merupakan

sebuah syarat kelulusan pada program D3 .

Dengan selesainya Tugas Akhir ini tidak terlepas dari bantuan banyak pihak.

Untuk itu penulis mengucapkan banyak terima kasih, kepada:

1. Drs.Ramli, SE,MM. selaku Direktur Politeknik Negeri Balikpapan.

2. Drs. Suhaedi, M.T. selaku Kaprodi Jurusan Teknik Elektronika.

3. Ali Abrar S.Si, MT. selaku Dosen Pembimbing 1 atas bimbingan dan saran-

sarannya.

4. Drs. Armin, M.T. selaku Dosen Pembimbing 2 atas bimbingan dan saran-

sarannya.

5. Seluruh Mahasiswa Politeknik Negeri Balikpapan terutama Jurusan Teknik

Elektronika , Khususnya konsentrasi Teknik Komputer dan Jaringan atas seluruh

bantaunnya.

6. Kedua Orang Tua dan Saudara-Saudara Tercinta atas doa dan motivasi.

Akhir dari kesempatan ini Penulis menyampaikan terima kasih kepada semua

pihak yang tidak dapat disebutkan satu-persatu yang turut membantu Penulis dalam

upaya menyelesaikan Tugas Akhir ini. Penulis mengharapkan kritik dan saran

kepada pembaca dalam memperbaiki dan menyempurnakan Tugas Akhir

selanjutnya.

Balikpapan, 10 Juli 2017

ETI SUSANTI

x

DAFTAR ISI

HALAMAN

COVER ........................................................................................................................ i

LEMBAR PENGESAHAN ....................................................................................... ii

SURAT PERNYATAAN .......................................................................................... iii

SURAT PERNYATAAN PUBLIKASI ................................................................... iv

LEMBAR PERSEMBAHAN .................................................................................... v

ABSTRAK ................................................................................................................. vii

KATA PENGANTAR ................................................................................................ ix

DAFTAR ISI ................................................................................................................ x

DAFTAR GAMBAR ................................................................................................ xiii

DAFTAR TABEL .................................................................................................... xiv

BAB I PENDAHULUAN ............................................................................................ 1

1.1Latar Belakang ...................................................................................................... 1

1.2Rumusan Masalah ................................................................................................ 2

1.3Batasan Masalah ................................................................................................... 2

1.4Tujuan Penelitian Tugas Akhir ............................................................................. 3

1.5Manfaat Penelitian Tugas Akhir ........................................................................... 3

BAB II LANDASAN TEORI ..................................................................................... 4

2.1 Pengertian Website .............................................................................................. 4

2.2 Web Server .......................................................................................................... 5

2.2.1 Pengertian XAMPP .......................................................................................... 5

2.2.2 Pengertian Apache ............................................................................................ 6

xi

2.2.1 Pengertian MAMP ............................................................................................ 6

2.3 Pengertian PHP MyAdmin ................................................................................... 7

2.4 Pengertian MySQL .............................................................................................. 7

2.5 Pengertian PHP ................................................................................................... 9

2.6 Pengertian CSS .................................................................................................. 11

2.7 Pengertian Perl ................................................................................................... 12

2.8 Pengertian HTML .............................................................................................. 12

2.8 Pengertian Notpad++ ......................................................................................... 13

2.6 Web Browser ..................................................................................................... 13

BAB III METODOLOGI PENELITIAN ............................................................... 14

3.1 Jenis Penelitian ................................................................................................... 14

3.2 Tempat dan Waktu Penelitian ........................................................................... 14

3.3 Perangkat Keras dan Perangkat Lunak yang Digunakan ................................... 14

3.3.1 Perangkat Keras ........................................................................................ 14

3.3.2 Perangkat Lunak ...................................................................................... 14

3.4 Metode Pengumpulan Data ................................................................................. 15

3.4.1 Penjelasan Mengenai Flowchart ............................................................... 16

3.5 Perancangan Aplikasi ......................................................................................... 18

3.5.1 Flowchart Login Admin .......................................................................... 18

3.5.2 Flowchart Login User .............................................................................. 18

3.5.3 Flowchart Halaman Admin...................................................................... 19

3.5.4 Flowchart Halaman User ......................................................................... 20

3.5.4 Flowchart Download Materi .................................................................... 21

xii

3.6 Use Case Diagram .............................................................................................. 21

3.7 Entity Relationship Diagram .............................................................................. 22

3.8 Tabel Perancangan Database .............................................................................. 23

BAB III HASIL PEMBAHASAN ............................................................................ 24

4.1 Halaman Login ................................................................................................... 24

4.2 Tampilan Admin ................................................................................................ 24

4.3 Tampilan Upload Materi .................................................................................... 25

4.4 Tampilan User .................................................................................................... 26

BAB V KESIMPULAN ............................................................................................ 27

5.1 Kesimpulan ........................................................................................................ 27

5.1 Saran .................................................................................................................... 27

DAFTAR PUSTAKA ................................................................................................ 28

LAMPIRAN ............................................................................................................... 29

xiii

DAFTAR GAMBAR

HALAMAN

Gambar 2.1 Website ..................................................................................................... 4

Gambar 2.2 XAMPP .................................................................................................... 6

Gambar 3.1 Metode Pengumpulan Data .................................................................... 15

Gambar 3.1 Flowchart Login Admin .......................................................................... 16

Gambar 3.1 Flowchart Halaman Admin ..................................................................... 17

Gambar 3.1 Flowchart Download Materi ................................................................... 18

Gambar 3.1 Use Case .................................................................................................. 19

Gambar 3.1 Entity Relationship Diagram ................................................................... 16

xiv

DAFTAR TABEL

HALAMAN

Gambar 3.1 Perangkat Keras ...................................................................................... 10

Gambar 3.2 Tabel Admin ........................................................................................... 20

Gambar 3.3 Tabel Modul ............................................................................................ 20

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Sebagian orang sangat bergantung terhadap internet untuk berbagai keperluan.

Tidak dapat dipungkiri bahwa keberadaan internet sangat mendukung manusia dalam

melakukan berbagai aktifitas, salah satunya adalah sebagai sarana dalam penyediaan

bahan belajar untuk mahasiswa. Dengan memperhatikan keuntungan yang diperoleh

dari perkembangan Internet melalui Modul Pembelajaran Berbasis Web ini,

Mahasiswa dapat aktif belajar mandiri dengan hanya mengakses mata kuliahnya

melalui layar komputer yang terhubung dengan jaringan internet.

Website sering juga disebut Web, dapat diartikan suatu kumpulan-kumpulan

halaman yang menampilkan berbagai macam informasi teks, data, gambar diam

ataupun bergerak, data animasi, suara, video maupun gabungan dari semuanya, baik

itu yang bersifat statis maupun yang dinamis, yang dimana membentuk satu

rangkaian bangunan yang saling berkaitan dimana masing - masing dihubungkan

dengan jaringan halaman atau hyperlink. Atau definisi website adalah kumpulan dari

berbagai macam halaman situs, yang terangkum didalam sebuah domain atau juga

subdomain, yang lebih tempatnya berada di dalam WWW (World Wide Web) yang

tentunya terdapat di dalam Internet. Halaman website biasanya berupa dokumen yang

ditulis dalam format HTML (Hyper Text Markup Language ), yang bisa diakses

melalui HTTP, HTTP adalah suatu protokol yang menyampaikan berbagai informasi

dari server website untuk ditampilkan kepada para user atau pemakai melalui web

browser.

Salah satu Materi pembelajaran yang sering digunakan dalam proses belajar

mengajar di Politeknik Negeri Balikpapan khususnya Jurusan Teknik Komputer dan

Jaringan adalah Cisco. Cisco sendiri merupakan model belajar dengan konsep e-

learning yang seluruh materinya dapat diperoleh melalui Web. Program ini juga

dilengkapi dengan praktek langsung di lab dengan memanfaatkan

2

perangkat networking dari Cisco Systems. Dengan memanfaatkan metode e-learning

ada banyak kelebihan yang dapat ditawarkan oleh program ini. Secara umum,

program ini menawarkan .

1. Online management system untuk penyampaian kurikulum, ujian, materi bagi para

instruktur dan pelatihan

2. Instruktur dan siswa dimana saja akan mendapatkan materi kurikulum yang sama

dan diakses oleh peserta program ini di seluruh dunia

3. Menitikberatkan pada praktek langsung mempergunakan perangkat networking

4. Kesempatan untuk mendapatkan sertifikat yang diakui internasional

5. Melatih para siswa dengan keahlian di bidang internet yang sangat dibutuhkan di

era Internet saat ini dan masa depan.

Namun saat ini, Materi Pembelajaran Cisco hanya dalam bahasa Inggris sehingga

menyulitkan mahasiswa dalam memahami materi.

1.2 Rumusan Masalah

Sesuai dengan latar belakang yang telah diuraikan diatas pada pembahasan latar

belakang masalah,maka rumusan masalah yang akan diselesaikan adalah :

1. Mata Kuliah Jaringan Komputer belum memiliki Modul Online berbasis web

untuk memudahkan mahasiswa dan dosen dalam proses pembelajaran di

kampus.

2. Modul Online yang digunakan selama ini masih menggunakan bahasa inggris

sehingga susah untuk dipahami.

1.3 Batasan Masalah

Agar pembahasan ini tidak menyimpang dari rumusan masalah yang telah

ditentukan maka perlu di adakan pembatasan masalah, yaitu:

1. Penelitian untuk tugas akhir ini membahas mengenai Website

2. Dan penelitian ini membahas mengenai Modul Online untuk mata kuliah

Jaringan Komputer atau Cisco.

3

1.4 Tujuan Penelitian Tugas Akhir

1. Mempermudah sistem pembelajaran antara Dosen dan Mahasiswa di

Politeknik Negeri Balikpapan.

2. Membuat Modul Online menggunakan Bahasa Indonesia yang lebih mudah

dipahami.

1.5 Manfaat Penelitian Tugas Akhir

1. Memudahkan Dosen dalam memberikan materi kepada mahasiswa .

2. Memudahkan mahasiswa dalam mendapatkan bahan untuk belajar .

4

BAB II

LANDASAN TEORI

2.1 Pengertian Website

Website adalah suatu media publikasi elektronik yang terdiri dari halaman –

halaman web yang terhubung satu dengan yang lain menggunakan link yang

diletakkan pada suatu teks atau image.

Gambar 2.1 Website

Fungsi Web

Secara umum situs web mempunyai fungsi sebagai berikut:

1. Fungsi komunikasi

Situs web yang mempunyai fungsi komunikasi pada umumnya adalah situs

web dinamis. Karena dibuat menggunakan pemograman web (server

side) maka dilengkapi fasilitas yang memberikan fungsi-fungsi komunikasi,

seperti web mail, form contact, chatting form, dan yang lainnya.

2. Fungsi informasi

Situs web yang memiliki fungsi informasi pada umumnya lebih menekankan

pada kualitas bagian kontennya, karena tujuan situs tersebut adalah

menyampaikan isisnya. Situs ini sebaiknya berisi teks dan grafik yang dapat

di download dengan cepat. Pembatasan penggunaan animasi gambar dan

5

elemen bergerak sepertio shocwave dan java diyakini sebagai langkah yang

tepat, diganti dengan fasilitas yang memberikan fungsi informasi

seperti news, profile company, library, reference,dll.

3. Fungsi entertainment

Situs web juga dapat memiliki fungsi entertainment/hiburan. Bila situs web

kita berfungsi sebagai sarana hiburan maka penggunaan animasi gambar dan

elemen bergerak dapat meningkatkan mutu presentasi desainnya, meski tetap

harus mempertimbangkan kecepatan downloadnya. Beberapa fasilitas yang

memberikan fungsi hiburan adalah game online, film online, music online,

dan sebagainya.

4. Fungsi transaksi

Situs web dapat dijadikan sarana transaksi biisnis, baik barang, jasa, atau

lainnya. Situs web ini menghubungkan perusahaan, konsumen, dan

komunitas tertentu melalui transaksi elektronik. Pembayarannya bisa

menggunakan kartu kredit, transfer, atau dengan membayar secara langsung.

2.2 Web Server

2.2.1 Pengertian XAMPP

XAMPP adalah perangkat lunak ( free software) bebas, yang mendukung

untuk banyak sistem operasi, yang merupakan kompilasi dari beberapa program.

Fungsi XAMPP sendiri adalah sebagai server yang berdiri sendiri (localhost), yang

terdiri beberapa program antara lain : Apache HTTP Server, MySQL database, dan

penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama

XAMPP sendiri merupakan singkatan dari X (empat sistem operasi apapun),

Apache, MySQL, PHP dan Perl.

6

Gambar 2.2 XAMPP

2.2.2 Pengertian Apache

Apache adalah sebuah nama web server yang bertanggung jawab pada

request response HTTP (HyperText Transfer Protocol)dan logging informasi secara

detail (kegunaan basicnya). Selain itu, Apache juga diartikan sebagai suatu web

server yang kompak, modular, mengikuti standar protokol HTTP (HyperText

Transfer Protocol), dan tentu saja sangat digemari. Kesimpulan ini bisa didapatkan

dari jumlah pengguna yang jauh melebihi para pesaingnya.

2.2.3 Pengertian MAMP

MAMP adalah singkatan dari : Macintosh, Apache, MySQL dan PHP.

Menginstal MAMP di Mac OS X sangat mudah hanya dengan beberapa klik mouse,

Anda sudah dapat menginstal Apache, PHP dan MySQL untuk Mac OS X.MAMP

akan menginstal local server dalam hitungan detik pada komputer Mac OS X, baik itu

PowerBook atau iMac. Seperti paket-paket yang sama yang dari Windows dan Linux,

MAMP bersifat gratis atau free of charge.

7

2.3 Pengertian PHP MyAdmin

Menurut sebuah modul kuliah Graphical User Interface I yang berjudul Belajar

MySQL dengan PHPMyAdmin oleh Akhmad Sofwan phpmyadmin adalah sebuah

aplikasi open source yang berfungsi untuk memudahkan manajemen MySQL. Dalam

PHPMyAdmin, kita dapat membuat sebuah database, tabel, dan konfigurasi lainnya

dengan menggunakan metode GUI.

PHPMyAdmin adalah perangkat lunak bebas yang ditulis dalam bahasa

pemrograman PHP yang digunakan untuk menangani administrasi Melalui situs

http://localhost/phpmyadmin. PHPMyAdmin mendukung berbagai operasi MySQL,

diantaranya (mengelola basis data, tabel-tabel, bidang (fields), relasi (relations),

indeks, pengguna (users), perijinan (permissions), dan lain-lain).

Beberapa fitur dalam phpMyAdmin:

1. Tampilannya berbasis web.

2. Impor data dari CSV dan SQL

3. Ekspor data ke berbagai format: CSV, SQL, XML, PDF, ISO / IEC 26300 -

OpenDocument Text dan Spreadsheet, Word, Excel, LATEKS dan lain-lain

4. Membuat grafik PDF dengan tampilan basis data.

5. Membuat kompleks query menggunakan Query-by-example. (QBE)

6. Pencarian global dalam basis data.

7. Transformasi data disimpan ke dalam format yang menggunakan satu set fungsi

yang telah ditetapkan, seperti menampilkan data blob-data atau download-link,

dsb (Mulyasari, 2015).

2.4 Pengertian MySQL

MySQL adalah salah satu jenis database server yang sangat terkenal. MySQL

menggunakan bahasa SQL untuk mengakses database nya. Lisensi Mysql adalah

FOSS License Exception dan ada juga yang versi komersial nya. Tag Mysql adalah

“The World's most popular open source database”. MySQL dimiliki dan disponsori

oleh sebuah perusahaan komersial Swedia MySQL AB, dimana memegang hak cipta

8

hampir atas semua kode sumbernya. Kedua orang Swedia dan satu orang Finlandia

yang mendirikan MySQL AB adalah: David Axmark, Allan Larsson, dan Michael

"Monty" Widenius.

Kehandalan suatu sistem basisdata (DBMS) dapat diketahui dari cara kerja

pengoptimasi-nya dalam melakukan proses perintah-perintah SQL yang dibuat oleh

pengguna maupun program-program aplikasi yang memanfaatkannya. Sebagai

peladen basis data, MySQL mendukung operasi basisdata transaksional maupun

operasi basisdata non-transaksional. Pada modus operasi non-transaksional, MySQL

dapat dikatakan unggul dalam hal unjuk kerja dibandingkan perangkat lunak peladen

basisdata kompetitor lainnya

MySQL memiliki beberapa keistimewaan, antara lain :

1. Portabilitas. MySQL dapat berjalan stabil pada berbagai sistem operasi seperti

Windows, Linux, FreeBSD, Mac Os X Server, Solaris, Amiga, dan masih banyak

lagi.

2. Perangkat lunak sumber terbuka. MySQL didistribusikan sebagai perangkat

lunak sumber terbuka, dibawah lisensi GPL sehingga dapat digunakan secara

gratis.

3. Multi-user. MySQL dapat digunakan oleh beberapa pengguna dalam waktu yang

bersamaan tanpa mengalami masalah atau konflik.

4. 'Performance tuning', MySQL memiliki kecepatan yang menakjubkan dalam

menangani query sederhana, dengan kata lain dapat memproses lebih banyak

SQL per satuan waktu.

5. Ragam tipe data. MySQL memiliki ragam tipe data yang sangat kaya, seperti

signed / unsigned integer, float, double, char, text, date, timestamp, dan lain-lain.

6. Perintah dan Fungsi. MySQL memiliki operator dan fungsi secara penuh yang

mendukung perintah Select dan Where dalam perintah (query).

7. Keamanan. MySQL memiliki beberapa lapisan keamanan seperti level

subnetmask, nama host, dan izin akses user dengan sistem perizinan yang

mendetail serta sandi terenkripsi.

9

8. Skalabilitas dan Pembatasan. MySQL mampu menangani basis data dalam skala

besar, dengan jumlah rekaman (records) lebih dari 50 juta dan 60 ribu tabel serta

5 miliar baris. Selain itu batas indeks yang dapat ditampung mencapai 32 indeks

pada tiap tabelnya.

9. Konektivita MySQL dapat melakukan koneksi dengan klien menggunakan

protokol TCP/IP, Unix soket (UNIX), atau Named Pipes (NT).

10. Lokalisasi. MySQL dapat mendeteksi pesan kesalahan pada klien dengan

menggunakan lebih dari dua puluh bahasa. Meski pun demikian, bahasa

Indonesia belum termasuk di dalamnya.

11. Antar Muka. MySQL memiliki antar muka (interface) terhadap berbagai aplikasi

dan bahasa pemrograman dengan menggunakan fungsi API (Application

Programming Interface).

12. Klien dan Peralatan. MySQL dilengkapi dengan berbagai peralatan (tool)yang

dapat digunakan untuk administrasi basis data, dan pada setiap peralatan yang

ada disertakan petunjuk online.

13. Struktur tabel. MySQL memiliki struktur tabel yang lebih fleksibel dalam

menangani ALTER TABLE, dibandingkan basis data lainnya semacam

PostgreSQL ataupun Oracle.

2.5 Pengertian PHP

PHP secara umum dikenal sebagai bahasa pemograman script yang membuat

dokumen HTML secara on the fly yang di eksekusi di server web, dokumen HTML

yang di hasilkan dari suatu aplikasi bukan dokumen HTML yang dibuat dengan

menggunakan editor tes atau editor HTML, dikenal juga sebagai bahasa pemograman

server side.

Dengan menggunakan PHP maka maintenance suatu situs web menjadi lebih

mudah. Proses update data dapat dilakukan dengan menggunakan aplikasi yang

dibuat dengan menggunakan script PHP.

10

PHP/FI merupakan nama awal dari PHP. PHP – Personal Home Page, FI

adalah Form Interface. Dibuat pertama kali oleh Rasmus Lerdoff. PHP, awalnya

merupakan program CGI yang dikhususkan untuk menerima input melalui form yang

ditampilkan dalam browser web. Software ini disebarkan dan dilisensikan sebagai

perangkan lunak Open Source (Sidik, 2014).

Semua modul-modul PHP adalah sebagai berikut berikut :

1. MySQL (php-mysql) - Sebuah ekstensi untuk aplikasi PHP yang menggunakan

database MySQL.

2. PostgreSQL (php-pgsql) - Sebuah ekstensi untuk database PostgreSQL untuk

PHP.

3. MongoDB (php-pecl-mongo) - Seorang pengemudi untuk database MongoDB.

4. SQLite (php-sqlite) - Extension untuk SQLite Database Engine.

5. Memcache (php-pecl-memcache) - memcached caching daemon.

6. Memcached (php-pecl-memcached) - memcached caching daemon.

7. GD (php-gd) - GD ekstensi untuk aplikasi PHP untuk melayani grafis.

8. XML (php-xml) - Parser XML untuk aplikasi PHP.

9. Mbstring (php-mbstring) - ekstensi mbstring digunakan untuk menangani multi-

string byte dalam aplikasi PHP.

10. Mcrypt (php-mcrypt) - Sebuah perpustakaan mcrypt untuk script PHP.

11. APC (php-pecl-apc) - modul APC digunakan untuk mengoptimalkan dan cache

kode PHP.

12. CLI (php-cli) - antarmuka baris perintah untuk PHP.

13. PEAR (php-pear) - Aplikasi kerangka Repositori untuk PHP.

14. PDO (php-PDO) - modul akses database untuk aplikasi PHP

Kelebihan PHP

1. Di dalam server, kita dapat mengakses sesuatu, misalnya database. Ini

memungkinkan kita untuk menyortir sejumlah data yang kompleks dan besar

sehingga klien tidak harus mendownload halaman web terlebih dahulu.

11

2. PHP dapat melakukan koneksi ke berbagai macam software basis data.

3. PHP adalah bahasa scripting yang lintas platform, yaitu dapat berjalan di

berbagai sistem operasi.

4. Hanya informasi output saja yang dikirim ke browser klien, bukan scriptnya. Ini

berarti bahwa kita dapat membuat script yang aman dari pembacaan atau

pembajakan end user.

5. Script PHP bersifat netral dan tidak tergantung pada kemampuan yang dimiliki

browser, jadi PHP bisa dijalankan di brwoser apapun.

6. PHP bisa di sisipkan script lainnya seperti javascript, sehingga tampilan web

dapat lebih menarik.

2.6 Pengertian CSS

CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi

yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan

desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna),

margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain.

Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing

(jarak) disebut juga “styles”. Cascading Style Sheets juga bisa berarti meletakkan

styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet

yang memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur

baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat

menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap

paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda

dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila

diperlukan.

12

2.7 Pengertian Perl

Perl adalah bahasa pemrograman untuk segala keperluan, dikembangkan

pertama kali oleh Larry Wall di mesin Unix. Perl dirilis pertama kali pada tanggal 18

Desember 1987 ditandai dengan keluarnya Perl 1. Pada versi-versi selanjutnya, Perl

tersedia pula untuk berbagai sistem operasi varian Unix (SunOS, Linux, BSD, HP-

UX), juga tersedia untuk sistem operasi seperti DOS, Windows, PowerPC, BeOS,

VMS, EBCDIC, dan PocketPC. Dukungan terhadap pemrograman berbasis OOP

(object oriented programming) ditambahkan pada Perl 5, yang pertama kali dirilis

pada tanggal 31 Juli 1993. Proyek pengembangan Perl 6 dimulai pada tahun 2000,

dan masih berlangsung hingga kini tanpa tanggal yang jelas kapan mau dirilis. Ini

dikatakan sendiri oleh Larry Wall dalam satu pidatonya yang dikenal dengan seri

The State of the Onion.

2.8 Pengertian HTML

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa

pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang

kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah

penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link

antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau

link yang menghubungkan antar situs dalam dunia internet.

Supaya dapat menghasilkan tampilan wujud yang terintegerasi Pemformatan

hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman

web dengan perintah perintah HTML. HTML merupakan sebuah bahasa yang

bermula bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbirtan

yang disebut Standard Generalized Markup Language (SGML).

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan

informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui

layananweb.

13

Fungsi HTML yang lebih spesifik yaitu :

1. Membuat halaman web.

2. Menampilkan berbagai informasi di dalam sebuah browser Internet.

3. Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

2.9 Pengertian Notpad++

Notepad++ adalah program aplikasi pengembang yang berguna untuk

mengedit teks dan skrip kode pemrograman. Perangkat lunak komputer ini memiliki

kelebihan pada peningkatan kemampuan sebuah program text editor, lebih dari

sekedar program Notepad bawaan Windows. Notepad++ bisa mengenal tag dan kode

dalam berbagai bahasa pemrograman. Fitur pencarian tingkat lanjut dan pengeditan

teks yang tersedia juga cukup ampuh, sangat membantu tugas seorang programmer

atau developer dalam menyelesaikan skrip kode programnya. Program Notepad++

banyak diaplikasikan dan digunakan oleh kalangan pengguna komputer di bidang

pemrograman aplikasi desktop dan web. Notepad++ merupakan software gratis

(opensource).

Gambar 2.3 Notepad++

2.10 Web Browser

Web Browser merupakan aplikasi atau perangkat lunak yang yang berfungsi

untuk menampilkan informasi yang berasal dari halaman web server. Web Browser

mampu menampilkan file berupa gambar, audio, video, XML, dan sebagainya.

Beberapa contoh web browser yang sering digunakan antara lain, Mozilla Firefox,

Google Chrome, Internet Explorer, Opera Mini dan lain-lain.

14

BAB III

METODOLOGI PENELITIAN

3.1 Jenis Penelitian

Jenis penelitian adalah Pembuatan Modul Untuk media pembelajaran yang

berbasis Web Yang bertujuan untuk memudahkan proses belajar mengajar.

3.2 Tempat dan Waktu pelaksanaan

Tempat penelitian dilaksanakan di Politeknik Negeri Balikpapan Jln. Soekarno

Hatta km 8 Balikpapan Utara. Waktu penelitian mulai bulan Maret 2017 sampai

dengan Juli 2017.

3.3 Peralatan dan bahan yang digunakan

Penelitian tentang Pembuatan Modul Online Berbasis Web Untuk Mata Kuliah

Jaringan Komputer di Politeknik Negeri Balikpapan, terdapat perangkat lunak dan

perangkat keras yang akan di gunakan dalam proses penelitian dan pengerjaan tugas

akhir.

3.3.1 Perangkat Keras

Perangkat keras yang digunakan dalam penelitian ini adalah Laptop Asus X453M

dengan spesifikasi Processor Intel BYT-M dual-core 2,50GHz, Memory (RAM) 2

GB, dan Strage hard disk 500GB.

3.3.2 Perangkat Lunak

Berikut adalah daftar perangkat lunak yang di butuhkan, beserta daftar harganya.

15

Tabel 3.2 Tabel Perangkat Lunak

No Perangkat lunak Harga

1 Xampp Free

2 Notpead++ Free

3 PHP dan MySQL Free

4 HTML Free

5 CSS Free

Total Harga /Rp. 0,00

3.4 Metode Pengumpulan Data

Sebelum melakukan perancangann dan Pembuatan Modul Online Berbasis Web

Untuk Mata Kuliah Jaringan Komputer di Politeknik Negeri Balikpapan, perlu

adanya perancangan gambaran prinsip kerja dari program yang akan di buat, agar

mengetahui bagaimana program ini bekerja sesuai dengan harapan penulis. Di bawah

ini merupakan flowchart tentang metode pengumpulan data.

16

Gambar 3.1 Metode Pengumpulan Data

3.4.1 Penjelasan Mengenai Flowchart

1. Menentukan Konsep dan Judul TA

Untuk menjelaskan alur ini dimulai dari mencari konsep apa yang akan kita

buat, dan konsep tersebut di diskusikan ke pembimbing, setelah diskusi

Membuat Proposal TA

Mulai

Menentukan Kosep dan

judul TA

Proposal TA

SELESAI

Ditolak

Pembuatan Laporan TA

Uji Coba

Proses Pembuatan Aplikasi

Website

Diterima

Mengidentifikasi Masalah

Mengumpulkan Daftar

Refrensi

17

dilakukan, selanjutnya menentukan Judul Tugas Akhir. Diskusi kembali ke

dosen pembimbing mengenai Judul yang kita pilih

2. Mengidentifikasi Masalah

3. Mengumpulkan daftar refrensi

4. Membuat Proposal TA

Setelah judul ditentukan, Lanjut untuk membuat proposal Tugas Akhir dan

kemudian mencari referensi .

5. Sidang Proposal Tugas Akhir

Setelah proposal disetujui oleh Dosen Pembimbing, selanjutnya lanjut ke

Sidang Proposal dan Apabila tidak disetujui maka kembali mengajukan judul

ke pembimbing tetapi apabila disetujui lanjut ke proses pembuata website.

6. Proses Pembuatan Website

Setelah alat dan bahan sudah siap maka selanjutnya fokus untuk proses

pembuatan website dengan membuat tampilan, selanjutnya memasukkan

coding di web editor

7. Uji Coba Website

Setelah Semua selesai, selanjutnya melakukan pengujian kepada website

yang dibuat.

8. Pembuatan Laporan Tugas Akhir

Setelah melakukan pengujian, jika pengujian tidak berhasil, kembali

Konfigurasi awal, tetapi jika berhasil, lanjut untuk penulisan/pembuatan

tugas akhir

9. Penyusunan Laporan Tugas Akhir

Setelah pembuatan/penulisan Tugas Akhir telah di setujui oleh pembimbing,

selanjutnya pembuatan Laporan Tugas Akhir.

10. Sidang Tugas Akhir

Setelah semuanya selesai, selanjutnya mempersiapkan untuk sidang Tugas

Akhir.

18

3.5 Perancangan Aplikasi

3.5.1 Flowchart Login Admin

Aliran data login admin ini merupakan sebuah proses seorang admin untuk

dapat masuk kedalam menu admin. Sebelum masuk kedalam menu admin,admin

diharuskan menginput username dan password terlebih dahulu.

Gambar 3.2 Flowchart Login Admin

3.5.2 Flowchart Login User

Aliran data login user ini merupakan sebuah proses seorang admin untuk dapat

masuk kedalam menu user. Sebelum masuk kedalam menu admin,admin diharuskan

menginput username dan password terlebih dahulu.

19

Gambar 3.3 Flowchart Login Admin

3.5.3 Flowchart Halaman Admin

Aliran data ini adalah proses-proses yang dapat dilakukan oleh admin seperti

Upload dan Hapus Materi. Sebelum masuk kedalam menu admin,admin harus

melakukan login terlebih dahulu.

20

Gambar 3.4 Flowchart Halaman Admin

3.5.4 Flowchart Halaman User

Aliran data ini adalah proses-proses yang dapat dilakukan oleh User seperti

Download Materi. Sebelum masuk kedalam menu user, user harus melakukan login

terlebih dahulu.

Gambar 3.5 Flowchart Halaman User

21

3.5.5 Flowchart Download Materi

Aliran data ini adalah proses yang dapat dilakukan oleh User yaitu

mendownload materi.

Gambar 3.6 Flowchart Download Materi

3.6 Use Case Diagram

Use case merupakan sebuah gambaran fungsional dari suatu sistem. Use Case

diharapkan dapat memberitahu kegunaan sistem yang akan dibangun dan siapa saja

aktornya yang terlibat di dalam system tersebut.

22

Gambar 3.7 Use Case

3.7 Entity Relationship Diagram (ERD)

Merupakan suatu model untuk menjelaskan hubungan antar data dalam basis

data berdasarkan objek-objek dasar data yang mempunyai hubungan antar relasi.ERD

untuk memodelkan struktur data dan hubungan antar data, untuk menggambarkannya

digunakan beberapa notasi dan simbol.Menurut salah satu para ahli, Brady dan

Loonam (2010), Entity Relationship diagram (ERD) merupakan teknik yang

digunakan untuk memodelkan kebutuhan data dari suatu organisasi, biasanya oleh

System Analys dalam tahap analisis persyaratan proyek pengembangan system.

Gambar 3.8 Entity Relationship Diagram

23

3.8 Tabel Perancangan Database

Entitas / Tabel yang dibutuhkan :

1. Entitas / Tabel Admin

2. Entitas / Tabel Modul

Atribut / Field yang dibutuhkan :

Tabel 3.2Tabel Admin

Field Type

Nama Varchar ( 30 )

User Varchar ( 20 )

Password Varchar ( 20 )

Email Varchar ( 30 )

Akses Varchar ( 20 )

Tabel 3.3 Tabel Modul

Field Type

Id_upload Int (100)

Tanggal_upload Timestamp

Judul Varchar ( 255 )

File Varchar ( 255 )

24

BAB IV

HASIL PEMBAHASAN

4.1 Halaman Login

Halaman Login admin ini berisi tentang login seorang admin agar dapat masuk

ke aplikasi

Gambar 4.1 Menu Login

4.2 Tampilan Admin

Pada halaman tampilan Admin ini, terdapat menu home , Upload materi dan

menu logout. Pada halaman ini, Admin bisa mengupload dan menghapus

materi.

25

Gambar 4.2 Tampilan Admin

4.3 Tampilan Upload Materi

Pada halaman tampilan ini, Admin bisa mengupload materi dengan

memasukkan Nama file, selanjutnya pilih materi yang akan di Upload,

kemudian submit.

Gambar 4.3 Upload Materi

26

Apabila materi berhasil di upload maka akan muncul keterangan seperti gambar

dibawah.

Gambar 4.4 Materi Berhasil di Upload

4.4 Tampilan User

Pada tampilan User ini, dibuat untuk mahasiswa . sebelum masuk ke tampilan

ini, mahasiswa terlebih dahulu harus login yaitu dengan cara memasukkan user

dan password, selanjutnya apabila telah berhasil login, mahasiswa bisa

mendownload materi yang dibutuhkan.

Gambar 4.4 Tampilan User

27

BAB V

KESIMPULAN

5.1 Kesimpulan

Setelah menyelesaikan pembuatan Aplikasi Modul Online Berbasis Web Untuk

Media Pembelajaran di Politeknik Negeri Balikpapan dapat ditarik kesimpulan

sebagai berikut :

1. Aplikasi Modul Online Berbasis Web Untuk Media Pembelajaran ini

bertujuan untuk membantu Dosen dan Mahasiswa dalam proses belajar dan

mengajar di kampus.

2. Aplikasi Modul Online Berbasis Web Untuk Media Pembelajaran ini dibuat

dengan code HTML, PHP dan CSS

5.2 Saran

Dalam tugas akhir ini masih memiliki kekurangan.Oleh karena itu penulis

berharap adanya pengembangan di dalam Aplikasi ini agar dapat menjadi lebih

baik dalam meningkatkan kemajuan proses belajar dan mengajar di kampus.

28

DAFTAR PUSTAKA

Anhar,ST. (2010). PHP & MySql secara Otodidak. Media Kita. Jakarta Selatan.

Februariyanti, Herny dan Eri Zuliarso. (2012). Rancangan Bangun Sistem Perpustakaan

untuk Jurnal Elektronik. Semarang: Jurnal Teknologi Informasi DINAMIK. Vol. 17,

No. 2.

Yuhefizar, S.Kom., Ir.HAMooduto., Hidayat, Rahmat,ST.(2009). Cara Mudah

Membangun Website interaktif Menggunakan Content Management System

Joomla.PT Elex Media Komputindo. Jakarta.

Ridwan Sanjaya, Fredy Setyawan.( 2010). 101 Solusi Ahli Komputer-

Internet,Website, dan blog. C.V Andi Offset.

Fn Jovan.( 2012). Panduan Praktis Membuat WEB dengan PHP untuk Pemula.

MediaKita.

Sidik, Betha. (2014). Pemograman Web dengan PHP – Revisi Kedua. Bandung:

Informatika.

29

LAMPIRAN

1. HOME

<html>

<head>

<title>TUGAS AKHIR</title>

<link rel="stylesheet" type="text/css" href="js&css/tampilan.css"/>

<link rel="stylesheet" type="text/css" href="js&css/ukuranlayar.css"/>

<script type="text/javascript" src="js&css/tambahan.slideshow.js"></script>

<script type="text/javascript" src="js&css/gambar.slideshow.js"></script>

<script type="text/javascript" src="js/ddaccordion.js"></script>

<script type="text/javascript" src="js/screen.js"></script>

</head>

<body>

<div id="respon">

<div id="cont">

</div>

<div id="top">

<p align="center" ><strong> MEDIA PEMBELAJARAN</strong></p> <br>

<p align="center" ><strong> POLITEKNIK NEGERI

BALIKPAPAN</strong></p></div>

<div id="pilihanatas">

<ul id="pilihan">

<li><a href="home.html">HOME</a></li>

</ul>

</div>

30

<div class="left_content">

<div class="sidebarmenu">

<a class="menuitem submenuheader">MATERI</a>

<div class="submenu">

<ul>

<li><a href="jarkom.html">JARINGAN KOMPUTER</a></li>

<li><a href="dasarelka.html">DASAR ELEKTRONIKA</a></li>

<li><a href="bahasainggris.html">BAHASA INGGRIS</a></li>

</ul>

</div>

<a class="menuitem submenuheader" href="">SOAL LATIHAN</a>

<div class="submenu">

<ul>

<li><a href="soaljarkom.html">JARINGAN KOMPUTER</a></li>

<li><a href="soalelka.html">DASAR ELEKTRONIKA</a></li>

<li><a href="soalbahasa.html">BAHASA INGGRIS</a></li>

</ul>

</div>

</div>

</div>

<div id="center">

<div id="gambar-slideshow">

<div id="sampulslide">

<div id="slider" class="gantigambar">

<img src="images/gambar.jpg"alt="" />

<img src="images/gambar1.jpg"alt="" />

31

<img src="images/gambar2.jpg"alt="" />

<img src="images/gambar3.gif"alt="" />

</div>

</div>

</div>

</div>

<div id="right">

<h2 class="judul">Berita Hari Ini</h2>

<br>

<p> <h4> Pendidikan Karakter Bentuk Watak Mahasiswa</h4> </p>

<br>

<p align="justify"> Rektor Universitas Sulawesi Barat (Unsulbar) Dr

Akhsan Djalaluddin menyampaikan, pendidikan karakter sangat penting

posisinya untuk membentuk watak dan kepribadian terutama di lingkungan

civitas akademika perguruan tinggi.<a href="#" id="1-tampil"

class="tampilsembunyi" onclick="tampilsembunyi('1');return false;">Read

More</a>

<div id="1" class="readmore"> </p>

<p align="justify" > Pendidikan karakter di Unsulbar dapat mengambil

dari nilai-nilai luhur kearifan lokal budaya Mandar. Sejak lama di Mandar ini

sudah tertanam berbagai budaya yang sangat baik untuk kita lestarikan,

misalnya soal perjuangan penegakan keadilan dan kebenaran, Mandar

mewarisi nilai-nilai tersebut. </a></p>

<p><a href="#" class="sembunyi" onclick="tampilsembunyi('1');return

false;">Close</a></p>

</div>

<br>

<p> <h4> Alasan Skripsi Harus Cepat Beres</h4> </p>

<br>

32

<p align="justify"> Skripsi adalah salah satu syarat kelulusan

mahasiswa di tingkat sarjana. Artinya, tanpa skripsi, wisuda dan ijazah S-1

hanya akan ada dalam bayangan. Semakin cepat kamu menyelesaikan skripsi,

semakin cepat kamu memeroleh gelar sarjana.<a href="#" id="2-tampil"

class="tampilsembunyi" onclick="tampilsembunyi('2');return false;">Read

More</a>

<div id="2" class="readmore"></p>

<p align="justify" > Selama ini orangtuamu telah bersusah payah

membiayai sekolah dari mulai SD hingga kuliah. Tentu mereka ingin

menyaksikan anaknya sukses hingga mendapat gelar sarjana. Nah, ini adalah

momentum untuk membanggakan kedua orangtuamu. </a></p>

<p><a href="#" class="sembunyi" onclick="tampilsembunyi('2');return

false;">Close</a></p>

</div>

<br>

<p> <h4> Tips Mahasiswa Wujudkan Resolusi 2016</h4> </p>

<br>

<p align="justify"> Langkah pertama adalah buat timeline target pencapaian.

Misalnya, mau lulus kuliah pada Maret, wisuda April, cari kerja mulai Mei,

dan seterusnya. Dengan cara ini kamu punya jadwal dan perencanaan yang

jelas sehingga bisa mewujudkan apa yang diinginkan.<a href="#" id="3-

tampil" class="tampilsembunyi" onclick="tampilsembunyi('3');return

false;">Read More</a>

<div id="3" class="readmore"></p>

<p align="justify" > Ketika mencantumkan hal yang ingin dicapai, cobalah

untuk spesifik. Jangan hanya sebuah capaian yang abstrak, tapi sertakan juga

langkah-langkah untuk mencapai tujuan tersebut. Pertimbangkan juga

kemungkinan untuk mencapainya, apakah realistis atau tidak. </a></p>

<p><a href="#" class="sembunyi" onclick="tampilsembunyi('3');return

false;">Close</a></p>

33

</div>

</div>

</div>

</body>

</html>

2. JARKOM

<html>

<head>

<title>My Universitas</title>

<link rel="stylesheet" type="text/css" href="js&css/tampilan.css"/>

<link rel="stylesheet" type="text/css" href="js&css/ukuranlayar.css"/>

<script type="text/javascript" src="js&css/tambahan.slideshow.js"></script>

<script type="text/javascript" src="js&css/gambar.slideshow.js"></script>

<script type="text/javascript" src="js/ddaccordion.js"></script>

<script type="text/javascript" src="js/screen.js"></script>

</head>

<body>

<div id="respon">

<div id="cont">

</div>

<div id="top">

<p align="center" ><strong> MEDIA PEMBELAJARAN</strong></p> <br>

<p align="center" ><strong> POLITEKNIK NEGERI

BALIKPAPAN</strong></div>

<div id="pilihanatas">

<ul id="pilihan">

34

<li><a href="home.html">HOME</a></li>

</ul>

</div>

<div class="left_content">

<div class="sidebarmenu">

<a class="menuitem submenuheader">MATERI</a>

<div class="submenu">

<ul>

<li><a href="jarkom.html">JARINGAN KOMPUTER</a></li>

<li><a href="dasarelka.html">DASAR ELEKTRONIKA</a></li>

<li><a href="bahasainggris.html">BAHASA INGGRIS</a></li>

</ul>

</div>

<a class="menuitem submenuheader" href="">SOAL LATIHAN</a>

<div class="submenu">

<ul>

<li><a href="">JARINGAN KOMPUTER</a></li>

<li><a href="">DASAR ELEKTRONIKA</a></li>

<li><a href="">BAHASA INGGRIS</a></li>

</ul>

</div>

</div>

</div>

<div id="kkampus">

<br>

<br>

<br>

35

<li><a href='jarkom/modul1.html'> Lab – Troubleshooting Basic PPP with

Authentication </a></li>

</div>

</div>

</body>

</html>

3. DASAR ELEKTRONIKA

<html>

<head>

<title>My Universitas</title>

<link href="images/logo.png" rel='shortcut icon'/>

<link rel="stylesheet" type="text/css" href="js&css/tampilan.css"/>

<link rel="stylesheet" type="text/css" href="js&css/ukuranlayar.css"/>

<script type="text/javascript" src="js&css/tambahan.slideshow.js"></script>

<script type="text/javascript" src="js&css/gambar.slideshow.js"></script>

<script type="text/javascript" src="js/ddaccordion.js"></script>

<script type="text/javascript" src="js/screen.js"></script>

</head>

<body>

<div id="respon">

<div id="cont">

</div>

<div id="top">

<p align="center" ><strong> MEDIA PEMBELAJARAN</strong></p> <br>

36

<p align="center" ><strong> POLITEKNIK NEGERI

BALIKPAPAN</strong></div>

<div id="pilihanatas"

<ul id="pilihan">

<li><a href="home.html">HOME</a></li>

</ul>

</div>

<div class="left_content">

<div class="sidebarmenu">

<a class="menuitem submenuheader">MATERI</a>

<div class="submenu">

<ul>

<li><a href="jarkom.html">JARINGAN KOMPUTER</a></li>

<li><a href="dasarelka.html">DASAR

ELEKTRONIKA</a></li>

<li><a href="bahasainggris.html">BAHASA

INGGRIS</a></li>

</ul>

</div>

<a class="menuitem submenuheader" href="">SOAL

LATIHAN</a>

<div class="submenu">

<ul>

<li><a href="">JARINGAN KOMPUTER</a></li>

<li><a href="">DASAR ELEKTRONIKA</a></li>

<li><a href="">BAHASA INGGRIS</a></li>

</ul>

</div>

37

</div>

</div>

<div id="kkampus">

<br>

<br>

<br>

<div id="center">

<a href='elektronika/materi.htm'> materi1 </a>

</div>

</div>

</body>

</html>

4. BAHASA INGGRIS

<html>

<head>

<title>My Universitas</title>

<link rel="stylesheet" type="text/css" href="js&css/tampilan.css"/>

<link rel="stylesheet" type="text/css" href="js&css/ukuranlayar.css"/>

<script type="text/javascript" src="js&css/tambahan.slideshow.js"></script>

<script type="text/javascript" src="js&css/gambar.slideshow.js"></script>

<script type="text/javascript" src="js/ddaccordion.js"></script>

<script type="text/javascript" src="js/screen.js"></script>

</head>

<body>

<div id="respon">

<div id="cont">

</div>

38

<div id="top">

<p align="center" ><strong> MEDIA PEMBELAJARAN</strong></p> <br>

<p align="center" ><strong> POLITEKNIK NEGERI

BALIKPAPAN</strong></div>

<div id="pilihanatas">

<ul id="pilihan">

<li><a href="home.html">HOME</a></li>

</ul>

</div>

<div class="left_content">

<div class="sidebarmenu">

<a class="menuitem submenuheader">MATERI</a>

<div class="submenu">

<ul>

<li><a href="jarkom.html">JARINGAN KOMPUTER</a></li>

<li><a href="dasarelka.html">DASAR ELEKTRONIKA</a></li>

<li><a href="bahasainggris.html">BAHASA INGGRIS</a></li>

</ul>

</div>

<a class="menuitem submenuheader" href="">SOAL

LATIHAN</a>

<div class="submenu">

<ul>

<li><a href="">JARINGAN KOMPUTER</a></li>

<li><a href="">DASAR ELEKTRONIKA</a></li>

<li><a href="">BAHASA INGGRIS</a></li>

</ul>

39

</div>

</div>

</div>

<div id="kkampus">

<br>

<br>

<br>

<div id="center">

<li><a href='bahasainggris/modulbahasainggrissemester6.html'> MODUL

BAHASA INGGRIS </a></li>

<li><a href='bahasainggris/Interview-Questions.html'> CONTOH

PERTANYAAN INTERVIEW </a></li>

</div>

</div>

</body>

</html>

5. LATIHAN SOAL JARINGAN KOMPUTER

<html>

<head>

<title>My Universitas</title>

<link rel="stylesheet" type="text/css" href="js&css/tampilan.css"/>

<link rel="stylesheet" type="text/css" href="js&css/ukuranlayar.css"/>

<script type="text/javascript" src="js&css/tambahan.slideshow.js"></script>

<script type="text/javascript" src="js&css/gambar.slideshow.js"></script>

<script type="text/javascript" src="js/ddaccordion.js"></script

<script type="text/javascript" src="js/screen.js"></script>

40

</head>

<body>

<div id="respon">

<div id="cont">

</div>

<div id="top">

<p align="center" ><strong> MEDIA PEMBELAJARAN</strong></p> <br>

<p align="center" ><strong> POLITEKNIK NEGERI

BALIKPAPAN</strong></div>

<div id="pilihanatas">

<ul id="pilihan">

<li><a href="home.html">HOME</a></li>

</ul>

</div>

<div class="left_content">

<div class="sidebarmenu">

<a class="menuitem submenuheader">MATERI</a>

<div class="submenu">

<ul>

<li><a href="jarkom.html">JARINGAN KOMPUTER</a></li>

<li><a href="dasarelka.html">DASAR ELEKTRONIKA</a></li>

<li><a href="bahasainggris.html">BAHASA INGGRIS</a></li>

</ul>

41

</div>

<a class="menuitem submenuheader" href="">SOAL LATIHAN</a>

<div class="submenu">

<ul>

<li><a href="soaljarkom.html">JARINGAN KOMPUTER</a></li>

<li><a href="">DASAR ELEKTRONIKA</a></li>

<li><a href="">BAHASA INGGRIS</a></li>

</ul>

</div>

</div>

</div>

<div id="kkampus">

<br>

<br>

<br>

<div id="center">

<li><a href='soaljarkom/tugas1'> TUGAS 1 </a></li>

<li><a href='soaljarkom/tugas2'> TUGAS 2 </a></li>

</div>

</div>

</body>

</html>

6. LATIHAN SOAL DASAR ELEKTRONIKA

<html>

<head>

<title>My Universitas</title>

42

<link rel="stylesheet" type="text/css" href="js&css/tampilan.css"/>

<link rel="stylesheet" type="text/css" href="js&css/ukuranlayar.css"/>

<script type="text/javascript" src="js&css/tambahan.slideshow.js"></script>

<script type="text/javascript" src="js&css/gambar.slideshow.js"></script>

<script type="text/javascript" src="js/ddaccordion.js"></script>

<script type="text/javascript" src="js/screen.js"></script>

</head>

<body>

<div id="respon">

<div id="cont">

</div>

<div id="top">

<p align="center" ><strong> MEDIA PEMBELAJARAN</strong></p> <br>

<p align="center" ><strong> POLITEKNIK NEGERI

BALIKPAPAN</strong></div>

<div id="pilihanatas">

<ul id="pilihan">

<li><a href="home.html">HOME</a></li>

</ul>

</div>

<div class="left_content">

<div class="sidebarmenu">

<a class="menuitem submenuheader">MATERI</a>

<div class="submenu">

<ul>

<li><a href="jarkom.html">JARINGAN KOMPUTER</a></li>

43

<li><a href="dasarelka.html">DASAR ELEKTRONIKA</a></li>

<li><a href="bahasainggris.html">BAHASA INGGRIS</a></li>

</ul>

</div>

<a class="menuitem submenuheader" href="">SOAL

LATIHAN</a>

<div class="submenu">

<ul>

<li><a href="soaljarkom.html">JARINGAN KOMPUTER</a></li>

<li><a href="soalelka.html">DASAR ELEKTRONIKA</a></li>

<li><a href="">BAHASA INGGRIS</a></li>

</ul>

</div>

</div>

</div>

<div id="kkampus">

<br>

<br>

<br>

<div id="center">

<li><a href='soalelka/tugas1'> TUGAS 1 </a></li>

<li><a href='soalelka/tugas2'> TUGAS 2 </a></li>

</div>

</div>

</body>

</html>

44

7. LATIHAN SOAL BAHASA INGGRIS

<html>

<head>

<title>My Universitas</title>

<link rel="stylesheet" type="text/css" href="js&css/tampilan.css"/>

<link rel="stylesheet" type="text/css" href="js&css/ukuranlayar.css"/>

<script type="text/javascript" src="js&css/tambahan.slideshow.js"></script>

<script type="text/javascript" src="js&css/gambar.slideshow.js"></script>

<script type="text/javascript" src="js/ddaccordion.js"></script>

<script type="text/javascript" src="js/screen.js"></script>

</head>

<body>

<div id="respon">

<div id="cont">

</div>

<div id="top">

<p align="center" ><strong> MEDIA PEMBELAJARAN</strong></p> <br>

<p align="center" ><strong> POLITEKNIK NEGERI

BALIKPAPAN</strong></div>

<div id="pilihanatas">

<ul id="pilihan">

<li><a href="home.html">HOME</a></li>

</ul>

</div>

45

<div class="left_content">

<div class="sidebarmenu">

<a class="menuitem submenuheader">MATERI</a>

<div class="submenu">

<ul>

<li><a href="jarkom.html">JARINGAN KOMPUTER</a></li>

<li><a href="dasarelka.html">DASAR ELEKTRONIKA</a></li>

<li><a href="bahasainggris.html">BAHASA INGGRIS</a></li>

</ul>

</div>

<a class="menuitem submenuheader" href="">SOAL LATIHAN</a>

<div class="submenu">

<ul>

<li><a href="soaljarkom.html">JARINGAN KOMPUTER</a></li>

<li><a href="soalelka.html">DASAR ELEKTRONIKA</a></li>

<li><a

href="soalbahasa.html">BAHASA INGGRIS</a></li>

</ul>

</div>

</div>

</div>

<div id="kkampus">

<br>

<br>

<br>

<div id="center">

<li><a href='soalbahasa/tugas1'> TUGAS 1 </a></li>

<li><a href='soalbahasa/tugas2'> TUGAS 2 </a></li>

46

1.1

</div>

</div>

</body>

</html>

47