TUTORIAL WEB II AMIK BSI : Membuat Site dan Perintah Simpan menggunakan fitur Record Insertion Form Wizard pada Dreaweaver CS6/5

Persiapan :

1. Dreamweaver CS6/CS5

2. Xampp ver. 1.7.2/1.7.7

Bentuk halaman input yang akan kita buat kurang lebih seperti gambar berikut:

Langkah pertama ialah membuat database MySQL dengan ketentuan sebagai berikut:

Nama database : db_126C

Nama tabel  : mahasiswa

Berikut tampilan struktur tabel mahasiswa:

NB : auto increment berfungsi sebagai pengisian nomer otomatis pada field no 

Selanjutnya setelah pembuatan database selesai. Buka Dreamweaver anda pilih Site > New Site seperti pada gambar dibawah ini:

Setelah itu maka akan muncul jendela baru, kemudian Pada kolom Site Name dan Local Site Folder isi sesuai dengan gambar dibawah ini:

Keterangan :

Site Name : Nama Site yang akan dibuat

Local Site Folder : Tempat penyimpanan Site pada folder localhost

Setelah kolom site name  dan local Site Folder di isi klik save seperti gambar dibawah ini:

Setelah tombol save di klik maka kita akan kembali ke menu utama Dreamweaver. Selanjutnya tekan Ctrl+n secara bersamaan untuk membuka lembar kerja baru, maka akan muncul jendela seperti gambar dibawah ini :

Ikuti langkah seperti gambar diatas. Dan setelah lembar kerja baru dibuat maka selanjutnya kita simpan dengan menekan tombol Ctrl+S secara bersamaan. Pastikan direktori penyimpanan pada folder  xampp/htdocs/latihan dan simpan lembar kerja tersebut dengan nama simpan.php seperti gambar di bawah ini:

Setelah proses tadi selesai yang akan kita lakukan selanjutnya ialah mengedit  site yang sudah kita buat sebelumnya , caranya: 

Klik Site > Manage Site, seperti gambar di bawah ini:

Pilih Site yang sebelumnya kita buat kemudian klik icon pensil seperti gambar dibawah ini :

NB : tampilan dibawah ini merupan tampilan dari Dreamweaver CS6, apabila anda menggunakan Dreamweaver CS5 anda perlu menekan tombol edit bukan icon pensil seperti gambar berikut:

Setelah tombol edit di tekan maka akan tampil jendela Site Setup for latihan. Pilih Server selanjutnya tekan icon berbentuk tambah(+) seperti gambar berikut ini :

Isi pada kolom server name dengan nama komputer, untuk penamaan server ini sebenarnya bebas terserah anda tapi dalam contoh kasus ini kita samakan saja supa selaras. Selanjutnya pilih local/Network pada connect using karena server yang akan kita gunakan yaitu local server. Perhatikan gambar berikut ini :

Setelah server name dan connect using di pilih tulis pada kolom server folder dan Web URL seperti gambar dibawah ini, setelah itu pilih tab Advanced .

Setelah tab advanced dipilih maka akan tampil jendela seperti gambar di bawah ini, pilih PHP MySQL pada server model lalu tekan save. Perhatikan gambar berikut ini:

Selanjutnya akan muncul jendela baru, lalu centang testing pada textbox dan selanjutnya tekan tombol save. Perhatikan gmbar dibawah ini:

Jika ada peringatan klik OK.

Lalu tekan done pada jendela Manage Site seperti gambar dibawah ini:

NB: Untuk DreamweaverCS5 juga tekan done. Hanya berbeda tampilannya saja.

Selanjutnya kita tinggal membuat koneksi database, hal pertama yang di lakukan ialah klik window pada menu bar dreamweaver anda dan pilih Databases atau bisa juga dengan menekan tombol Ctr+Shift+F10 secara bersamaan. Perhatikan gambar berikut:

Setelah proses tadi selesai lihat di sebelah kanan dreamweaver anda maka akan tampil tab databases, lalu pilih icon tambah(+) dan klik MySQL Connection. Perhatikan gambar dibawah ini:

Selanjutnya akan muncul jendela MySQL Connection masukan Cennection name, MySQL Server dan User Name. Lalu tekan tombol select untuk memilih database. Perhatikan gambar dibawah ini:

Pilih database yang telah anda buat sebelumnya dan tekan OK

Kemudian klik Test untuk mengecek apakah koneksi berjalan atau tidak (Optional)

Tekan OK, dan OK untuk menutup jendela MySQL Connection.

Selanjutnya anda harus membuat form input. Kali ini kita menggunakan fitur insertion form wizard pada Dreamweaver CS6/5. Ikuti langkah2 seperti gambar dibawah ini:

Maka selanjutnya akan tampil jendela Record Insertion Form perhatikan Connection dan Table sesuai seperti dengan yang kita buat sebelumnya, perhatikan tanda panah 1 dan 2. Kemudian pada form field untuk jenis kelamin ubah Display as dari Text Field menjadi Menu. Perhatikan 2 gambar dibawah ini:

Pilih Menu

Selanjutnya klik Menu Properties untuk mengisi Label dan value menu item. Selanjutnya klik tombol tanda tambah untuk menambahkan label dan value baru. Ketik Laki-laki pada kolom yang tersedia seperti pada gambar di bawah ini:

Klik tombol tambah kembali untuk mengisi menu item yaitu label dan value dengan perempuan lalu klik OK.

Maka akan tampil form input sebagai berikut:

Dikarenakan untuk Field No kita menggunakan auto increment kita tidak perlu menyertakan form input untuk no. Maka dari itu kita akan menghapusnya, caranya blok pada bagian No seperti gambar dibawah ini. Lalu tekan Delete pada keyboard.

Setelah itu Button Insert Record kita rubah namanya menjadi simpan dengan mengisi kolom value

Proses pembuatan form input sudah. Langkah selanjutnya kita buka form input tadi menggunakan browser untuk memastikan proses input data berjalan dengan baik atau tidak. Tulis alamat pada URL Browser seperti gambar dibawah ini:

Maka akan tampil seperti gambar di bawah ini:

Lakukan input data seperti pada gambar berikut ini, lalu klik simpan.

Selesai.

Untuk memastikan apakah data tersebut tersimpan pada database, periksa kembali database yang telah anda buat sebelumnya (db_126c).

Download Here

Terima kasih ^_- semoga bermanfaat.

Read More

Belajar HTML : Sekilas Tentang HTML

Bagi sesorang yang biasa dalam kesehariannya bergelut di dunia tekhnologi informasi mungkin sudah tidak asing lagi dengan makhluk yang bernama HTML,dari mulai bentuk sampai dengan  sejarahnya, namun tidak sedikit juga beberapa di antaranya tidak begitu tahu asal muasal si HTML ini. Nah.... oleh sebab itu saya mau share sedikit tentang HTML, mulai dari sejarah hingga perkembangannya. Yuk! kita simak bersama-sama :)

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah web browser 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).

SEJARAH HTML

---

Perkembangan

Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.

Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML saat ini adalah HTML5.

Contoh dokumen HTML sederhana

Read More

Mudahnya Membuat Database Dengan MySql Pada Command Prompt

Bangun tidur mata belekan, rambut gaya jepang gitu (acak-acakan) dan terkadang terlihat sexy...hushh :D. Pada kesempatan kali ini saya akan berbagi tentang cara membuat database dasar dengan MySql pada Command Prompt. Yuk kita simak pembahasannya.

Hal-hal yang perlu dipastikan terlebih dahulu :

1. Pastikan kalian sudah makan
2. Pastikan air keran dalam keadaan mati
3. Jangan lakukan kegiatan ini di WC
4. Pastikan Xampp 1.7.2 sudah terinstall dalam PC/Notebook kalian (untuk versi diatas ini coba aja  sendiri yah :D)
5. Siapkan Bantal + Kasur (buat tiduran)
6. Dalam pembahasan ini saya menggunakan Operasi System Window 7

Let’s begin

Step 1 : Buka Program Xampp
Klik tombol window > All Programs > XAMPP for Windows > XAMPP Control Panel

Step 2 : Aktifkan MySql
Centang check box Apache, MySql dan klik tombol Start pada keduanya sampai muncul keterangan Running seperti gambar dibawah ini :

Step 3 : Start Comand Prompt
Setelah running seperti gambar diatas, masuk ke Accesories yang ada pada All Programs dan kemudian pilih Command Prompt.

Atau cara pintas nya cukup tekan window + R, ketikan cmd lalu tekan ok ,seperti gambar dibawah ini :

Selanjutnya akan muncul tampilan seperti dibawah ini :

Step 4 : Change Directory
Masukan perintah cd c:\  untuk masuk ke dalam Drive C (untuk penjelasan mengenai perintah cd atau Change Directory bisa klik disini)

Masukan perintah cd xampp/mysql/bin (untuk masuk ke folder Xampp tergantung pada penyimpanan masing-masing)

Kemudian masukan perintah mysql –u root (untuk menjalankan mysql). Perhatikan gambar dibawah ini :

Step 5 : Membuat Database baru
Perintah yang digunakan ialah :

create database namaDatabase ;

setiap akhir perintah harus ditutup dengan tanda (;).
Contoh : membuat database Sayuran

Step 6 : Pengecekan Database
Untuk mengecek database yang telah kita buat sebelumnya, masukan perintah

show databases ; (juga bisa digunakan untuk mengecek tabel).

Perhatikan gambar di bawah ini :

Step 7 : Mengaktifkan database
Perintah yang digunakan yaitu :

use database ; 

perhatikan gambar dibawah ini :

Step 8 : Membuat Tabel (DDL)
Perintah umum yang digunakan ialah sebagai berikut :

Create table namaTabel 
(Field1 type(size) keterangan, 
Field2 type(size) keterangan,
Field3 type(size) keterangan);

Contoh : Membuat tabel Daftar_Harga. (tekan enter untuk pindah baris)

Jika kamu ingin mengubah nama tabel, perintahnya adalah :

mysql> alter table namaTabel
->rename namaTabel_baru ;

Step 9 : Perintah Melihat Strutur Tabel
Perintah yang digunakan :

desc namaTabel ;

Contoh melihat struktur tabel Daftar_Harga, perhatikan gambar dibawah ini :

Step 10 : Mengisi Data atau Record pada Tabel (DML)
Perintah umum yang digunakan :

Insert into namaTabel values
(“values1”,”values2”,values-N”);

 Contoh : mengisi data tabel daftar_harga

Step 11 : Melihat Data Keseluruhan
Perintah yang digunakan adalah :

select * from namaTabel ;

Tanda (*) menyatakan All Field
Contoh : menampilkan data pada tabel daftar_harga

Ternyata mudah yahh :D, itu baru beberapa perintah saja. Untuk lebih jelasnya klik disini

Dan sekarang saya mau mandi dulu hehehe, Semoga bermanfaat.

Read More