Cara Membuat Content Managament System (CMS) Sederhana Dengan DreamWeaver

Document Sample
Cara Membuat Content Managament System (CMS) Sederhana Dengan DreamWeaver Powered By Docstoc
					 Membuat Program Php Di DreamWeaver
 Membuat Form Artikel
 Menampilkan Hasil Latihan Ke Dalam Index




                                             Penulis : Andrea Adelheid
                                               Blog : http://adelheid.us
2            Membangun Content Management System Sederhana Dengan DreamWeaver 8




            Pada tutorial kali ini saya akan memaparkan pembuatan Content Management System (CMS)
    sederhana menggunakan Macromedia DreamWeaver 8.0.2.Kenapa harus DreamWeaver 8.0.2 ?
    karena untuk yang ingin belajar membuat website dengan software dari tahap pemula,langkah ini
    sangatlah gampang dipahami.Tutorial ini juga bisa di gunakan pada DreamWeaver versi selanjutnya
    bahkan untuk Adobe DreamWeaver CS5 sekalipun.
    So tidak usah bertele-tele lagi,langsung saja kita jajal nih teorinya. 

                              Langkah awal tentunya kamu harus terlebih dahulu mempunyai software
                              DreamWeaver ini di komputer kamu,kemudian install
                              Softwarenya.Kemudian kamu harus install juga Apache2triad,untuk
                              install,setting,dan mengenal fitur-fitur Apache2triad sudah saya posting di
                              Blog saya,silahkan di review dahulu kalau belum mengerti.Setelah
        menginstall softwarenya,bukalah program DreamWeaver 8 (kalau belum ada software
        DreamWeaver 8 silahkan searching di google,banyak yang free).Saya sarankan jangan
        memakai crack untuk software ini,karena akan mengakibatkan crash.Lebih baik beli saja
        softwarenya yang asli,murah kok.Atau coba saja lebih dulu trial versionnya sebelum membeli. 




    BAB I

    1.1 Membuka Program DreamWeaver 8 Dan Membuat File Latihan


               1. Klik 2 X pada icon DreamWeaver 8.
               2. Setelah terbuka programnya,maka akan nampak seperti pada gambar berikut ini :




                                       Gambar 1.1.1.Program DreamWeaver 8 setelah dibuka.
               3. Pada pilihan diatas,klik Site > New Site.

    http://adelheid.us/                                                                           Page 2
3           Membangun Content Management System Sederhana Dengan DreamWeaver 8




                                          Gambar 1.1.2.Pilihlah New Site untuk memulai.
              4. Pada Category Advanced,tentukan pilihannya.




                                               Gambar 1.1.3.Aturlah folder latihan.
              5. Tentukan pilihan pada Remote info.




                                         Gambar 1.1.4.Mengatur pilihan pada remote info.
              6. Juga pada bagian Testing Server,setelah di setting kemudian tekan OK.




    http://adelheid.us/                                                                    Page 3
4            Membangun Content Management System Sederhana Dengan DreamWeaver 8




                                     Gambar 1.1.5.Menentukan setting pada bagian testing server.




    1.2 MEMBUAT FILE PROGRAM KONEKSI DATABASE DAN
        HALAMAN TULIS ARTIKEL
          Setelah kita membuat setting untuk folder latihan,maka selanjutnya kita akan membuat file
    koneksi kedalam database.Tentu sebelumnya kamu harus menyiapkan username database dan nama
    database itu sendiri pada MySQL Server dengan menggunakan Tools PhpMyAdmin.Semuanya itu
    bisa kamu dapat dengan menginstall Apache2Triad ( Lihat lagi postingan saya dalam blog mengenai
    Apache2Triad.).
            1. Pada lembar kerja baru,pilih PHP yang akan kita gunakan.


                                            Gambar 1 6.Memilih Php sebagai file latihan.

           2. Di bagian kanan,lihat Application > klik tanda > MySQL Connection
           3. Akan tampil menu windows kemudian atur MySQLnya,setelah itu tekan OK.Contohnya
              lihat pada gambar dibawah ini :




    http://adelheid.us/                                                                            Page 4
5           Membangun Content Management System Sederhana Dengan DreamWeaver 8




                                         Gambar 1.2.1.Aturlah koneksi untuk databasenya.

          4. Pada menu Window > Server Behaviors klik gambar          lalu klik Recordset.
          5. Pada kolom-kolom isikan nama recordset yang ingin kita buat,Contohnya :
                      Name         = Isi dengan nama Recordset1.
                      Connection = Isi dengan nama Database yang telah kita buat tadi,yaitu
                       latihan_php.
                      Pada Database Items klik tanda (+) pada Table lalu klik sekali pada table
                       artikel kemudian tekan Select. Lihat Gambar 1.8.




                                       Gambar 1.2.2.Setelah memilih table artikel,klik Select.
          6. Setelah itu pada bagian Window,klik Insert > Form > Form.
          7. Pada Form name buat namanya menjadi tulis.Lihat gambar 1.2. 3.




                                      Gambar 1.2.3.Form name yang sudah diubah namanya.
          8. Selanjutnya klik Insert > Table.Pada kotak dialog table,aturlah seperti gambar 1.2.4
             dibawah ini kemudian tekan tombol OK.




    http://adelheid.us/                                                                            Page 5
6           Membangun Content Management System Sederhana Dengan DreamWeaver 8




                                           Gambar 1.2.4.Kotak dialog pada bagian table.
          9. Setelah terbentuk table,maka ketikkanlah nama-nama fieldnya seperti pada
             gambar1.2.5 berikut.




                                       Gambar 1.2.5.Ketikkan sesuai yang ada pada gambar.
          10. Klik 1 x pada table kedua atau table yang ada disamping kata judul lalu pilih menu
              Window > Insert > Text Field > kemudian OK.Lihat gambar.




                                        Gambar 1.2.6.Table kedua setelah kita isi Text Field.
          11. Berbeda pada langkah 10 , pada tabel kedua disebelah kata Artikel klik Window > Insert
              > Form > Textarea lalu kemudian tekan OK.




    http://adelheid.us/                                                                         Page 6
7           Membangun Content Management System Sederhana Dengan DreamWeaver 8




                                 Gambar 1.2.7.table kedua disebelah kata artikel setelah diberi Textarea.
          12. Klik lah masing-masing Text Field dari table kedua dan pada bagian Propertiesnya
              tulislah sesuai dengan nama-nama isi table artikel yang telah kita buat tadi.Lihat gambar
              1.2.8 dan gambar 1.2.9.




                                             Gambar 1.2.8.BagianText Field setelah di klik.




                                    Gambar 1.2.9.Mengubah nama Textfield dengan isi table artikel .

          13. Lakukan langkah diatas pada masing-masing Text Field dan Textarea seperti berikut :
                      Judul                     = judul
                      Nama Penulis              = penulis
                      Tanggal Penulisan = tanggal
                      Artikel                   = isi_artikel
                      Gambar                    = gambar
          14. Block kedua table yang paling bawah ( lihat gambar 1.2.10 ) kemudian klik kanan >
              Merge Cells.




                                                Gambar 1.2.10.Kedua table saat diblock.
          15. Kemudian jika table yang kita merge tadi sudah membentuk satu baris maka klik pada
              window > Insert > Form > Submit > lalu kemudian langsung saja tekan tombol OK.




    http://adelheid.us/                                                                                     Page 7
8           Membangun Content Management System Sederhana Dengan DreamWeaver 8




                                  Gambar 1.2.11.Terlihat tombol submit yang telah kita isi pada table.
          16. Kemudian pada panel Window > Server Behaviours isilah kotak dialognya sesuai dengan
              gambar 1.2.12 kemudian tekan tombol OK.




                                            Gambar 1.2.12.Kotak dialog Server Behaviours.
          17. Setelah itu klik File > Save As dan simpan didalam folder latihan dengan nama
              tulis.php.Lihat gambar 1.2.12.




    http://adelheid.us/                                                                                  Page 8
9           Membangun Content Management System Sederhana Dengan DreamWeaver 8




                                              Gambar 1.2.12.Kotak dialog Save As.




    1.3 MELAKUKAN UJI COBA PROGRAM TULIS.PHP

                Kita sudah selesai membuat program tulis.php.Sekarang adalah waktunya untuk uji
          coba.Buka salah satu Browser yang akan kamu gunakan,bisa Internet Exlorer,Mozilla
          Firefox,ataupun Opera.Tapi disini penulis memakai Browser Safari. 
          1. Jika sudah membuka browsernya,pertama kita menuju database MySQL terlebih
               dahulu.Langsung saja ketikkan URL http://localhost/phpmyadmin.
              Maka akan terlihat panel PhpMyAdmin.Lihat pada gambar dibawah ini.




    http://adelheid.us/                                                                    Page 9
10           Membangun Content Management System Sederhana Dengan DreamWeaver 8




                                        Gambar 1.3.1.Halaman PhpMyAdmin pada localhost.
           2. Lalu lihat nama database yang kita buat tadi yaitu database latihan.




                                           Gambar 1.3.2.Memilih nama database latihan.
           3. Akan terlihat disana table artikel.Table tersebut masih kosong karna kita belum
              menambahkan berita apapun pada program tulis.php yang telah kita buat pada subBAB
              1.2 tadi.




     http://adelheid.us/                                                                  Page 10
11           Membangun Content Management System Sederhana Dengan DreamWeaver 8




                                    Gambar 1.3.3Terlihat space data pada table artikel masih kosong.
           4. Untuk membuktikan kalau program tulis.php berjalan sesuai tutorial sebelumnya,kita
              coba jalan di browser localhost.Langsung saja ketikkan http://localhost/latihan/tulis.php.
              Kemudian isilah datanya untuk melakukan uji coba.Lihat pada gambar1.3.4.




                                     Gambar 1.7.Tampilan input.php dijalan pada browser mozilla.

           5. Ketikkanlah contoh artikel yang akan kita tulis pada masing-masing input berita,lihat
              gambar 1.3.5,kemudian tekan tombol Submit.




     http://adelheid.us/                                                                               Page 11
12           Membangun Content Management System Sederhana Dengan DreamWeaver 8




                                               Gambar 1.3.5.Penulisan contoh artikel.

           6. Setelah di Submit tentunya halaman tulis.php tadi akan kembali kosong,itu berarti artikel
              sudah masuk kedalam MySQL.Mau lihat buktinya? Buka kembali halaman
              PhpMyAdmin pada browser kamu (caranya sudah dijelaskan pada awal BAB II).lihat
              database latihan dan browse table artikel.




                                       Gambar 1.3.6.MySql database sudah terisi contoh artikel.

     http://adelheid.us/                                                                          Page 12
13           Membangun Content Management System Sederhana Dengan DreamWeaver 8




           BAB II
     2.1 Menampilkan Hasil Program Artikel Ke Dalam Index

            Agar semua data yang kita buat dalam BAB I bisa dilihat kita perlu halaman yang familliar
       disebut dengan index.php.  Penulis yakin semua juga pasti sudah mengenal file yang satu
       ini,untuk menampilkan database artikel sebenarnya kita hanya perlu meng-ORDER query dari
       MySql.Jika ingin menjadi seorang programmer handal kita harus perlu menghapal tehnik ini dan
       melakukannya dengan cara manual.

           Bila dengan cara manual dibutuhkan penulisan sederhana seperti ini :


     $query = " SELECT * FROM artikel ORDER BY id";
     $hasil = mysql_query($query);

     $data = mysql_fetch_array($hasil);

     // menampilkan artikel

     echo "<h3>".$data['judul']."</h3>";
     echo ".$data.['isi_artikel'].";
     // Dan Seterusnya .....................



           Maka dengan dreamweaver kita tidak perlu lagi menuliskan kode-kode seperti itu dengan
       manual.Tapi kadang dalam suatu contoh kasus dibutuhkan penulisan kode-kode secara manual.

                    1. Buka kembali programm DreamWeaver kamu, File > New > Dynamic Page >
                       Php.

                    2. Klik Window > Server Behaviours kemudian klik tanda lalu pilih
                       Recordset.Akan tampil jendela baru yang bisa dilihat pada gambar 1.2.12 di
                       subBAB 1.2.Lalu isikanlah item-itemnya sesuai yang ada pada gambar tadi.

                    3. Setelah itu pilih Insert > Table dan kemudian buat table 2 baris dan 3 kolom
                       kemudian tekan OK.Lihat gambar.




                                                Gambar 2.1 1.Jendela dialog table.

                    4. Kemudian ketikkanlah sesuai yang tertera dalam gambar dibawah ini.
     http://adelheid.us/                                                                       Page 13
14           Membangun Content Management System Sederhana Dengan DreamWeaver 8




                                               Gambar 2.1 2.Penulisan field pada table.

                    5. Setelah itu klik Window > Binding .Lalu klik tanda                    yang tepat berada di
                       sebelah tulisan Recordset(recordset1).



                                                Gambar 2.1 3.Recordser pada binding.

                    6. Kemudian drag satu persatu nama-nama fieldnya kedalam kedalam table.Sesuai
                       dengan kolom table tentunya.Contohnya lihat pada gambar dibawah ini.




                                 Gambar 2.1 4.Field database MysSql artikel ketika didrag dalam table.

                    7. Kemudian Save As dengan nama index.php.

     2.2 Membuka Halaman Index Di Localhost

             Kita sudah mengerjakan beberapa BAB dan sebenarnya halaman index sudah bisa
       ditampilkan.Menampilkan halaman index.php dalam localhost selanjutnya adalah pembahasan
       kita.

           1. Buka salah satu browser kamu,misalnya Mozilla.
           2. Ketikkan pada addres bar http://localhost/latihan/.
           Maka hasilnya akan nampak seperti pada gambar dibawah ini.




                                   Gambar 2.2. 1.Halaman index latihan dalam localhost.




     http://adelheid.us/                                                                                       Page 14
15           Membangun Content Management System Sederhana Dengan DreamWeaver 8




           Kita sudah berhasil membuat Content Management System sederhana dengan menggunakan
      design tabel.Pada bagian 1 E-book ini penulis mempunyai masalah tools untuk menampilkan view
      gambar (Curhat Mode*).Karena tidak mempunyai PhotoShop saya menggunakan Macromedia
      FireWork untuk menampilkan View gambar.Jadi mohon maaf apabila kualitas gambarnya agak
      buram sedikit. 

          Pada Part 2 masih di judul yang sama yaitu Membangun Content Management System
      Sederhana Dengan DreamWeaver 8,penulis sudah mempersiapkan beberapa BAB diantaranya :
               Membuat program Hapus dan Edit artikel.
               Membuat Hak Akses User untuk masuk kedalam halaman input.php.
               Membuat Halaman Registrasi.
               Membuat Pagging di DreamWeaver.
               Dan masih banyak lagi,jadi tungguin aja e-book gratis ini di http://adelheid.us/
          Sehingga anda pun bisa membuat Website seperti gambar dibawah ini yang dibuat dengan
      MacroMedia DreamWeaver 8.0.2.




                                                                                     Salam hangat selalu,
                                                                                  Andrea Adelheid ~




     http://adelheid.us/                                                                        Page 15

				
DOCUMENT INFO
Shared By:
Tags:
Stats:
views:4041
posted:3/2/2011
language:Indonesian
pages:15
Description: Tutorial Tentang Cara Membuat Content Managament System (CMS) Sederhana Dengan DreamWeaver