|
SMK
Taruna bhakti
|
|
JOBSHEET PEMBUATAN WAB INTERAKTIF
|
|
|
|
|
|
Hafidz
Alfiansyah - 2013
|
|
|
KATA
PENGANTAR
Kami panjatka puji
serta syukur kehadiran ALLAH SWT.yang telah membarikan taufik dan hidayahnya,sehingga
penyusun dapat menyelesaikan jobsheet ini.
Penyusun menyadari
bahwa belum sempurna karena dilihat dari segi penerapan terbatas pengetahuan
dan pengalaman yang menyusun miliki.
Karena keterbatasan
penyusun, maka laporan ini insyaallah sesuai yang kita kehendaki. Untuk itu
kritik dan saran yang membangun penyusun harapkan sebagai bahan masukan untuk
menyempurnakan laporan selanjutnya.
Atas segala bantuanya
dan dorongan yang telah diberikan kepada penyusun, sekali lagi penyusun
mengucapkan Terima Kasih,semoga ALLAH SWT membalas dengan berlipat ganda.
Akhir kata semoga. Laporan ini berguna bagi penyusun,
Khususnya bagi para pembaca.
Depok, Mei 2013
Penulis
1. Pengenalan
PHP dan MySQL
PHP adalah singkatan dari PHP
Hypertext Preprocessor yang merupakan bahasa
pemrogramman berbasis web yang
memiliki kemampuan untuk memproses data dinamis.
PHP pertama kali dibuat oleh
Rasmus Lerdorf pada tahun 1995. PHP adalah bahasa
pemrograman server side. Sehingga
dia memerlukan sebuah web server contohnya apache
yang sudah ada didalam software
XAMPP untuk menjalankan scriptnya.
Catatan : untuk lebih
lanjutnya teman-teman bisa baca materi tentang pengenalan PHP
2. Software yang
digunakan belajar PHP
Adapun software yang biasa digunakan
dalam belajar ataupun pengembangan web PHP
adalah software XAMPP. Didalam
software tersebut sudah terdapat beberapa komponen
software pendukung yaitu :
· Xampp untuk webserver yang digunakan
untuk menjalankan PHP
· MySQL untuk
DMBS(Database Management System) yang digunakan untuk
menyimpan content atau isi web
didalam sebuah database.
· PhpMyadmin
aplikasi MySQL berbasi web yang digunakan untuk merancang
dan membuat database dan
table-table nya.
· Dremweaver yang
digunakan sebagai text editor.
3. Langkah untuk
memulai belajar PHP
Dalam memulai belajar PHP ada
tahapan yang biasa dilakukan. Walaupun tidak baku
harus seperti ini. Adapun
langkah-langkahnya adalah sebagai berikut :
· Jalankan software XAMPP
dan klik tombol start untuk apache dan mysql
· Buka web browser misalnya mozila dan ketik http://localhost/xampp/untuk
mencoba,kalau bisa akan keluar gambar seperti dibawah ini.
4.
Langkah pembuatan database di PhpMyadmin
Pada langkah ini kita
akan menjelaskan tentang fungsi dan cara pemakaian aplikasi web
PhpMyadmin.
·
Pertama kita beri nama dan klik ciptakan
seperti di bawah ini .
· Lalu akan muncul gambar seperti di
bawah.
· Setelah database terbentuk, kita akan membuat table nya dengan nama tablebiodata dan banyaknya field
adalah 4 yaitu (id, nama, alamat, usia). Setelah itu klik
tombol go yang berada di
sebelah paling kanan.
Setelah itu masukan nama field
nya dengan menyesuaikan type data dan
panjang data (length). Untuk
field id ditambah dengan index=PRIMARY dan AI(Auto
Increment) setelah semua diisi,
klik tombol Save
·
Lalu klik save
kemudian klik yang tadi kita buat dan akan muncul gambar seprti di bawah ini.
·
Kemudian klik sisipkan lalu kita isi
datanya(lakukan hal yang sama selama 4 x) dan
akan muncul gambar seperti dibawah .
·
Setelah disisipkan kemudian klik go dan
klik struktur seperti di bawah ini.
·
JANGAN LUPA
Buatlah folder di dalam htdoc dan letakan folder di folder berita 1 dan buat
folder untuk gambar tersebut.
5. Langkah pembuatan
PHP (READ) menggunakan Dreamweaver.
Langkah
pertama membuka dreamweaver, site dan akan muncul tampilan seperti dibawah ini:
Setelah
muncul tampilan tampilan seperti yang di atas klik php dan akan muncul gambar
seperti dibawah ini.
Koneksi.php
Kemudian
save di folder yang telah di buat yang berada di htdoc dengan nama file
koneksi.php.
Tahap
berikutnya kita akan membuat web menjadi
dinamis dengan cara menambahkan script php :
<?php
Include
“koneksi.php”;
$baca=mysql_query(“select
* form berita”);
$tampung=mysql_fetch_array($baca);
?>
Tampilantablecontent.php
Kemudian tambahkan scrip php di
colom judul,dengan menghapus judul dan menggantika dengan script php sebagai
berikut.
<?php echo $tampung[‘judul’]; ?>
dan copykan script di atas ke dalam
content,username,tanggal dan merubah nama judul yang berada di dalam kurung
bricat menjadi nama yang di copykan.
Khusus untuk gambar pertama pilih
tampilan desain kemudian di kolom gambar hapus text gambar kemudian masukan
gambar dengan cara pilih menu insert – image kemudian pilih folder gambar dan
pilih gambar yang di inginkan,agar tidak terlalu besar ubah panjang dan lebar
dengan ukuran w=150 h=150 yang berada property.
Jika sudah selesai maka kembali
lagi ke tampilan code,dan menghapus nama file gambar yang ada di dalam script
html dan mengganti dengan script php.
<? php echo $tampung['gambar'];
?>
Dan script php
<?php do { ?> di letakan di
line 14
<?php } while
($tampung=mysql_fetch_array($baca)); ?> di letakan di letakan di line 30
Jika sudah save dengan cara
ctrl+S,langkah selanjutnya membuka wab yang sudah di buat di localhost dengan
cara,ketik localhost/nama folder yang telah di buat lalu enter dan pilih file
tampilanberita.php sebagai tampilan wab yang di buat,jika sudah maka akan
muncul seperti berikut.
Berhasil….
membuat perintah delete dengan script php.
Langkah pertama yang di lakukan
adalah membuat folder “admin ” di dalam folder koran yang sebelumnya telah di
buat.
Selamjutnya membuat file baru di
dreamweaver dengan cara ctrl+N,kemudian pilih php lalu create.
Kemudian kita akan membuat tampilan
admin yang berfungsi sebagai tempat mengoprasikan wab bagi admin,dengan cara
yang sama yaitu dengan membuat table
seperti yang sebelumya hanya bedanya pada tampilan admin menggunakan rows : 2
dan columns : 8
Di tujukan agar tampilan sama
seperti tampilan table pada database,dan berinama yang sama pada table seperti
judul,content,gambar dll.
Langkah selanjutnya adalah dengan
mengcopy script php dari file tampilaberita yang sudah di buat yaitu :
<?php
include
("../koneksi.php");
$baca=mysql_query("select *
from berita");
$tampung=mysql_fetch_array($baca);
?>
Pada include koneksi harus di
tambahkan ../ karena koneksi beradadi luar folder admin.
Langkah berikutnya adalah nambahkan
script php yang telah di pelajari sebelumnya yaitu menambah kan scrip php :
<?php echo
$tampung['judul'];?>
Pada bagian bawah kolom judul
tampilan desain dan codenya seperti dibawah :
Selanjutnya untuk table yang berada
di bawah table gambar hanya tinggal memasukan gambar langakanya sama seperti
yang pernah dilakukan yaitu dengan insert – image
Kemudian copykan script php,hapus
nama file gambar dan paste
<?php echo $tampung['id];?>
dan ganti nama yang berada di dalam
kurung beriket menjadi gambar
<?php echo
$tampung['gambar'];?>
Tambahkan ../ karna file gambar
berada di dalam folder induk yaitu folder koran yang telah di buat.
Langkah selajutnya yaitu dengan
menambahkan script php di diatas <tr> dan didawah</tr> baris kedua
:
<?php do { ?>
<?php } while
($tampung=mysql_fetch_array($baca)); ?>
Selanjutnya adalah merubah text delete
menjadi link dengan cara,buka tampilan desain dan blog text delete yang akan di
jadikan link, dan pada table link di isi dengan “delete.php”(file yang akan di
buat)
Selanjutnya pada tampila code copy
kan script :
?delete=<?php echo
$tampung['id_user'];?>
Di samping nama file delete.php
seperti gambar di bawah.
Selajutnya membuat file delete.php
berfungsi untuk menghapus data yang telah di buat.
Pertama membuat file baru,kemudian
pada tampilan code kosongkan code yang ada dengan cara ctrl+A lalu
delete,karana di dalam file ini hanya menggunakan secript php.
Kemudian ketikan script php
<?php
include
("../koneksi.php");
$delete=$_GET['delete'];
$perintah=mysql_query("delete
from komeng where id =$delete");
if($perintah){
echo "data berhasil di
hapus";}else{echo "data gagal di hapus";}
?>
Jika sudah maka save di dalam
folder dengan nama delete.php.
Kemudian buka file dengan cara yg
hampir sama dengan sebelumnya yaitu mengetikan localhost/berita 1
Jika sudah maka save di dalam
folder dengan nama delete.php.
Kemudian buka file dengan cara yg
hampir sama dengan sebelumnya yaitu mengetikan localhost/berita 1
Jika sudah,kita akan mencoba
menghapus data yang ada dengan cara klik link delete.
Jika muncul tampilan seperti di
atas muncul maka data telah terhapus.
7.Membuat create
dengan form dan proses menyimpan di database.
Pertama
buat folder baru di dalam folder koran dengan nama form kemudia save.
selanjutnya
adalah membuat form input untuk memasukan data dengan cara klik menu form yang
berada di atas kemudian klik form.
Setelah itu membuat table dengan
rows : 7 dan columns : 2
Dan ketikan form input
data,judul,content,gambar dll di dalam table
Kemudian pada baris ke-2 kolom
judul untuk type input menggunakan text field dengan cara memilih menu “insert
– form – text field”
Kemudian akan keluar tampilan
seperti berikut,pada kedua kolom di isi sesuai nama baris kolom pertama
Lakukan cara yang sama pada kolom kedua di baris
content,username dan tanggal,Khusus pada kolom ke-2 baris gambar tidak
menggunakan text field melainkan file field.Kemudian untuk kolom ke-2 baris
content merubah type text dari single text menjadi multi text yang beradaa di
properti.
Setelah itu maka langkah selanjutnya adalah membuat
tombol untuk menyimpan,dengan cara pada kolom ke-2 baris trakhir klik menu
“insert – form – button”
Ketikan simpan pada table ID,dan ubah value mejadi
simpan.
Kemudian pada tampilan code pada script
form action sisipkan file proses.php,bertujuan sebagai proses meyimpan data ke
database.
Setelah selesai save di dalam
folder form dengan nama forminput.php.
Langkah selanjutya adalah membuat
file baru untuk proses menyimpan data ke database denga cara membuat file baru
di dreamweaver dengan ctrl+N,kemudian hapus semua code yang ada,dan ketikan
script php berikut :
<?php
include "../koneksi.php";
$judul=$_POST['judul'];
$content=$_POST['content'];
$gambar=$_FILES[gambar']['name'];
$username=$_POST['username'];
$tanggal=$_POST['tanggal'];
?>
Setelah itu ketikkan script php
berikut : $perintah=mysql_query(“ “);
Untuk cara mudahnya adalah dengan
membuka database yang telah di buat dan pilih menu sisipkan seperti yg pernah
dilakukan hanya saja pada setiap kolom di ketikan sesuainama kolom dan
menambahkan variabel ($)
Kemudian klik “Go” maka akan keluar tampilan seperti
berikut dan muncul script,script itulah yang di copy semua..
Setelah di
copy selanjutnya hanya tinggal paste di dalam kurung $perintah=mysql_query(“paste”);
Selanjutnya ketikan script php berikut
:if($perintah){
echo "data yang anda masukan sudah
tersimpan";
}else{ echo
"maaf data anda gagal di simpan ";
Bertujuan untuk mengecek apakah data masuk apa tidak.
Setelah selesai simpan file di dalam folder form
dengan nama proses.php,kemudian buka localhost/berita 1/form dan pilih menu
form input untuk menginput data ke database.
Masukan data yang di
inginka kemudian klik simpan.
Jika muncul tampilan
seperti berikut maka data telah tersimpan.
Selesai….
