Upload
hafidh-syifaunnur
View
76
Download
16
Embed Size (px)
DESCRIPTION
Praktis Membuat Web Sederhana
Citation preview
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
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
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 :
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>
<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> Berita Terkini
</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> Pengumuman
</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> Tentang SNF
</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> 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>
<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> 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 :
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>
<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 .
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.&nbsp; 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>
<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
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.
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 (
-> id int(255) not null auto_increment,
-> teknisi_page varchar(255),
-> url varchar(255),
-> primary key (id));
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 (
-> id int(255) not null auto_increment,
-> kategori varchar(255),
-> judul varchar(255),
-> isi text,
-> pengirim varchar(255),
-> tgl int(2),
-> bln int(2),
-> thn int(4),
-> jam varchar(255),
-> status 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 (
-> id int(255) not null auto_increment,
-> judul varchar(255),
-> tgl int(2),
-> bln int(2),
-> thn int(4),
-> pengirim varchar(255),
-> jam varchar(255),
-> ket text,
-> status varchar(255),
-> hari varchar(255),
-> primary key (id));
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 (
-> id int(255) not null auto_increment,
-> judul varchar(255),
-> isi text,
-> pengirim varchar(255),
-> tgl int(2),
-> bln int(2),
-> thn int(4),
-> jam varchar(255),
-> ket text,
-> status varchar(255),
-> primary key (id));
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='height:50px'></div>
<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 style='height:50px'></div>
</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.");
$_GET[md5("teknisi_page")]=md5("signinsistem");
}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.");
$_GET[md5("teknisi_page")]=md5("signinsistem");
}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