BAB I

PENDAHULUAN

1.1 Latar Belakang

Tidak bisa di pungkiri kita tidak bisa lepas di dunia internet. Internet sangat berperan dalam kehidupan manusia abad ini. Dengan adanya internet manusia dapat terbantu, apalagi bagi mereka yang mempunyai mobilitas tinggi.

Di internet kita dapat melakukan berbagai hal, mulai dari mencari informsi ter up to date hingga mengeluarkan ide.Salah satunya dengan menggunakan website.

Website atau situs juga dapat diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink). Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi informasinya searah hanya dari pemilik website. Bersifat dinamis apabila isi informasi website selalu berubah-ubah, dan isi informasinya interaktif dua arah berasal dari pemilik serta pengguna website.

Oleh karena itu kami menyusun website ini dengan tema E-learning Informatika dengan judul website B-Technics, yang dihadirkan agar para pengguna dapat memperoleh ilmu pengetahuan tentang teknik computer jaringan.

1.2 Tujuan

1. Sebagai sarana untuk menambah ilmu pengetahuan tentang teknik computer dan jaringan

2. Sebagai media informasi seperti web pada umumnya, informasi yang disajikan selalu uptodate

3. Menambah wawasan bagi para pelajar khususnya

1

BAB IILANDASAN TEORI

Dalam pembuatan website ini tentunya ditunjang oleh beberapa aplikasi diantaranya :

2.1 Adobe Dreamweaver

Adobe Dreamweaver adalah sebuah software HTML editor profesionalyang digunakan untuk mendisainsecara visual dan mengelola situs webs maupun halaman web. Dreamweaver memudahkan kita dalam pembuatan website karena tidak perlu berhubungan langsung dengan coding html dan lainnya karena dilengkapi dengan berbagai macam tools pendukung. Dreamweaver dilengkapi dengan beberapa fasilitas diantaranya :- Referensi HTML

- CSS dan Java Script

- Javascript debugger

- Editor kode

2.2 XAMPP

Merupakan singkatan dari X (empat system operasi apapun), Apache, MySql, Php, Perl. Xampp merupakan aplikasi yang menyediakan paket perangkat lunak kedalam satu buah paket. Dalam paketnya sudah terdapat Apache (web server). MySql (database), Php (server side scripting), Perl, FTP server, PhpMyadmin

Cara Instal XAMPP

1. Setelah anda mendownload XAMPP, sekarang adalah cara untuk menginstalnya, seperti biasa, double klik icon XAMPP untuk memulai proses instalasi, nanti anda akan diminta menentukan bahasa yang ingin anda pakai, disini kami pakai English.

Selanjutnya bagi anda yang menggunakan windows vista maupun windows 7, yang menonaktifkan fitur UAC atau user account control, pasti akan di tanya seperti berikut ini, anda cukup mengklik OK pada message box tersebut.

selanjutnya, akan mucul tulisan welcome bla bla bla… yang menandakan anda

2

baru mulai menginstal XAMPP ini. klik NEXT.

Setelah anda menekan NEXT, maka selanjutnya anda akan ditanya, dimana anda akan menginstal XAMPP ini, klo saya sih di posisi defaultnya saja,yaitu di C:\xampp

Setelah anda menentukan dimana anda akan menginstal XAMPP tersebut, berikutnya adalah menentukan mana saja yang akan anda instal, LIHAT BAGIAN BAWAH!!! Disana terdapat apache dan My SQL serta File zilla, beri tanda centang pada Apache dan My Sql, Apache berguna sebagai server lokal, jadi anda akan membuat web seolah2 online, dan My Sql digunakan sebagai database, dimana dengan data base pengerjaan web akan lebih mudah serta dapat autosave, sehingga anda tidak perlu khawatir.

3

Setelah anda memilih instal, selanjutnya yang harus anda lakukan adalah menunggu.. ketika saya menginstal, pada bagian ini saya tidak menunggu lebih dari 1 menit, jadi bersabar ya

Setelah selesai, maka selanjutnya yang anda harus lakukan adalah mengklik finish seperti gambar di bawah ini.

4

setelah selesai mengklik finish biasanya ada comand prompt muncul sebentar, tungguin aja, paling beberapa detik juga hilang, gambarnya seperti ini.

Setelah cape nunggu akhirnya keluar message box seperti ini. Klik OK saja.

Setelah itu akan muncul lagi satu message box, disini anda pilih saja YES.

5

Setelah itu, Akan muncul XAMPP di sebelah kanan bawah, Note: PASTIKAN KEADAAN APACHE DAN MY SQL DALAM KEADAAN RUNNING!!! JIKA APACHE TIDAK AKTIF MAKA BROWSER MENUNJUKAN OFFLINE MODE SAAT INGIN MENGINSTAL WORDPRESS, DAN JIKA MY SQL TIDAK AKTIF, MAKA DATABASE TIDAK AKAN BISA DI BUAT!!!

Selain penggunaan aplikasi – aplikasi yang dibutuhkan oleh website , terdapat pula beberapa bahasa pemrogaraman website yang penulis gunakan yaitu html, php, dan css.

HTML

Merupakan singkatan dari HyperText Markup Language adalah script

dimana kita bisa menampilkan informasi dan daya kreasi kita lewat internet .

HTML sendiri adalah suatu dokumen teks yang biasa yang mudah dimengerti

dibanding bahasa pemrograman lainnya.

PHP

6

Adalah bahasa pemrograman web atau scripting language yang di desain

untuk web. PHP banyak dipakai untuk memrogram situs web dinamis, walaupun

tidak tertutup kemungkinan digunakan untuk pemakaian lain.

CSS (Cascading Style Sheet)

Istilah CSS ini sering kali kita dengar ketika berurusan dengan mendesain

halaman web. CSS merupakan bahasa yang digunakan untuk mengatur tampilan

suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita

berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS

merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu

halaman HTML. Ada beberapa kelebihan penggunaan CSS yaitu halaman web

menjadi tidak padat, lebih mudah mengganti tampilan web dengan cukup

mengganti nilai dan definsi pada satu file css saja.

7

BAB IIIPERANCANGAN DATABASE

Dalam membuat suatu website , pasti diperlukan suatu Database . untuk membuat database pertama kita harus masuk ke localhost/phpmyadmin . setelah itu buat database dengan nama tkj .

Setelah Database selesai dibuat , maka buatlah tabel admin , delphi , jarkom , komentar , php , dan user . berikut ini adalah tampilan dari beberapa tabel yang ada di dalam database “tkj”

Tabel admin

8

Tabel delphi

Tabel jarkom

Tabel komentar

9

Tabel php

Tabel user

Hasil akhir setelah kita membuat beberapa tabel di dalam Database TKJ

10

BAB IVPERANCANGAN WEB B-TECHNICS.NET

4.1 HALAMAN LOGIN

Ini adalah tampilan halaman awal pada website B-Thechnics.net . Pada Halaman ini terdapat pilihan untuk masuk sebagai Administrator atau masuk sebagai user . Berikut ini penulis akan menjelaskan satu-persatu mengeneai Halaman Login Admin dan User .

1. Halaman Login User

Untuk menjadi seorang member dalam web B-technics.net,terlebih dahulu seorang user harus registrasi atau mendaftar kan diri sebagai member . setelah user mendaftar dan mempunyai id dan password , user dapat langsung masuk ke halaman user dengan memasukkan ID dan Passwordnya. Berikut ini adalah tampilan saat user melakukan registrasi .

11

Di halaman pendaftaran ini user dapat mendaftar secara online . Halaman ini tersimpan dengan nama student-create.php .

2. Halaman Login Admin

Berdasarkan Gambar di atas,jika anda mengklik “admin login” maka secara otomatis anda akan di bawa masuk ke dalam Halaman Admin .Tapi sebelum masuk ke halaman admin, terlebih dahulu admin harus mengisi halaman login admin dengan memasukkan ID dan Password yang sebelumnya sudah di atur melalui database admin. Halaman login admin ini tersimpan dengan nama file admin-login.php yang terdapat pada folder admin

4.2 HALAMAN ADMIN

Setelah admin memasukkan ID dan Password yang telah di buat sebelumnya . admin akan langsung masuk ke halaman admin . Halaman admin ini tersimpan dengan nama file index.php yang terdapat dalam folder admin Di bawah ini adalah tampilan halaman awal admin

12

Pada Halaman admin berfungsi untuk menampilkan interface menu admin dan sekaligus sebagai pengendali utama data admin yang berfungsi untuk mengedit , hapus, maupun menambah data admin atau user.Menu-menu yang terdapat pada halaman admin adalah :

Home ( tersimpan dengan nama home.php ) Tambah Delphi ( tersimpan dengan nama tambahtutorial-delphi.php ) Tambah PHP ( tersimpan dengan nama tambahphp.php ) Tambah Jarkom ( tersimpan dengan nama tambahjarkom.php ) Tambah Gallery Daftar Data User ( tersimpan dengan nama data-student.php ) Edit Contact

Sedangkan pada SideBar terdapat :

Logout Tampil Tutorial Delphi ( tersimpan dengan nama tampildelphi.php ) Tampil Tutorial PHP ( tersimpan dengan nama tampilphp.php ) Tampil Jaringan Komputer ( tersimpan dengan nama tampiljarkom.php ) Tampil Gallery

Berikut ini adalah penjelasan mengenai beberapa menu serta apa yang ada di dalam sidebar .

1. Home ( home.php )

Halaman ini merupakan halaman utama yang pertama kali diakses oleh admin saat memasuki Halaman Admin . Halaman ini tersimpan dengan nama home.php .berikut adalah tampilan dari home.php .

13

2. Tambah Delphi ( tambahtutorial-delphi.php )

Halaman ini di gunakan untuk menambah artikel pada halaman Tutorial Delphi . cara kerjanya yaitu dengan mengisi id,judul dan isi modul yang akan di tambahkan .setelah kita simpan .untuk melihatnya kita dapat mengklik Tampil Tutorial Delphi yang terdapat pada Side Bar . Halaman ini tersimpan dengan nama tambahtutorial-delphi.php.

Di Bawah ini adalah tampilan setelah anda mengisi Tambah Delphi dan kemudia mengklik Tampil Tutorial Delphi pada Side Bar . Halaman ini tersimpan dengan nama tampildelphi.php .

14

3. Tambah PHP ( tambahphp.php )

Halaman ini digunakan untuk menambahkan artikel pada Halaman Tutorial PHP . cara kerjanya yaitu dengan mengisi id,judul dan isi modul yang akan di tambahkan .setelah kita simpan .untuk melihatnya kita dapat mengklik Tampil Tutorial PHP yang terdapat pada Side Bar . Halaman ini tersimpan dengan nama tambahphp.php.

Di Bawah ini adalah tampilan setelah anda mengisi Tambah PHP dan kemudia mengklik Tampil PHP pada Side Bar . Halaman ini tersimpan dengan nama tampilphp.php .

15

4. Tambah Jarkom ( tambahjarkom.php )

Halaman ini di gunakan untuk menambah artikel pada halaman Tutorial Jaringan Komputer . cara kerjanya yaitu dengan mengisi id,judul dan isi modul yang akan di tambahkan .setelah kita simpan .untuk melihatnya kita dapat mengklik Tampil Jaringan Komputer yang terdapat pada Side Bar . Halaman ini tersimpan dengan nama tambahjarkom.php.

Di Bawah ini adalah tampilan setelah anda mengisi Tambah PHP dan kemudia mengklik Tampil PHP pada Side Bar . Halaman ini tersimpan dengan nama tampilphp.php .

16

5. Daftar Data User ( data-student.php )

4.3 HALAMAN USER

1. Halaman Home

Halaman ini merupakan halaman utama yang pertama kali diakses oleh user saat mengunjungi situs web B-Thechnics.net . Halaman ini tersimpan dengan nama home.php. Pada halaman ini tersedia ikon menu-menu yang ada pada situs web B-Thechnics.net ini. Bila user ingin mengetahui isi dari situs ini, user dapat mengakses menu menu yang ditampilkan dengan menekan/klik ikon-ikon yang ada. Di bawah ini adalah tampilan halaman utama dari situs web B-Thechnics.net

17

18

2. Halaman Tutorial Delphi

19

3. Halaman Tutorial PHP

4. Halaman Jaringan Komputer

5. Halaman Gallery

Halaman ini berisi tentang kumpulan foto Style Life . Halaman inni tersimpan dengan nama tampilgalleri.php. Pada Halaman ini semua foto bisa di perbesar dengan mengklik pada area gambar dan memperkecilnya dengan mengklik di luar gambar . teknik ini di sebut Efek Zoom dengan JQuery Zoomoz . berikut tampilan Halaman Gallery

20

6. Halaman Contact

21

BAB V

PENUTUP

KESIMPULAN

Dari hasil pembuatan website B-Technics.net dan sebagai tugas akhir mata kuliah

Pemrograman web, penulis dapat menarik kesimpulan sebagai berikut :

1. Dengan adanya web ini siapa saja yang hendak mendapatkan informasi mengenai

teknik computer jaringan dapat langsung membuka website kami.

2. Web ini selain sebagai media informasi seperti web pada umumnya, informasi

yang disajikan selalu uptodate, juga desain interface yang menarik menjadi daya

tarik para pengunjung

3. Didalam web ini terdapat fasilitas pendaftaran secara online yang dapat

dimanfaatkan oleh pengguna

SARAN

Dalam penulisan tugas akhir ini, penulis menyampaikan saran untuk

mengembangkan pembelajara pemrograman web di Politeknik Harapan Bersama Tegal,

agar tercipta mahasiswa-mahasiswi yang berkualitas tinggi .

22