MEMBUAT LEMBAR KERJA 2 SITE DEFINITION DI DREAMWEAVER

Assalamu'alaikum Wr.Wb
   Kali ini saya akan membuat tutorial Cara Membuat SITE DEFINITION dengan Dreamweaver .
Apa itu site definition ?

      Situs web (bahasa Inggris: website) adalah suatu halaman web yang saling berhubungan yang umumnya berada pada peladen yang sama berisikan kumpulan informasi yang disediakan secara perorangan, kelompok, atau organisasi. Sebuah situs web biasanya ditempatkan setidaknya pada sebuah server web yang dapat diakses melalui jaringan seperti Internet, ataupun jaringan wilayah lokal (LAN) melalui alamat Internet yang dikenali sebagai URL. Gabungan atas semua situs yang dapat diakses publik di Internet disebut pula sebagai World Wide Web atau lebih dikenal dengan singkatan WWW. Meskipun setidaknya halaman beranda situs Internet umumnya dapat diakses publik secara bebas, pada praktiknya tidak semua situs memberikan kebebasan bagi publik untuk mengaksesnya, beberapa situs web mewajibkan pengunjung untuk melakukan pendaftaran sebagai anggota, atau bahkan meminta pembayaran untuk dapat menjadi aggota untuk dapat mengakses isi yang terdapat dalam situs web tersebut, misalnya situs-situs yang menampilkan situs-situs berita, layanan surel (e-mail), dan lain-lain. Pembatasan-pembatasan ini umumnya dilakukan karena alasan keamanan, menghormati privasi, atau karena tujuan komersial tertentu.
Sebuah halaman web merupakan berkas yang ditulis sebagai berkas teks biasa (plain text) yang diatur dan dikombinasikan sedemikian rupa dengan instruksi-instruksi berbasis HTML atau XHTML, kadang-kadang pula disisipi dengan sekelumit bahasa skrip. Berkas tersebut kemudian diterjemahkan oleh peramban web dan ditampilkan seperti layaknya sebuah halaman pada monitor komputer. Info lebih lanjut klik disini .

           Sedangkan Adobe Dreamweaver adalah  merupakan program penyunting halaman web keluaran Adobe Systems yang dulu dikenal sebagai Macromedia Dreamweaver keluaran Macromedia. Program ini banyak digunakan oleh pengembang web karena fitur-fiturnya yang menarik dan kemudahan penggunaannya. Versi terakhir Macromedia Dreamweaver sebelum Macromedia dibeli oleh Adobe Systems yaitu versi 8. Versi terakhir Dreamweaver keluaran Adobe Systems adalah versi 12 yang ada dalam Adobe Creative Cloud (sering disingkat Adobe Cc). info lebih lanjut klik disini .

Nah berikut tutorialnya :

1. Buka Xampp Control Panel terlebih dahulu, lalu Start Apache dan juga MySQL-nya, seperti gambar berikut :

2. Setelah itu Start pada Windows, Pilih Dreamweaver klik double, seperti gambar di bawah ini :

3. Jika sudah masuk di Dreamweaver klik Menu FILE, Lalu pilh NEW, seperti gambar di bawah ini :

4. Pilih Page Type Sesuai dengan keinginan anda contoh di sini saya menggunakan PHP, lalu Doctype-nya pilih HTML5 Lalu klik CREATE, seperti gambar di bawah ini :

5. Klik Menu Site dan Pilih Manage Site untuk membuat Site Baru, Seperti gambar di bawah ini :

6. Jika sudah ada tampilan di bawah ini klik New Site, untuk membuat site baru :

7. Buat folder baru di xampp/htdocs/ , buat folder sesuai keinginan anda, contoh Tugas :

 

8. Setelah selesai membuat folder, buka Dreamweaver kembali. Klik Menu Site isi kolom kolom sesuai ketentuan, untuk Site Name bisa kita isi dengan nama folder yang kita buat tadi.

Ket : Site Name            : Tugas

         Local Site Folder : C:\xampp\htdocs\tugas\

 

9.Sekarang klik Menu Sarver , klik tanda + : 

10. Isi semua kolom seperti ketentuan :

     Ket : 

        Sarver Name    : Localhost, atau isi sesuai nama folder yang di buat tadi 

        Coneting Using : Piliih Local/Network, karena kita menggunakan Local atau offline.

        Server Folder   : pilih folder yang kita buat tadi pada C:\xampp\htdocs\tugas, atau klik gambar folder .

        Web URL        : isi dengan ketentuan Localhost/nama folder .

 

11. Setelah selesai mengisi kolom kolom pada menu Basic, kita beralih ke menu Advanced, ganti Sarver Modelnya dengan PHP dan MySQL. Jika sudah selesai kita SAVE .

 

13. Beri tanda CEKLIST pada Test, setelah itu SAVE kembali. 

 

14. Jika sudah ada gambar seperti di bawah ini , klik DONE untuk memulai membuat Website. 

15. Pada DESIGN klik kanan pada site yang kita buat tadi untuk membuat Lembar kerja baru. Pilih New File.

16. Buat nama dengan nama Index.php, karena nama index adalah nama yang akan di undang secara otomatis jika pertama kali membuka website .

 

17. Copy Script berikut : 

<!doctype html>
<html>
<head>
<title>WBSITE SI UNYIL</title>
</head>
<body>
SELAMAT DATANG DI WEBSITE SI UNYIL
</body>

</html>

 Jika sudah di copy, jangan lupa di SAVE, lalu klik gambar browser untuk melihat Hasil-nya.

SELESAI, Semoga berhasil dan bermanfaat.

Download Tutorialnya disini .

Wassalamu'alaikum Wr.Wb

SMK HASAN KAFRAWI MAYONG

Installasi Wordpress Via Localhost

Assalamu'alaikum Wr.Wb
Hai, apa kabar semuanya. ?
    Sebelumnya saya pernah membuat postingan tentang Wordpress tapi menggunakan Oprating System Linux, nah kali ini saya akan memberikan tutorial tentang Instalasi Wordpress Via Localhost menggunakan Oprating System WINDOWS .
Sebelum kita ke Instalasi, apa itu wordpress?

           WordPress adalah sebuah aplikasi sumber terbuka (open source) yang sangat populer digunakan sebagai mesin blog (blog engine). WordPress dibangun dengan bahasa pemrograman PHP dan basis data (database) MySQL. PHP dan MySQL, keduanya merupakan perangkat lunak sumber terbuka (open source software). Selain sebagai blog, WordPress juga mulai digunakan sebagai sebuah CMS (Content Management System) karena kemampuannya untuk dimodifikasi dan disesuaikan dengan kebutuhan penggunanya. WordPress adalah penerus resmi dari b2/cafelog yang dikembangkan oleh Michel Valdrighi.Nama WordPress diusulkan oleh Christine Selleck, teman Matt Mullenweg. WordPress saat ini menjadi platform content management system (CMS) bagi beberapa situs web ternama seperti CNN, Reuters, The New York Times, TechCrunch, dan lainnya. 
Nah itu sekilas pengertian tentang wordpress info lebih lanjutnya klik disini 
 Berikut Instalasinya :
1. Pertama buka Control Panel pada XAMPP , lalu START Apache dan juga MySQL-nya, seperti gambar dibawah ini :

2. Setelah itu download aplikasinya di wordpress.org ,setalah di download kita Extrak terlebih dahulu sebelum kita instalasi :

3. Jika sudah di extrak kita Copy file wordpress-nya kedalam folder WINDOWS (C;)/xampp/htdocs/ , ganti nama-nya sesuai dengan keinginan anda, contoh : Wordpress . Seperti gambar di bawah ini :

4. Setelah di diCopy, buat Database terlebih dahulu pada localhost/phpmyadmin, buat database sesuai dengan nama folder yang anda buat tadi, contoh : Wordpres, lalu klik CREATE .

5. Setelah selesai membuat database-nya kita buka Tab baru, dan tuliskan localhost/wordpress atau localhost/nama folder, lalu ENTER .

6. Maka akan ada tampilan seperti gambar berikut, yaitu awal dari sebuah instalasi wordpress .

•  Pilih bahasa Indonesia, Lalu klik Lanjutkan 

• Setelah di klik Lanjutkan, maka akan ada tampilan seperti ini, yaitu ketentuan pembuatan wordpress, setelah di baca kita klik Ayo .

 

•  Nama Basis Data : wordpress

           Nama Pengguna : root
           Password           :
               Ket : Nama Basis Data , yaitu nama yang kita buat tadi, nama database.
                       Nama Pengguna , yaitu default pada program
                       Password , kosongkan saja .
            

   

•  Jika ada tampilan seperti di bawah ini, klik Jalankan Instalasi, seperti gambar .

 

•  Judul Situs : Ifa sonia istifarani

           Nama Pengguna : Ifa sonia
           Password           : Admin
           Email                  : ifasonia01@gmail.com
              Ket : Isi semua coloum sesuai dengan ketentuan yang ada, seperti contoh dibawah :

  

•  Jika ada tampilan seperti di bawah, klik Log Masuk , seperti gambar .

  

•  Masukkan Username dan juga Passwordnya 

           Username : Ifa Sonia
           Password : Admin

 

• Berikut tampilan akhirnya : 

 

Nah itu tutorialnya, selamat mencoba, dan semoga sukses ..!!!
Download tutorialnya disini .

Wassalamu'alaikum Wr.Wb

SMK HASAN KAFRAWI

MEMBUAT FORM BIODATA DENGAN HTML DAN CSS

Assalamu'alaikum Wr.Wb

Hay, apa kabar semuanya.. ketemu lagi nih sama saya. Kali ini saya akan membagikan tutorial tentang Membuat Form Biodata dengan html dan css.

Sebelum kita membuat formnya apa itu HTML dan CSS?

Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.  Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda

Silahkan copy script di bawah ini untuk lebih mudahnya :

<html>
 <head>
  <title>Input Biodata</title>
  <style type='text/css' >
  #button1 {
  padding-left:20px;
  text-align:left;
  }
  #button2 {
  padding-right:20px;
  text-align:right;
  }
  #kepala {
  font-family:algerian,snap itc;
  font-size:25px;
  height:50px;
  }
  #kaki {
  height:30px;
  }
  #tabel1 {
  background-color:dodgerblue;
  width:410;
  padding:10px;
  box-shadow:black 0px 0px 4px 1px;
  border-radius:20px 20px 20px 20px;
  }
  #tabel2 {
  background-color:dodgerblue;
  padding:10px;
  box-shadow:black 0px 0px 4px 1px;
  border-radius:20px 0px 20px 0px;
  }
  #tabel1_isi {
  background-color:black;
  color:white;
  width:400; height:200;
  padding:5px;
  }
  </style>
  <body bgcolor='cornflowerblue'>
   <br/>
    <form action='index.jsp' method='get'>
   <table id='tabel1' align='center' border='0' >
    <tr id='kepala'>
     <th colspan='2' id='kepala'>BIODATA SISWA</th>
    </tr>
    <tr>
     <td colspan='2'>
        <table align='center' id='tabel1_isi' border='0'>
            <tr>
            <td id='kolom1'>NIS :</td>
            <td><input type='text' name='nis' size='10' required></td>
            </tr>
            <tr>
            <td id='kolom1'>Nama :</td>
            <td><input type='text' name='nama' size='hobi0' required></td>
            </tr>
            <tr>
            <td id='kolom1'>Alamat :</td>
            <td><input type='text' name='alamat' size='hobi0' required></td>
            </tr>
            <tr>
            <td id='kolom1'>No. Telp :</td>
            <td><input type='text' name='no_telp' size='hobi0' required></td>
            </tr>
            <tr>
            <td id='kolom1'>Hobi :</td>
            <td><input type='text' name='hobi' size='hobi0' required></td>
            </tr>
        </table>
     </td>
    </tr>
    <tr id='kaki'>
     <td id='button1'>
     <input type='submit' value='proses'/>
     </td>
     <td id='buttonhobi'>
     <input type='reset' value='clear'/>
     </td>
    </tr>
    </div>
   </table>
  
   <br/>
  
   <table id='tabel2' align='center'>
    <%
    String nis = request.getParameter("nis");
    String nama = request.getParameter("nama");
    String alamat = request.getParameter("alamat");
    String no_telp = request.getParameter("no_telp");
    String hobi = request.getParameter("hobi");
    %>
    <tr bgcolor='black' style='color:white'>
     <th width='30'>No</th>
     <th width='50'>Nis</th>
     <th width='150'>Nama</th>
     <th width='200'>Alamat</th>
     <th width='120'>No. Telp</th>
     <th width='100'>Hobi</th>
    </tr>
    <tr>
     <td>1</td>
     <td><% out.println(nis); %></td>
     <td><% out.println(nama); %></td>
     <td><% out.println(alamat); %></td>
     <td><% out.println(no_telp); %></td>
     <td><% out.println(hobi); %></td>
    </form>
  </body>
</html>

1. Setelah mengcopy Save dengan nama sesuai keingin anda, kalo saya index.html, dan simpan pada xammp/htedoc seperti gambar di bawah ini :

 

   2. Buka Control Panel pada xampp, Start Apache dan MyS

L           nya, Seperti gambar di bawah ini : 

3.  Buka Localhost/phpmyadmin , lalu buat database sesuai keinginan anda, kalo saya tugas. Lalu klik     Create

 
4. Setelah itu buka Tab baru dengan alamat Localhost/Tugas,

5. Maka akan keluar tampilan seperti di bawah ini :

SELESAI. !! Semoga Bermanfaat dan SELAMAT MENCOBA ,..
Download PDFnya Disini
http://ilmusoftwarekomputer.blogspot.co.id/2013/12/membuat-aplikasi-web-berbasis-jsp.html 

Wassalamu'alaikum Wr.Wb

SMK HASAN KAFRAWI

Membuat Database Toko Online

Assalamu'alaikum Wr.Wb

     Hai kawan, ketemu lagi nih sama saya, apa kabar nih semuanya?
ok.. kali ini saya akan mebagikan tutorial tentang Membuat Database Toko Online. tapi sebelum itu kita akan bahas terlebih dahulu apa itu database ? 

     Pangkalan data atau basis data (bahasa Inggris: database), atau sering pula dieja basisdata, adalah kumpulan informasi yang disimpan di dalam komputer secara sistematik sehingga dapat diperiksa menggunakan suatu program komputer untuk memperoleh informasi dari basis data tersebut. Perangkat lunak yang digunakan untuk mengelola dan memanggil kueri (query) basis data disebut sistem manajemen basis data (database management system, DBMS). Sistem basis data dipelajari dalam ilmu informasi.Istilah "basis data" berawal dari ilmu komputer. Meskipun kemudian artinya semakin luas, memasukkan hal-hal di luar bidang elektronika, artikel ini mengenai basis data komputer.
       Istilah basis data mengacu pada koleksi dari data-data yang saling berhubungan, dan perangkat lunaknya seharusnya mengacu sebagai sistem manajemen basis data (database management system/DBMS). Jika konteksnya sudah jelas, banyak administrator dan programer menggunakan istilah basis data untuk kedua arti tersebut.
      secara konsep basis data atau database adalah kumpulan dari data-data yang membentuk suatu berkas (file) yang saling berhubungan (relation) dengan tatcara yang tertentu untuk membentuk data baru atau informasi. Atau basis data (database) merupakan kumpulan dari data yang saling berhubungan (relasi) antara satu dengan yang lainnya yang diorganisasikan berdasarkan skema atau struktur tertentu. Pada komputer, basis data disimpan dalam perangkat hardware penyimpan, dan dengan software tertentu dimanipulasiunruk kepentingan atau keguanaan tertentu. Hubungan atau relasi data biasanya ditunjukkan dengan kunci (key) dari tiap file yang ada. Nah itu sekilas tentang basisdata / Database Info lebih lanjut Klik di sini.

Di bawah ini adalah tutorialnya :

• Pertama buka Xampp Control Panelnya seperti gambar di bawah ini :
  

• Setelah itu buka Localhost/phpmyadmin di toolbar seperti gambar di bawah ini :
   

• Nah maka akan muncul seperti gambar di bawah ini yaitu halaman awal pada Phpmyadmin,Buat nama Databasenya sesuai dengan keinginan anda, tetapi di sini saya menggunakan nama tokoonline_ifasonia lalu klik Create / Buat .
  

• Sekarang kita akan buat tabel tabel pada database tersebut :
  1.   Pegawai Toko

              Nama Tabel : Pegawai_toko
              Nama_Pegawai Varchar(50)
              NIP Char(11)

  

Lalu Klik Save/Go

 2. Toko
       Nama Tabel : Toko

Nama_Toko Varchar(50)

Alamat Varchar(50)

Telepon INT(12)

Lalu Klik Save/Go 
 3. Pembeli

            Nama Tabel : Pembeli

Nama_Pembeli varchar(50)

Alamat varchar(50)

Telepon INT(12)

Id_konsumen Char(20)

 

Lalu Klik Save/Go  
4. Supplyer

            Nama Tabel : Supplyer

Nama_supplyer varchar(50)

Alamat varchar(50)

Telepon INT(12)

Lalu Klik Save/Go 


5. Produk

          Nama Tabel : Produk

Nama_Produk varchar(50)

Harga_produk char(20)

Stock INT(11)

Lalu Klik Save/Go

6. Transaksi

Nama Tabel : Transaksi

No_transaksi INT(11)

Jenis_transaksi varchar(50)

tgl_transaksi datetime

Lalu Klik Save/Go  
7. Makanan

Nama Tabel : Makanan

Jenis char(20)

Nama varchar(50)

tgl_expired datetime

Lalu Klik Save/Go  
8. Minuman

Nama Tabel : Minuman

Jenis char(20)

Nama varchar(50)

tgl_expired datetime

harga INT(11)

Lalu Klik Save/Go  
9. ATK

Nama Tabel : ATK

Jenis char(20)

Nama varchar(50)

Harga Int(11)

Lalu Klik Save/Go

Nah, Sekarang sudah selesai.. Semoga Sukses.
Download Tutorialnya di sini
Download  SQLnya disini

Wassalamu'alaikum Wr.Wb 

SMK Hasan Kafrawi Mayong