Raseco.web.id | Blogging Tutorial | Adsense | SEO | Berita | Info Teknologi

Raseco.web.id | Blogging Tutorial | Adsense | SEO | Berita | Info Teknologi


Membuat Display Informasi [part 2]

Posted: 27 Apr 2014 12:46 AM PDT

Membuat Display Informasi [part 2] - mari kita lanjutkan materi yang kemaren (halah sok kayak pak guru ajah hehee..), yup jika kemaren kita sudah tahu apa sih display informasi itu dan alat yang dibutuhkan, nah sekarang kita akan coba membuat display informasi sendiri (daripada beli kan mahal 3 juta booo...) okey-okey, mari kita siapkan dahulu bahan-bahan yang dibutuhkan

Bahan yang dibutuhkan untuk membuat display informasi:
1. 2 siung bawang putih
2. 2 siung bawang merah iris tipis
3. 1 batang se... kat...kattttt...apa-apaan ini emangnya mau masak tomyam? sorry--sorry bro, serius sekarang..okey deh ini dia:
1. Perangkat komputer (wajib, ini buat dikin programnya)
2. Web browser (boleh firefox, safari, google chrome, etc)
3. Dreamweaver, atau pakai notepad juga boleh (kalo udah canggih gapapa pake ini :D)
4. Web server (misal XAMPP, WAMP, etc)
5. Rokok (boleh djarum, silet, dll)
6. Sudah

Konsep display informasi yang akan kita buat
Nah masih belum mudheng to mau seperti apa sih display informasi yang akan kita buat? hehehe, tenang...konsepnya mudah kok, jadi kita akan membuat display informasi dengan PHP dan MySQL untuk basis datanya. Nah aneh kan? biasanya kan pake VB ato Delphi kok sekarang pake PHP? jawabannya simple: karena ane ga bisa programming di VB ato Delphi xixixi....

Nah kira-kira seperti gambar di atas nantinya untuk menampilkan display informasi yang akan kita buat. Okey sekarang kita siapkan dahulu yang harus dibutuhkan yaitu: Web server, kita gunakan XAMPP dan editor kita gunakan Dreamweaver, silahkan sobat cari atau bisa pinjam CD temennya, karena CD punya saya masih saya pakai (what??)

Anggap sudah punya XAMPP dan Dreamweaver ya...okey kita lanjutkan...
Langkah 1:
Buka Dreamweaver sobat, kita akan membuat layoutnya dahulu, sebelumnya sobat buat dahulu manage site-nya, biar mudah nanti pengorganisasian filenya. Jika lupa bisa buka di materi membuat website dengan Dreamweaver CS 6 disini. Silahkan buat layout menurut sobat sendiri, disini saya hanya memberi contoh saja, silahkan bereksperimen.

membuat display informasi langkah 1
Nah kelihatan kan posisi penempatan beberapa informasi yang akan disampaikan? silahkan buat dan simpan sebagai index.php. File inilah nanti yang akan kita tampilkan di TV.

Langkah 2:
Okey sekarang saatnya kita akan mengisi beberapa informasi pada file index.php di atas yang sudah kita buat sebelumnya. Kita akan membuat file runningtext.php tahu kan dimana letaknya? yup betul sekali akan kita letakkan di bagian bawah sendiri..siip
Kita akan memerlukan sebuah database dan beberapa tabel, nah sekarang saatnya jalankan web servernya (XAMPP)

Okey sekarang mari kita buat databasenya silahkan buka di browser alamat http://localhost/phpmyadmin atau http://127.0.0.1/phpmyadmin, jika web server berhasil berjalan dengan baik, seharusnya muncul tampilan seperti berikut:

Nah selanjutnya kita buat sebuah database dengan cara

Nah contoh disini saya menggunakan nama blk sebagai databasenya, oke sekarang kita akan membuat tabel, yaitu tabel lowongan dengan jumlah field=6



Buatlah field seperti contoh:
int(11)











varchar(255)












varchar(255)












varchar(255)












text












varchar(255)

Pada running text bisa disesuaikan, untuk kasus kita, kita akan membuat informasi lowongan pekerjaan yang akan ditampilkan berjalan dari kiri ke kanan. Nah jika sudah berhasil membuat tabel dimaksud (lowongan) maka jika diklik tabel lowongan akan seperti berikut:


Nah sekarang kita sudah berhasil membuat sebuah tabel, lalu sekarang kita ngapain?? sebetulnya kita bisa mengisi masing-masing row pada tabel lowongan secara manual dengan menggunakan menu insert di phpmyadmin, namun hal ini akan memakan waktu yang cukup lama, sehingga akan lebih baik jika kita membuat sebuah file baru kita beri nama dengan insertlowongan.php

Nah insertlowongan.php ini adalah untuk administrasi lowongan pekerjaan yang nantinya akan ditampilkan oleh file runningtext.php, okey sekarang kita buat dokumen baru di dreamweaver lalu kita simpan dengan nama insertlowongan.php...siap, okey ikuti langkahnya ya...

Buat file baru dengan cara File->New lalu pilih PHP
  
Kemudian klik Create

Kemudian buatlah form seperti di bawah ini:


Untuk kategori, nama perusahaan, lowongan menggunakan <input type="text"> sedangkan untuk kualifikasi dan kontak menggunakan <textarea> dan jangan lupa property tiap input jangan sampai lupa yaitu untuk properti name="..."


contoh untuk input text Kategori, cek di code seperti ini <input name="kategori" type="text" id="kat" size="25">, sesuaikan untuk yang berwarna merah, karena inilah nanti yang akan kita panggil di PHP. Nah setelah selesai, jangan lupa tambahkan form dan 2 buah tombol yaitu Submit dan Reset, lihat contoh:

jika sobat menggunakan tabel untuk menempatkan form, maka lihat di code pada Dreamweaver akan ada tag seperti ini:

<table>

.........input text dan textarea yang sudah dibuat.........

</table>

Nah tugas anda hanya menambahkan tag <form> sebelum <table> dan </form> setelah </table> sehingga:
<form name="inputlow" action="insertlowongan.php?aksi=kirim" enctype="multipart/form-data" method="post">

<table>

.........input text dan textarea yang sudah dibuat.........

</table>
 <input name="kirim" type="submit" value="Kirim" />
<input name="reset" type="reset" value="Ulangi" />

</form>

Sehingga script lengkapnya seperti ini:

<form name="inputlow" action="insertlowongan.php?aksi=kirim" enctype="multipart/form-data" method="post">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="23%">Kategori</td>
    <td width="1%">:</td>
    <td width="76%"><input name="kategori" type="text" id="kat" size="25"></td>
  </tr>
  <tr>
    <td>Nama Perusahaan</td>
    <td>:</td>
    <td><input name="nama" type="text" id="kat2" size="50"></td>
  </tr>
  <tr>
    <td>Lowongan</td>
    <td>:</td>
    <td><input name="lowongan" type="text" id="kat3" size="45"></td>
  </tr>
  <tr>
    <td>Kualifikasi</td>
    <td>:</td>
    <td><textarea name="kualifikasi" cols="30" rows="5"></textarea></td>
  </tr>
  <tr>
    <td>Kontak</td>
    <td>:</td>
    <td><textarea name="kontak" cols="30" rows="5"></textarea></td>
  </tr>
</table>
<input name="kirim" type="submit" value="Kirim" />
<input name="reset" type="reset" value="Ulangi" />
</form>

lalu simpan dokumen ini dengan nama insertlowongan.php
Nah disini kita sudah membuat sebuah halaman untuk input lowongan, namun jika kita mencoba mengisinya lalu kita klik tombol kirim, maka tidak akan terjadi apa-apa (lho kok??) nah mengapa? karena kita belum memerintah agar data yang sudah dikirim (?aksi=kirim) diproses oleh web server. Okeyy, nah bagaimana agar data yang sudah kita inputkan bisa terkirim? ditunggu ya episode selanjutnya....selamat belajar!!