Download - Cara Membuat Website Full Tutorial

Cara Membuat Website Full Tutorial1. Layout Website Dengan Photoshop.Sebelum membuat website lebih baik kita membuat layout website terlebih dahulu, arti katalayoutadalah tata letak, jadi sebelum kita membangun sebuah website kita membuat sketsa tata letaknya terlebih dahulu. Sama seperti sebelum membangun rumah, kita pastinya sudah menyiapkan skesa tata letak rumah kita, tidak mungkin anda akan membuat rumah tanpa sketsa, atau bisa di bilang asal-asalan dan asal main tebak ukurannya.Disini nantinya kita akan menentukan lebar dari website kita, seperti lebar body website, lebar header, lebar navigasi/menu website, lebar konten, lebar footer, dan lebar sidebar/kolom samping. Disamping itu kita akan membuat beberapa background agar nantinya tampilan website kita lebih enak di pandang mata.Pada kali ini kita akan membuat layout website yang simple simple saja, untuk kedepannya anda bisa mengolah sendiri tampilannya, mau seperti apa terserah anda, yang penting konsep awalnya sudah anda mengerti.Website yang kita buat nantinya akan seperti gambar di bawah ini.

Nantinya kita akan membuat website menjadi 5 bagian, yaitu ada header, menu / navigasi, ada konten website, ada sidebar / kolom samping yang nantinya bisa anda isikan dengan menu tambahan seperti kategori dalam website, berita terbaru dan lain lain.

2.1. Membuat Layout Website (langkah pertama).Pertama kita menentukan lebar website kita, buka program Adobe Photoshop anda, kemudian klikFile -> Newatau tekanCtrl + N, isikanwidth 900 pixel,height 600 pixel, dan resolusi72 pixel/inch, kemudian klikok. Lihat pengaturannya pada gambar berikut.

2.2. Membuat Layout Website (langkah ke-2).Buatlah guideline / garis bantu, pada menu bar Photoshop anda klikView->New Guide, padaOreientationpilihHorizontal, pada Position ketikkan150px, kemudian klikOK.

Ulangi langkah tadi, klikView->New Guide, padaOreientationpilihVertical, pada Position ketikkan20px, kemudian klikOK. Ini adalah batas kedalam dari kiri website sebesar 20 pixel.Ulangi lagi langkah diatas, klikView->New Guide, padaOreientationpilihVertical, pada Position ketikkan880px, kemudian klikOK. Ini adalah batas kedalam dari kanan website sebesar 20 pixel. Karena lebar total website yang akan kita buat itu lebarnya900pixeldan kita akan memberikan jarak kedalam dari sisi kanan dan kiri sebesar 20pixel maka kita membuat guidenya900px 20px = 880px.Lakukan lagi hal yang sama, klikView->New Guide, padaOreientationpilihHorizontal, pada Position ketikkan185px, kemudian klikOK. Kali ini kita membuat batas untukmenu / navigasi website. Tinggi darimenu / navigasi websiteyang akan kita buat adalah35pixel, dan tadi tinggi dari header yang kita buat adalah150pixel, jadi untuk membuat garis bantu atau garis batas navigasi website adalahtinggi header + tinggi navigasi (150pixel + 35pixel ) =185pixel.Sekarang kita membuat garis bantu untuk footer, tadi di awal kita membuat tinggi dari layout website kita adalah600 pixel, dan sekarang kita akan membuat garis bantu untuk bagian footer / bagian bawah website yaitu tingginya80 pixel, jadi hitungan-hitungannyatotal tinggi website dikurangi footer(600 px 80px) =520px.KlikView->New Guide, padaOreientationpilihHorizontal, pada Position ketikkan520px, kemudian klikOK.Untuk membuatkolom sidebar / kolom sampingdari website,View->New Guide, padaOreientationpilihVertical, pada Position ketikkan680px, kemudian klikOK.Terakhir kita akan membuat garis bantu untukkonten,View->New Guide, padaOreientationpilihVertical, pada Position ketikkan660px, kemudian klikOK.Selesai sudah kita membuat garis bantu / guide line untuk layout website kita, jika anda melakukannya dengan benar maka akan tampak seperti gambar di bawah, setelah di berikan backgound.

Lho.. punya anda belum berisi background? yups, karena di awal kita tadi membuatBackground Contensnya transparant. Saya anggap anda sudah bisa mengisi warna background pada layar kerja diphotoshop. Dan untuk lebih jelasnya bagian-bagian dari layout kita, coba anda perhatikan gambar di bawah.

ket: lebar header sama dengan lebar navigasi / menuKalau kita perhatikan, konten dan sidebar tidak memiliki tinggi, itu karena nantinya tinggi dari konten dan sidebar akan menyesuaikan dari isinya.3. Setting Site Di Dreamweaver CS3.Setting site di Dreamweaver cs 3 sangat mudah, hanya 4 langkah saja, fungsi site di dreamweaver ini menghbungkan file file yang ada di dalam web server kita. Sebaiknya sebelum melakukan setting site di dreamweaver cs3 andamenginstal XAMPP.Karena nantinya kita menaruh file filewebsitedala hasil instalasi XAMPP, pada artikel Cara Install XAMPP di windows kita menginstalnya di folderD:/website/xamppmaka kal ini kita akan mearuh file file website kita diD:/website/xampp/htdocs/websiteku.com. Setting Site di Dreamweaver step 1KlikSite>New Site

Setting Site di Dreamweaver step 2Pada bagian ini kita akan mengaturLocal Infowebsite, isikan pengaturannya sebagai berikut :

Setting Site di Dreamweaver step 3Pada bagian ini kita akan mengatur Remote Info website, isi pengaturanya sebagai berikut :

Setting Site di Dreamweaver step 4Ini adalah bagian terakhir mensetting site di Dreamweaver cs 3, langkahnya sebagai berikut :

4. Membuat Website Di Dreamweaver CS3.Kemarin aku sudah kasihdownload template website yang simple, bagi yang belum download silahkan downloaddisini.Setelah anda mendownload file tersebut, extrak filenya kedalam komputer anda, terserah anda mengextraknya dimana. Kemudian dalam hasil extrak terdapatfolder images, disana ada beberapa file yang sudah aku pecah sebagai bahanpembuatan website di dreamweaver.Copyfolder imagestersebut kemudian paste kedalam folder :D:\website\xampp\htdocs\websiteku.comUntuk membuat website di dreamweaver yang pertama yang perlu kita lakukan adalah membuat file index.php. Website yang akan kita buat memiliki bagian :1. Header2. Menu navigasi3. Konten4. Sidebar5. FooterLangsung saja kita akan membuat website di dreamweaver, buka programAdobe Dreamweaveranda, Create new pilihphp

Simpan file tersebut, tekanCTRL + Ssimpan dengan namaindex.phpdalam folder tempat anda menginstal XAMPPD:\website\xampp\htdocs\websiteku.comBerikutnya anda membuat file baru, tekanCTRL + NpadaBlank PagepilihCSSkemudian klikcreate,simpan dengan namastyle.cssdalam folder yang sama dengan fileindex.phpKembai ke file index.php, kliktabindex.phppada document toolbar, kemudian klikCode, tambahkan script berikut di atas tag1

Script tersebut berfungsi menghubungkan fileCSSdenganindex.php

Mengatur Body WebsiteMasih dalam file index.php, klikiconNew CSSRuleyang ada di bagian kanan, jika di layar anda tidak terdapat CSS Stylenya anda bisa menekanShift + F11untuk menampilkantab CSS Style.

Setelah muncul Window New CSS Rule, isi pengaturan sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :body Define in :style.css

Jika sudah klik ok. Maka akan muncul jendelaCSS Rule Definition for body in style.css,isikan pengaturan sebagai berikut :1. Type= Font : Arial, Helvetica, sans-serif,size:13 pixel, color : #0000002. Background = Background color : #CCCCCC3. Box =width : 900 pixel

Jika sudah klikOK,simpan file index.php dan style.css anda tekanCTRL + S Mengatur Link WebsiteSekarang kita akan mengatur warna, ukuran, dan style Link secara default.Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :a Define in :style.cssSetelah munculCSS Rule Definition for a in style.css,isikan pengaturannya sebagai berikut :Type: Color :#ff6000 PadaDecorationcentangNoneJika sudah klik ok.Selanjutnya kita akan mengatur css link pada saat hover atau pada saat cursor berada di atas link. Klik kembali iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :a:hover Define in :style.cssSetelah munculCSS Rule Definition for a in style.css,isikan pengaturannya sebagai berikut :Type: PadaDecorationcentangUnderline Jika anda ingin mengubah warna link pada saat hover klik icon kotak yang ada di sebelah tulisancolor,kemudian pilih warnanya.Jika sudah klik ok. Membuat Header WebsiteSetelah tadi kita mengatur bagian body dan link website, sekarang saatnya mengatur bagian header dari website.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah tag1

Sekarang kita akan mengatur CSS untuk headernya, caranya sama seperti mengatur CSS pada body. Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#header Define in :style.cssSetelah munculCSS Rule Definition for #header in style.css,isikan pengaturannya sebagai berikuType: Size : 12 pixel Color : #FFFFFFBackground: Background image : klik browse pilihheader.jpgdalam folderimages Repeat: no-repeatBox : Width :860 pixel Float :Left Height :110 pixel Padding : centangsame for all,kemudian isikan20 pixelJika sudah klik OK, kemudian simpan filestyle.cssanda. Untuk melihat preview website anda tekanF12Selanjutnya kita akan memasukkanlogo websitedandeskripsi websitekedalam header, caranyaklik cursoranda setelahkemudian klikinsert = > image = > logo.jpgUsahakan logo yang anda buat tingginya / weight tidak lebih dari80pixel,jikalogo anda melebihi dari 80 pixel, anda dapat merubah ukurannya dengan cara :melalui Design View,klik gambar logoanda kemudian padapanel Propertyyang secara default berada di bagian bawah, padaH / Height isikan 80

Masih tetap padaPanel Property, padaLinkklik icon folder yang ada di sebelah kiri tulisan Edit, kemudian pilih fileindex.php. Ini berfungsi pada saat logo di klik akan mengarah ke halaman index atau halaman depan website anda.Pada bagianborderisikan 0, dan padaAltketikkan logo websiteku atau nama website nama anda.Dibawah code1

ketikkan1Deskripsi website anda disini

ganti tulisandeskripsi website anda disinidengan deskripsi/penjelasan website anda.Simpanfile index.php dan style.csstekanCTRL + S, kemudian lihat previewnyatekan F12atau refresh browser andatekan F5. Memuat Menu Navigasi WebsiteSetelah kita membuat Header, selanjutnya kita akan membuat navigasi website yang berada di bagian bawah header. Navigasi isi akan berisi link link yang akan mengarah ke halaman tertentu sepertiprofile, gallery, atau contact.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas1

Sekarang kita akan mengatur CSS untuk navigasiny. Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#navigasi Define in :style.cssSeleah munculCSS Rule Definition for #navigasi in style.css,isikan pengaturannya sebagai berikut :Background: Background image : klik browse pilihbg-nav.jpgdalam folderimages Repeat: no-repeatBox : Width :860 pixel Float :Left Height :35 pixel Pada bagianpaddinghilangkan centangsame for all,left :20 pixeldan right:20 pixel Pada bagianmargincentangsame for allisikan0 pixelJika sudah klik ok, simpan fileindex.php dan style.css.Selanjutnya pada Design View, klik di dalamMenu Navigasikemudian klikInsert > Table

Setelah muncul jendelaTable,isikan pengaturannya sebagai berikut : Rows : 1 Columns : 4 Table Width kosongkan saja Border Thickness kosongkan / delete saja. Cell Padding : 5 Cell Spacing : 5

Jika sudah klik ok.Selanjutnya didalam kolom table ketikkan menu website anda, perhatikan gambar berikut

Sekarang kita akan memberikan link pada menu tersebut, caranya blok tulisanHome=> pada panel property cari kolomLinkklikicon folderkemudian pilih fileindex.php, lakukan hal yang sama pada menu lainnya, tetapi pada kolom link isikan saja#karena kita belum mempunyai filenya.

Untuk halaman profile dan yang lainnya akan kita bahas pada artikel berikutnya.Sekarang kita akan mengubah warna link dari menu navigasi dengan mengatur CSS nya, caranya klik tulisanHome=> klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#navigasi a Define in :style.cssSeleah munculCSS Rule Definition for #navigasi a in style.css,isikan pengaturannya sebagai berikut :Type: Color : #FFFFFF (kode warnaputih)Jika sudah klik ok. Simpan file index.php dan style.css anda tekanCTRL + S, kemudian preview tekanF12 Memuat Konten WebsiteSekarang kita akan membuat konten website, konten ini adalah tempat berita atau artikel anda.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas1

Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#conten-wrapper Define in :style.cssSeleah munculCSS Rule Definition for #conten-wrapper in style.css,isikan pengaturannya sebagai berikut :Background: Background color : #DDDDDDBox : Width :860 pixel Float :Left Pada bagianmargincentangsame for all,isikan 0 pixel Pada bagianpaddinghilangkan centangsame for all, isikantop:0 pixel, bottom: 0 pixel, right:20pixel, left:0pixelPilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah1

Sehingga kodenya menjadi seperti berikut :123

Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#conten Define in :style.cssSeleah munculCSS Rule Definition for #conten in style.css,isikan pengaturannya sebagai berikut Background: Background color : #FFFFFFBox : Width :600 pixel Float :Left Pada bagianpaddingcentangsame for all,isikan 20 pixelJika sudah klik ok, simpan fileindex.php dan style.css. Memuat Sidebar WebsiteSidebar adalah kolom yang ada di sebelah konten website anda, biasanya berisi menu menu seperti berita terbaru atau link link tertentu.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah1

Sehingga kodenya menjadi seperti berikut :Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#sidebar Define in :style.cssSeleah munculCSS Rule Definition for #sidebar in style.css,isikan pengaturannya sebagai berikut :Box : Width :200 pixel Float :Left Pada bagianmargincentangsame for all,isikan 0 pixel Pada bagianpaddingcentangsame for all,isikan 10 pixelJika sudah klik ok, simpan fileindex.php dan style.css.Untuk isi sidebar akan aku jelaskan pada tutorial berikutnya.1234

Memuat Footer WebsiteFotter adalah bagian bawah dari website yang biasanya bisa di isi dengan menu atau link tertentu, dan copyright anda.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas1

Sekarang kita akan mengatur CSS untuk footer. Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#footer Define in :style.cssSeleah munculCSS Rule Definition for #footer in style.css,isikan pengaturannya sebagai berikutBackground: Background image : klik browse pilihfooter.jpgdalam folderimages Repeat: no-repeatBlock: Text align :CenterBox : Width :860 pixel Float :Left Height :80 pixel Pada bagianpaddingcentangsame for all,isikan20 pixel Pada bagianmargincentangsame for allisikan0 pixelJika sudah klik ok, simpan fileindex.php dan style.css.Jika anda perhatikan semua susunan kode yang kita buat di file index.php tadi akan menjadi seperti ini :12345678910111213141516171819202122232425262728293031323334

Websiteku

Deskripsi website anda disini

HomeProfileGalleryContact

Pada Design View, klik di dalam konten website anda kemudian ketikkan kata sambutan atau judul konten anda. UntukMerubah format judul kontenanda caranya blok judul konten anda kemudian padapanel property=> menu format pilihHeading 1.Untuk memberikan link pada judul konten caranya blok judul konten anda, kemudian pada panel properti isikan link yang akan dituju, jika belum ada isikan dengan#saja.Di bawah judul anda bisa isikan gambar, tetapi sebelumnya pastikan gambar anda tempatnya dalamfolder images,caranya Insert = > Image => pilih file gambar anda => klik ok. Untuk mengatur gambar anda silahkan atur padapanel property.Kali ini aku memakai gambar yang aku comot dari google dan lebarnya 600 pixel.Di bawah gambar atau disamping gambar anda bisa memasukkan teks sesuka anda yang berhubungan dengan konten atau website anda. Atau anda ingin measukkan penggalan dari halaman profile anda, itu terserah anda.5.Memecah File Index.Php Di Dreamweaver CS3.Buka program Adobe Dreamweaver anda, kemudian buka fileindex.php.Buatlah 3 file baru, tekanCtrl + NpilihPHP, kemudian simpan beri nama :1. header.php2. sidebar.php3. footer.phpSetelah anda membuat ke 3 file tersebut, hapus semua kode yang ada didalamnya. Sekarang kita akan menggabungkan semua file tersebut kedalam fileindex.phpKemarin susunan kode website kita seperti berikut :12345678910111213141516171819202122232425

Kemudian cut kode :123456789101112131415

Paste kedalam header.php, kemudian gabungkan file header.php dengan file index.php caranya ketikkan kode berikut1

letakkan di tempat kode yang anda cut tadi atau di bawahSelanjutnya kita akan menggabungkan atau menghubungkan file sidebar.php dengan file index.php. Cut kode berikut :1

paste kedalam sidebar.php, dan ketikkan kode berikut di bawah1

Terakhir kita akan menggabungkan file footer.php dengan file index.php, cut kode berikut :1

Paste kedalam file footer.php, dan ketikkan kode berikut tepat di atas 1

Jadi dalam folder websiteku.com kita telah memiliki 4 file, yaitu :1. index.php2. header.php3. sidebar.php4. footer.phpJadi kesimpulannya jika anda memiliki ingin mengedit atau mengubah pada bagian sidebar, anda tinggal membuka file sidebar.php, dan jika anda memiliki file yang banyak anda tidak perlu merubah semua file anda, cukup sidebar.php saja yang perlu anda edit, itu karenafungsi dari includetadi.6.Membuat Halaman Profile.Pertama anda buka program Adobe dreamweaver milik anda, kemudian buka kembali fileindex.php, kemudianSave Asatau tekanCTRL + SHIFT + S, beri namaprofile.php.Melalui design view, tuliskan judul halaman anda, pada kali ini tulis sajaProfile, kemudian blok tulisanProfile,pada panel Propertiesyang ada di bagian bawah ubah formatnya menjadiHeading 1

Selanjutnya tuliskan isi profile anda di bawah judul halaman anda, terserah anda mau menuliskan apa saja hehe.Untuk memulai paragraph baru tekanEntersaja, tekanShift + Enteruntuk menyisipkan pergantian baris. Terakhir simpan pekerjaan anda tekanCtrl + S.Untukmembuat halaman kontakcaranya sama saja, anda tinggal buka fileindex.phpkemudian Save As beri namacontact.phpSelanjutnya padatutorial dreamweaverini kita akan melinkan halaman halaman tersebut, buka fileheader.phpmilik anda,tekan Ctrl + Opilih header.php lalu klik Open.Pertama blok tulisanProfileyang ada di bagian navigasi pada fileheader.phpmilik anda, kemudian pada panelPropertiesklikicon folder / Browse for Fileyang ada dalam bagian link, kemudian pilih fileprofile.php.Lakukan langkah yang sama untuk meLinkan halaman kontak milik anda. Terakhir simpan fileheader.phptekanCtrl + S,kembali ke tab profileprofile.phptekanF12untuk melihat preview pekerjaan anda.7.Membuat Database MySQL.Database sangat diperlukan untuk membuat website dinamis untuk pengolahan semua data da informasi dalam website, sebelum memulai membuat database di server local / localhost anda harus menginstal XAMPP.Membuat database MySQL sangat mudah karena sudah disediakan oleh Xampp, langsung saja kita mulai untuk membuat databse di server local,Pertama, ketikkanhttp://localhost/phpmyadminpada browser anda, padaCreate new databaseisikan websiteku.

Kemudian anda akan di bawa ke halaman pembuatan tabel baru, untuk kali ini kita langsung saja membuat tabel untuk admin.PadaCreate new table on databasewebsitekuisikan : Name :websiteku Number of field :3

Jika sudah klikGo.Berikutnya anda isikan table admin, sebagai berikut

Jika sudah kilik Save.Maka sekarang anda sudah memiliki tabel admin dalam databse websiteku.8.Membuat Koneksi Ke Database.Pertama buatlah folder baru di dalam folderwebsiteku.com, beri namafileadmin. Kemudian buka program Adobe Dreamweaver, buatlah file php baru beri namaindex.phptekanCTRL + Ssimpan dalam folderfileadmin.Sekarang saatnya membuat koneksi ke database yang sudah kita buat sebelumnya, pada tabApplicationklikDatabases, kemudianklik icon +pilihMySQL Connection,

isikan pengaturannya sebagai berikut : Connection name :websiteku MySQL Server:localhost User name :root(secara default username xampp anda adalah root, jika anda merubah usernamenya maka sesuaikan dengan milik anda) Password :kosongkan saja(kecuali anda sudah memberikan password pada databse anda) Database : klik select kemudian pilihwebsiteku. terakhir klikok9.Membuat Halaman Login (part 1).Sebelum memulai tutorial ini anda harus membuat tabel untuk admin silahkan lihatdisini. Bagi anda yang mengikuti tutorial ini dari awal silahkan bukafile index.phpyang ada di dalam folderfileadmin.Halaman login pada website tentunya berisi login form, pertama kita akan membuat login formnya terlebih dahulu.Setelah anda membuka file index.php dalam folder fileadmin, klik ke dalam area kerja dreamweaver anda, kemudian ikuti langkah langkahnya :KlikInsert>Form>FormKlikInsert>Table, isikan table propertynya sbb :1. Row :32. Collomns :33. Table Width : kosongkan saja4. Border thickness : kosongkan saja5. Cell padding :56. Cell spacing :57. Klikok.Maka akan terlihat 9 buah kotak dengan garis putus putus. Pada baris kotak pojok kiri atas isikanNama, kotak di sebelah kanan nama isikan:(titik dua).Kotak di bawahNamaisikanPassword, dan di sebelah kanan Password isikan:(titik dua).Pada barisNama, klik di dalam kotak paling kanan, kemudian klikInsert>Form>Text Field, padaIdisikannama, yang lain biarkan secara default, kalau sudah klikOk.Pada barisPassword, klik di dalam kotak paling kanan, kemudian klikInsert>Form>Text Field, padaIdisikanpassword, yang lain biarkan secara default, kalau sudah klikOk.Setelah munculTextFielduntuk memasukkanpassword, klikTextFieldtersebut, padapanel Propertiesdi bagian bawah pada bagianTypepilihPasswordSelanjutnya kita akan menyatukan atau meMerge Cellpada baris paling bawah agar menjadi satu kotak saja, caranya arahkan cursor anda kesebelahnya, kemudian klik Row tersebut, perhatikan gambar berikut.

Jika sudah terseleksi, pada bagian panel Properties klik iconMerges selected cells using spans, kemudian padaHorzrubah menjadiRight.

Kalau sudah, klik kembali di dalam kotak tersebut, lalu klikInsert>Form>Button, pada Id isi login terakhir klikOk. Untuk merubah tulisan di dalam tombol login tersebut ubahValuenya pada panelProperties.Sampai disini, jika anda perhatikan melalui Code View maka kodenya akan seperti ini :1234567891011121314151617181920212223Nama:Password:

Simpan pekerjaan andaCtrl + S, kemudian preview tekanF12.10.Membuat Halaman Login (Part-2).

SebelumMembuat halaman loginini, buatlah 2 file php baru, beri nama :1. home.php2. login-gagal.phpSimpan dalam folderfileadminFilehome.phpini adalah halaman depan administrator anda, sedangkanlogin-gagal.phpini adalah halaman yang dituju jika password dan username yang dimasukkan tidak cocok, isikan saja file login-gagal.php dengan kata kataOoops, login gagal. Silahkan coba kembaliPada kata Silahkan coba kembali berikan link menuju halamanindex.php.Buka kembali file index.php milik anda, klikInsert>Data Objects>User Authecation>Log In UserSetelah muncul jendela Log In User, isikan pengaturannya seperti gambar berikut

Jika sudah klik ok.Sedikit penjelasan isian dari Log In User : Get Input From Form : form login yang telah anda buat sebelumnya Username field : kolom tempat anda mengisikan nama / username anda Password field : kolom tempat anda mengisikan password anda Validate usig connection : adalah koneksi dari website yang telah anda buat. Table : pada kali ini anda memilih table admin yang ada dalamdatabase websitekuyang telah anda buat sebelumnya. If login succeeds, go to : halaman yang dituju jika login berhasil If login fails, go to : halaman yang dituju jika login gagal Restric access base on : hak batasan login.Selanjutnya kita akan memberikanfungsi MD5pada login form ini, melaluicode viewtekanCTRL + F (find)ketikkan1$password=$_POST['password'];

kemudian klik Find Next, jika sudah ketemu ubah kodenya seperti ini1$password=md5 ($_POST['password']);

jadi kode keseluruhannya menjadi seperti ini12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273

11.Membuat Halaman Register.Pertama anda buat file php baru, simpan dalam folderfileadminmilik anda, dan beri namaregister.php.klikInsert>Data Objects>Insert Record>Record Insertion From WisardSetelah muncul jendela Record Insertion From, isikan pengaturannya sebagai berikut :

Connection: pilih koneksi yang telah anda buat. Table: pilih tableadmin,tabel yang anda buat dalam database milik anda. After inserting, go to: isikan file index.php yang berada dalam folder fileadmin, agar setelah anda mendaftar akan langsung di bawa ke halaman login. Form fields: klik tulisanidkemudian hilangkan dengan meng-klik icon (-) Terakhir klikok.Selanjutnya kita akan memberikanfungsi MD5padaform register, melaluicode viewtekanCTRL + F (find)ketikkan1GetSQLValueString($_POST['password'], "text"));

kemudian klikFind Next, jika sudah ketemu ubah kodenya seperti ini1GetSQLValueString(md5 ($_POST['password']), "text"));

Simpan pekerjaan anda tekanCTRL + Skemudian preview tekenF12, coba daftar kemudian test login dengan nama dan password yang telah anda buat tadi, kalau berhasil maka anda akan di bawa ke halamanhome.php.jadi kode keseluruhannya menjadi seperti ini :123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778

Untitled Document

Sudah hanya itu saja caranya hahhahaha, sebenarnya simple banget, sekarang coba test drive ketikkan http://localhost/websiteku.com/fileadmin/home.php pada browser anda, kalau sukses anda akan tetap berada di halaman depan / halaman login administrator.Sekarang coba login kehalaman administrator anda, kemudian klik linklog outpada navigasi, kalau sukses maka anda tetap akan di bawakehalaman login.

15.Halaman Edit Profile Administrator.Langsung aja pertama buka file home.php yang ada di dalam folder fileadmin.Kemudian klikFile > Save As ( atau tekan Shitft + Ctrl + S) > beri nama editprofile.php

Jika sudah, melalui design view ubah tulisan Admin Home menjadi Profile Admin (saya beri tanda kota merah).

Kemudian hapus tulisan yang di bawahnya (saya beri tanda kotak hijau).Kali ini dalam membuatedit profile administrator website dengan dreamweaver, kita akan membuatRecordsetuntuk menampilkan data data administrator yang sudah tersimpan didalam database pada saat anda melakukan registrasi.Pada menu bar dreamweaver, kliInsert > Data Object > Recordset,

Isikan pengaturannya sebagai berikut : Name : profile_admin Connection : websiteku Table : admin Columns : all Filter : nama URL ParameterubahmenjadiSession Variable, disebelahnya ketikkanMM_Username Jika sudah klik ok.Selanjutnya melaluiCode Viewanda cari kode berikut1234Admin Home

Kemudian diantara kodeanda ketikkan, Anda login sebagai.Pada tabApplication> klikBinding, maka akan terlihat Recordset (profile_admin), > drag Nama (yang saya beri tanda hijau) letakkan di sebelah tulisan Anda login sebagai.

maka kodenya akan menjadi123Anda login sebagai

Selanjutnya untuk membuat paragraf baru, di bawah kode di atas anda ketikkan , kemudian klik lagi di tengah tengah kode .Selanjutnya pada menubar Dreamweaver klikInsert > Data Objects > Update Record > Record Update Form Wizard.Setelah muncul jendela Record Update Form, anda isikan pengaturannya sebagai beriku :

Connection : websiteku Table to update : admin Select record from : profile_admin Unique key column : id After updating, go to : editprofile.php (yang ada dalam folder file admin) Pada form field klik id kemudian klik tanda min, ini berfungsi untuk menghilangkan field id, Klik kembali pada formfield password, kemudiandisplay asubah menjadipassword field, Terakhir klik ok.Kemudian cari kode berikut, kira2 berada pada baris ke 85.1GetSQLValueString($_POST['password'], "text"),

Dan tambahkan fungsi md5, caranya ganti kode di atas menjadi1GetSQLValueString(md5 ($_POST['password']), "text"),

Kalau sudah, untuk menyimpanHalaman Edit Profile AdministratortekanCtrl + S.maka kode keseluruhannya kira2 seperti ini123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168

Untitled Document

Admin Websiteku

Home

Profile