Translate

Desain Web

adalah istilah yang sering digunakan untuk menggambarkan bagaimana tampilan isi suatu website atau situs

Desain Grafis

adalah suatu bentuk komunikasi visual yang menggunakan gambar untuk menyampaikan informasi atau pesan seefektif mungkin

Database

adalah susunan record data operasional lengkap dari suatu organisasi atau perusahaan, yang diorganisir dan disimpan secara terintegrasi dengan menggunakan metode tertentu sehingga mampu memenuhi informasi yang optimal yang dibutuhkan olehpara pengguna

Sistem Informasi Management

adalah jaringan prosedur pengolahan data yang dikembangkan dalam suatu sistem (terintegrasi) dengan maksud memberikan informasi (yang bersifat intern dan ekstern) kepada manajemen, sebagai dasar pengambil keputusan

Teknik Digital

adalah sistem elektronika yang tersusun dari berbagai macam komponen elektronika yang menggunakan signal digital.

Jan 25, 2013

Mendesain Sebuah Form


Form.
Pengertian form adalah suatu halaman web yang digunakan untuk memasukkan data. Proses kerja form pada umumya setelah diisi data akan dikirim oleh client ke server dengan menunjuk kepada program yang akan menerima input di server. Proses inilah yang disebut dengan Action. Dalam form dikenal bebrepa perintah yang sangat penting dan selalu digunakan saat membangun suatu website. Diantaranya METHOD=GET, METHOD=POST dan juga ACTION. Berikut adalah pengertian dari perintah-perintah tersebut :
1.     Method=Get
Yaitu suatu cara bagaimana program di server membaca komponen form yang diterima. Method ini akan mengolah input yang dikirim dengan teknik tertentu. Dalam hal ini yang digunakan adalah membaca parameter dari sebuah fungsi.
2.     Method=Post.
Digunakan untuk mengolah input dari suatu client dengan teknik program yang membaca standard input. Yang menjadi acuan adalah bahasa program seperti ASP/CGI, sehingga seolah-olah program tersebut membaca input dari papan ketik atau keyboard.
3.     Method=Action.
Yang dimaksud dengan Action adalah suatu aksi yang menunjuk pada program CGI/ASP. Dalam hal ini adalah nama program yang berakhiran ASP. Dalam penulisan dokumenHTML khususnya yang berhubungan dengan form ada beberapa komponen input yang sering digunakan. Komponen-komponen tersebut diantaranya yaitu :
Þ      Text
Disebut juga komponen string. Berikut tagnya < INPUT TYPE=TEXT NAME=”nama” SIZE=”20” >
Kemudian dari tag diatas ada beberapa criteria yang harus diketahui :
Ø    Input adalah kata kunci.
Ø    Type adalah jenis atau tipe input.
Ø    Name adalah nama variabel untuk input tersebut
Ø    Size digunkan untuk mengatur lebar komponen tersebut.
Þ      Radio Button
Radio Button adalah suatu tombol yang digunakan untuk mengambil salah satu pilihan dari banyak pilihan yang tersedia. Cara penggunaan perintah tersebut yaitu :
< INPUT TYPE=RADIO NAME=”radio” VALUE=”nama” CHECKED > CAPTION
Þ      Check Box
Komponen ini hampir sama dengan radio, yaitu untuk menampilkan pilihan. Selain bentuk tampilannya yang berbeda, pada Check Box pilihan yang disediakan bebas untuk dipilih atau tidak, bisa dipilih semua bahkan bisa juga dikosongi. Tidak seperti Radio yang hanya satu pilihan saja yang bisa dipilih.
Þ      Button
Dalam HTML terdapat dua tombol yang sangat sering digunakan yaitu Submit dan Reset. Tombol Submit digunkan untuk mwngaktifkan action ketika kita sudah berhadapan dengan ASP/CGI yang ada dalam server. Sedang Reset digunakan untuk membersihkan data pada form yangtelah kita masukkan. Caption pada tombol dapat diganti dengan perintah Value.
Þ    Select dan Option
SELECT adalah perintah yang digunakan untuk memilih salah satu pilihan dari daftar pilihan dalam bentuk dropdown. SELECT digunakan untuk mengidentifikasi pilihan sedangkan untuk membuat dan menampilkan pilihan adalah dengan perintah OPTION.  
Þ      Password
Komponen ini penting untuk menjaga keamanan data yang kita masukkan. Biasanya berupa angka atau huruf yang tidak ditampilkan ketika kita mengisinya. Berikut adalah tagnya  < INPUT TYPE=PASSWORD NAME=”xxxx” SIZE=”xxx” >

Sebenarnya masih banyak lagi komponen-komponen yang lain. Tetapi tidak dapat disebutkan satu-persatu.
               
Kemudian penulisan sintaks form untuk digunakan sebagai pembahas untuk permasalahan diatas yaitu :

<html>
<head><title> &nbsp </title></head>
<body>
<form name="biodata" method="post" action="inisialisasi2.html">
<table border>
<tr>
              <td width="200">User Name</td>
              <td><input type="text" name="user_name" ></td>
</tr>
<tr>
             <td>Password</td>
              <td><input type="password" name="password" ></td>
</tr>
<tr>
              <td>Re-type Password</td>
              <td><input type="password" name="re_password" ></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="text" name="e_mail" size="40"></td>
</tr>
<tr>
<td></td></tr>
<tr>
       <td>Nama</td>
       <td><Input type="text" name="nama",size="100"></td>
</tr>
<tr>
       <td>NIM</td>
       <td><Input type="text" name="NIM",size="50"></td>
</tr>
<tr>
       <td>Alamat</td>
       <td><Input type="text" name="alamat",size="50"></td>
</tr>
<tr>
       <td>kota asal</td>
       <td><select name="kota_asal">
       <option selected>&nbsp;</option>
       <option>magelang</option>
       <option>Yogyakarta</option>
       <option>Semarang</option>

       </select></td>
</tr>
<tr>
       <td>Jenis kelamin</td>
       <td><input type="radio" name="jenis_kelamin" value="pria">pria
           <input type="radio" name="jenis_kelamin" value="wanita">wanita</td>
</tr>
<tr>
       <td>HOBI</td>
       <td><input type="checkbox" name="hobi" value="coding">coding<br>
           <input type="checkbox" name="hobi" value="PSan">PSan<br>
            <input type="checkbox" name="hobi" value="Bilyard">Bilyard</td>
</tr>
<tr>
       <td>Deskripsi Pribadi</td>
       <td><textarea name="descript" cols="25" rows="10"></textarea></td>
</tr>
<tr>
       <td><input type="submit" name="submit" value="kirim">
           <input type="reset" name="reset" value="hapus"></td>
</tr>
</table>
</form>
</html>

Mendesain Tampilan Menggunakan Notepad


























SCRIPT:

<html>
<head>
<title>SMK Negeri 3 Yogyakarta</title>
<style type="text/css">
<!--
.style43 {
            color: #000000
}
-->
</style>
</head>
<body bgcolor="white">
<p>&nbsp;</p>
<h1 align="left"><img src="SKAGATA.jpg" width="149" height="126" align="left"> SMK NEGERI 3 YOGYAKARTA</h1>
<p align="left"> Jl.R.W.Monginsidi No.2 Yogyakarta</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div align="left"><strong>Selamat Datang di Sekolah Kami</strong></div>
<hr size="5" color="black">
<table border="2" bordercolor="white" width=1000 height=30>
<tr>
<td width="259" bordercolor="black" bgcolor="grey"><div align="center"><font size=5><a href="file:///G:/apache/htdocs/weblat/tugas%28home%29.html" class="style43">Home</a></font></div></td>
<td width="351" bordercolor="black" bgcolor="grey"><div align="center"><font size=5><a href="file:///G:/apache/htdocs/weblat/tugas(programstudy).html" class="style43">Program Studi</a></font></div></td>
<td width="366" bordercolor="black" bgcolor="grey"><div align="center"><font size=5><a href="tugas(ekstrakurikuler).html" class="style43">Ekstrakurikuler</a></font></div></td>
</tr>
</table>
<table width="1000" height="268" border="1">
  <tr>
    <th width="261" bgcolor="grey" scope="col"><p>&nbsp;</p>
      <p><img src="SKAGATA.jpg" width="143" height="130"></p>
      <p>&nbsp;</p>
      <p><img src="images (2).jpg" width="240" height="180"></p>
      <p>&nbsp;</p>
    <p><img src="images (1).jpg" width="153" height="180"></p>
    <p>&nbsp;</p></th>
    <th width="723" bgcolor="grey" scope="col"><table id="table-no" width="97%">
        <tbody>
          <tr>
            <td><div>
              <div>
                <h2>Ektrakurikuler</h2>
              </div>
              <table width="97%" id="table-no4">
                <tbody>
                  <tr>
                    <td><p>Kualitas tamatan sekolah kejuruan dituntut untuk memenuhi standar kompetensi dunia kerja. Salah satunya, selain mampu menguasai materi pelajaran, siswa harus dapat berinteraksi dan aktif dalam hubungan sosial.</p>
                        <p>Kegiatan ekstrakurikuler merupakan salah satu alat pengenalan siswa pada hubungan sosial. Di dalamnya terdapat pendidikan pengenalan diri dan pengembangan kemampuan selain pemahaman materi pelajaran.</p>
                      <p>Berangkat dari pemikiran tersebut, di SMK Negeri 3 Yogyakarta diselenggarakan berbagai kegiatan ekstrakurikuler.</p>
                      <p>Selain OSIS sebagai induk kegiatan ektrakurikuler di sekolah, kegiatan ektrakurikuler lainnya adalah:</p>
                      <ul>
                        <li>Pramuka</li>
                        <li>Paskibra</li>
                        <li>Palang Merah Remaja (PMR)</li>
                        <li>Patroli Keamanan Sekolah (PKS)</li>
                        <li>Pecinta Alam (PA)</li>
                        <li>Olahraga (Bola Voli, Bola Basket, Karate, Tenis Meja, Tenis Lapangan)</li>
                        <li>Kerohanian / IRMA (Ikatan Remaja Mesjid Al-Forqon), dan</li>
                        <li>Koperasi Sekolah (Kopsis)</li>
                      </ul></td>
                  </tr>
                </tbody>
              </table>
              </div>
              <table width="97%" id="table-no2">
                <tbody>
                  <tr>
                    <td>&nbsp;</td>
                  </tr>
                </tbody>
              </table>             
              <div></div>
              <table width="97%" id="table-no3">
                <tbody>
                  <tr>
                    <td>&nbsp;</td>
                  </tr>
                </tbody>
              </table>              </td>
          </tr>
        </tbody>
      </table>
</table>
<p>copyright &copy; 2013 SMK NEGERI 3 YOGYAKARTA | powered by Multimedia | Design by Naufal Chayruriza</p>
</body>
</html>

Jan 10, 2013

membuat data flow diagram memakai Sybase Power Designer


Kali ini saya akan menjelaskan membuat data flow diagram memakai Sybase Power Designer 15. Disini saya mempunyai contoh kasus yaitu SISTEM PERPUSTAKAAN.
1. Jalankan terlebih dahulu power desaigner. klik Start -All Programs – Sybase  Power Desaigner 15 – Power Desaigner
2. Setelah muncul menu utama, kita pilih create model.
3. Pada menu category, kita pilih Information. Lalu pada menu Category Items, kita pilih Data Flog Diagram. Untuk nama model, kita beri nama Sistem Perpustakaan. Sesuai dengan kakus yang akan kita kerjakan. Lalu tekan tombol ok.
4. Sekarang kita punya tempat kosong untuk membuat ketiga proses diatas. Disini kita akan menggunakan dua jenis tools yang ada di sebelah kanan project kita yaitu Data Flow dan Palette.
5. Sebelum kita mulai, terlebih dahulu kita tentukan internal entity pada sistem yang akan kita buat.
6. Perlu diketahui, untuk proses menggunakan tanda bulat berwana biru yang terdapat pada kolom Data Flow di sebelah kanan kita symbolnya berupa Untuk mengganti bentuk proses menjadi bulat. Kita klik kanan pada area kosong yang akan kita buat DFD, lalu pilih Model Option-Model Settings-Data Flow Diagrams Notation. Lalu pilih Yourdon, kita pilih Set As Default. Lalu tekan Ok.

7. Untuk perubahan-perubahan yang lain kita dapat memilih pada model option atau Display Preferences.
8. Sebelum kita membuat DFD , terlebih dahulu kita buat data yang diperlukan dalam DFD yang kita buat agar tidak rumit hehehe. Sehingga kita perlu membaca narasi sistem yang akan kita buat. Narasi nya silahkan anda download.
9. Untuk penggunaan proses, kita pilih symbol proses yang ada disebelah kanan area project, lalu kita simpan ke area project.Untuk membuat data, pada menu model, pilih data. Silahkan tambahkan datanya. Lalu pada form List of Data kita tambahkan data-datanya.
10. Untuk penambahan data pada proses, kita pilih flow mana yang akan ditambahkan data. Contohnya, pada proses pendaftaran,          pemilik akan meminta data peminjam berupa nama dan alamat. Berarti, antara entity peminjam dan proses meminta data, akan ada   data. Kita klik garis flow antara peminjam dan proses minta data peminjam. Akan muncul tampilan flow properties. Pada tab data, kita   pilih data yang akan kita masukkan.
11. Untuk menyambungkan antara entitas dengan proses, kita tambahkan flow disebelah kanan, pada menu data flow. Simbol flow
yaitu :
12. Kita pilih flow tersebut lalu kita sambungkan antara entity dengan proses.  Sedangkan garis yang menyambungkan data store dengan entity atau proses kita tambahkan resource flow. simbolnya berupa    

*TAMBAHAN*
13. Setelah selesai membuat DFD LEVEL 1, kita buat DFD LEVEL 0. Kita decompose suatu proses, caranya.
  • Kita tambah proses baru
  • Lalu proses tersebut kita klik kanan, kita pilih decompose proses. Proses tersebut telah kita decompose.
  • Setelah itu, kita sambungkan external entity atau proses atau data store pada proses yang kita decompose.
  • Setelah tersambung, kita pilih proses mana saja yang berkaitan dengan proses yang kita decompose. Kecuali external entity atau proses atau data store yang telah kita sambungkan. Mengapa? Karena yang kita sambungkan tersebut, secara otomatis sudah ada di area proses yang sudah kita decompose. Jika lebih dari satu proses, kita tekan keyword shift.
  • Setelah selesai, kita klik kanan, lalu pilih edit, pilih cut. Atau shortcut key nya ctrl+x.
  • Kita pilih proses yang telah didecompose. Kita klik kanan, pilih open diagram. Lalu kita paste proses yang kita pilih, caranya sama dengan yang diatas. Hanya kita pilih perintah paste. Atau shortcut key ctrl+v.
14. Setelah DFD Level 0 selesai, kita buat context diagram. Cara nya sama dengan membuat DFD level 0.
15. Kita tambahkan satu proses. Kita beri nama SISTEM PERPUSTAKAAN.
16. Lalu kita decompose.
17. Semua proses DFD LEVEL 0 kita pilih, caranya tekan ctrl+a. Lalu kita cut sama dengan cara yang telah saya beritahu diatas.
18. Lalu proses yang akan kita buat context diagram kita pilih, lalu pilih open diagram. Kita paste semua proses yang telah kita  cut/potong. Kita tambahkan external entity yang ada pada sistem. Kita masukkan garis flow input dan output external entity pada sistem. Setelah selesai, kita check model dengan menekan menu  atau shortcut key dengan menekan keyword F4.
Selamat Mencoba !



contoh kasus database perpustakaan


Pada sebuah Taman Bacaan Anak-Anak terdapat sistem pendaftaran peminjam, peminjaman buku dan pengembalian buku sebagai berikut :
Untuk sistem pendaftaran peminjam, pemilik Taman Bacaan akan meminta data peminjam buku berupa nama dan alamat peminjam.  Data tersebut dituliskan pada buku Daftar Peminjam Buku (DPB).  Pada daftar peminjam tersebut, selain terdapat nama dan alamat peminjam, juga terdapat data mengenai tanggal masuk peminjam tersebut sebagai anggota Taman Bacaan tersebut.   Setelah diterima sebagai anggota Taman Bacaan tersebut, maka peminjam baru boleh meminjam buku.
Dalam sistem peminjaman buku terdapat aturan-aturan sebagai berikut :
  1. Peminjam harus terdaftar sebagai anggota atau mempunyai nomor anggota
  2. Masa waktu peminjaman hanya boleh 7 hari, jika melebihi jangka waktu tersebut, akan dikenakan denda Rp 100,-/hari untuk setiap buku yang terlambat dikembalikan.
  3. Buku yang dipinjam oleh anggota (berada di pihak anggota) maksimal 10 buku
Apabila persyaratan telah dipenuhi, maka pemilik akan mendata buku tersebut dan dituliskan pada Buku Peminjaman Buku (BPB) yang dituliskan mengenai nama peminjam, nama buku dan tanggal pinjam.  Juga dituliskan mengenai tanggal buku tersebut harus dikembalikan.
Untuk sistem pengembalian buku adalah petugas Taman Bacaan akan memeriksa pada BPB dan dilihat tanggal berapa buku tersebut harus diterima.  Apabila ternyata buku tersebut terlambat dikembalikan , petugas Taman Bacaan akan menagih jumlah uang sesuai dengan perhitungan yang ditagihkan langsung pada saat itu juga.  Apabila denda telah dibayarkan, anggota dapat meminjam buku lagi.
Langkah pertama kita perlu analisa dan cermati narasi di atas, tentukan yang menjadi external entity, proses, data store serta data yang mengalir poda flow.
Lalu kita perlu membuat conteks diagram nya…
masukan proses lalu klik kanan pilih decompose process, masukan dua entity.
Gambar
Selanjutnya kita buat DFD lvl 0 terlebih dahulu, klik kanan pada prosessistem perpustakaan dan pilih open diagram.
Kita lihat ada berapa proses inti pada narasi di atas,
dan ternyata pada sistem perpustakaan di atas ada 3 proses yang bisa di jadikan level 0, yang pertama pendaftaraan anggota baru yang kedua adalah proses peminjaman, dan yang ketiga adalah proses pengembalian.
Dan buat sepertyi di bawah, dan jangan lupa decopmpose kembali tiap proses di  dio bawah untuk membuat DFD lvl 1
Gambar
Setelah itu open diagram proses pendaftaran anggota baru, teliti lagi ada berapa proses pada pendaftaran anggota baru, dan kurang lebih dfd nya seperti di bawah ini
Gambar
Kembali pada lvl 0 dan open diagram pada proses peminjaman, seperti halnya pada pembuatan dfd untuk proses pendaftaran anggota baru kitra lihat ada berapa proses atau transaksi yang terjadi pada saat peminjaman buku berlangsung.
kurang lebih seperti ini hasilnya
Gambar
Kembali pada lvl 0 dan open diagram pada proses pengebalian, seperti halnya pada pembuatan dfd untuk proses pendaftaran anggota baru dan peminjaman kita lihat ada berapa proses atau transaksi yang terjadi pada saat pengembalian buku berlangsung.
kurang lebih seperti ini hasilnya
Gambar