Praktis Membuat Web Sederhana

Praktis Merancang Website SederhanaMenggunakan bahasa dasar HTML, PHP, MySQL, CSS & Javascript

UNIVERSITAS NEGERI SEMARANGBIDANG KEMAHASISWAAN ( MAWA )Website : http://simawa.unnes.ac.id mail : [email protected]

SIMAWA

http://simawa.unnes.ac.id/

DESAIN WEBMenggunakan HTML (Hypertext Markup Language) dan CSS

A. Pendahuluan

Dalam merancang dan membuat suatu website, hal terpenting dan harus menjadi

prioritas pertama adalah penggunaan template/desain tampilan website. Template

yang dibuat diusahakan disesuaikan dengan fasilitas serta kepentingan

penggunaan website tersebut. Beberapa hal yang harus di perhatikan dalam

mendesain web adalah sebagai berikut :

1. Fungsi dari web, apakah berfungsi sebagai web pribadi, bisnis, organisasi,

kantor atau sistem informasi.

2. Pewarnaan yang sesuai dengan fungsi web serta tidak mengganggu

penglihatan user yang mengakses;

3. Kecepatan akses halaman website disesuaikan dengan server tempat web

dipasang serta penggunaan browser oleh user;

4. Tata letak content-content pada website disesuaikan dengan kemudahan dalam

pemrograman serta kemudahan user dalam mengakses.

Website yang baik bukanlah website yang dipandang menarik karena memiliki

arsitektur gambar yang indah namun memiliki kelambatan dalam mengakses

website tersebut. User seringkali merasa bosan karena terlalu lama menunggu

akses web tersebut, mereka lebih menyukai website yang cepat dan mudah

diakses tanpa harus menunggu lama. Hal tersebut sering kita jumpai pada

beberapa web yang lebih mengutamakan kecepatan akses dan kualitas

layanannya. Seperti yang kita ketahui beberapa tahun sebelum Facebook hadir di

indonesia masyarakat kita banyak yang menggunakan Friendster sebagai situs

akun pertemanan, namun ketika facebook muncul sebagian besar pengguna

friendster berpindah ke facebook hal ini salah satunya juga dikarenakan

penggunaan template dan kecepatan daya akses website milik facebook lebih

unggul dari pada friendster. Oleh sebab itu kami menyarankan kepada para

programer website untuk lebih mempertimbangkan template dan kecepatan akses

dalam membuat dan mendesain suatu karya website.

Pada workshop kali ini kami akan memandu dan memberi modul kepada

programer muda dalam membuat suatu website sederhana dan tentunya 100%

1

buatan sendiri. Agar pelatihan ini berjalan dengan hasil yang nyata maka kami

menggunakan konsep projectwork yaitu pelatihan sekaligus membuat suatu

website sederhana. Dengan konsep yang digunakan ini diharapkan setiap peserta

selepas mengikuti workshop ini telah mampu menciptakan satu produk karya

sendiri.

B. Merancang Konsep Template

Dalam workshop kali ini anggap saja kita tengah mengerjakan satu proyek

pembuatan website untuk kegiatan seminar nasional dengan hasil akhir yang ingin

dicapai seperti terlihat pada gambar dibawah ini .

Proyek membuat website seminar nasional

Untuk menghasilkan template utuh seperti pada gambar diatas dibutuhkan suatu

rangka/pondasi. Ibarat rumah, tagak, kuat atau tidaknya rumah di tentukan

berdasarkan rangka pada wawal pembangunan. Demikian halnya dengan website,

website yang baik adalah website yang bilamana dibuka oleh berbagai browser

templatenya tidak berubah, kalaupun terdapat web yang dapat rusak berarti web

tersebut memiliki kelemahan di bagian rangka dasarnya. Pada template diatas

programer mendesain rangka dasarnya seperti terlihat pada gambar dibawah ini :

Atas

BANNER ATAS

Selamat datang Tamu... | Senin, 12 April 2010 | ...

Menu Utama1.2.3.4.5.

Jadwal Penting

Tautan UNNES

BERITA TERKINI

PENGUMUMAN

Bawah

Dari kerangka web diatas tampak bahwa pada dasarnya web tersebut di dibagi

dalam tiga bagian yaitu atas, tengah dan bawah. Bagian tengahnya kemudian

dibagi lagi menjadi sub fungsi diantaranya bagian menu (statis), jadwal dan bagian

pemberitaan.

C. Mendesain Web Menggunakan HTML & CSS

Langkah selanjutnya setelah kita menentukan kerangka dasar website yang akan

kita bangun adalah menuliskan rekangka tersebut kedalam halaman website

dengan menggunakan bahasa pemrograman HTML. Bagi anda yang belum

mengenal HTML kami sarankan silahkan download panduan dasar – dasar

pemrograman HTML,PHP serta MySQL melalui alamat web

http://simawa.unnes.ac.id pada bagian menu “Download”. Pada mudul ini kami

tidak lagi menerangkan mengenai dasar – dasar pemrograman website tersebut.

Untuk lebih jelasnya marilah kita mendesain website diatas step by step dengan

cara membuat tampilan dari atas hingga ke bagian bawah web. Untuk lebih efisien

pelatihan ini kami sarankan anda menuliskan bahasa pemrograman yang ada

dengan menggunakan notepad agar anda lebih memahami apa kegunaan dari

http://simawa.unnes.ac.id/

masing-masing karakter bahasa pemrograman.

1. Membuat Kepala Web (Header)

Kita tentunya telah mengenal bagian kepala, kepala website berfungsi sebagai

identitas resmi lembaga pemilik website tersebut, hendaknya kepala website

yang dibuat menggambarkan dengan jelas instansi serta alamat instansi yang

bersangkutan. Agar website terlihat lebih menarik anda dapat menggunakan

gambar sebagai kepala website. Tentunya dalam proyek kita kali ini juga akan

digunakan gambar sebagai kepala website. Untuk membuat kepala website

silahkan anda buat dahulu gambar kepala website anda dan simpanlah di folder

khusus pada server anda misalnya folder “banner” kemudian tulislah bahasa

pemrograman berikut dengan menggunakan notepad anda :

<html><head>

<title>SNF | Seminar Nasional Fisika | Universitas Negeri Semarang</title>

</head>

<body topMargin='0' rightMargin='0' marginwidth='0' marginheight='0' bgcolor='#c6d5d3' ><center>

<div style='width:970px;background:black'><div style='width:940px;background:#424344;padding:10 10 10 10;border-bottom:solid 4px #ec3535'></div>

<div style='width:960px;background:#f4f4f4;'><img src='banner/banner.jpg' border=0 width=960px>

</div>

<div style='width:940px;background:#424344;padding:10 10 10 10;color:white;font-size:11px;font-family:arial;' align=left>

<i>Selamat datang <b>Tamu ...</b> | jam 01 : 27 am, 23 Juni 2010 | IP Address 127.0.0.1</i>

</div><div style='width:960px;background:#ec3535;height:10px'></div>

</div><body></html>

Simpanlah program tersebut dengan nama index.php dan letakkan diluar

direktori banner pada server anda kemudian panggil alamat domain anda

tersebut, jika benar maka hasil eksekusi program tersebut seperti pada gambar

dibawah ini :

view-source:http://localhost/~simawa/snf/snf_v1/banner/banner.jpg

Gambar hasil eksekusi program kepala website

2. Membuat Menu Website

Setelah kepala web kita selesai selanjutnya kita membuat bagian menu yang

terletak di sisi bawah kanankepala website. Untuk membuat menu kita harus

membagi bagian bawah menjadi 2 bagian dengan menggunakan perintah table.

Langkah pertama untuk merancang menu adalah buatlah tabel seperti bahasa

pemrograman berikut ini :

<div style='width:960px;background:white;'><table border=1 cellspacing=0 cellpadding=0 width=100%><tr valign=top>

<td width=200px style='background:#424344;'>Tempat menu website

</td><td style='padding:5 5 5 5;background:#f4f4f4;font-size:12px;font-family:arial;text-decoration:none'>

Tempat halaman informasi</td>

</tr></table></div>

Setelah kerangka tabel terbentuk selanjutnya adalah mengisi bagian “Tempat

menu website” dengan pemrograman menu website kita. Script

pemrogramannya adalah sebagai berikut :

<div style='padding:5 5 5 5;width:190px;font-size:12px;font-family:

arial;'><br><br>

<div style='font-size:15px;color:white'><b>Informasi Seminar</b></div><br>

<div style='padding:10 5 10 5;border-bottom:solid 1px #d6efeb'><a href='?' style='text-decoration:none;color:#d6efeb;'>

<img src='icon/i.png' align=middle width=20px border=0>   Beranda

</a></div>

view-source:http://localhost/~simawa/snf/snf_v1/icon/i.png

view-source:http://localhost/~simawa/snf/snf_v1/?


<img src='icon/i.png' align=middle width=20px border=0>  Berita Terkini

</a></div>


<img src='icon/i.png' align=middle width=20px border=0>  Pengumuman

</a></div>


<img src='icon/i.png' align=middle width=20px border=0>  Tentang SNF

</a></div>


<img src='icon/i.png' align=middle width=20px border=0>  Pembicara

</a></div>

<div style='padding:10 5 10 5;border-bottom:solid 1px #d6efeb'><a href='?' style='text-decoration:none;color:#d6efeb;'><img src='icon/i.png' align=middle width=20px border=0>  Kontak

</a></div>


<img src='icon/i.png' align=middle width=20px border=0>  Login System

</a></div> <div style='height:40px'></div>

<div style='font-size:15px;color:white'><b>Supported by</b>

</div><div style='height:10px'></div>

<img src='banner/unnes_konservasi.jpg' width=190px border=0><div style='height:5px'></div>

<img src='banner/ictweek.jpg' width=190px border=0><div style='height:5px'></div>

<div style='height:50px'></div>

Setelah dibuat simpanlah dan lihat hasilnya menggunakan browser anda, jika

program yang anda buat benar maka hasilnya akan sebagai berikut :

view-source:http://localhost/~simawa/snf/snf_v1/banner/ictweek.jpg

view-source:http://localhost/~simawa/snf/snf_v1/banner/unnes_konservasi.jpg


view-source:http://localhost/~simawa/snf/snf_v1/?77e4eba93d5daa4b881a15f5d2822376=c03002e550701f2de597ba6a98910908


view-source:http://localhost/~simawa/snf/snf_v1/?77e4eba93d5daa4b881a15f5d2822376=1e6e76f0495bcda6473878330bae70b9&&f4e96d01a2b309d0a1413507f52093f0=5






view-source:http://localhost/~simawa/snf/snf_v1/?77e4eba93d5daa4b881a15f5d2822376=74f72b4811389bdf7ae3c3bc797ab2b3&&45b6725516cd2fe83ca434986576de18=1


view-source:http://localhost/~simawa/snf/snf_v1/?77e4eba93d5daa4b881a15f5d2822376=74f72b4811389bdf7ae3c3bc797ab2b3&&45b6725516cd2fe83ca434986576de18=0

3. Membuat Halaman Utama Website

Setelah kita berhasil membuat menu di website selanjutnya kita akan membuat

bagian inti dari web yaitu bagian informasi. Bagian inilah yang nantinya dapat

berubah – ubah sesuai dengan halaman yang kita pilih pada link. Karena

kedepan pada bagian ini akan dipenuhi dengan pemrograman tingkat lanjut

menggunakan PHP dan MySQL maka diusahakan anda mendesain hbagian ini

dengan ringkas, ringan dan menarik. Jika bagian ini terlalu padat dengan

gambar dapat mempengaruhi kecepatan akses website anda, oleh karena itu

usahakan jangan terlalu banyak menempelkan gambar pada bagian ini cukup

gunakan CSS saja untuk mempercantik website anda.

Pada bagian beranda/halaman depan website kita terdiri dari beberapa tampilan

yaitu bagian Jadwal, bagian Link, bagian berita serta bagian pengumuman. Kita

akan membahas satu persatu bagian tersebut. Namun agar tampilannya teratur

kita bagi halaman ini menjadi dua bagian yaitu kanan dan kiri dengan

menggunakan tabel. Buatlah tabel seperti berikut

<table border=0 cellspacing=0 cellpadding=2 width=100%><tr valign=top>

<td width=250px align=center>Tempat Jadwal dan Link

</td> <td>

Tempat Berita dan Pengumuman</td>

</tr></table>

Simpan dan lihatlah hasil dari pemrograman tersebut melalui browser anda.

Selanjutnya kita akan membuat komponen – komponen yang terdapat di

halaman utama seperti Jadwal, Link, Berita dan Pengumuman.

a. Jadwal Penting

Pada jadwal kita hanya menampilkan item terpenting saja yaitu tanggal

pelaksanaan serta judul jadwalnya saja. Untuk mendesainnya kita

letakkan pada bagian tempat jadwal dan link pada tabel diatas dan kita

tuliskan program bahasa html sebagai berikut

<div style='width:250px;padding:30 5 5 5 ;font-size:16px;font-family:arial black;color:#273d82;' align=left>

<B>JADWAL PENTING</B></div>

<div style='width:250px;padding:15 15 15 15;font-size:11px' align=left>

<div style='border-bottom:solid 1px #424344;'></div><div style='border-bottom:solid 1px #424344;padding:10 10 10 0;'> <b style='color:red'>

<blink>Sabtu, 31 Juli 2010</blink></b><br>Batas Akhir Penerimaan Abstrak

</div>

<div style='border-bottom:solid 1px #424344;padding:10 10 10 0;'><b style='color:red'>

<blink>Sabtu, 14 Agustus 2010</blink></b><br>Pengumuman Abstrak Yang Diterima

</div>

<div style='border-bottom:solid 1px #424344;padding:10 10 10 0;'> <b style='color:red'>

<blink>Rabu, 30 Agustus 2010</blink></b><br>Batas Akhir Penerimaan Makalah Lengkap

</div>

<div style='border-bottom:solid 1px #424344;padding:10 10 10 0;'> <b style='color:red'>

<blink>Kamis, 2 September 2010</blink></b><br>

Konfirmasi Kehadiran Mengikuti Seminar</div><div style='height:20px'></div></div>

jika dieksekusi hasil dari pemrograman tersebut adalah seperti pada

tampilan berikut ini :

b. Link Unnes

setelah kita berhasil membuat jadwal penting, selanjutnya marilah kita

buat link yang dapat menghubungkan website kita dengan website milik

orang lain misalnya dengan Yahoo, Facebook, ataupun Unnes.

Tempatkan pemrograman link tepat dibawah bahasa pemrograman untuk

jadwal penting. Berikut pemrograman link Unnes :

<div style='width:250px;padding:30 5 5 5 ;font-size:16px;font-family:arial black;color:#273d82;' align=left><B>TAUTAN UNNES</B></div>

<div style='width:250px;padding:15 15 15 15;font-size:12px' align=left><div style='border-bottom:solid 1px #424344;'></div>

<div style='border-bottom:solid 1px #424344;padding:10 10 10 0;'><a href='http://www.unnes.ac.id' style='text-decoration:none; color:#424344' target=_blank>

<b>www.unnes.ac.id</b><br><small>

Universitas Negeri Semarang</small>

</a></div> <div style='border-bottom:solid 1px #424344;padding:10 10 10 0;'><a href='http://akademik.unnes.ac.id' style='text-decoration:none;color:#424344' target=_blank>

<b>akademik.unnes.ac.id</b><br>

view-source:http://akademik.unnes.ac.id/

http://www.unnes.ac.id/

view-source:http://www.unnes.ac.id/

<small> Sistem Informasi Akademik (Sikadu)

</small></a></div> <div style='border-bottom:solid 1px #424344;padding:10 10 10 0;'><a href='http://simawa.unnes.ac.id' style='text-decoration:none; color:#424344' target=_blank>

<b>simawa.unnes.ac.id</b><br><small>

Sistem Informasi Kemahasiswaan (Simawa)</small>

</a></div> <div style='border-bottom:solid 1px #424344;padding:10 10 10 0;'><a href='http://fmipa.unnes.ac.id' style='text-decoration:none; color:#424344' target=_blank>

<b>fmipa.unnes.ac.id</b><br><small>

Fakultas Matematika dan IPA (FMIPA)</small>

</a></div> <div style='border-bottom:solid 1px #424344;padding:10 10 10 0;'><a href='http://fisika.unnes.ac.id' style='text-decoration:none; color:#424344' target=_blank>

<b>fisika.unnes.ac.id</b><br><small>

Jurusan Fisika Fakultas MIPA</small>

</a></div><div style='height:20px'></div>

Jika script pemrograman diatas dieksekusi maka akan tampil seperti pada

gambar berikut ini .

view-source:http://fisika.unnes.ac.id/

view-source:http://fmipa.unnes.ac.id/

view-source:http://simawa.unnes.ac.id/

c. Berita Terkini

Setelah kita selesai membuat tampilan jadwal dan link Unnes selanjutnya

marilah kita berlatih mendesain tampilan berita informasi. Hal – hal yang

perlu diperhatikan dalam membuat tampilan berita adalah atribut berita,

judul berita serta isi berita. Semua itu harus kita desain dengan tampilan

yang berbeda baik warna maupun ukuran hurufnya. Tempatkan script

pemrograman dibawah ini pada bagian Tempat Berita dan Informasi

pada tabel diatas.

<div style='padding:30 10 10 10;font-size:12px;'><div style='font-size:16px;font-family:arial black; color:#273d82;'>

<b>BERITA TERKINI</b></div><div style='height:20px'></div>

<div style='padding:10 10 10 10;border:solid 1px #273d82; background:white;text-decoration:none;'><div style='color:blue;font-size:10px'>

ditulis oleh <b>hsbn89</b> | tanggal <b>6 Juni 2010</b> | dilihat <b>0</b> kali

</div>

<a href='?' style=';text-decoration:none;'><div style='color:#273d82;font-size:14px;font-family:arial;'>

<b>MAHASISWA FISIKA MENGIKUTI KULIAH KEWIRAUSAHAAN DI PERUSAHAAN PRODUSEN FITTING KENDAL</b>

</div></a>

<div style='padding:3 0 0 0;font-size:12px;font-family:arial;' align=justify><br />

Jurusan Fisika Universitas Negeri Semarang, pada semester Genap 2009/2010 ini telah membuka matakuliah Kewirausahaan bagi Mahasiswa Program Studi Fisika,S1. Pada matakuliah tersebut, mahasiswa dibekali ilmu pengetahuan tentang dunia bisnis. Pengetahuan tersebut diberikan melalui perkuliahan serta observasi lapangan di dunia usaha.  Pada tanggal 29 Maret 2009, diselenggarakan kegiatan Observasi Bisnis yang diselenggarakan di Perusahaan Produsen Alat-alat Fitting CV. Merapi Jl. Raya Boja-Campurejo Boja - Kendal. Observasi tersebut langsung dipimpin oleh Bpk. Dr. Agus Yulianto, M.Si sebagai Dosen pengampu mata kuliah Kewirausahaan Jurusan Fisika.<br />Berbagai ilmu telah d...

</div></div><div style='height:20px'></div>

<div style='padding:10 10 10 10;border:solid 1px #273d82; background:white;text-decoration:none;'><div style='color:blue;font-size:10px'>

ditulis oleh <b>hsbn89</b> | tanggal <b>6 Juni 2010</b> | dilihat <b>0</b> kali

</div>

view-source:http://localhost/~simawa/snf/snf_v1/?77e4eba93d5daa4b881a15f5d2822376=84e4e0443380e4229f35a01445c48ac1&&644bc9ce565d476ae1d0b20a7b82b6f7=10

<a href='?' style=';text-decoration:none;'><div style='color:#273d82;font-size:14px;font-family:arial;'>

<b>DUA HARI, UNNES EXPO TAMPILKAN KARYA UNGGULAN, BAZAR, DAN PENTAS SENI</b>

</div></a>

<div style='padding:3 0 0 0;font-size:12px;font-family:arial;' align=justify><br />

Unnes Expo 2010 yang berlangsung Selasa (6/4) hingga Rabu (7/4), di auditorium kampus Sekaran, dibuka pagi tadi oleh Pembantu Rektor III Masrukhi. Pembukaan dihadiri jajaran pimpinan universitas dan fakultas serta pimpinan lembaga mitra.<br />Event dalam rangka Dies Natalis Ke-45 Unnes itu menampilkan karya unggulan program studi, jurusan, fakultas, Program Pascasarjana, lembaga, dan lembaga kemahasiswaan.<br />"Expo juga akan diisi pasar murah, pameran konservasi, layanan kesehatan, dan beberapa pentas seni," kata Amin Yusuf panitia penyelenggara Unnes Expo 2010.<br />Amin mengatakan, dalam pameran tersebut tidak hanya karya dosen dan mahasiswa yang ditampilkan, t...

</div></div><div style='height:20px'></div></div>

Jika dieksekusi maka hasilnya akan tampak seperti pada gambar berikut

ini :

d. Pengumuman

Pengumuman memiliki script pemrograman yang sama dengan berita

diatas hanya saja tinggal mengganti judul aplikasi saja jadi silahkan buat

view-source:http://localhost/~simawa/snf/snf_v1/?77e4eba93d5daa4b881a15f5d2822376=84e4e0443380e4229f35a01445c48ac1&&644bc9ce565d476ae1d0b20a7b82b6f7=9

pengumuman sesuai dengan script diatas tadi.

4. Membuat Kaki Website

Tahap akhir dari mendesain adalah membuat kaki website atau bagian bawah

website. Bagian ini cukup menyuguhkan alamat instansi, produk ataupun

pembuat website tersebut. Berikut script pemrograman nya :

<div style='width:960px;background:#888484;height:10px'></div><div style='width:960px;background:#424344;' align=center><table border=0 cellspacing=0 celpadding=5 width=100%><tr valign=top>

<td width=50%><div style='font-size:10px;padding:10 10 10 10;color:white; font-family:arial;' align=left>

Jurusan Fisika Fakultas Matematika dan IPA<br>Universitas Negeri Semarang (UNNES)<br>Jawa Tengah, Indonesia

</div></td><td width=50%>

<div style='font-size:10px;padding:10 10 10 10;color:white; font-family:arial;' align=right>

<a href='http://simawa.unnes.ac.id' target=_blank style='text-decoration:none;color:white'><b>Design by hsbn89'physic<br>Komunitas Pecinta OpenSource (Kpos) Fisika</b></a>

</div></td>

</tr></table> </div>

jika script pemrograman dieksekusi akan tampil sebagai berikut ini :

Dengan terselesainya kaki website tersebut maka website kita telah selesai

sebesar 10% nya. Selanjutnya kita tinggal melakukan pemrograman tingkat lanjut

dengan menggunakan bahasa pemrograman PHP dan MySQL.

view-source:http://simawa.unnes.ac.id/

MERANCANG DATABASEMenggunakan MySQL, PHPMyAdmin dan Terminal Windows

A. Pengantar

Sebelum kita lebih jauh membangun suatu website yang dinamis dengan

menggunakan bahasa pemrograman PHP, alangkah baiknya kita menyiapkan

database yang nantinya digunakan sebagai alat penyimpanan informasi pada

website kita. Selain berfungsi sebagai alat penyimpanan data, database juga

berfungsi sebagai panduan kita dalam membuat fasilitas – fasilitas yang dibutuhkan

pada website kita nantinya.

Banyak aplikasi yang dapat kita gunakan untuk membuat database website,

misalnya kita dapat menggunakan commond windows, terminal linux

(opensuse,ubuntu,etc) maupun koneksi berbasis website dengan menggunakan

PHPMyAdmin yang biasanya sudah terinstall sepaket dengan server Xampp.

Karena kita masih dalam tahap pembelajaran maka pada modul kali ini kita akan

menggunakan commond windows serta terminal, untuk lebih jelas mengenai materi

pengenalan menggunakan kedua software tersebut silahkan lihat materi Dasar –

Dasar Pemrograman Website yang telah anda download dari Simawa.

B. Koneksi Database

Untuk dapat menggunakan database maka terminal yang kita gunakan harus di

koneksikan terlebih dahulu ke MySQL. Yang harus anda perhatikan dalam koneksi

tersebut adalah alamat server, user dan password MySQL. Untuk server localhost

standar usernya adalah “root” serta passwordnya dikosongkan “”. untuk

mengkoneksi MySQL bahasa SQL yang digunakan adalah sebagai berikut :

MySQL -uuser -ppassword

kata yang tercetak tebal sesuai dengan user dan password yang telah ditetapkan

seperti diatas. Jika koneksi berhasil maka akan muncul tulisan sebagai berikut :

Welcome to the MySQL monitor. Commands end with ;

or \g. Your MySQL connection id is 1

Server version: 5.1.36-log SUSE MySQL RPM

Type 'help;' or '\h' for help. Type '\c' to clear the current input

statement.

2

setelah anda berhasil masuk maka MySQL telah siap bekerja dengan anda.

C. Membuat Database

Setelah anda terkoneksi dengan MySQL selanjutnya buatlah satu database baru

yang sesuai dengan nama website anda, misalkan web yang akan kita buat diatas

adalah website seminar nasional maka buatlah database dengan nama “seminas”

bahasa pemrograman MySQL yang digunakan adalah :

Create database seminas;

Jika berhasil maka akan muncul pesan : Query OK, 1 row affected (0.06 sec)

kemudian pilihlah database yang telah kita buat tersebut agar dapat melakukan

pembuatan tabel – tabel didalamnya, bahasa yang digunakan untuk memilih

database adalah : Use seminas;

D. Membuat Tabel – Tabel

Dalam materi dasar-dasar pemrograman website telah dibahas rincian bagaimana

cara kita membuat suatu tabel yang berisi field – field di dalamnya pada suatu

database, sekarang kita akan membuat tabel-tabel yang akan digunakan pada

website kita. Tabel yang dibutuhkan diantaranya adalah :

1. session log

Tabel session log digunakan untuk menyimpan data user. User harus

dibedakan menjadi fungsi dan wewenang yang berbeda-beda misalnya user

programer, administrator, pengurus, atau anggota dimana setiap user

memiliki fasilitas yang berbeda-beda di website yang akan kita buat. Untuk

menciptakan tabel ini bahasa yang digunakan adalah :

mysql> create table session_log (

-> id int(255) not null auto_increment,

-> identitas varchar(255),

-> sandi varchar(255),

-> nama varchar(255),

-> wewenang varchar(255),

-> gambar varchar(255),

-> status varchar(255),

-> email varchar(255),

-> primary key (id));

2. teknisi_page

Tabel teknisi page digunakan untuk menyimpan data halaman yang ada

pada website serta alamat variabel yang digunakan sebagai indikator

pemanggilan halaman tersebut. Setiap data url yang dimasukkan hendaknya

di beri keamanan dengan metode encrypt menggunakan MD5. Script untuk

membuat tabel ini adalah :

mysql> create table teknisi_page (


-> teknisi_page varchar(255),

-> url varchar(255),


3. informasi

Tabel informasi ini digunakan untuk menyimpan data informasi seperti Berita

terkini, pengumuman, artikel, karya ilmiah, beasiswa, lomba-lomba, dll.

Seluruh website yang sekarang telah online, tabel sejenis inilah yang wajib di

buat sebagai media utama untuk memberikan informasi – informasi terkini.

Untuk membuat tabel ini bahasa MySQL yang digunakan adalah :

mysql> create table informasi (


-> kategori varchar(255),

-> judul varchar(255),

-> isi text,

-> pengirim varchar(255),

-> tgl int(2),

-> bln int(2),

-> thn int(4),

-> jam varchar(255),


-> primary key(id));

4. jadwal

Jadwal digunakan untuk menyimpan data jadwal/agenda kegiatan organisasi

pada website yang kita buat ini. Untuk membuat tabel ini bahasa MySQL

yang kita gunakan adalah sebagai berikut :

mysql> create table jadwal (



-> tgl int(2),

-> bln int(2),

-> thn int(4),



-> ket text,


-> hari varchar(255),


5. halaman

Tabel halaman digunakan untuk menyimpan informasi – informasi yang

bersifat statis. Untuk membuat halaman bahasa MySQL yang digunakan

adalah sebagai berikut :

mysql> create table halaman (



-> isi text,


-> tgl int(2),

-> bln int(2),

-> thn int(4),


-> ket text,



E. Koneksi MySQL melalui PHP

Untuk menghubungkan website kita agar dapat terkoneksi dengan MySQL yang

terdapat di server hosting kita, dapat kita koneksikan dengan bantuan PHP. Untuk

mengkoneksikan menggunakan PHP buatlah satu halaman PHP baru dan tuliskan

script PHP seperti dibawah ini :

<?php

error_reporting (E_ALL ^ E_NOTICE);

$dbase_connect = mysql_connect("localhost","root","");

mysql_select_db("seminas",$dbase_connect);

?>

Simpanlah halaman tersebut dengan nama file seminas_dbase.php, halaman

tersebut nantinya wajib anda include ke halaman index anda agar seluruh website

anda dapat terkoneksi dengan MySQL. Ingatlah selalu variabel $dbase_connect

seperti tertulis diatas, variabel tersebut adalah kunci anda untuk menghubungkan

PHP dengan MySQL.

Tambahkan include file diatas pada halaman index anda dan letakkan di paling atas

halaman dengan menggunakan bahasa PHP seperti berikut :

<?php

include (“seminas_dbase.php”);

?>

contoh penggunaan koneksi PHP & MySQL pada website adalah sebagai berikut :

<?php

$query=mysql_query(“SELECT*FROM session_login WHERE sandi like 'akuadmin' AND identitas

like 'parto'”,$dbase_connect);

?>

F. phpMyAdmin

Terdapat cara paling mudah dalam pengelolaan database yaitu dengan

menggunakan PHPMyAdmin, jika anda telah terbiasa dengan menulis bahasa

MySQL tidak salah jika anda mencoba cara lain. berikut tampilan phpMyAdmin :

MEMBUAT FASILITAS WEBMenggunakan MySQL, PHP dan Java Script

A. Pengantar

Setelah selesai mendesain dan membuat database selanjutnya kita tinggal

melakukan pemrograman lanjutan dengan menggunakan PHP, pemrograman

lanjutan ini dibutuhkan dalam membangun aplikasi website yang dinamis. Pada

prinsipnya pada pemrograman lanjutan ini kita hanya memakai 4 (empat) tahap

pemrograman yaitu :

1. Input

2. Simpan

3. Tampil

4. Edit

Pada bab ini kita akan membuat beberapa fasilitas website dengan menggunakan

tahap – tahap diatas, Namun karena untuk membuat satu website dengan fasilitas

yang lengkap membutuhkan waktu yang cukup lama antara 1 – 2 bulan maka pada

pelatihan kali ini kami hanya memandu untuk pembuatan dua fasilitas pendukung

saja, sedangkan fasilitas yang lainnya silahkan anda kembangkan sendiri. Untuk

pelatihan kita akan mencoba membuat fasilitas login, user dan berita.

B. Mengatur Halaman

Sebelum kita membuat fasilitas – fasilitas tersebut alangkah baiknya kita atur

dahulu sistem pemanggilan halaman pada file index.php yang telah kita buat

sebelumnya. Pada bab sebelumnya kita telah mendesain halaman beranda (home)

agar halaman tersebut dapat digunakan berkali-kali sebaiknya bagian jadwal dan

pemberitaan anda buat pada file tersendiri dan terpisah dari file index.php

misalnya anda pindahkan ke file home.php yang isinya sebagai berikut :

<?phpecho”<table border=0 cellspacing=0 cellpadding=2 width=100%><tr valign=top> <td width=250px align=center>

Tempat Jadwal dan Link </td> <td>

Tempat Berita dan Pengumuman</td>

3

</tr></table>

“;?>

Setelah bagian tersebut dipisahkan pada file tersendiri kemudian tambahkan data

pada database seminas tabel teknisi_page dengan menggunakan commond

windows sebagai berikut :

INSERT INTO teknisi_page (teknisi_page,url) VALUE ('','home.php');

jika benar maka hasilnya adalah sebagai berikut :

langkah selanjutnya adalah merubah link pada menu utama anda dengan alamat

URL sebagai berikut :

<?php

echo”<a href='?".md5("teknisi_page")."=' style='text-decoration:none;

color:#d6efeb;'>

<img src='icon/i.png' align=middle width=20px border=0>   Beranda

</a>“;

?>

kemudian pada file index.php tambahkan bahasa PHP dan MySQL untuk

mengambil data dari database seminas dengan tabel teknisi_page scriptnya

sebagai berikut :

<?php

$page=$_GET[md5("teknisi_page")];

$page_data=mysql_query("SELECT*FROM teknisi_page WHERE teknisi_page like

'$page'",$dbase_connect);

$page_sum=mysql_num_rows($page_data);

$page_hasil=mysql_fetch_row($page_data);

if($page_sum!=0){include("$page_hasil[2]");}else{include("home.php");}

?>



sisipkan script PHP & MySQL diatas pada bagian Tempat halaman informasi.

Kemudian cobalah akses browser anda maka hasilnya akan sama seperti desain

awal anda. Jika ternyata tidak seperti semula silahkan check kembali script-script

anda.

Perhatikan alamat link pada menu anda yang bertulis

href='?".md5("teknisi_page")."=' perhatikan bahwa variabel yang kita gunakan

adalah variabel teknisi_page namun demi keamanan variabel maka variabel

tersebut kita samarkan dengan menggunakan MD5 sehingga jika dieksekusi orang

hanya akan melihat sederetan karakter yang tidak jelas apa maksudnya seperti

berikut 77e4eba93d5daa4b881a15f5d2822376 ini adalah metode keamanan

standart untuk website dengan begitu orang tidak akan tahu variabel apa yang kita

gunakan. Perlu diingat jika anda membuat variabel hendaknya gunakan metode

tersebut agar web anda aman dari ulah orang yang tidak bertanggung jawab.

Variabel yang telah kita kirim tersebut kemudian kita terima dengan menggunakan

script $page=$_GET[md5("teknisi_page")]; kemudian dari isi variabel tersebut

dicari data yang sesuai pada database tabel teknisi_page. Jika data ditemukan

maka halaman yang ditampilkan adalah halaman yang tertera pada tabel tersebut

dan datanya sendiri tersimpan pada field URL. Konsep inilah yang selanjutnya kita

gunakan untuk proses penampilan halaman fasilitas yang lainnya. Jika anda belum

menguasai konsep ini janganlah sungkan untuk bertanya pada ahlinya.

C. Membuat Login

Setelah pengaturan halaman selesai dibuat selanjutnya adalah membuat fasilitas

sign-in atau log-in. Dengan fasilitas ini kita dapat melakukan pengelolaan website

bagi admin. Buatlah file baru kemudian simpan dengan nama login.php .

Kemudian tambahkan data ke database seminas tabel teknisi_page dengan isi data

--> teknisi_page : md5(“signinsistem”)

--> url : login.php

kemudian ubah alamat link Login System pada menu anda menjadi :

<?php

echo”<a href='?".md5("teknisi_page")."=".md5("signinsistem")."' style='text-

decoration:none;color:#d6efeb;'>

<img src='icon/i.png' align=middle width=20px border=0>  Login System

</a>“;

?>




kemudian pada file login.php isikan script berikut :

<?php

echo"

<div style='padding:30 30 30 30;' align=center>


<div style='padding:10 10 10 10;border:solid 1px

#424344;background:#afafb1;color:white;font-size:15px;width:400px'

align=left><b>Login Sistem</b></div><div style='height:5px'></div>

<div style='padding:10 10 10 10;border:solid 1px

#424344;background:#dfe2ec;color:black;font-size:12px;width:400px'

align=justify>

Untuk masuk kedalam sistem website ini silahkan masukkan identitas dan

sandi anda pada form dibawah ini. Pastikan anda telah terdaftar sebagai

pemilik account pada web ini.<br><br><br>

Identitas :<br><form method=post

action='?".md5("account")."=".md5("login")."'>

<input type=text name='".md5("identitas")."' style='padding:10 10 10

10;font-size:13px;border:solid 1px #424344;width:300px;'><br><br><br>

Kata Sandi :<br>

<input type=password name='".md5("sandi")."' style='padding:10 10 10

10;font-size:13px;border:solid 1px #424344;width:300px;'><br><br><br>

<input type=submit value='Masuk Account' style='padding:10 10 10

10;width:150px'>

<input type=reset value='Hapus Formulir' style='padding:10 10 10

10;width:150px'>

</div></form>


</div>

";

?>

Kemudian kembali lagi pada file index.php tambahkan script pada bagian atas

halaman untuk menangkap variabel-variabel yang dikirimkan pada file diatas

seperti pada script dibawah ini :

<?php

function pesan($a){

echo"<script language='javascript'>window.alert('$a')</script>";

}

switch($_GET[md5("account")]){

case "":

break;

b

case md5("login"):

$identitas=$_POST[md5("identitas")];

$sandi=md5($_POST[md5("sandi")]);

if($identitas==""){

pesan("Anda belum mengisi identitas anda.");

$_GET[md5("teknisi_page")]=md5("signinsistem");

}elseif($sandi==""){

pesan("Anda belum mengisi kata sandi anda.");


}else{

$session_query=mysql_query("SELECT*FROM session_log WHERE

identitas like '$identitas' AND sandi like '$sandi'",

$dbase_connect);

$session_sum=mysql_num_rows($session_query);

if($session_sum==0){

pesan("Anda tidak terdaftar sebagai user SNF, anda

tidak berhak untuk login.");


}else{

$session_data=mysql_fetch_row($session_query);

$_SESSION["session_idi"]="$session_data[0]";

$_SESSION["session_user"]="$session_data[1]";

$_SESSION["session_nama"]="$session_data[3]";

$_SESSION["session_wewenang"]="$session_data[4]";

$_SESSION["session_gambar"]="$session_data[5]";

pesan("Selamat datang $session_data[3], anda login

sebagai $session_data[4].");

$_GET[md5("teknisi_page")]=””;

}

}

break;

b

case md5("logout"):

session_unset();session_destroy();

pesan("Anda telah logout dari account SNF, terimakasih telah

mengunjungi SNF Jurusan Fisika Unnes.");

break;

}

?>




D. Membuat Input Berita & Informasi

Setelah anda membuat fasilitas login, fasilitas penting lainnya yang harus anda

buat adalah fasilitas pengelolaan berita yang meliputi input, edit serta menampilkan

berita. Pada bab kedua kita telah membuat tabel informasi yang didalamnya

memuat field – field yang dibutuhkan pada data berita. Saat ini kita tinggal

membuat pengelolaannya, pengelolaan yang pertama tentunya adalah menginput.

Langkah awal untuk menginput berita adalah dengan membuat formulir input data

berita seperti pada gambar berikut.

Untuk merancang input data berita tulislah script berikut ini pada file baru yaitu

input_berita.php:

<?php

$kategori=”Berita”;if($kategori!=""){session_is_registered ('kategori');$_SESSION["kategori"]="$kategori";}$kategori=$_SESSION["kategori"];if($kategori==0){$getkategori="Berita";}else{$getkategori="Pengumuman";}

i

echo"<div style='padding:30 30 30 30;'><div style='font-size:18px;font-family:arial black;'><b>$getkategori</b></div><div style='height:25px'></div><div>Anda dapat melakukan pengelolaan informasi berita dan pengumuman dengan memilih salah satu fasilitas yang disediakan pada menu dibawah ini.</div><br><br>

<div style='padding:10 10 10 10;border:solid 1px #424344;background: #424344;color:white'><b>BERITA DAN INFORMASI</b></div><div style='padding:10 10 10 10;border:solid 1px #424344;background: #f1fdfc;color:black'>

<table border=0 width=100% cellspacing=0 cellpadding=3><tr valign=top><td align=center style='font-size:11px'><a href='?".md5("teknisi_page")."=".md5("masukkaninformasibaru")."&&".md5("aksi")."=' style='text-decoration:none;color:black'><img src='icon/informasi_tambah.png' border=0 width=50px><div style='height:10px'></div>Tambah Informasi</a></td>

<td align=center style='font-size:11px'><a href='?".md5("teknisi_page")."=".md5("masukkaninformasibaru")."&&".md5("aksi")."=".md5("tampil")."' style='text-decoration:none;color:black'><img src='icon/informasi_tampil.png' border=0 width=50px><div style='height:10px'></div>Informasi Tampil</td>

<td align=center style='font-size:11px'><a href='?".md5("teknisi_page")."=".md5("masukkaninformasibaru")."&&".md5("aksi")."=".md5("hidden")."' style='text-decoration:none;color:black'><img src='icon/informasi_hidden.png' border=0 width=50px><div style='height:10px'></div>Informasi Hidden</td>

<td align=center style='font-size:11px'><a href='?".md5("teknisi_page")."=".md5("masukkaninformasibaru")."&&".md5("aksi")."=".md5("statistik")."' style='text-decoration:none;color:black'><img src='icon/informasi_statistik.png' border=0 width=50px><div style='height:10px'></div>Statistik Informasi</td>

</tr></table></div><div style='height:30px'></div>";

<

switch($_GET[md5("proses")]){case "": $xproses="tambahkan";break;

b

case md5("tambahkan"):

$judul=$_POST[md5("judul")]; $status=$_POST[md5("status")]; $isi=$_POST[md5("isi")]; $xproses="tambahkan"; if($judul==""){

pesan("Anda belum menuliskan judul informasi, silahkan tuliskan dahulu.");

}elseif($status==""){pesan("Anda belum memilih status tampilan informasi, silahkan pilih dahulu.");

}elseif($isi==""){pesan("Anda belum menuliskan isi informasi, silahkan tuliskan dahulu.");

}else{ $info_query=mysql_query("INSERT INTO informasi (kategori,judul,isi,pengirim,tgl,bln,thn,jam,status) VALUES ('$kategori','$judul','$isi','".$_SESSION['session_idi']."', '$tanggal','$bulan_angka','$tahun','$jam','$status')",$dbase_connect);

if($info_query){pesan("Informasi anda telah disimpan dan telah di $status dari papan informasi website.");

}else{pesan("Informasi anda gagal disimpan, silahkan coba lagi. Jika masih belum bisa kemungkinan website anda bermasalah.");

} }break;

b

case md5("hidden"):$xproses="tambahkan";$id=$_GET[md5("id_data")];$data_query=mysql_query("UPDATE informasi SET status='hidden' WHERE id like '$id'",$dbase_connect);

if($data_query){pesan("Informasi anda telah di sembunyikan dari website SNF.");}else{pesan("Informasi anda gagal disembunyikan. silahkan coba lagi.");}break;

b

case md5("hapus"):$xproses="tambahkan";$id=$_GET[md5("id_data")];$data_query=mysql_query("UPDATE informasi SET status='hapus' WHERE id like '$id'",$dbase_connect);

if($data_query){pesan("Informasi anda telah dihapus dari website SNF.");}else{pesan("Informasi anda gagal dihapus. silahkan coba lagi.");}break;

bb

case md5("tampil"):$xproses="tambahkan";$id=$_GET[md5("id_data")];$data_query=mysql_query("UPDATE informasi SET status='Tampilkan' WHERE id like '$id'",$dbase_connect);

if($data_query){pesan("Informasi anda telah di tampilkan di website SNF.");}else{pesan("Informasi anda gagal ditampilkan. silahkan coba lagi.");}break;

b

case md5("edit"):$xproses="simpan";$id=$_GET[md5("id_data")];$xxidi="<input type=hidden name=".md5("id_data")." value='$id'>";$data_query=mysql_fetch_row(mysql_query("SELECT*FROM informasi WHERE id like '$id'",$dbase_connect));break;

b

case md5("simpan"):$judul=$_POST[md5("judul")];$status=$_POST[md5("status")];$isi=$_POST[md5("isi")];$id_data=$_POST[md5("id_data")];$xproses="tambahkan";if($judul==""){pesan("Anda belum menuliskan judul informasi, silahkan tuliskan dahulu.");}elseif($status==""){pesan("Anda belum memilih status tampilan informasi, silahkan pilih dahulu.");}elseif($isi==""){pesan("Anda belum menuliskan isi informasi, silahkan tuliskan dahulu.");}elseif($id_data==""){pesan("Maaf berita yang anda rubah tidak sesuai.");}else{$info_query=mysql_query("UPDATE informasi SET judul='$judul',isi='$isi',status='$status' WHERE id like '$id_data'",$dbase_connect);

if($info_query){pesan("Informasi anda telah disimpan dan telah di $status dari papan informasi website.");}else{pesan("Informasi anda gagal disimpan, silahkan coba lagi. Jika masih belum bisa kemungkinan website anda bermasalah.");}}break;}

}

switch($_GET[md5("aksi")]){case"":include("data/style_besar.php");echo" <div style='padding:10 10 10 10;background:#e6ffab;border:solid 1px #54720c;'><form method=post action='?".md5("teknisi_page")."=".md5("masukkaninformasibaru")."&&".md5("proses")."=".md5("$xproses")."'><b>Judul :<br><input type=text name='".md5("judul")."' value='$data_query[2]' style='padding:10 10 10 10;font-size:13px;border:solid 1px #424344;width:650px;'>$xxidi<br><br><br>Status Tampil : <br><select name=".md5("status")." style='padding:10 10 10 10;font-size:13px;border:solid 1px #424344;width:150px;'><option value='$data_query[9]'>$data_query[9]</option><option value='Tampilkan'>Tampilkan</option><option value='hidden'>Sembunyikan</option></select><br><br><br>Isi Informasi :<br></b><textarea name=".md5("isi")." style='padding:10 10 10 10;font-size:13px;border:solid 1px #424344;width:650px;height:600px'>$data_query[3]</textarea><br><br><br><input type=submit value='Simpan Informasi' style='padding:10 10 10 10;width:150px'>  <input type=reset value='Hapus Formulir' style='padding:10 10 10 10;width:150px'></form></div>";break;} ?>

E. Menampilkan Berita

Untuk menampilkan berita kelanjutan dari scrip diatas tambahkan script berikut ini :

<?phpswitch($_GET[md5("aksi")]){case md5("tampil"):$getkategori=strtoupper($getkategori);echo"<div style='font-size:16px;font-family:arial black;color:#273d82;'> <b>$getkategori TAMPIL TERKINI</b></div><div style='height:20px'></div>";

<

$berita_query=mysql_query("SELECT*FROM informasi WHERE status like 'Tampilkan' AND kategori like '$kategori' AND pengirim like '".$_SESSION['session_idi']."' ORDER BY id Desc LIMIT 0,4",$dbase_connect);

$berita_sum=mysql_num_rows($berita_query);if($berita_sum==0){echo"<div style='color:blue;border-bottom:solid 1px blue;padding:5 5 5 0;'><i>Belum terdapat berita & informasi yang ditampilkan saat ini.</i></div>";}else{while($berita=mysql_fetch_row($berita_query)){$berita[2]=strtoupper($berita[2]);$berita[3]=potong(form_filter($berita[3]),400);$berita[6]=bulanku($berita[6]);$pengirim=mysql_fetch_row(mysql_query("SELECT*FROM session_log WHERE id like '$berita[4]'",$dbase_connect));echo" <div id='boxinfo'><div style='color:blue;font-size:10px'>ditulis oleh <b>$pengirim[1]</b> | tanggal <b>$berita[5] $berita[6] $berita[7]</b> | dilihat <b>0</b> kali</div>

<a href='?".md5("teknisi_page")."=".md5("lihatrincianberita")."&&".md5("id_berita")."=$berita[0]' style=';text-decoration:none;'><div style='color:#273d82;font-size:14px;font-family:arial;'><b>$berita[2]</b></div></a><div style='padding:3 0 0 0;font-size:12px;font-family:arial;' align=justify>$berita[3]</div><br> ~ <a href='?".md5("teknisi_page")."=".md5("masukkaninformasibaru")."&&".md5("proses")."=".md5("edit")."&&".md5("id_data")."=$berita[0]'>Edit</a> ~ <a href='?".md5("teknisi_page")."=".md5("masukkaninformasibaru")."&&".md5("proses")."=".md5("hidden")."&&".md5("id_data")."=$berita[0]'>Hidden</a> ~ <a href='?".md5("teknisi_page")."=".md5("masukkaninformasibaru")."&&".md5("proses")."=".md5("hapus")."&&".md5("id_data")."=$berita[0]'>Hapus</a> ~</div><div style='height:10px'></div>";}}break;

b

case md5("hidden"):$getkategori=strtoupper($getkategori);echo"<div style='font-size:16px;font-family:arial black;color:#273d82;'><b>$getkategori HIDDEN TERKINI</b></div><div style='height:20px'></div>";

s

$berita_query=mysql_query("SELECT*FROM informasi WHERE status like 'hidden' AND kategori like '$kategori' AND pengirim like '".

$_SESSION['session_idi']."' ORDER BY id Desc LIMIT 0,4",$dbase_connect);

$berita_sum=mysql_num_rows($berita_query);if($berita_sum==0){echo"<div style='color:blue;border-bottom:solid 1px blue;padding:5 5 5 0;'><i>Belum terdapat berita & informasi yang ditampilkan saat ini.</i></div>";}else{while($berita=mysql_fetch_row($berita_query)){$berita[2]=strtoupper($berita[2]);$berita[3]=potong(form_filter($berita[3]),400);$berita[6]=bulanku($berita[6]);$pengirim=mysql_fetch_row(mysql_query("SELECT*FROM session_log WHERE id like '$berita[4]'",$dbase_connect));echo" <div id='boxinfo'><div style='color:blue;font-size:10px'>ditulis oleh <b>$pengirim[1]</b> | tanggal <b>$berita[5] $berita[6] $berita[7]</b> | dilihat <b>0</b> kali</div>

<a href='?".md5("teknisi_page")."=".md5("lihatrincianberita")."&&".md5("id_berita")."=$berita[0]' style=';text-decoration:none;'><div style='color:#273d82;font-size:14px;font-family:arial;'> <b>$berita[2]</b></div></a>

<div style='padding:3 0 0 0;font-size:12px;font-family:arial;' align=justify>$berita[3]</div><br> ~ <a href='?".md5("teknisi_page")."=".md5("masukkaninformasibaru")."&&".md5("proses")."=".md5("edit")."&&".md5("id_data")."=$berita[0]'>Edit</a> ~ <a href='?".md5("teknisi_page")."=".md5("masukkaninformasibaru")."&&".md5("proses")."=".md5("tampil")."&&".md5("id_data")."=$berita[0]'>Tampil</a> ~ <a href='?".md5("teknisi_page")."=".md5("masukkaninformasibaru")."&&".md5("proses")."=".md5("hapus")."&&".md5("id_data")."=$berita[0]'>Hapus</a> ~</div><div style='height:10px'></div>";}}break;}?>

F. Fasilitas Lainya

Sebagai pengembangan untuk fasilitas yang lain silahkan anda rancang dan anda

program sendiri, libatkan kemampuan seni dan logika anda dalam merancang

website tersebut, jika anda mengalami kesulitan buku – buku ini dapat anda

gunakan sebagai panduan bagi anda serta sering-seringlah mencari bahan

referensi lainnya di internet. Jika anda kesulitan dalam pembuatan website anda

silahkan kunjungi forum simawa di simawa.unnes.ac.id

BIOGRAFI PENULIS

Nama : Heri Siswanto Bayu Nugroho Gender : L

Photo

NIM : 4250406011 Agama Islam

Tempat Lahir : Lampung Utara Tanggal 16/06/89

Prodi/Jurusan : Fisika, S1 / Fisika

Fakultas : Fakultas Matematika dan IPA

Perguruan Tinggi : Universitas Negeri Semarang

Alamat Asal : Dukuh Gejugan RT.09/RW.09, Kelurahan Ngaglik

Kecamatan Sambi

Kota : Boyolali Propinsi Jawa Tengah

Alamat Sekarang : Kost “Song”, Desa Banaran, Kelurahan Sekaran

Kecamatan Gunungpati

Kota : Semarang Propinsi Jawa Tengah

Telp. Rumah : ( 0274 ) 70045904 Telp. HP 6285727401900

Email : [email protected] Website www.lordnet.tk

PENGALAMAN BISNIS

PERUSAHAAN TAHUN JABATAN

1. “Wahyu Nugroho Suplyer” Usaha suplyer jagung dan padi

2008-2009 Distributor

2. “LordNET Warnet” Usaha warung internet 2010 Administrasi

PENGALAMAN TELEMATIKA

INSTANSI / PERUSAHAAN TAHUN JABATAN

Universitas Negeri Semarang 2009-2010 ICT Bidang Kemahasiswaan ( simawa.unnes.ac.id )

Universitas Negeri Semarang 2009 Bidang Pengembangan & Kerjasama( kerjasama.unnes.ac.id )

Kementrian Komunikasi & Informasi Indonesia 2010 Relawan Telematika

PENGALAMAN ORGANISASI

ORGANISASI TAHUN JABATAN

1. Dewan Kerja Cabang Kabupaten Boyolali 2004-2008 Ka.Bid. Operasional

2. UBALOKA Kabupaten Boyolali 2006-2008 Ka.Div. Operasional

3. Penerbitan Buletin Cakra Fatwa Ksatria 2006-2008 Direktur

Wujudkan masyarakat informasi berbasis content communication & information 2015

Praktis Membuat Web Sederhana

Documents