Membuat Dinamik Web sederhana Part I

Pertama-tama saya akan menegaskan dahulu bahwa, tutorial ini saya buat berdasarkan pengalaman selama saya membuat web. Tidak ada teori pendukung yang pasti, karena saya belajar web secara autodidak tidak terlalu berpatok pada teori, dan mungkin penjelasan-penjelasan yang akan saya uraikan adalah penjelasan yang saya pahami secara pribadi.

Mungkin banyak orang yang akan membuat web dinamis akan merancang layoutnya atau design tampilan terlebih dahulu, tapi saya lebih senang mendesign ‘jeroan’nya dulu alias databasenya dulu. Pada tutorial ini, saya akan membuat sebuah personal web yang sederhana menggunakan script-script standart. Aplikasi yang saya gunakan adalah Adobe Dreamwever, Photoshop, dan XAMPP dengan PHP versi 5. Jika anda sudah menginstall ketiga aplikasi tersebut, maka langsung saja kita praktek, cap cus..

Jalankan aplikasi XAMPP control panel anda dan klik start pada Apache dan MySQL. Pastikan muncul tulisan Running berwarna hijau.

Jalankan aplikasi browser anda, ketikkan http://localhost/phpmyadmin pada adress. Lalu buat database dengan nama : db_myweb -> klik Create.

Lalu buat tabel ‘admin’ dengan jumlah field = 5.

Lalu isikan data berikut :

Perhatikan pada lingkaran merah, pastikan untuk baris id anda memilih auto-increment dan primary key. Pada xampp versi tertentu auto-increment berupa cekbox dan disingkat A-I. Fungsi auto-increment adalah sebagai urutan identitas setiap data yang masuk, sistem akan otomatis melakukan penambahan pada nomor identitas, dan primary key berfungsi untuk mencegah adanya identitas dengan nomor ID ganda atau kembar.

Selain cara dengan input manual anda juga dapat membuat tabel dengan memanfaatkan Query box SQL.

Dan memasukkan query berikut :

CREATE TABLE IF NOT EXISTS `admin` (
`id` int(5) NOT NULL auto_increment,
`username` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`log_terakhir` varchar(50) NOT NULL,
PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Kemudian masuk pada menu Insert:

Lalu isikan data dengan ketentuan: kosongi baris id, dan function untuk username dan password = MD5, dan kosongkan fungsi email, dan kosongkan baris log terakhir.

Atau anda dapat menggunakan QueryBox seperti tadi dan memasukkan query berikut :

INSERT INTO `db_myweb`.`admin` (`id`, `username`, `password`, `email`, `log_terakhir`) VALUES (NULL, MD5('ilmucerdas'), MD5('abcdefg'), 'iin.aryani@yahoo.co.id', '');

Setelah itu, klik pada link db_myweb :

Buat tabel baru bernama ‘page’ dengan jumlah field = 8

Lalu isikan data sebagai berikut :

Atau dengan Query berikut :

CREATE TABLE  `db_myweb`.`page` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`judul` VARCHAR( 150 ) NOT NULL ,
`isi` TEXT NOT NULL ,
`penulis` VARCHAR( 50 ) NOT NULL ,
`waktu` VARCHAR( 50 ) NOT NULL ,
`klik` INT( 5 ) NOT NULL ,
`sorot` VARCHAR( 150 ) NOT NULL ,
`status` ENUM(  'p',  'up' ) NOT NULL
) ENGINE = MYISAM;

*)Keterangan penting: tabel page ini, akan saya gunakan untuk menampung menu-menu pada page utama, page utama adalah halaman yang jarang diupdate oleh admin, seperti halaman profil, contact person, photo galery, dll. Komponen tabel ‘page’ di atas meliputi judul, isi, waktu, klik, sorot, dan status. Waktu adalah field berisi data halaman tersebut dipublish. Klik adalah banyaknya kunjungan pada halaman tersebut, sorot adalah keterangan singkat saat link di sorot mouse/pointer, dan status adalah keterangan halaman tersebut dalam keadaan publish (p) atau unpublish (up).

Setelah selesai dengan tabel page, kembalilah ke menu awal database anda, klik pada link db_myweb :

Lalu buat tabel baru dengan nama ‘kategori’ dan jumlah field = 2

Isikan data sebagai berikut :

Atau gunakan Query berikut dalam Querybox :

CREATE TABLE  `db_myweb`.`kategori` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nama` VARCHAR( 50 ) NOT NULL
) ENGINE = MYISAM;

Setelah selesai dengan tabel kategori, kembalilah ke menu awal database anda, klik pada link db_myweb :

Buat tabel baru dengan nama ‘post’ dan jumlah field = 8

Isikan data sebagai berikut :

Atau gunakan Query berikut pada Querybox:

CREATE TABLE  `db_myweb`.`post` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`id_kategori` INT( 5 ) NOT NULL ,
`judul` VARCHAR( 150 ) NOT NULL ,
`isi` TEXT NOT NULL ,
`penulis` VARCHAR( 50 ) NOT NULL ,
`waktu` VARCHAR( 50 ) NOT NULL ,
`klik` INT( 5 ) NOT NULL ,
`status` ENUM(  'p',  'up' ) NOT NULL
) ENGINE = MYISAM;

Setelah selesai dengan tabel ‘post’, kembalilah ke menu awal database anda, klik pada link db_myweb :

Seperti cara sebelumnya buat tabel dengan nama ‘komentar’ dengan jumlah field = 8 dengan ketentuan sebagai berikut :

Atau masukan query berikut pada querybox :

CREATE TABLE  `db_myweb`.`komentar` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`jenis` ENUM(  'page',  'post' ) NOT NULL ,
`nama` VARCHAR( 50 ) NOT NULL ,
`email` VARCHAR( 50 ) NOT NULL ,
`website` VARCHAR( 50 ) NOT NULL ,
`pesan` VARCHAR( 1000 ) NOT NULL ,
`waktu` VARCHAR( 50 ) NOT NULL ,
`status` ENUM(  'p',  'up' ) NOT NULL
) ENGINE = MYISAM;

Jika anda telah berhasil menciptakan kelima tabel berikut, maka anda telah selesai dengan kerangka databasenya.

Langkah selanjutnya adalah, pembuatan file css dan layout yang akan dibahas di bab selanjutnya

>> Managing Layout and Style <<

Sampai jumpa di part selanjutnya ^^. Tolong berikan kritik dan saran jika penjelasan di atas terasa membingungkan.

About these ads

About Iin aryani

I don't wanna be a "Copycat" but, something they need to copy.

Posted on 7 August 2012, in Website and tagged . Bookmark the permalink. 2 Comments.

  1. materi selanjutnya belum di update ya bu..??
    mau kapan kira2 ngebahas materi selanjutnya….

  2. mbak… mau nanya neh… kalo password tuh harus MD5 ya???

Komentar untuk penulis

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 143 other followers

%d bloggers like this: